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>

因此，在组件id =＆＃34; A＆＃34;中，用户从下拉菜单中选择一个值，bean捕获它并动态显示或隐藏组件id =＆＃34; C＆＃34;或＆＃34; D＆＃34;基于价值。

第一次尝试，我没有任何h：panelGroup标签。我直接从p：tab组件使用了render属性但是我意识到除非我刷新整个页面，否则bean.checkValue不会知道捕获的最新值。通过阅读本论坛中的许多文章，我意识到我必须使用h：panelGroup进行包装，然后通过显示h：panelGroup＆＃34; C＆＃34;或＆＃34; D＆＃34;基于从p：tab标签中选择的值，其中id =＆＃34; A＆＃34;。

然而，f：facet标签的内容不再可见。它有html表标签，其中包含带静态值的h：outputText和p：graphicImage。我不知道为什么，希望有人能解开这个谜。

更新

感谢Arthur。我能够在他的帮助下解决这个问题。我在这里粘贴执行预期输出的代码。

<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

Facets表示容器组件中的命名部分。您的方面的容器在<h:panelGroup>两种情况下均可用，并且此组件不会定义您可以使用的任何方面。由于您未在示例代码中提供构面的任何名称（这是必需的），我只假设您可能希望使用标题构面作为选项卡，因为<p:tab>组件定义了名为＆的构面＃34;标题＆＃34 ;.然后它应该看起来像

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

，所以你在facet值中实现了渲染逻辑（你决定显示哪个标题。这个逻辑也可以转移到支持bean。请记住，在primefaces中，有时组件处理得不是很好，你可以然后尝试将它们用作属性，而不是像post

中的facets那样

你也可能误解了方面的含义。解释它们的最好方法是定义i组件的方面。该组件的作者希望为用户提供定义数据表的页眉和页脚的可能性。然后，作为jsf用户，您可以从其他不同的组件组成标题。您还可以查看此post，其中还介绍了方面。

要添加的另一件事是，将<h:panelGroup rendered="#{bean.checkValue}"/>用于渲染逻辑被视为错误模式，因为它将在代码中生成<span>元素。相反，你应该使用<ui:fragment rendered="#{bean.checkValue}"/>用于渲染逻辑，它不会产生任何额外的HTML代码

如何通过ajax在p：tab下动态显示/隐藏组件？

1 个答案: