使用JSF+PrimeFaces+Ajax实现点击菜单打开指定页面的TabView

解决方案 #

根因说明 #

你当前的问题本质是从header页面跳转时没有向userprofile页面传递要激活的tab索引参数，panelDisplayBean.profileActiveTabIndex 没有被赋值为目标索引，因此TabView始终加载默认激活的第一个标签。

步骤1：修改header.xhtml菜单项 #

将原来的普通<a>标签替换为JSF自带的导航组件，携带目标tab索引参数跳转至userprofile页面。按你的tab顺序：Transaction History对应索引0，View/Edit Profile对应1，Change Password对应2。
修改后的菜单项代码示例：

<ul class="navlink-group link-group">
    <li class="dropdown">
        <h:link class="nav-link" id="target" outcome="/userprofile">
            <f:param name="activeTab" value="0" />
            Transaction History
        </h:link>
    </li>
    <li class="dropdown">
        <h:link class="nav-link" id="target1" outcome="/userprofile">
            <f:param name="activeTab" value="1" />
            View/Edit Profile
        </h:link>
    </li>
    <li class="dropdown">
        <h:link class="nav-link" id="target2" outcome="/userprofile">
            <f:param name="activeTab" value="2" />
            Change Password
        </h:link>
    </li>
    <!-- 剩下的Sign Out代码保持不变 -->
</ul>

注意：outcome属性的值要和你项目中userprofile.xhtml的实际访问路径对应，比如如果文件放在根目录就是/userprofile，如果在子目录就补全路径。

步骤2：修改userprofile.xhtml接收参数 #

在页面头部添加视图参数配置，接收跳转时传递的activeTab参数，自动赋值给panelDisplayBean.profileActiveTabIndex：

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:common="http://java.sun.com/jsf/composite/components/common"
    template="/home.xhtml">
    
    <!-- 新增参数接收配置 -->
    <f:metadata>
        <f:viewParam name="activeTab" value="#{panelDisplayBean.profileActiveTabIndex}" default="0" converter="javax.faces.Integer">
            <f:validateLongRange minimum="0" maximum="2" />
        </f:viewParam>
    </f:metadata>

    <!-- 原来的tabView代码，可删除冗余的tabindex属性 -->
    <p:tabView id="tab" activeIndex="#{panelDisplayBean.profileActiveTabIndex}">
        <p:ajax event="tabChange"
            listener="#{userDetailsController.onProfileTabChange}"
            global="false" />
        <p:tab id="tab1">
        <ui:insert name="my-transactions">
            <ui:include src="my-transactions.xhtml" />
        </ui:insert>
        </p:tab>
        <p:tab id="tab2">
        <ui:insert name="edit-profile">
            <ui:include src="edit-profile.xhtml" />
        </ui:insert>
        </p:tab>
        <p:tab id="tab3">
        <ui:insert name="reset-password">
            <ui:include src="reset-password.xhtml" />
        </ui:insert>    
        </p:tab>    
    </p:tabView> 
</ui:composition>

步骤3：可选补充（初始化对应tab数据） #

如果需要在跳转后执行和内部切换tab相同的初始化逻辑，可以在f:metadata后添加页面加载监听，调用自定义初始化方法：

<f:event type="preRenderView" listener="#{userDetailsController.initProfileTab}" />

在UserDetailsController.java中添加对应方法：

public void initProfileTab() {
    // 可复用你原有tabChange的逻辑，加载对应tab的业务数据
    logger.debug("初始化激活tab索引：" + panelDisplayBean.getProfileActiveTabIndex());
}

注意事项 #

• 确保panelDisplayBean的作用域为@ViewScoped或者@SessionScoped，如果是@RequestScoped会导致跳转后参数值丢失。
• 如果后续新增tab，同步修改f:validateLongRange的maximum值即可。

内容的提问来源于stack exchange，提问作者Rajesh Patel