0

私は p:tab ビューをこのように使用しています

<ui:composition template="./WEB-INF/templates/masterTemplate.xhtml">
    <ui:define name="windowTitle">
        #{msgs.home}
    </ui:define>

    <ui:define name="content">
        <p:tabView id="tabView" dynamic="false">

            <p:tab id="tab1" title="#{msgs.home}">
                <ui:include src="/homePages/home.xhtml" />
            </p:tab> <!--end of tab1 -->

            <p:tab id="tab2" title="#{msgs.join}">
                <ui:include src="/homePages/join.xhtml" />
            </p:tab> <!--end of tab2 -->

            <p:tab id="tab3" title="#{msgs.signIn}">
                <ui:include src="/homePages/login.xhtml" />
            </p:tab> <!--end of tab3 -->

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

これが私のjoin.xhtmlページです

<h:body>
    <ui:composition>
        <div id="join" style="border-style:solid; border-width:5px; padding: 10px;" >
            <div id="joinFormPosition" class="left">
                <h:form id="joinForm">
                    <h:outputText id="joinMessgae" value="#{msgs.joinMessgae}" />
                    <span class="asterisk">*</span><span class="labels">#{msgs.signInName}: </span>
                    <p:inputText id="name"
                                 value="#{joinPage.signInName}"
                                 required="true"/>
                    <p:message for="name" />
                    ...

                    <div id="submitButton">
                        <h:commandButton id="submitBtn"
                                         value="Submit"
                                         actionListener="#{join.saveUser}" />
                    </div>
                </h:form>
            </div> <!--end of joinFormPosition  -->
        </div> <!--end of join  -->
    </ui:composition>
</h:body>

login.xhtml

<ui:composition>

        <div id="login" style="border-style:solid; border-width:5px; padding: 10px;" >

            <div id="loginFormPosition" class="left">

                <h:form id="loginForm">
                    <h:outputText value="#{msgs.signIn}" />
                    .....
                    <div id="signInButton">
                        <h:commandButton id="signInBtn"
                                         value="Submit"
                                         actionListener="#{login.signIn}"
                                         action ="#{login.outcome}"/>
                    </div>
                </h:form>
            </div> <!--end of loginFormPosition  -->
        </div> <!--end of login -->
    </ui:composition>

タブに参加してフォームを送信し、検証に失敗した場合は、最初のタブに切り替えます。送信ボタンをクリックすると、検証が失敗したかどうかにかかわらず、同じタブにとどまります。ログインタブで直面しているのと同じ状況。フォームを送信した後、同じタブに留まるにはどうすればよいですか?

ありがとう

4

2 に答える 2

3

タブビューをバッキング Bean のタブビュー オブジェクトにバインドし、そこにアクティブなインデックスを設定できます。

<p:tabView binding="#{myTabBean.messagesTab}">

次に myTabBean で:

private TabView messagesTab = new TabView();

public TabView getMessagesTab () {
    return messagesTab;
}

public void setMessagesTab(TabView messagesTab ) {
    this.messagesTab = messagesTab;
}


public void someDecisionMethod(){
    int idx=1
    this.messagesTab.setActiveIndex(idx);
}
于 2012-05-11T12:54:21.380 に答える
1

この質問は古いことは知っていますが、数年後にprimefaces 5.2で同じ問題に直面しました。特定のケースでは、ページ全体ではなくタブのコンテンツのみを更新するなど、いくつかの解決策がある場合があります。しかし、実際にはページ全体をリロードする必要がありました (ロケールの変更):

activeTab を「記憶」するには、基本的に、ビュー スコープの managedBean で activeIndex をバインドし、ap:ajax イベント リスナーを指定するだけです。しかし、あなたの p:tabView はフォームではなく、タブ自体には独自のフォームがあるため、いくつかの既知の問題があります: https://github.com/primefaces/primefaces/issues/695 p:ajax を true にします。したがって、activeIndex を設定し、結果としてタブにとどまるために必要なのはこれだけです。

xhtml:

<p:tabView activeIndex="#{myManagedBean.activeTabIndex}">
  <p:ajax event="tabChange" partialSubmit="true" />

myManagedBean:

//plus its getter and setter
private Integer activeTabIndex;

<p:ajax event="tabChange" partialSubmit="true" />編集: activeIndex をバインドしなくても、上記のように指定するだけで十分な場合があります。少なくとも私のユースケースではそれで十分でした。

于 2016-01-26T12:03:47.947 に答える