有没有一种简单的方法可以在不使用向导的情况下使用 primefaces 在 tabview 的选项卡之间导航？

Question

我正在尝试创建一个包含 3 个选项卡的页面，我希望用户在不使用向导的情况下通过 "next" 和 "back" 按钮在选项卡之间导航。但用户无法在第二个选项卡后导航。我找不到的错误在哪里？这是我的 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

方法一

您有一些未关闭的标签。在我按如下方式更改代码后，它对我有用。

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

方法二

对我来说，从 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 bean，无需绑定。

删除绑定并将 TabView 的 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++;
    }
}

有没有一种简单的方法可以在不使用向导的情况下使用 primefaces 在 tabview 的选项卡之间导航？

Is there a simple way to navigate between tabs of tabview with primefaces without using wizard?

jsf

primefaces

tabview

方法一

方法二

方法 3