Question

如何使用JSF显示/隐藏组件？我目前正在尝试在javascript的帮助下做同样的事但不成功。我不能使用任何第三方库。

由于| ABHI

Answer 1

您实际上可以使用 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>

Answer 2

通常，您需要通过其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>

具体如何执行此操作取决于您正在使用的JSF版本。有关较旧的JSF版本，请参阅此博客文章：JSF: working with component identifiers。

Answer 3

您应该使用<h:panelGroup ...>标记，其属性为rendered。如果您将true设置为已呈现，则不会显示<h:panelGroup ...>的内容。你的XHTML文件应该是这样的：

<h:panelGroup rendered="#{userBean.showPassword}">
    <h:outputText id="password" value="#{userBean.password}"/>
</h:panelGroup>

UserBean.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;
    }
}

Answer 4

使用h-namespace中大多数（如果不是全部）标签上的“rendered”属性。

<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />

Answer 5

检查以下代码。这是下拉菜单。在此，如果我们选择其他，则文本框将显示，否则文本框将隐藏。

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;">

或者您可以查看此链接 click here

Answer 6

一个明显的解决方案是使用javascript（不是JSF）。要通过JSF实现此功能，您应该使用AJAX。在此示例中，我使用单选按钮组来显示和隐藏两组组件。在back bean中，我定义了一个布尔开关。

private boolean switchComponents;

public boolean isSwitchComponents() {
    return switchComponents;
}

public void setSwitchComponents(boolean switchComponents) {
    this.switchComponents = switchComponents;
}

当开关为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>

注意：在ajax事件中，我们渲染组件根目录。因为最初没有呈现的组件不能为re-rendered on the ajax event。

此外，请注意，如果“ componentsRoot”和单选按钮位于不同的组件层次结构下。您应该从根目录（表单根目录）引用它。

如何使用JSF显示/隐藏组件？

6 个答案: