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
Related
I am using Primefaces 6.1 and if I do this in a plain xhtml page, it actually works fine. However, my problem is that I need to adopt the corporate look and feel and I am not enough of a CSS guru to know where to start debugging the issue that results from the inherited styles that cause the carousel to render all content in a list on the first "page", clicking on the other tabs shows empty content. I am trying to have each tab contain an iframe so I though that might be the problem. So, I tried simply using a simple example, slightly modified from the primefaces showcase:
<p:carousel numVisible="1" headerText="Tabs" style="margin-bottom:0" >
<p:tab title="Content I">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText
value="content 1" />
</h:panelGrid>
</p:tab>
<p:tab title="Content II">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText value="Content 2" />
</h:panelGrid>
</p:tab>
<p:tab title="Content III">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText value="Content 3" />
</h:panelGrid>
</p:tab>
</p:carousel>
However, the output still gets rendered like this...
Carousel screenshot
How do I get it to use the proper style shown in the Primefaces showcase and/or debug the problematic inherited CSS from the corporate CSS templates? Is there a way to force the standard primefaces function local to my application that would override the inherited issues?
I want to include the content of a primefaces dialog from another page with ui:include. The included page must be set dynamic depending on which button user clicked. I used the very helpful answer from BalusC from JSF dynamic include using Ajax request.
It works very fine as in the example. But problems come if I use a p:dialog instead of h:panelGroup:
<h:form>
<f:ajax render=":dialog">
<p:commandButton value="page1" action="#{productBean.setDialogPage('/page1.xhtml')}" oncomplete="dialogWidget.show()"></p:commandButton>
<p:commandButton value="page2" action="#{productBean.setDialogPage('/page2.xhtml')}" oncomplete="dialogWidget.show()"></p:commandButton>
</f:ajax>
</h:form>
<p:dialog id="dialog" widgetVar="dialogWidget" >
<ui:include src="#{productBean.dialogPage}" />
</p:dialog>
1st problem: Sometimes, I have to click a button several times before dialog appears. It seems not to follow any pattern but is a random effect. Sometimes I need to click twice, sometimes I need to click four times on the button.
2nd problem: Sometimes, the dialog appears not with the selected page but with the old one. When I close dialog and select again, the current page is loaded. It seems to be a random effect, too.
Why do I get this problems with dialog?
hy,
i don't know why you are using this mode to display dynamique dialog,
for me, i like use this mode:
<h:form>
<p:commandButton value="page1"
actionListener="#{productBean.setDialogPage('page1')}" oncomplete="PF('dialogWidget').show()" update="dialog"/>
<p:commandButton value="page2"
actionListener="#{productBean.setDialogPage('page2')}" oncomplete="PF('dialogWidget').show()" update="dialog"/>
</h:form>
<p:dialog id="dialog" widgetVar="dialogWidget">
<ui:include src="/#{productBean.dialogPage}.xhtml" />
</p:dialog>
and:
page1.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:p="http://primefaces.org/ui">
<h:form>
<!-- your code -->
</h:form>
</ui:composition>
it's working fine :)
If you reverse engineer existing tables with Netbeans 8 (generate entities + generate jsf pages), it will do something very similar out of the box; on the list page there is a create-button, which shows a dialog included from another page. You should try it, be sure to select "primefaces" in the last page in the guide for generating jsf pages. They do it like this:
List.xhtml:
<p:commandButton id="createButton" icon="ui-icon-plus" value="#{bundle.Create}" actionListener="#{kornstoranalyseStdController.prepareCreate}" update=":KornstoranalyseStdCreateForm" oncomplete="PF('KornstoranalyseStdCreateDialog').show()" />
Create.xhtml is included with <ui:include src="Create.xhtml"/> below </h:form> in the list-page.
Create.xhtml starts with:
<ui:composition>
<p:dialog id="KornstoranalyseStdCreateDlg" width="500px" widgetVar="KornstoranalyseStdCreateDialog" modal="true" resizable="true" showEffect="clip" appendTo="#(body)" header="#{bundle.CreateKornstoranalyseStdTitle}" hideEffect="clip" position="top">
<h:form id="KornstoranalyseStdCreateForm">
Hopefully you can tweak to suit your needs.
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.
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'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.