Есть ли простой способ перемещения между вкладками tabview с использованием несовпадений с помощью мастера?

Question

Я пытаюсь сделать страницу с 3 вкладками, и я хочу, чтобы пользователь перемещался между вкладками кнопками «Следующий» и «Назад» без использования мастера. Но пользователь не может перемещаться после второй вкладки. Где ошибка, которую я не мог найти? Вот мой HTML-код:

<?xml version='1.0' encoding='UTF-8' ?> 
    <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <ui:composition xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:p="http://primefaces.org/ui" 
     xmlns:c="http://java.sun.com/jsp/jstl/core" 
     template="template/template.xhtml"> 

     <ui:define name="body"> 

     <h:form prependId="false" id="form"> 
     <p:tabView id="tabPanel" widgetVar="tabPanel" binding="#{myBean.tabView}" dynamic="true"> 

     <!-- FIRST TAB --> 
       <p:tab id="person" title="Person"> 
        <h:panelGrid columns="2" cellpadding="10">    
        <h:outputText value="name" /> 
        <p:inputText value="#{myBean.user.firstname}" label="Name" </p:inputText> 
    <p:commandButton value="NEXT" action="#{myBean.nextButton}" update=":form:tabPanel" immediate="true"/> 
       </h:panelGrid> 
    </p:tab>      

<!-- SECOND TAB --> 
       <p:tab id="adres" title="Address"> 
        <h:panelGrid columns="2" cellpadding="10"> 
         <h:outputText value="Phone" /> 
         <p:inputMask id="phone" value="#{myBean.user.phone}" mask="1999999999" required="true" requiredMessage="ERROR AT PHONE NUMBER"/> 
    <p:commandButton value="NEXT" action="#{myBean.nextButton2}" update=":form:tabPanel" immediate="true"/> 
    </h:panelGrid> 
    </p:tab> 

       <!-- THIRD TAB --> 
       <p:tab title="Contact"> 
        <h:panelGrid columns="2" cellpadding="10"> 

        </h:panelGrid> 
       </p:tab>    

      </p:tabView> 
     </h:form>  
     </ui:define>  
     </ui:composition> 

И вот мой myBean:

@ManagedBean(name = "myBean") 
@ViewScoped 
public class MyBean implements Serializable { 

private User user = new User(); 

private TabView tabView; 

    public TabView getTabView() { 
     return tabView; 
    } 

    public void setTabView(TabView tabView) { 
     this.tabView = tabView; 
    } 

    public void nextButton() 
    { 
     tabView.setActiveIndex(1); 
    } 

    public void nextButton2() 
    { 
     tabView.setActiveIndex(2); 
    } 
} 

Answer 1

подход 1

У вас есть незакрытые теги. После того, как я изменил код следующим образом, и это сработало для меня.

tabs.xhtml

<h:form prependId="false" id="form"> 
    <p:tabView id="tabPanel" widgetVar="tabPanel" binding="#{myBean.tabView}" dynamic="true" activeIndex="0"> 

     <!-- FIRST TAB --> 
     <p:tab id="person" title="Person"> 
      <h:panelGrid columns="2" cellpadding="10">    
       <h:outputText value="name" /> 
       <p:inputText value="???USERINFO???" label="Name" /> 
       <p:commandButton value="NEXT" action="#{myBean.nextButton}" update=":form:tabPanel" immediate="true"/> 
      </h:panelGrid> 
     </p:tab> 


     <!-- SECOND TAB --> 
     <p:tab id="adres" title="Address"> 
      <h:panelGrid columns="2" cellpadding="10"> 
       <h:outputText value="Phone" /> 
       <p:inputMask id="phone" value="???USERINFO???" mask="1999999999" required="true" requiredMessage="ERROR AT PHONE NUMBER"/> 
       <p:commandButton value="NEXT" action="#{myBean.nextButton2}" update=":form:tabPanel" immediate="true"/> 
      </h:panelGrid> 
     </p:tab> 

     <!-- THIRD TAB --> 
     <p:tab title="Contact"> 
      <h:panelGrid columns="2" cellpadding="10"> 
       <h:outputText value="CONTACT" /> 
      </h:panelGrid> 
     </p:tab>  
    </p:tabView> 
</h:form> 

MyBean.java

@ManagedBean(name = "myBean") 
@RequestScoped 
public class MyBean implements Serializable { 

    private static final long serialVersionUID = 2431097566797234783L; 

    private TabView tabView; 

    public TabView getTabView() { 
     return tabView; 
    } 

    public void setTabView(TabView tabView) { 
     this.tabView = tabView; 
    } 

    public void nextButton() 
    { 
     tabView.setActiveIndex(1); 
    } 

    public void nextButton2() 
    { 
     tabView.setActiveIndex(2); 
    } 
} 

подход 2

Для меня переход от ViewScoped к RequestScoped сделал трюк. Если бы я был вами, я бы сделал следующее:

Удалить связывание с tabView.

<p:tabView id="tabPanel" widgetVar="tabPanel" dynamic="true"> 

Переключить вкладки с JavaScript.

<p:button onclick="PF('tabPanel').select(1);return false;" value="NEXT" /> 

... вместо ...

<p:commandButton value="NEXT" action="#{myBean.nextButton}" update=":form:tabPanel" immediate="true"/> 

подход 3

Этот третий подход работает с ViewScoped боба и без привязки.

Удалите привязку и нанесите карту activeIndexTabView на объект.

<p:tabView id="tabPanel" dynamic="true" activeIndex="#{myBean.activeIndex}"> 

На следующей кнопке, вызовите действие, которое увеличивает значение activeIndex свойства.

<p:commandButton value="NEXT" action="#{myBean.nextTab}" update=":form:tabPanel" /> 

tabs.xhtml

<h:form id="form"> 
    <p:tabView id="tabPanel" dynamic="true" activeIndex="#{myBean.activeIndex}"> 

     <!-- FIRST TAB --> 
     <p:tab id="person" title="Person"> 
      <h:panelGrid columns="2" cellpadding="10">    
       <h:outputText value="name" /> 
       <p:inputText value="???USERINFO???" label="Name" /> 
       <p:commandButton value="NEXT" action="#{myBean.nextTab}" update=":form:tabPanel" /> 
      </h:panelGrid> 
     </p:tab>      

     <!-- SECOND TAB --> 
     <p:tab id="adres" title="Address"> 
      <h:panelGrid columns="2" cellpadding="10"> 
       <h:outputText value="Phone" /> 
       <p:inputMask id="phone" value="???USERINFO???" mask="1999999999" required="true" requiredMessage="ERROR AT PHONE NUMBER"/> 
       <p:commandButton value="NEXT" action="#{myBean.nextTab}" update=":form:tabPanel" /> 
      </h:panelGrid> 
     </p:tab> 

     <!-- THIRD TAB --> 
     <p:tab id="contact" title="Contact"> 
      <h:panelGrid columns="2" cellpadding="10"> 

      </h:panelGrid> 
     </p:tab>    

    </p:tabView> 
</h:form> 

MyBean.java

@ManagedBean(name = "myBean") 
@ViewScoped 
public class MyBean implements Serializable { 

    private int activeIndex = 0; 

    public int getActiveIndex() { 
     return activeIndex; 
    } 

    public void setActiveIndex(int activeIndex) { 
     this.activeIndex = activeIndex; 
    } 

    public void nextTab() { 
     activeIndex++; 
    } 
}