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
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.
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>
I don't understand how to display in center screen when I click button in my "left" menu.
Now I have that when I click button in my "left" menu, new page opens without "left" menu but I don't want it, I need that "left" menu wasn't disappeared.
Below is my code.
<h:head>
<title>Facelet Title</title>
</h:head>
<frameset rows="65,*" frameborder="0">
<frame scrolling="no" src="header.xhtml"/>
<frameset cols="200,*" frameborder="0">
<frame scrolling="no" src="menu.xhtml"/>
</frameset>
</frameset>
Basically, you need to give the target frame a name and specify it in the target attribute of the <a> element. E.g.
<frame name="center">
with
<a href="page.xhtml" target="center">
But this all is not entirely the right way to template a modern web application. Framesets have many disadvantages as to user experience and SEO valuability. Instead, the include and templating facilities of any server side view technology (like Facelets as you're using) should be used. Framesets should only be used when you have absolutely no server server side view technology at hands (thus, just plain HTML) or when you want to present an external website.
With Facelets, you should instead be using something like this as master template
/WEB-INF/templates/layout.xhtml
<!DOCTYPE html>
<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">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="header"><ui:include src="/WEB-INF/includes/header.xhtml"></div>
<div id="menu"><ui:include src="/WEB-INF/includes/menu.xhtml"></div>
<div id="content"><ui:insert name="content">Default content</ui:insert></div>
</h:body>
</html>
(you can use CSS to position the layout components the way you want, e.g. float:left on #menu and #content)
And this is how the template client (the page which you actually opens by URL) should look like:
/page.xhtml
<ui:composition template="/WEB-INF/templates/layout.xhtml"
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">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
For an open source example of a modern JSF/Facelets web application, check among others the OmniFaces showcase application.
As you're using PrimeFaces, there's another alternative, the <p:layout>. See the "full examples" at its showcase application, for example this one.
See also:
Java EE 6 tutorial - Facelets
Your description is a bit confusing, but I imagine that JSF templating system is what you are after, enabling you to include the same code (a menu for example) on multiple pages. Frames are very outdated and largely not used anymore.
See example at http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/
As a further comment, this issue does not seem to be related to Primefaces (which is a component pack, none of these comments are included in your code).
Here is a simple header, page(s), footer example. You can use one form id for all believe it or not. The header goes in WebContent/templates. The other .xhtml can go in WebContent. If your #ManagedBean String method returns "second", the page second.xhtml will be displayed. Each pages still talks to it's own #ManagedBean.
<body">
<f:view>
<div id="container">
<h:form id="templateForm">
<div id="header">
<ui:include src="header.xhtml" />
</div>
<div id="wrapper">
<div id="firstId">
<ui:insert name="first"></ui:insert>
</div>
<div id="secondId">
<ui:insert name="second"></ui:insert>
</div>
<div id="inputMaskId">
<ui:insert name="inputMask"></ui:insert>
</div>
<div id="valtestId">
<ui:insert name="valtest"></ui:insert>
</div>
</div>
<div id="footer">
<ui:include src="footer.xhtml" />
</div>
</h:form>
</div>
</f:view>
</body>
We can use Layouts instead
include namespace
xmlns:p="http://primefaces.org/ui"
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header=
"Top" resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for North" />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom"
resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for South" />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" header=
"Left" resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for West" />
</p:layoutUnit>
<p:layoutUnit position="east" size="200" header=
"Right" resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for Right" />
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Layout content for Center" />
</p:layoutUnit>
</p:layout>
This will render five panels