link from to certain | 易学教程

问题

Hi guys I want to link from my Menubar to certain Tab, but always the first tab is activated I tried lot of solutions from StackOverflow but nothing works. I think the problems is that i use a preRenderView. I hope someone can help me :)

I use jsf 2.1 and primefaces 3.5

The code for the menubar

  <p:menubar >
       <p:submenu  label="Taskbox" >
            <p:menuitem value="Inbox" url="taskbox.xhtml" />
            <p:menuitem value="Sent" url="taskbox.xhtml#sentTab"/>
            <p:menuitem value="Trash" url="taskbox.xhtml" onclick="tabPanel.select(3)"/>
            <p:menuitem value="New Message" url="#"/>
       </p:submenu>          
    </p:menubar>

Der code for the tabs

<ui:composition template="/META-INF/templates/templateContentSplit.xhtml">

        <ui:define name="metadata">
            <f:metadata>
                <f:event type="preRenderView" listener="#{taskboxBean.initPage}" />
            </f:metadata>
        </ui:define>
<ui:define name="metadata">
            <f:metadata>
                <f:event type="preRenderView" listener="#{taskboxBean.initPage}" />
            </f:metadata>
        </ui:define>

        <ui:define name="title">
            <h:outputText value="Taskbox" />
        </ui:define>
        <ui:define name="contentLeft">
            <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
            <h:form id="postForm">

                <p:tabView id="tabViewPosts" widgetVar="tabPanel">
                    <p:tab title="Inbox" id="inboxTab">
                        <ui:include src="/user/inboxTaskbox.xhtml" />
                    </p:tab>
                    <p:tab title="Sent" id="sentTab">
                        <ui:include src="/user/sentTaskbox.xhtml" />
                    </p:tab>
                    <p:tab title="Trash" id="trashTab">
                        <ui:include src="/user/trashTaskbox.xhtml" />
                    </p:tab>
                </p:tabView>
            </h:form>
        </ui:define>

        <ui:define name="contentRight">
            <h:form id="contentForm">
                <ui:include src="/user/detailTaskbox.xhtml" />
            </h:form>
        </ui:define>

    </ui:composition>

回答1:

For your <p:menuitem /> use an outcome attribute, which specifies the navigation case, instead of url, that's intended to be used with an absolute and not JSF related url. Here you've got a basic explanation case, based in @Daniel Camargo's suggested code:

tabs.xhtml:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head />

<h:body>
    <f:metadata>
        <f:viewParam name="index" value="#{index}" />
        <f:event type="preRenderView" listener="#{bean.initPage}" />
    </f:metadata>

    <h:form>
        <p:menubar>
            <p:submenu label="Taskbox">
                <!-- Different ways of passing the view param -->
                <p:menuitem value="Inbox" outcome="tabs?index=0" />
                <p:menuitem value="Sent" outcome="tabs.xhtml?index=1" />
                <p:menuitem value="Trash" outcome="tabs">
                    <f:param name="index" value="2" />
                </p:menuitem>
                <!-- External url -->
                <p:menuitem value="Google" url="http://www.google.com"
                    target="_blank" />
            </p:submenu>
        </p:menubar>
    </h:form>

    <h:form id="postForm">
        <p:tabView id="tabViewPosts" widgetVar="tabPanel"
            activeIndex="#{index}">
            <p:tab title="Inbox" id="inboxTab">
            A
        </p:tab>
            <p:tab title="Sent" id="sentTab">
            B
        </p:tab>
            <p:tab title="Trash" id="trashTab">
            C
        </p:tab>
        </p:tabView>
    </h:form>
</h:body>
</html>

Note the outcome attribute here let's the JSF servlet evaluate the destination url. Basically, an outcome with value of tabs will get rendered as basePath/tabs.xhtml at client side. So basically you are making the page be directed to itself, but changing the viewParam value.

See also:

When should I use h:outputLink instead of h:commandLink?

回答2:

Remember that this is a zero based index. You tabPanel.select(3) will try to activate the 4th tab which doesn't exist. Try doing this:

The menu:

<h:form>
    <p:menubar >
        <p:submenu  label="Taskbox" >
            <p:menuitem value="Trash" url="taskbox.xhtml?index=2"/>
        </p:submenu>          
    </p:menubar>
</h:form>

The Taskbox page:

<f:metadata>
    <f:viewParam name="index" value="#{viewMBean.index}" />
</f:metadata>

<h:form id="postForm">
    <p:tabView id="tabViewPosts" widgetVar="tabPanel" activeIndex="#{viewMBean.index}">
        <p:tab title="Inbox" id="inboxTab">
            A
        </p:tab>
        <p:tab title="Sent" id="sentTab">
            B
        </p:tab>
        <p:tab title="Trash" id="trashTab">
            C
        </p:tab>
    </p:tabView>
</h:form>

来源：https://stackoverflow.com/questions/21729622/link-from-pmenuitem-to-certain-ptab

标签

jsf

primefaces

link from <p:menuitem> to certain <p:tab>

问题

回答1:

回答2: