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

Я пытаюсь создать страницу с 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);
    }
}

person xxxx    schedule 21.06.2016    source источник
comment
это просто ошибка в вопросе, ваши теги для tab и panelGrid не закрыты для ваших первых 2 вкладок.   -  person Loic Mouchard    schedule 22.06.2016
comment
Но я не получил никакой ошибки. Вы пытались получить ошибку?   -  person xxxx    schedule 22.06.2016


Ответы (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

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

Удалите привязку и сопоставьте activeIndex из TabView со свойством.

<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++;
    }
}
person 71m024    schedule 21.06.2016
comment
Я изменил как RequestScoped и попробовал еще раз, но снова ничего не изменилось. Я до сих пор не могу перейти на третью вкладку со второй вкладки. - person xxxx; 22.06.2016
comment
Я попытался снова. Я скопировал ваше предложение, но до сих пор не могу добраться до третьей вкладки. Я открываю эту страницу с вкладками с главной страницы, и эта главная страница с @ViewScoped. Может ли это повлиять? - person xxxx; 22.06.2016
comment
Пожалуйста, проверьте ваш браузер на наличие ошибок JavaScript. Я добавил второй подход для решения вашей проблемы. - person 71m024; 22.06.2016
comment
Я попытался снова. В консоли выдает ошибку: primefaces.js.jsf?ln=primefaces:1 Uncaught TypeError: a[h].refresh не является функцией, а также эту ошибку: index.jsf:64 Uncaught ReferenceError: PF не определен - person xxxx; 22.06.2016
comment
Вы правильно добавили все зависимости Primefaces/PrimeUI? - person 71m024; 22.06.2016
comment
Да, я думаю. Вы добавили новую зависимость, пытаясь решить эту проблему? - person xxxx; 22.06.2016
comment
Какую версию Primefaces вы используете? Если вы используете более старую версию, чем PrimeFaces 3, вы можете попробовать использовать PrimeFaces.widgets.yourWidgetVar вместо PF('yourWidgetVar'). - person 71m024; 22.06.2016
comment
моя версия 3.5, но я не знаю, почему она не работает. - person xxxx; 22.06.2016
comment
Да я тоже пробовал. Но это не сработало для меня. В режиме отладки я увидел, что метод nextTab() используется только один раз. Когда пользователь нажимает кнопку «Далее» на второй вкладке, она не увеличивается, и отладчик также не переходит к кнопке nextTab(), он использует этот метод только один раз. Почему это происходит я не знаю. - person xxxx; 23.06.2016
comment
Он перешел на третью вкладку после добавления этого к кнопке ajax=false - person xxxx; 23.06.2016
comment
Хорошо, но я думаю, что у вас все еще есть некоторые проблемы с Javascript, потому что он также должен работать с ajax... - person 71m024; 23.06.2016
comment
Проблема с JavaScript? где моя ошибка я не мог найти его. - person xxxx; 23.06.2016