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
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
I have a layout with layoutUnit west and layoutUnit center, west side have a menu that calls another pages that render in the center side, the problem is that all layout is refreshed(west and center side) when another page rendered in center. I have follow code:
<p:layout style="width: 100%; height: 450px" >
<p:layoutUnit position="west" size="230" collapsible="false" >
<h:form>
<p:menu style="font-size: 14px; width: 95%;height: 420px " >
<p:submenu label="MENU">
<p:menuitem value="Students" icon="ui-icon-arrowthick-1-n" url="pantallas/students.xhtml" />
<p:menuitem value="Teachers" icon="ui-icon-refresh" url="pantallas/teacher.xhtml" />
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layout1" position="center" >
<h:form>
<ui:insert name="content" ></ui:insert>
</h:form>
</p:layoutUnit>
</p:layout>
And student.xhtml like:
<ui:composition template="../administracion.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="content">
<h:head>
<h:outputStylesheet library="css" name="styles2.css"/>
<title>Facelet Title</title>
</h:head>
<h:body>
<p:panel header="Student" style="width: 90%; margin: auto auto">
<h:form id="forma1">
<p:panel style="text-align: center">
<p:inputText placeholder="Students" value="#{datosCT.cct}"/>
<p:commandButton value="buscar" actionListener="#{controlCTAlumnos.traeInfo()}" update="panel1">
<f:ajax listener="#{controlCTAlumnos.mostrarPanel(e)}" render="panel1" />
</p:commandButton>
</p:panel>
</h:form>
</p:panel>
</h:body>
</ui:define>
I saw and tried some many ways to refresh only layoutUnit center but doesn´t work in this case.
can someone help me??
thanks in advance.
You can do the partial update on form component inside your layout unit from your content page.
<p:layoutUnit id="layout1" position="center" >
<h:form id="form>
<ui:insert name="content" ></ui:insert>
</h:form>
</p:layoutUnit>
student.xhtml
<p:commandButton value="buscar" update=":form"/>
<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.
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>
I am using JSF (Mojara) and Primefaces 3.4 in a sample application.
I am applying a layout on a screen where on a header (north) there is one Image link (on click a dialog box gets opened).
northheader.xhtml:
<h:body>
<h:form id="headerForm">
<p:panelGrid id="headerFormPanelGridID" style="align:left;border:0px>
<p:row>
<p:column width="70">
<p:commandLink onclick="dialogWidgetWar.show();" title="SampleImg">
<p:graphicImage value="../sampleimg.jpg" />
</p:commandLink>
</p:column>
</p:row>
</p:panelGrid>
<p:dialog id="idInfo" modal="true" widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400" height="100" resizable="true" >
<h:panelGrid id="sampleId" style="cellpadding" border="0" cellpadding="0" cellspacing="0" width="200">
</h:panelGrid>
</p:dialog>
</h:form>
</h:body>
For layout
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false">
<ui:include src="../northheader.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" resizable="false" closable="false" collapsible="false">
<ui:include src="../left.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" size="200">
<ui:insert name="pageContent"></ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Layout is being displayed properly, but when I Click on "SampleImg" link in northheader.xhtml, its getting opened but closing the dialog is not working, even if I
add one close button inside the dialog box and onclick="dialogWidgetWar.hide()" is not working. I am not even able to select anything.
Can anybody help me out here, where is the problem?
Add appendToBody="true" attribute inside p:dialog
<p:dialog id="idInfo" modal="true" appendToBody="true"
widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400" height="100" resizable="true" >
You're using a p:dialog inside a p:layout. This always led to problems in my past experiences. A solid solution is to place the p:dialog outside of the p:layout. Since you're using ui:define and ui:insert this doesn't seem straight forward, however it's quite simple. Since you can define multiple ui:define elements in one JSF page you can define a "content" and a "dialogs" ui:insert and ui:define.
<p:layout>
<p:layoutUnit ...
<ui:insert name="content"/>
</p:layoutUnit>
</p:layout>
<ui:insert name="dialogs"/>
Try this, this should be work ;
<p:commandLink onclick="PrimeFaces.monitorDownload(hideStatus);" title="SampleImg">
java script ;
<script type="text/javascript">
function showStatus() {
dialogWidgetWar.show();
}
function hideStatus() {
dialogWidgetWar.hide();
}
</script>