有没有一种简单的方法来在不使用向导的情况下在tabview标签与primefaces之间导航？

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豆和没有约束力。

删除绑定并将的activeIndex映射到属性。

<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++; 
    } 
}