Как я могу показать/скрыть компонент с помощью JSF?

Как показать/скрыть компонент с помощью JSF? В настоящее время я пытаюсь сделать то же самое с помощью javascript, но не успешно. Я не могу использовать сторонние библиотеки.

Спасибо | Аби

Ответ 1

Как правило, вам нужно получить дескриптор элемента управления через 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: работа с идентификаторами компонентов.

Ответ 2

Фактически вы можете выполнить это без 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>

Ответ 3

Вы должны использовать <h:panelGroup...> с rendered атрибутом. Если для true задано значение <h:panelGroup...>, содержимое <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;
    }
}

Ответ 4

Используйте атрибут "rendered", доступный для большинства, если не всех, тегов в пространстве имен h.

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

Ответ 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;">

или вы можете проверить эту ссылку нажмите здесь

Ответ 6

Одним из очевидных решений было бы использование JavaScript (который не является JSF). Для реализации этого с помощью JSF вы должны использовать AJAX. В этом примере я использую группу переключателей, чтобы показать и скрыть два набора компонентов. В заднем компоненте я определяю логический переключатель.

private boolean switchComponents;

public boolean isSwitchComponents() {
    return switchComponents;
}

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

Когда переключатель имеет значение "истина", будет отображаться один набор компонентов, а при значении "ложь" - другой набор.

 <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 мы отображаем компоненты root. потому что компоненты, которые не отображаются в первую очередь, не могут быть повторно отображены в событии ajax.

Кроме того, обратите внимание, что если "componentsRoot" и переключатели находятся в другой иерархии компонентов. Вы должны ссылаться на него из корня (форма root).