Как динамически показывать/скрывать компоненты под p: tab через ajax?

Question

Простите меня, я даже не уверен, что мой вопрос правильно сформулирован. Я пытаюсь разгадать отношения между p: tab и h: panelGroup. Я очень слабо разбираюсь в JSF. У меня есть следующий код.

<p:tabView id="view"> 
    <p:tab id="A"> 
     ... 
     <p:ajax event="change" update="C,D" listener="#{bean.captureValue}"/> 
    </p:tab> 
    <p:tab id="B" titleStyleClass="x"> 
     <h:panelGroup id="C"> 
      <h:panelGroup rendered="#{bean.checkValue eq 'Yes'}"/> 
       <f:facet name="title"><table>...</table></f:facet> 
       <div>....</div> 
      </h:panelGroup> 
     </h:panelGroup> 
     <h:panelGroup id="D"> 
      <h:panelGroup rendered="#{bean.checkValue eq 'No'}"/> 
       <f:facet name="title"><table>.....</table></f:facet> 
       <div>....</div> 
      </h:panelGroup> 
     </h:panelGroup> 
    </p:tab> 
</p:tabView> 

Таким образом, внутри компонента ид = «A», пользователь выбирает значение из выпадающего меню, боб захватывает его и динамически отображать или скрывать идентификатор компонента = «C» или «D» на основе значения.

В первый раз попробуйте, у меня не было h: panelGroup tags. Я использовал отображаемый атрибут непосредственно из компонента p: tab, однако я понял, что если я не обновляю всю страницу, bean.checkValue не будет знать последнее значение. Прочитав много статей на этом форуме, я понял, что должен обернуть его h: panelGroup, который, в свою очередь, работал, показывая либо h: panelGroup «C», либо «D» на основе значения, выбранного из тега p: tab с id = А».

Однако содержимое тега f: facet больше не отображается. Он имеет тег html table, который содержит h: outputText со статическим значением и p: graphicImage. Я не уверен, почему и надеюсь, что кто-то может решить эту тайну.

Обновление:

Благодаря Артуру. Я смог решить проблему с его помощью. Я вставляю сюда код, который выполняет ожидаемый вывод.

<p:tabView id="view"> 
    <p:tab id="A"> 
     ... 
     <p:ajax event="change" update="view" listener="#{bean.captureValue}"/> 
    </p:tab> 
    <p:tab id="B" titleStyleClass="x">    
      <f:facet name="title"> 
       <ui:fragment rendered="#{bean.checkValue eq 'Yes'}"/> 
       <table>...</table> 
       </ui:fragment> 
      </f:facet> 
      <ui:fragment rendered="#{bean.checkValue eq 'Yes'}"/> 
       <div>...</div> 
      </ui:fragment> 


      <f:facet name="title"> 
       <ui:fragment rendered="#{bean.checkValue eq 'No'}"/> 
       <table>...</table> 
       </ui:fragment> 
      </f:facet> 
      <ui:fragment rendered="#{bean.checkValue eq 'No'}"/> 
       <div>...</div> 
      </ui:fragment>    
    </p:tab> 
</p:tabView> 

Answer 1

Границы представляют собой именованный раздел внутри контейнерного компонента. Контейнер для ваших грани в обоих случаях <h:panelGroup>, и этот компонент не определяет какой-либо грани, которую вы могли бы использовать. Поскольку вы не указываете в своем примерном коде какое-либо имя для фасета (что является обязательным), я предполагаю, что, возможно, вы хотели бы использовать фасет заголовка для вкладки, так как компонент <p:tab> определяет грань с названием «title». Затем он должен выглядеть

<p:tab id="B"> 
     <f:facet name="title" > 
      <h:outputText value="Test1" rendered="#{bean.checkValue}"/> 
      <h:outputText value="Test2" rendered="#{!bean.checkValue}"/> 
     </f:facet> 
</p:tab> 

, поэтому осуществить рендеринг логики внутри значения фасетов (решить, какой заголовок будет отображаться. Эта логика может быть также перемещен к резервному боб. Имейте в виду, что в primefaces иногда компоненты Безразлично» t обрабатывать очень хорошо, и вы можете попробовать использовать их в качестве атрибута вместо граней, как указано в этом значении post

Возможно также, что вы неправильно понимаете значение граней. Наилучший способ объяснить их - это аспекты, определенные i компонентом. Авторы этого компонента хотели предоставить пользователям возможность определять верхний и нижний колонтитулы datatable. Тогда вы, как пользователь jsf, можете составить заголовок, например, из другого различные компоненты. Вы также можете проверить это post, где также объясняются грани.

Еще одна вещь, которую нужно добавить, заключается в том, что использование логики визуализации <h:panelGroup rendered="#{bean.checkValue}"/> рассматривается как плохой шаблон, поскольку он будет создавать элемент <span> в вашем коде. Вместо этого вы должны использовать <ui:fragment rendered="#{bean.checkValue}"/>, который предназначен для визуализации логики и не будет производить никакого дополнительного кода html