I am new To JSf Technology and am creating a system where by am using primefaces. I am using Layoutunit in primefaces and I have left,north and south layoutunit. I want my menus to be on the west layout unit and the content to be in the center unit. I want when a menu is clicked to load corresponding jsf page to the center layout. How can I achieve this? here is my sample code.
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p>Header Here</p>
</p:layoutUnit>
<p:layoutUnit position="west">
<p:menu >
<p:submenu label="Application" icon="ui-icon-refresh">
<p:menuitem value="Page One"
ajax="false"
actionListener="#{bean.setPage('page2')}" />
<p:menuitem value="Page Two"
ajax="false"
actionListener="#{bean.setPage('page1')}"/>
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<p>Content Here</p>
</p:layoutUnit>
</p:layout>
I suggest you to use JSF Templating. An example has been shown is this link
Related
I'm using Full Page Layout control from Prime-faces. I have three layouts which are West, East and Center. West layout and East are collapsible. Also i have a button on West layout which has click event that is supposed to change Center layout content with another x html page. So the problem is, before clicking that button collapsing of the layouts are working well but after clicking the collapsing is not working. My X HTML code has included. Any Ideas of that problem please share me. Thanks.
<p:layout fullPage="true">
<p:layoutUnit header="West" position="west" resizable="true" size="200" collapsible="true" >
<h:form>
<h:commandButton value="button" action="#interfaceAjaxes.hit()}">
<f:param name="name" value="new.xhtml"/>
<f:ajax render=":form:mainContent"/>
</h:commandButton>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" header="East" collapsible="true" size="200">
<h:form>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form id="form" style="background: transparent">
<div>
<h:panelGroup id="mainContent">
<ui:include src="#{interfaceAjaxes.mainContent}"/>
</h:panelGroup>
</div>
</h:form>
</p:layoutUnit>
</p:layout>
I found it, obviously you only render the loaded page, not the other functionalities, so use:
<f:ajax render=":form:mainContent #all"/>
instead of:
<f:ajax render=":form:mainContent"/>
Hope it is useful.
Working with PrimeFaces 4.0, i include a layout in my page, but it doesn't displayed.
<p:layout position="center" id="content" size="20">
center
</p:layoutUnit></p:layout>
But, when i remove Layout tag, it works !!!
<p:layoutUnit position="center" id="content" size="20">
center
</p:layoutUnit>
any idea ?
Your first example is mixed up. Try this:
<p:layout>
<p:layoutUnit position="center" id="content" size="20">
center
</p:layoutUnit>
</p:layout>
In a template file I've a nested ui:fragment statement:
<ui:fragment rendered="#{helperBean.isAdministrationPage()}">
<p:layoutUnit position="west" size="100" resizable="true"
closable="false" collapsible="true" effect="drop"
id="west-navigation">
<h:form>
<p:panelMenu>
<ui:fragment rendered="#{roleCheckerBean.isUserSalesPerson()}">
<p:submenu label="Benutzerverwaltung">
<p:menuitem value="Registrierungsanträge"
url="#{ivy.html.startref('14560484B827F5F3/startAdministrationPageRegistration.ivp')}" />
</p:submenu>
</ui:fragment>
</p:panelMenu>
</h:form>
</p:layoutUnit>
</ui:fragment>
The submenu-element should only be rendered if the user has a certain role. The roleCheckerBean is working (I've exchanged isAdministrationPage() and isUserSalesPerson() with the desired result) but the code above does not render the submenu-entry even if the user has a certain role.
Is it not possible to nest ui:fragment statements or am I missing a point here somewhere?
One problem might be, that p:panelMenu only adds p:submenu if it is a direct child in the component tree (just a guess, I did not check this). Using ui:fragment puts a component in between p:panelMenu and p:submenu in the component tree of the page.
You might try to directly use the rendered attribute of p:submenu (it should have one).
I started working on a large project that uses primefaces, which I am learning now.
I should update one of the pages that contains panels so that they are horizontally collapsible.
So I decided to change the panels for a border layout (since that layout already has the property collapsible)
But when I changed, the data no longer appear. On the server side I can still see the logs with all data that should be displayed.
I wonder what is the difference between the following codes:
1 - With panel
<h:panelGroup id="test" styleClass="test" layout="block">
<p:panel id="configPanel" widgetVar="configPanelVar">
<ui:include src="/config.xhtml" />
</p:panel>
</h:panelGroup>
2 - With layout
<p:layout id="test">
<p:layoutUnit position="center" resizable="true" collapsible="true">
<ui:include src="/config.xhtml" />
</p:layoutUnit>
</p:layout>
config.xhtml just displays some names queried from the db.
Any help will be appreciated!
I figured it out. I was loading the data after
<ui:include src="/config.xhtml" />
So there were no data to be displayed :embarrassed
I try to load an include in a "layoutUnit" via "commandLink" but nothing is displayed but if i refreshes the page all is correct.
the commandLink :
<p:commandLink update=":center" actionListener="#{sidePviewTest.sideBarAction}" value="Center1">
<f:param name="pageViewId" value="center1" />
</p:commandLink>
the layoutUnit :
<p:layoutUnit id="center" position="center">
<ui:include src="#{sidePviewTest.includedPage}" />
</p:layoutUnit>
I do not understand what the problem is.
Any ideas ?
JSF 2.1
PrimeFaces 3.5
I found how to display correctly the content.
I added a panel and I refreshes it instead of the layout.
<p:commandLink update=":myPanel" actionListener="#{sidePviewTest.sideBarAction}" value="Center1">
<f:param name="pageViewId" value="center1" />
</p:commandLink>
<p:layoutUnit id="center" position="center">
<p:panel id="myPanel">
<ui:include src="#{sidePviewTest.includedPage}" />
</p:panel>
</p:layoutUnit>