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.
Related
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
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>
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'm having a issue with JSF / Primefaces to display the popup.
As a background, I'm using JSF templates to generate my pages:
The inline works to show the datatable but when I click the button to show the dialog nothing happens. I don't see any error in the logs.
<h:body>
<p:dataTable id="lstUsers" var="u" value="#{userController.userList}" selectionMode="single"
selection="#{userController.selectedUser}" rowKey="#{u.login}" paginator="true" rows="10">
<p:column headerText="Username">
<h:outputLabel value="#{u.login}"></h:outputLabel>
</p:column>
<p:column headerText="Role" rowspan="2">
<h:outputLabel value="#{u.role}"></h:outputLabel>
</p:column>
<f:facet name="footer">
<p:commandButton id="bttAdd" type="button" value="Add" update=":contentView:idPanelPop" oncomplete="userDialog.show()" ></p:commandButton>
<p:commandButton id="bttEdit" value="Edit"></p:commandButton>
<p:commandButton id="bttRemove" value="Remove"></p:commandButton>
</f:facet>
</p:dataTable>
<p:dialog id='userDialog' header="User Details" widgetVar="userDialog"
resizable="false" width="200px" height="200px" showEffect="clip" hideEffect="fold">
<h:panelGrid id="idPanelPop" columns="2">
<h:outputLabel id='dOutUser' value="Username"></h:outputLabel>
<h:outputLabel id='dOutUserValue' value="#{userController.selectedUser.login}"></h:outputLabel>
<h:outputLabel id='dOutRole' value="Role"></h:outputLabel>
<h:outputLabel id='dOutRoleValue' value="#{userController.selectedUser.role}"></h:outputLabel>
</h:panelGrid>
</p:dialog>
</h:body>
The above code is used as part of
<ui:composition template="./maintemplate.xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define id="contentViewIndex" name="content">
<ui:include src="#{navigationController.currentPage}"></ui:include>
</ui:define>
</ui:composition>
My template page contains the following:
<p:layoutUnit position="center">
<h:form id="contentView">
<ui:insert name="content">
Default Content
</ui:insert>
</h:form>
</p:layoutUnit>
The navigationController.current value changes as per menu click to navigates across the pages.
I'm following the oficial primafaces showcase PrimeFaces datatable
I'm current setup is Netbeans 7.3 RC1 / Apache 7.0.34.0 / Mojarra 2.1.13
I'll appreacite if someone could point me to the right direction to solve this :)
EDIT: After taking account the answer inline nothing works.
Maybe I should had checked first the brower console, and in this case it's weird cause it complains that it does not recognize the widgedVar.
I already tried to put the Dialog outsite the form and the result is the same error. :/
Your bttAdd button is ordinary push button (you set it explicitly with type="button" attribute). This means it just do some JavaScript, without any AJAX requests. To do an AJAX request, and update your panel remove type="button" and try than.
I would change 2 things (first maybe not important):
Add 2 forms: one with data table inside and another inside dialog
change widgetVar="userDialog" to something unique. widgetVar="userDialogWidget"
Found the issue ...
After lots of tests and digging and taking into account the previous answers. The problem was two things:
1st. The diagonal height and width cannot have px in it.
2nd. And as per previous answers, it has to be outside as
here explained.
The p:dialog cannot have px in the sizes.