2016-03-04 1 views
0

У меня есть объект со многими атрибутами, который должен отображаться на нескольких вкладках в p: tabView. Это может выглядеть следующим образом. enter image description hereHowto проверяет объект, разделенный на несколько вкладок

У меня есть одна h: форма, которая окружает p: tabView. На вкладках у меня есть одно сообщение p: для каждого элемента ввода.

<p:column> 
    <p:outputLabel value="Name" for="name_input" /> 
</p:column> 
<p:column> 
    <p:message for="name_input" display="icon" /> 
</p:column> 
<p:column> 
    <p:inputText id="name_input" value="#{bean.person.name}"> 
     <p:ajax /> <!-- put value into backingbean on tabchange --> 
     <f:validateRequired /> 
    </p:inputText> 
</p:column> 

Я сделал следующие наблюдения.

1) Проблема: проверка выполняется только в закладках, которые были активированы

  • Если переключиться в режим редактирования и текущая вкладка не имеет проверки ошибок и не изменить вкладку, а затем мой объект будет сохранен, а ошибка проверки на других вкладках будет проигнорирована.

  • Если я переключусь в режим редактирования и перейдя на вкладку с ошибкой проверки, а затем перейдите к первой вкладке без ошибки проверки, тогда отображается ошибка vaidation (но только с той вкладки, которую я посетил).

  • (Надеюсь, это понятно, по крайней мере, немного). Если я задал dynamic = true/false и cache = false в p: tabView, это не имеет значения.

2) Проблема: нет значок сообщения об изменении вкладки

  • Если переключиться в режим редактирования и нажмите на каждой вкладке, так что каждая ошибка проверки признаются (как в сценарии б) I получить правильное сообщение проверки (значок), а p: inputText отображается с красной рамкой. Так что все кажется прекрасным. Но если я перейду к другой вкладке с ошибками проверки, значок сообщения не отображается, только красная рамка вокруг конкретного p: inputText. Насколько я предполагаю, жизненный цикл JSF выполняется при изменении табуляции, но проверка не происходит, поэтому для этого цикла цикла все в порядке, и значок сообщения исчезает (с другой стороны, это загадка для меня, почему красная рамка не исчезают ...).

3) Проблема: нет визуального намека на вкладке

  • Для пользовательского опыта я бы очень хотел, чтобы иметь визуальный намек (т.е. красный фон на вкладку-заголовке), так что пользователь знает, где возникают проблемы.

Я прочитал Validating one form with multiple tabs, how to switch tabs without losing validation errors? Using Myfaces and Trinidad но ни мастера (это не «Wizardy» задача это просто редактирование большого объекта), ни сделай сам-с-JavaScrip-и-CSS (основной проблема в корпоративной идентичности, которую я использую довольно часто tabViews в других ситуациях) - хороший вариант для меня.

У кого-нибудь есть решение/подсказка по любым из моих проблем?

Я использую JSF 2.2, Primefaces 5.3.

+0

Пара вещей: - пожалуйста, напишите 1 вопрос на вопрос. - всегда оставляйте [mcve] (за вопрос) – Kukeltje

+0

@Kukeltje: Извините, я буду помнить в следующий раз :-) – Filou

ответ

0

ОК, мой коллега придумал ответ.

Прежде всего, мои первые две проблемы исчезли в воздухе. С атрибутами dynamic="false" и cache="false" в <p:tabView /> это работает по желанию (тогда я не знаю, что я тестировал).

И визуальный намек на вкладке. Существует <f:facet name="title" />, который может использоваться для отображения заголовка вкладки и дополнительных сообщений. Компоненты <p:message /> удваиваются, во-первых, внутри столбца входного компонента, а во-вторых, в факторе заголовка. С помощью небольшого CSS можно по желанию настроить значки в названии.

<p:tabView dynamic="false" cache="false"> 
    <f:facet name="title"> 
     Address 
     <p:message for="name_input" display="icon" /> 
    </f:facet> 
    ... 
    <p:panelGrid> 
     <p:row> 
      <p:column> 
       <p:outputLabel value="Name" for="name_input" /> 
      </p:column> 
      <p:column> 
       <p:message for="name_input" display="icon" /> 
      </p:column> 
      <p:column> 
       <p:inputText id="name_input" value="#{bean.person.name}"> 
        <p:ajax /> 
        <f:validateRequired /> 
       </p:inputText> 
      </p:column> 
     </p:row> 
     .... 
    </p:panelGrid> 
</p:tabView> 
Смежные вопросы