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>
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?
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>
Related
I am using JSF 2.0 with PrimeFaces 5.0, I have three tabs in my application, the first tab is the master and the remaining two tabs are details which are based on the row selection from master. The problem is that when I set dynamic="true" and cache="false" then all the tabs are refreshing.I want to keep the cache for the master and just only refresh the details(other two tabs)
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
template="/WEB-INF/template/master.xhtml">
<ui:define name="title">
#{loc.Clients_Title_Name_Index}
</ui:define>
<ui:define name="head">
<ui:define name="content">
<h:form id="stepsForm">
<p:steps
activeIndex="#{retClientsBean.activeTabIndex}" styleClass="custom" >
<p:menuitem value="Ret Clients"/>
<p:menuitem value="Ret Accounts"/>
<p:menuitem value="Ret Contracts"/>
</p:steps>
</h:form>
<h:form>
<p:remoteCommand name="updateListForm"
update="tabs:RetAccountsForm tabs:RetContractsForm"></p:remoteCommand>
</h:form>
<p:tabView id="tabs" dynamic="true" cache="false">
<p:ajax event="tabChange" update=":stepsForm"
listener="#{retClientsBean.onTabChange}" />
<p:tab id="ClientsListTab"
title="Ret Clients">
<ui:include src="ClientsList.xhtml"/>
<ui:include src="EditClientsDialog.xhtml"/>
<ui:include src="CreateClientsDialog.xhtml"/>
</p:tab>
<p:tab id="RetAccountsTab" title="Ret Accounts">
<ui:include src="/Admin/RetAccounts/List.xhtml" />
<ui:include src="/Admin/RetSituationsAccount/RetSituationsAccountList.xhtml"/>
<ui:include src="/Admin/RetLimitsAccounts/RetLimitsAccountsList.xhtml"/>
<ui:include src="/Admin/RetCards/RetCardsList.xhtml"/>
</p:tab>
<p:tab id="RetContractsTab"
title="Ret Contracts">
<ui:include src="/Admin/RetContracts/List.xhtml" />
<ui:include src="/Admin/RetInstallmentsContract/RetInstallmentsContractList.xhtml" />
</p:tab>
</p:tabView>
</ui:define>
</ui:composition>
Click here to see the application View
Here is the code which i am trying to run
ChildTemplate.xhtml
<ui:composition template="../templates/home-template-new.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h:outputStylesheet library="css" name="primeface_default.css" />
<p:tabView dynamic="true" cache="true" id="tabView">
<p:tab title="A">
<ui:insert name="equipList">
<ui:include src="../AList.xhtml" />
</ui:insert>
</p:tab>
<p:tab title="B">
<ui:insert name="terminationList">
<ui:include src="../BList.xhtml" />
</ui:insert>
</p:tab>
</p:tabView>
</ui:define>
</ui:composition>
Here is the BList.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui">
<p:dataTable value="#{bean.fetchTemp()}" var="temp" reflow="true" resizableColumns="true" liveResize="true"
id="table2">
<p:column>
........
........
</p:column>
<f:facet name="footer">
<div class="divTableFooter" align="right" id="footerDiv6">
<p:panelGrid>
<p:commandLink id="create"
action="#{bean.methodName()}">
</p:commandLink>
<h:link value="LinkName" outcome="AddRecord" />
</p:panelGrid>
</div>
</f:facet>
</p:dataTable>
</ui:composition>
Now let me define the problem
Right now my active tab is B and when i am clicking the <p:commandLink/> or <h:link /> It is redirecting and showing tab A while it should show AddRecord.xhtml page in current active tab B.
What is wrong with my code ? Can someone suggest it?
You can add activeIndex attribute to your tabview component and write a tabchange event using p:ajax .Please check the below code
<h:outputStylesheet library="css" name="primeface_default.css" />
<p:tabView dynamic="true" cache="true" id="tabView" activeIndex="#{bean.tabIndex}">
<p:ajax event="tabChange" listener="#{bean.onTabChange}" />
<p:tab title="Equipment" >
<ui:insert name="equipList">
<ui:include src="../AList.xhtml" />
</ui:insert>
</p:tab>
<p:tab title="Termination">
<ui:insert name="terminationList">
<ui:include src="../BList.xhtml" />
</ui:insert>
</p:tab>
</p:tabView>
in your bean define tabIndex variable and implement the onTabChange method
private boolean popupEdit;
public final void onTabChange(final TabChangeEvent event) {
TabView tv = (TabView) event.getComponent();
this.tabIndex = tv.getChildren().indexOf(event.getTab());
}
Hope this will help you
<ui:composition>
<ui:decorate template="/view-fragments/section/frag_section.xhtml" >
<ui:param name="AttrId" value="SOME_VALUE" />
<ui:param name="AttrMinimized" value="false" />
<ui:define name="AttrContentTitle">
Some Title
</ui:define>
<ui:param name="AttrCollapsable" value="false" />
<ui:define name="AttrContentBody">
<h:form id="form_some_form" class="form-horizontal">
<p:tabView id="tabView" widgetVar="tabView" dynamic="true" rendered="true" cache="true">
<p:tab id="tab1" title="title1">
</p:tab>
<ui:include src="/view-fragments/project/frag_tab2.xhtml" />
<ui:include src="/view-fragments/project/frag_tab3.xhtml" />
<ui:include src="/view-fragments/project/frag_tab4.xhtml" />
<ui:include src="/view-fragments/project/frag_tab5.xhtml" />
<ui:include src="/view-fragments/project/frag_tab6.xhtml" />
</p:tabView>
</h:form>
</ui:define>
</ui:decorate>
</ui:composition>
This doesn't load tab2, tab3...etc. content to the tabView. but the content is shown if I take it off the p:tabView. Can anyone help? Thank you.
I have a main HTML page which includes detail.xhtml and duo.xhtml.
Now duo.xhtml also includes detail.xhtml, which results in duplicate IDs which of course it not working. What can I do to solve this problem? I don't want to manage redundant code.
Main:
<ui:composition ...>
<ui:define name="center">
<ui:insert name="insertDuo">
<ui:include src="/includes/duo.xhtml" />
</ui:insert>
...
<p:dialog header="x" widgetVar="detDialog" id="dlg" modal="true" appendTo="#(body)">
<ui:insert name="insertDetail">
<ui:include src="/includes/detail.xhtml" />
</ui:insert>
Duo:
<ui:composition>
<p:dialog header="y" widgetVar="newDuoDialog" id="newDuoDlg" modal="true" >
<p:layout id="layout">
<p:layoutUnit position="west">
<ui:insert name="insertDetailStmt">
<h:form id="stmtDetailForm">
<ui:include src="/includes/detail.xhtml" />
</h:form>
</ui:insert>
</p:layoutUnit>
Detail:
<p:accordionPanel id="accordion">
Reference to components:
<p:commandButton value="z" update=":accordion:duoDlgForm2:pickList"/>
Thanks to BalusC, I was able to solve the problem. Just use
<f:subview id="fromMain">
<ui:include src="/includes/regelDetail.xhtml" />
</f:subview>
and when referred from main, the element's name is fromMain:accordion
In the code below, after logging in, ui:include is OK (changing), outputText is OK (changing), and ui:insert is not changing.
template.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml" (...) >
<h:head></h:head>
<h:body>
<p:panel header="LoginForm" >
<ui:insert name="#{userBean.loggedIn?'logoutForm':'loginForm'}" />
<ui:include src="#{userBean.loggedIn?'incA.xhtml':'incB.xhtml'}" />
<h:outputText value="#{userBean.loggedIn?'print logoutForm':'print loginForm'}" />
</p:panel>
</h:body>
</html>
index.xhtml:
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml" (...) >
<ui:define name="loginForm">
<h:form >
<p:inputText id="usernameInput" value="#{credentialsBean.username}" />
<p:password id="passwordInput" value="#{credentialsBean.password}" />
<p:commandButton value="Log in" action="#{loginBean.actionLogin}" ajax="false" type="submit" />
</h:form>
</ui:define>
<ui:define name="logoutForm" >
<h:form >
<p:commandButton value="Logout" type="submit" action="#{loginBean.actionLogout}" ajax="false" />
</h:form>
</ui:define>
</ui:composition>
Is it normal behavior?
ui:insert's name property is evaluated in the build JSF tree phase. Use ui:include instead ui:insert to be happy.