PrimeFaces 3.0: Как изменить фокус вкладки с помощью `<p: tabView>` - PullRequest
Новая
       10

PrimeFaces 3.0: Как изменить фокус вкладки с помощью `<p: tabView>`

1 голос
/ 07 января 2012

В моем приложении, когда пользователь нажимает на какой-либо элемент, я использую <p:tabView> внутри <p:dialog>, чтобы показать детали этого элемента. В зависимости от типа элемента, некоторые будут иметь дополнительные вкладки. Это похоже на следующее: 

<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, он больше не будет отображаться.

UPDATE:

Я попытался использовать клиентский API <p:tabView> и <p:dialog> и выполнить вызов detailsTab.select(0) в атрибуте onHide <p:dialog>. Ситуация немного лучше. Однако 1-й элемент, который не является Book, который я нажимаю после нажатия Book, будет испытывать ту же ситуацию, что и выше. Начиная со 2-го пункта, все снова в порядке. Есть ли способы заставить его работать сразу?

Буду очень признателен, если вы покажете мне, как я могу решить эту проблему.

1 Ответ

5 голосов
/ 08 января 2012

Я наконец нашел решение.В теге <p:tabView> я попытался добиться некоторого эффекта, установив effect="fade".Я думаю, что эффект мог вызвать некоторое отставание в выполнении кода, и поэтому я не мог видеть результат переключения вкладок до следующего запроса.

После того, как я выключил эффект и поместил detailsTab.select(0); вoncomplete атрибут моего события <p:ajax>, он работает сейчас. 

<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мое <p:ajax> событие, эта проблема все еще произошла.Другими словами, в диалоговом окне все еще отображалась невидимая вкладка.Однако, когда я нажал на вкладку General, содержимое этой вкладки было отрисовано идеально.Очевидно, проблема возникла только тогда, когда я использовал effect.Это может быть ошибка <p:tabView>.

Я думаю, что мое решение не очень элегантно, потому что мне пришлось отключить эффект: P.Если бы вы могли предоставить какие-либо решения, которые могут работать с effect, я был бы очень рад принять ваш ответ :).

...