PrimeFaces 3.0：如何使用 `<p:tabView>` 更改选项卡焦点答案

【问题标题】：PrimeFaces 3.0: How to change tab focus with `<p:tabView>`PrimeFaces 3.0：如何使用 `<p:tabView>` 更改选项卡焦点
【发布时间】：2012-01-07 08:28:07
【问题描述】：

在我的应用程序中，当用户点击某个项目时，我在<p:dialog> 中使用<p:tabView> 来显示该项目的详细信息。根据项目类型，有些会有额外的选项卡。它类似于以下内容：

<p:dataTable value="#{mrBean.items}" var="item" >
   <p:ajax event="rowSelect" listener="#{mrBean.showItemDetails}" update="itemDetails" oncomplete="eventDialog.show();" />
   ...
</p:schedule>

<p:dialog id="detailsDlg" onHide="detailsTab.select(0);">
   <p:tabView effect="fade" widgetVar="detailsTab" id="itemDetails">
      <tab title="General details">
         ...
      </tab>

      <tab rendered="#{mrBean.item.type == 'Book'}" title="Author">
         ...
      </tab>
   </p:tabView>
</p:dialog>

考虑一下我单击Book 并导航到Author 选项卡以查看作者详细信息的情况。现在，如果我关闭对话框而不切换回General details 选项卡并单击Book 以外的一些项目（这意味着它们没有Author 选项卡），我的对话框似乎仍在不可见 Author 标签。即使我尝试点击General tab，它也不会再渲染。

更新：

我尝试使用<p:tabView> 和<p:dialog> 的客户端API 并在<p:dialog> 的onHide 属性中调用detailsTab.select(0)。情况稍微好一些。但是，在单击Book 后单击的不是Book 的第一项将遇到与上述相同的情况。从第 2 项开始，一切都恢复正常。有什么方法可以让它立即工作吗？

如果您能告诉我如何解决这个问题，我将不胜感激。

【问题讨论】：

@Daniel 我用 Chrome 测试过。我还没有尝试过 Firefox，但我稍后会尝试。
我认为它与 FF 有关，如果它也在 Chrome 中，那么这不是我认为的原因......

标签： java jsf tabs primefaces

【解决方案1】：

我终于找到了解决办法。在<p:tabView> 标签中，我尝试通过设置effect="fade" 来产生一些效果。我认为这种效果可能会导致代码执行出现一些延迟，因此，直到下一个请求，我才能看到选项卡切换的结果。

在我关闭效果并将detailsTab.select(0); 放入我的<p:ajax> 事件的oncomplete 属性后，它现在可以工作了。

<p:dataTable value="#{mrBean.items}" var="item" >
   <p:ajax event="rowSelect" listener="#{mrBean.showItemDetails}" 
           update="itemDetails" oncomplete="eventDialog.show();detailsTab.select(0);" />
   ...
</p:schedule>

<p:dialog>
   <p:tabView widgetVar="detailsTab" id="itemDetails">
      <tab title="General details">
         ...
      </tab>

      <tab rendered="#{mrBean.item.type == 'Book'}" title="Author">
         ...
      </tab>
   </p:tabView>
</p:dialog>

需要注意的一点是，当我关闭effect 而不将detailsTab.select(0); 放入我的oncomplete 事件的oncomplete 属性时，这个问题仍然存在。换句话说，对话框最终仍然显示了不可见的选项卡。然而，当我点击General 标签时，这个标签的内容被完美地呈现出来了。问题显然只发生在我使用effect 时。这可能是<p:tabView>的bug。

我认为我的解决方案不是很优雅，因为我不得不关闭效果：P。如果您可以提供任何适用于effect 的解决方案，我将非常乐意接受您的回答:)。

【讨论】：