Using primefaces version 6.0, I have my form (inputText, dataTable, selectOnemenu, etc) and it works correctly, but at the moment of adding a p: inputNumber it stops working all Primefaces, (inputText, dataTable, selectOnemenu, etc) To run ... in the registry does not appear any error
<p:panelGrid columns="2" layout="grid" style="border: none" columnClasses="ui-grid-col-6,ui-grid-col-6">
<p:outputLabel value="Tamaño" style="width: 100%"></p:outputLabel>
<p:inputNumber value="#{reporteadorBean.index2}" maxlength="15" >
</p:inputNumber>
<p:outputLabel value="Tipo de dato" style="width: 100%"></p:outputLabel>
</p:panelGrid>
According to primefaces you should use:
xmlns:pe="http://primefaces.org/ui/extensions">
and dependencies
Related
Primefaces 7 on JBoss 7.3
I have an application which allows users to click on entries in a datatable to display details of the entity in a dialog box:
<p:column headerText="XTAMessageID" id="msgIdCol" width="350" sortBy="#{nachricht.messageId}" styleClass="column">
<p:commandLink value="#{nachricht.messageId}" id="transportReportLink"
oncomplete="PF('transportDialogDC').show()"
action="#{detailController.showTransportReport(nachricht)}"
update="#form:transportDialogDC"></p:commandLink>
<p:tooltip for="transportReportLink" value="Transport Report anzeigen" position="top"></p:tooltip>
</p:column>
<p:dialog id="transportDialogDC" widgetVar="transportDialogDC" styleClass="messageDialog">
<p:growl life="10000"></p:growl>
<p>MessageId: #{detailController.messagedId} von: #{detailController.absender} an: #{detailController.empfaenger}</p>
<p:panelGrid columns="2" style="border-width:0px !important">
<p:panel style="padding: 0px; margin: 0px; border-width:0px !important">
<h4>Transport Report</h4>
<h:inputTextarea value="#{detailController.transportReportXML}" readonly="true" styleClass="messageDialogTextArea" cols="100" rows="25"/>
</p:panel>
…..
In Chrome this works, however in Firefox (98) sometimes the dialog is displayed empty without calling the detailController.showTransportReport(nachricht) method. Nothing happens in the backend....
This behavior persists for a few trials. After reloading the pages the dialog works again for a random number of times.
Any ideas what might cause this?
Thanks,
Hans
I have a problem with primefaces commandButton and fileupload.
I need to enable a commandButton when a file is select (but not upload) by the user through primefaces fileupload but i don't know how to detect that the file has been selected.
My code is:
<h:form enctype="multipart/form-data" id="formCrearPanel2">
<p:panelGrid columns="2" style="width: 100%">
<h:outputText value="#{messages['listado.LOGO']}" />
<p:fileUpload id="fileUploadCrear" widgetVar="fileUploadCrearWV"
fileUploadListener="#{listadoPlataformas.subidaImagenCrear}"
label="#{messages['comun.SELECCIONAR']}" sizeLimit="1048576" fileLimit="1"
invalidSizeMessage="#{messages['comun.IMAGE.SIZE']}"
update="formularioPrincipal:listadoPlataformas formularioPrincipal:growl"
fileLimitMessage="#{messages['comun.IMAGE.FILE_LIMIT']}" previewWidth="160">
</p:fileUpload>
</p:panelGrid>
<p:panelGrid columns="3" style="width:100%; text-align:center;">
<p:commandButton value="#{messages['comun.ACEPTAR']}"
id="crearPlataformaAceptar_2" widgetVar="crearPlataformaAceptarWV_2" ajax="true" onclick="PF('fileUploadCrearWV').upload();"
update="formularioPrincipal:listadoPlataformas formularioPrincipal:growl"
actionListener="#{listadoPlataformas.nothing}" disabled="true"/>
</p:panelGrid>
</h:form>
I use
Primefaces 6.2 - JDK 11 - JSF 2.2.19
I have a p:dialog. My intention is to create a list using p:datagrid and when user clicks an item this dialog will open and show its details. Please consider the example of p:datagrid in the showcase. However, currently it works fine in IE but not in Chrome. If I define "modal=true" then the browser turns black but the dialog doesn't show up.
<p:commandButton update=":form:sharePanel" value="Share" style="font-size: 10px" oncomplete="PF('dlg').show()" rendered="false">
<f:setPropertyActionListener target="#{shareController.current}" value="#{status}" />
</p:commandButton>
<p:dialog widgetVar="dlg" resizable="false" id="sharePanel" styleClass="no-border" modal="true">
<h:outputText value="#{shareController.current.url.url}" />
<h:panelGrid columns="3">
<p:dataGrid value="#{shareController.current.url.NLinkList}" var="nshare" columns="1" rendered="#{shareController.current.url.NLinkList.size() > 0}">
<h:panelGroup styleClass="tag noun">
<h:outputText value="#{nshare.noun}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.VLinkList}" var="vshare" columns="1" rendered="#{shareController.current.url.VLinkList.size() > 0}">
<h:panelGroup styleClass="tag verb">
<h:outputText value="#{vshare.verb}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.PLinkList}" var="pshare" columns="1" rendered="#{shareController.current.url.PLinkList.size() > 0}">
<h:panelGroup styleClass="tag prep">
<h:outputText value="#{pshare.prep}" />
</h:panelGroup>
</p:dataGrid>
</h:panelGrid>
</p:dialog>
What is wrong here?
If you are using Primefaces versions before 4.0 use dlg.show() instead of PF('dlg').show().
And try appending the dialog in body using attribute appendToBody="true", because if the Facelet is more complex and if you are using Layouts the dialog won't fire ind some browsers only model will appear.
<p:dialog appendToBody="true" >
I do not know if this is possible using just primefaces and JSF but I have a panel, which is collapsed on View Entry. I can open the Panel which has a checkbox that triggers an update of the Panel.
The problem is that when the panel is updated by Ajax, the Panel is collapsed again. But I want to retain the current open status of the Panel. It should no close on update. Is this possible?
I use PF 3.2 and JSF2.1
<p:fieldset style="width:200px;height:300px;overflow:auto;">
<h:outputLabel value="Available Applications"
style="font-weight: bold;font-size: 14px;" />
<br />
<br />
<h:panelGroup>
<ui:repeat var="category"
value="#{epsEditController.subscriptionCategoryVOs}">
<p:panel header="#{category.applicationCategory.name}"
id="panell" toggleable="true" closable="false" toggleSpeed="500"
collapsed="true"
widgetVar="panel_#{category.applicationCategory.name}">
<h:panelGrid columns="2" border="0">
<h:outputLabel value="Select all"
style="font-weight: bold;float:left;" />
<p:selectBooleanCheckbox value="#{category.allSelected}">
<p:ajax event="change"
listener="#{epsEditController.selectionChanged(category)}"
update="panell" />
</p:selectBooleanCheckbox>
</h:panelGrid>
<ui:repeat var="subcat"
value="#{category.applicationSubcategoryVOs}">
<p:selectBooleanCheckbox value="#{subcat.selected}"
title="#{subcat.applicationSubcategory.name}"
itemLabel="#{subcat.applicationSubcategory.name}" />
</ui:repeat>
</p:panel>
</ui:repeat>
</h:panelGroup>
</p:fieldset>
The reason the panel was collapsed after each update is caused by using a static collapsed="true" on the panel. This can be fixed in one of two ways
Just updating the content of the panel and not the panel
Keeping track of the state of collapsed state of the panel via ajax and use that state as the value of the collapsedattribute
Updating the content
By putting the form within the panel and only updating that form you effectively update the content instead of the panel. This makes sure that only the form is refreshed and the panel state is kept intact.
<p:panel header="#{category.applicationCategory.name}" id="panell"
toggleable="true" closable="false" toggleSpeed="500"
collapsed="true"
widgetVar="panel_#{category.applicationCategory.name}">
<h:form id="epsAppForm">
<h:panelGrid columns="2" border="0">
<h:outputLabel value="Select all"
style="font-weight: bold;float:left;" />
<p:selectBooleanCheckbox value="#{category.allSelected}">
<p:ajax event="change"
listener="#{epsEditController.selectionChanged(category)}"
update="#form" />
</p:selectBooleanCheckbox>
</h:panelGrid>
........
</h:form>
</p:panel>
Using EL instead of a fixed value
You can put EL in the collapsed attribute instead of the fixed collapsed="true". Something like
collapsed="#{myBean.toggleStates[category.applicationCategory]}"
You can then keep track of the state of the pannel via ajax calls
<p:ajax event="toggle" listener="#{myBean.toggleState(category.applicationCategory)" />
...'myBean' code:
Map<ApplicationCategory, boolean> toggleStates = new HashMap<>();
... prepopulate toggleStates on #init or something
public void toggleState(ApplicationCategory myCategory) {
toggleStates.put(myCategory, !(toggleStates.get(myCategory));
}
How can I set colspan and rowspan in JSF <h:panelGrid>?
None of both is possible with the standard JSF implementation. There are 3 ways to fix this:
Write plain HTML yourself. A <h:panelGrid> basically renders a HTML <table>. Do the same.
Create a custom HTML renderer which supports this. It'll however be a lot of sweat and pain.
Use a 3rd party component library which supports this.
Tomahawk has a <t:panelGroup> component which supports colspan in <h:panelGrid>.
RichFaces (3.x only) has a <rich:column> component which supports both colspan and rowspan in <rich:dataTable>.
PrimeFaces has a <p:row> next to <p:column> which is supported in both <p:panelGrid> and <p:dataTable> (also with <p:columnGroup>).
Since 24 januari 2012 Primefaces also has the possibility to use colspan and rowspan in the panelGrid component of Primefaces. See:
http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml
Use: rich:column colspan="2" of RichFaces
<rich:column colspan="2">
<h:outputText value="Ingrese el texto de la imagen" />
</rich:column>
Assume
a message resource file with two entries:
key.row=</td></tr><tr><td key.gt=>
row.xhtml
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core" >
<c:forEach begin="0" end="#{colspan-2}">
<h:panelGroup />
</c:forEach>
<h:panelGroup>
<h:outputText value="#{i18n['key.row']}" escape="false" />
<h:outputText value=" colspan='#{colspan}' #{cellAttributes}" />
<h:outputText value="#{i18n['key.gt']}" escape="false" />
<ui:insert />
</h:panelGroup>
</ui:composition>
then, for example
<h:panelGrid columns="3">
<h:outputText value="r1-c1" />
<h:outputText value="r1-c2" />
<h:outputText value="r1-c3" />
<ui:decorate template="/row.xhtml">
<ui:param name="colspan" value="3" />
<ui:param name="cellAttributes" value=" align='center'" />
<div>Hello!!!!!</div>
</ui:decorate>
Prints a table with 3 rows:
r1-c1, r1-c2 , r1-c3
3 blank cells
a cell aligned center, having colspan 3 and containing a hello div.
I agree with BalusC's answer and want to add, that the Primefaces JSF2 component library also offers this functionality if you use its p:dataTable component. It is called grouping there.
There is no way to define column span in panel grid but if used wisely you can make it happen by just plain tag only. One example I would like to show you.
<h:panelGrid columns="1" >
<h:panelGrid columns="2">
<h:commandButton image="resources/images/Regular5.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=REGULAR">
</h:commandButton>
<h:commandButton id="button2" image="resources/images/Casual2.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=CASUAL">
</h:commandButton>
</h:panelGrid>
<h:panelGrid columns="2">
<h:commandButton id="button3" image="resources/images/Instant2.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=INSTANT">
</h:commandButton>
<h:commandButton id="button4" image="resources/images/Outstation6.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=OUTSTATION">
</h:commandButton>
</h:panelGrid>
<h:commandButton id="button5" image="resources/images/ShareMyCar.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=OUTSTATION">
</h:commandButton>
Please note that button5 spans two columns given the size it requires.