Java 如何使用 JSF 显示/隐藏组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3694450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I show/hide component with JSF?
提问by Abhishek Dhote
How can I show/hide component with JSF? I am currently trying so do the same with the help of javascript but not successfull. I cannot use any third party libraries.
如何使用 JSF 显示/隐藏组件？我目前正在尝试在 javascript 的帮助下做同样的事情，但没有成功。我不能使用任何第三方库。
Thanks| Abhi
谢谢| 阿比
采纳答案by McDowell
Generally, you need to get a handle to the control via its clientId. This example uses a JSF2 Facelets view with a request-scope binding to get a handle to the other control:
通常，您需要通过其clientId获得控件的句柄。此示例使用 JSF2 Facelets 视图和请求范围绑定来获取其他控件的句柄：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head><title>Show/Hide</title></h:head>
<h:body>
<h:form>
<h:button value="toggle"
onclick="toggle('#{requestScope.foo.clientId}'); return false;" />
<h:inputText binding="#{requestScope.foo}" id="x" style="display: block" />
</h:form>
<script type="text/javascript">
function toggle(id) {
var element = document.getElementById(id);
if(element.style.display == 'block') {
element.style.display = 'none';
} else {
element.style.display = 'block'
}
}
</script>
</h:body>
</html>
Exactly how you do this will depend on the version of JSF you're working on. See this blog post for older JSF versions: JSF: working with component identifiers.
具体如何执行取决于您使用的 JSF 版本。有关较旧的 JSF 版本，请参阅此博客文章：JSF：使用组件标识符。
回答by Gitesh Dang
check this below code. this is for dropdown menu. In this if we select others then the text box will show otherwise text box will hide.
检查下面的代码。这是下拉菜单。在这种情况下，如果我们选择其他人，则文本框将显示，否则文本框将隐藏。
function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}
The HTML code here :
<select id="arg" onChange="show_txt('arg','arg1');">
<option>yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" id="arg1" style="display:none;">
or you can check this link click here
或者你可以检查这个链接 点击这里
回答by Thorbj?rn Ravn Andersen
Use the "rendered" attribute available on most if not all tags in the h-namespace.
使用 h 命名空间中大多数（如果不是全部）标签上可用的“rendered”属性。
<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />
回答by Eugenijus S.
You should use <h:panelGroup ...>tag with attribute rendered. If you set trueto rendered, the content of <h:panelGroup ...>won't be shown. Your XHTML file should have something like this:
您应该使用<h:panelGroup ...>带有属性的标签rendered。如果设置true为渲染，<h:panelGroup ...>则不会显示的内容。你的 XHTML 文件应该是这样的：
<h:panelGroup rendered="#{userBean.showPassword}">
<h:outputText id="password" value="#{userBean.password}"/>
</h:panelGroup>
UserBean.java:
用户Bean.java：
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class UserBean implements Serializable{
private boolean showPassword = false;
private String password = "";
public boolean isShowPassword(){
return showPassword;
}
public void setPassword(password){
this.password = password;
}
public String getPassword(){
return this.password;
}
}
回答by Kevin Rahe
You can actually accomplish this withoutJavaScript, using only JSF's renderedattribute, by enclosing the elements to be shown/hidden in a component that can itself be re-rendered, such as a panelGroup, at least in JSF2. For example, the following JSF code shows or hides one or both of two dropdown lists depending on the value of a third. An AJAX event is used to update the display:
实际上，您可以在没有JavaScript 的情况下仅使用 JSF 的rendered属性来完成此操作，方法是将要显示/隐藏的元素封装在本身可以重新呈现的组件中，例如 panelGroup，至少在 JSF2 中是这样。例如，以下 JSF 代码根据第三个下拉列表的值显示或隐藏两个下拉列表中的一个或两个。AJAX 事件用于更新显示：
<h:selectOneMenu value="#{workflowProcEditBean.performedBy}">
<f:selectItem itemValue="O" itemLabel="Originator" />
<f:selectItem itemValue="R" itemLabel="Role" />
<f:selectItem itemValue="E" itemLabel="Employee" />
<f:ajax event="change" execute="@this" render="perfbyselection" />
</h:selectOneMenu>
<h:panelGroup id="perfbyselection">
<h:selectOneMenu id="performedbyroleid" value="#{workflowProcEditBean.performedByRoleID}"
rendered="#{workflowProcEditBean.performedBy eq 'R'}">
<f:selectItem itemLabel="- Choose One -" itemValue="" />
<f:selectItems value="#{workflowProcEditBean.roles}" />
</h:selectOneMenu>
<h:selectOneMenu id="performedbyempid" value="#{workflowProcEditBean.performedByEmpID}"
rendered="#{workflowProcEditBean.performedBy eq 'E'}">
<f:selectItem itemLabel="- Choose One -" itemValue="" />
<f:selectItems value="#{workflowProcEditBean.employees}" />
</h:selectOneMenu>
</h:panelGroup>
回答by Mr.Q
One obvious solution would be to use javascript (which is not JSF). To implement this by JSF you should use AJAX. In this example, I use a radio button group to show and hide two set of components. In the back bean, I define a boolean switch.
一个明显的解决方案是使用 javascript（不是 JSF）。要通过 JSF 实现这一点，您应该使用 AJAX。在这个例子中，我使用一个单选按钮组来显示和隐藏两组组件。在后台 bean 中，我定义了一个布尔开关。
private boolean switchComponents;
public boolean isSwitchComponents() {
return switchComponents;
}
public void setSwitchComponents(boolean switchComponents) {
this.switchComponents = switchComponents;
}
When the switch is true, one set of components will be shown and when it is false the other set will be shown.
当 switch 为 true 时，将显示一组组件，当它为 false 时，将显示另一组组件。
<h:selectOneRadio value="#{backbean.switchValue}">
<f:selectItem itemLabel="showComponentSetOne" itemValue='true'/>
<f:selectItem itemLabel="showComponentSetTwo" itemValue='false'/>
<f:ajax event="change" execute="@this" render="componentsRoot"/>
</h:selectOneRadio>
<H:panelGroup id="componentsRoot">
<h:panelGroup rendered="#{backbean.switchValue}">
<!--switchValue to be shown on switch value == true-->
</h:panelGroup>
<h:panelGroup rendered="#{!backbean.switchValue}">
<!--switchValue to be shown on switch value == false-->
</h:panelGroup>
</H:panelGroup>
Note: on the ajax event we render components root. because components which are not rendered in the first place can't be re-rendered on the ajax event.
注意：在 ajax 事件中，我们渲染组件根。因为首先未呈现的组件无法在ajax 事件上重新呈现。
Also, note that if the "componentsRoot" and radio buttons are under different component hierarchy. you should reference it from the root (form root).
另请注意，如果“componentsRoot”和单选按钮位于不同的组件层次结构下。您应该从根（形式根）引用它。
