如何使用 JSF 顯示/隱藏組件？

Question

如何使用 JSF 顯示/隱藏組件？ 我目前正在嘗試在 javascript 的幫助下做同樣的事情，但沒有成功。 我不能使用任何第三方庫。

謝謝| 阿比

Answer 1

實際上，您可以在沒有JavaScript 的情況下僅使用 JSF 的rendered屬性來完成此操作，方法是將要顯示/隱藏的元素封裝在本身可以重新渲染的組件中，例如面板組，至少在 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：使用組件標識符。

Answer 3

您應該使用<h:panelGroup ...>標簽與屬性rendered 。 如果您將true設置為渲染，則不會顯示<h:panelGroup ...>的內容。 你的 XHTML 文件應該是這樣的：

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

用戶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;
    }
}

Answer 4

使用 h 命名空間中大多數（如果不是全部）標簽上可用的“rendered”屬性。

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

Answer 5

一個明顯的解決方案是使用 javascript（不是 JSF）。 要通過 JSF 實現這一點，您應該使用 AJAX。 在這個例子中，我使用一個單選按鈕組來顯示和隱藏兩組組件。 在后台 bean 中，我定義了一個布爾開關。

private boolean switchComponents;

public boolean isSwitchComponents() {
    return switchComponents;
}

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

當 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>

注意：在 ajax 事件中，我們渲染組件根。 因為首先未呈現的組件無法在ajax 事件上重新呈現。

另請注意，如果“componentsRoot”和單選按鈕位於不同的組件層次結構下。 您應該從根（形式根）引用它。

Answer 6

檢查下面的代碼。 這是下拉菜單。 在這種情況下，如果我們選擇其他人，則文本框將顯示，否則文本框將隱藏。

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

或者你可以檢查這個鏈接點擊這里

如何使用 JSF 顯示/隱藏組件？

問題描述

6 個解決方案

解決方案1
64 2011-12-15 17:55:16

解決方案2
16 已采納 2010-09-12 13:05:04

解決方案3
6 2011-05-30 10:01:49

解決方案4
4 2010-09-12 11:57:03

解決方案5
1 2018-07-21 12:23:02

解決方案6
0 2010-09-12 10:15:40

如何使用 JSF 顯示/隱藏組件？

問題描述

6 個解決方案

解決方案1 64 2011-12-15 17:55:16

解決方案2 16 已采納 2010-09-12 13:05:04

解決方案3 6 2011-05-30 10:01:49

解決方案4 4 2010-09-12 11:57:03

解決方案5 1 2018-07-21 12:23:02

解決方案6 0 2010-09-12 10:15:40

解決方案1
64 2011-12-15 17:55:16

解決方案2
16 已采納 2010-09-12 13:05:04

解決方案3
6 2011-05-30 10:01:49

解決方案4
4 2010-09-12 11:57:03

解決方案5
1 2018-07-21 12:23:02

解決方案6
0 2010-09-12 10:15:40