I'm developing my website and I use PrimeFaces component.
But when I validation Calendar I can't make the calendar highlight.
Here is my Code. Could anybody help me.
Thanks in advance :)
<h:form id="addEditNewsForm">
<pe:remoteCommand name="#{cc.attrs.reloadFuncName}"
actionListener="#{logic.startAddEditNews}" process="#this"
update="#form" oncomplete="#{cc.attrs.refreshCallback}">
<pe:methodSignature parameters="java.lang.String,java.lang.String" />
<pe:methodParam name="idNews" />
<pe:methodParam name="action" />
</pe:remoteCommand>
<p:messages severity="error" id="newsMessages" showDetail="false"
autoUpdate="true" />
<p:panelGrid styleClass="newsDocumentPanel">
<p:row>
<p:column styleClass="width30">
<h:outputText
value="#{ivy.cms.co('/ch/soreco/standard/xportal/Web/Components/News/Label/dateOfPublic')}" />
</p:column>
<p:column>
<p:calendar id="publicDate" pattern="#{swissDateFormat}"
value="#{data.news.publicationDate}" effect="slideDown"
navigator="true">
<p:ajax event="dateSelect" update="newsMessages"
listener="#{logic.dateSelect}" />
</p:calendar>
</p:column>
</p:row>
</p:panelGrid>
<p:commandButton value="Save" actionListener="#{logic.save}"></p:commandButton>
</h:form>
Related
I have the following xhtml:
<f:metadata>
<f:viewParam name="livroId" value="#{livroBean.livro.id}" />
<f:viewAction action="#{livroBean.carregarLivroPelaId}"
if="#{param.livroId != null}" />
</f:metadata>
<ui:define name="titulo">
<p:outputPanel>Novo Livro</p:outputPanel>
</ui:define>
<ui:define name="conteudo">
<h:form>
<p:messages id="messages" />
<p:fieldset legend="Dados do Livro">
<p:panelGrid columns="2">
<p:outputLabel value="Titulo:" for="titulo" />
<p:inputText id="titulo" value="#{livroBean.livro.titulo}"
required="true" requiredMessage="Título obrigatório"
validatorMessage="Título não pode ser superior a 40">
<f:validateLength maximum="40" />
<f:ajax event="blur" render="messages" />
</p:inputText>
<p:outputLabel value="ISBN:" for="isbn" />
<p:inputMask id="isbn" value="#{livroBean.livro.isbn}"
validator="#{livroBean.comecaComDigitoUm}"
mask="999-9-99-999999-9" />
<p:outputLabel value="Preço:" for="preco" />
<p:inputText id="preco" value="#{livroBean.livro.preco}" />
<p:outputLabel value="Data de Lançamento:" for="dataLancamento" />
<p:calendar id="dataLancamento"
value="#{livroBean.livro.dataLancamento.time}"
pattern="dd/MM/yyyy" timeZone="America/Sao_Paulo" mask="true" />
</p:panelGrid>
</p:fieldset>
<br />
<p:fieldset legend="Dados do Autor">
<p:panelGrid columns="4">
<p:outputLabel value="Selecione Autor:" for="autor" />
<p:selectOneMenu value="#{livroBean.autorId}" id="autor">
<f:selectItems value="#{livroBean.autores}" var="autor"
itemLabel="#{autor.nome}" itemValue="#{autor.id}" />
</p:selectOneMenu>
<p:commandButton value="Gravar Autor"
action="#{livroBean.gravarAutor}" process="#this autor"
update="tabelaAutores" />
<p:commandLink value="ou cadastrar novo autor"
action="#{livroBean.formAutor}" immediate="true" update="#all" />
</p:panelGrid>
<p:dataTable value="#{livroBean.autoresDoLivro}" var="autor"
id="tabelaAutores" emptyMessage="Nenhum autor">
<p:column>
<h:outputText value="#{autor.nome}" />
</p:column>
<p:column>
<p:commandLink value="X"
action="#{livroBean.removerAutorDoLivro(autor)}"
update="tabelaAutores" process="#this" />
</p:column>
</p:dataTable>
</p:fieldset>
<br />
<h:panelGrid style="margin: 0 auto">
<p:commandButton value="Gravar" action="#{livroBean.gravar}"
process="#form" update="#form :formTabelaLivros:tabelaLivros" />
</h:panelGrid>
</h:form>
<br />
<h:form id="formTabelaLivros">
<p:dataTable value="#{livroBean.livros}" var="livro"
id="tabelaLivros" paginator="true" rows="5">
<f:facet name="header">Livros</f:facet>
<p:column headerText="Título" sortBy="#{livro.titulo}"
filterBy="#{livro.titulo}" filterMatchMode="startsWith">
<h:outputText value="#{livro.titulo}" />
</p:column>
<p:column headerText="ISBN" sortBy="#{livro.isbn}">
<h:outputText value="#{livro.isbn}" />
</p:column>
<p:column headerText="Preço" sortBy="#{livro.preco}">
<h:outputText value="#{livro.preco}">
<f:convertNumber type="currency" pattern="R$ #0.00"
currencySymbol="R$" locale="pt_BR" />
</h:outputText>
</p:column>
<p:column headerText="Data" sortBy="#{livro.dataLancamento.time}">
<h:outputText value="#{livro.dataLancamento.time}">
<f:convertDateTime pattern="dd/MM/yyyy"
timeZone="America/Sao_Paulo" />
</h:outputText>
</p:column>
<p:column headerText="Alterar">
<h:commandLink value="Alterar" action="#{livroBean.carregar(livro)}" />
</p:column>
<p:column headerText="Remover">
<h:commandLink value="Remover" action="#{livroBean.remover(livro)}" />
</p:column>
</p:dataTable>
</h:form>
</ui:define>
The h:commandLink "Remover" is actually removing the object from my database, but is not updating the DataTable. I've already set process="#form" update="#form", but it doesn't help.
It was actually working fine before, and it suddenly stopped (I didn't modify anything related to my bean).
EDIT:
I changed it to a CommandButton, as below:
<p:column headerText="Remover">
<p:commandButton icon="fa fa-fw fa-remove" actionListener="#{livroBean.remover(livro)}" process="#form" update="#form" />
</p:column>
But still no results... The button works, it removes the entry from my database, but it does not updates the datatable. Tried with action= as well.
I have a p:datascroller configured to display a list of entities and lazy loading them upon clicking the more button.
<h:form id="investigationOperationsForm">
<p:dataScroller
value="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations}"
var="investigationOperation" chunkSize="9" lazy="true"
rowIndexVar="test">
<f:facet name="header">
Scroll down to load investigations
</f:facet>
<h:panelGrid columns="2" style="width:100%"
columnClasses="logo,detail">
<p:commandLink oncomplete="PF('investigationDialogW').show()"
update="investigationEditorForm" immediate="true">
<f:setPropertyActionListener value="#{investigationOperation}"
target="#{investigationManagerBackingBean.selection}" />
<p:graphicImage alt="Investigation Operation"
url="/images/common/investigation-operation.png" />
</p:commandLink>
<!-- h:outputText value="#{investigationOperation.name}" /-->
<p:outputPanel id="pnl">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Name:" />
<h:outputText value="#{investigationOperation.name}"
style="font-weight: bold" />
<h:outputText value="Description:" />
<h:outputText value="#{investigationOperation.shortDescription}"
style="font-weight: bold" />
</h:panelGrid>
<p:draggable for="pnl" />
</p:outputPanel>
</h:panelGrid>
<f:facet name="loader">
<p:outputPanel
visible="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}"
rendered="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}">
<p:commandLink value="More" />
</p:outputPanel>
</f:facet>
</p:dataScroller>
</h:form>
In addition, I have a dialog that pops up when the p:commandLink oncomplete method is executed where I can update the value of the current selection and persist the changes.
<p:dialog id="investigationDialog"
header="#{msg['inv-manager.invDialog.header.title']}"
widgetVar="investigationDialogW" minWidth="400" minHeight="400"
resizable="false" position="center center" modal="true">
<p:panel id="investigationEditorPanel">
<h:form id="investigationEditorForm">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="name"
value="#{msg['inv-manager.invDialog.nameFieldLabel']}" />
<p:inplace id="nameInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.name}"
id="name" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.nameFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="shortDescription"
value="#{msg['inv-manager.invDialog.shortDescriptionFieldLabel']}" />
<p:inplace id="shortDescriptionInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.shortDescription}"
id="shortDescription" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.shortDescriptionFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="description"
value="#{msg['inv-manager.invDialog.descriptionFieldLabel']}" />
<p:inputTextarea id="description" required="false"
label="#{msg['inv-manager.invDialog.descriptionFieldInputLabel']}"
immediate="true"
value="#{investigationManagerBackingBean.selection.description}" />
<p:commandButton id="okButton"
value="#{msg['inv-manager.invDialog.okButton']}" type="submit"
partialSubmit="true" process="investigationEditorForm"
action="#{investigationManagerBackingBean.createOrUpdate()}"
onclick="dlg.hide();" />
</h:panelGrid>
</h:form>
</p:panel>
</p:dialog>
The backing bean is configured to be #ViewScoped and everything works as defined. However, upon update the values of the p:datascroller are reset and the load method of the lazy loading model is executed and the datascroller is repopulated with new values from the database.
I have no reference to the datascroller or its containing form in the p:dialog and am wondering why the datascroller is being updated automagically? What am I missing in the equation. Have I overlooked something or something specific to the p:datascroller model that I need to consider when following this approach?
Look forward to the expertise of the community in resolving this issue.
Many thanks in advance :)
I have the following structure in my application:
<h:outputLabel value="Regiões :" />
<p:autoComplete multiple="true" value="#{investimento.regioesSelecionadas}"
completeMethod="#{investimento.completaRegiao}"
var="reg" itemLabel="#{reg.label}" itemValue="#{reg}"
converter="entityConverter" forceSelection="true">
<p:column>
<h:outputText value="#{reg.label}" />
</p:column>
<p:ajax event="itemSelect" update="regiaoCol" />
<p:ajax event="itemUnselect" update="regiaoCol" />
<p:ajax event="itemUnselect" listener="#{investimento.tiraUmaRegiao}"/>
</p:autoComplete>
<h:outputText />
<h:panelGroup id="regiaoCol">
<c:forEach items="#{investimento.regioesSelecionadas}" var="regSel" rendered="#{!investimento.regioesSelecionadas.isEmpty()}">
<h:panelGrid columns="2">
<h:outputLabel value="Região #{regSel.label} - Estados:" />
<p:autoComplete multiple="true" value="#{investimento.estadosSelecionados}"
var="est" itemLabel="#{est.label}" itemValue="#{est}"
completeMethod="#{investimento.completaEstado}"
converter="entityConverter" forceSelection="true" cash="true">
<f:attribute name="regPar" value="#{regSel}" />
<p:column>
<h:outputText value="#{est.label}" />
</p:column>
<p:ajax event="itemSelect" update="#{investimento.idComposta(est, regSel)}" />
<p:ajax event="itemUnselect" update="regiaoCol" />
<p:ajax event="itemUnselect" update="#{investimento.idComposta(est, regSel)}"/>
<p:ajax event="itemUnselect" update="#{investimento.idComposta(est, regSel)}" listener="#{investimento.tiraUmEstado}"/>
</p:autoComplete>
<h:outputLabel />
<h:panelGroup id="#{investimento.idComposta(est, regSel)}">
<c:forEach items="#{investimento.estadosSelecionados}" var="estSel">
<h:panelGrid columns="2">
<h:outputLabel value="Estado #{estSel.label} - Municipios: #{investimento.idComposta(est, regSel)}" />
<p:autoComplete multiple="true" value="#{investimento.municipiosSelecionados}"
var="mun" itemLabel="#{mun.label}" itemValue="#{mun}"
completeMethod="#{investimento.completaMunicipio}" maxResults="8"
converter="entityConverter" forceSelection="true" cash="true">
<f:attribute name="estPar" value="#{estSel}" />
<p:column>
<h:outputText value="#{mun.label}" />
</p:column>
</p:autoComplete>
</h:panelGrid>
</c:forEach>
</h:panelGroup>
</h:panelGrid>
</c:forEach>
</h:panelGroup>
So, whenever I pick a "Região" will apear in "regiaoCol" new options for the user to select. However there's an issue: when I remove a "Região", add it again and try to remove it once more, it causes the following error:
> Grave: Error Rendering View[/InsI.xhtml]
javax.faces.FacesException: Cannot find component with expression "munEst2Reg3" referenced from "form:j_idt190".
at org.primefaces.expression.SearchExpressionFacade.resolveComponentInternal(SearchExpressionFacade.java:422)
at org.primefaces.expression.SearchExpressionFacade.resolveComponentForClient(SearchExpressionFacade.java:200)
at org.primefaces.expression.SearchExpressionFacade.resolveComponentsForClient(SearchExpressionFacade.java:147)
at org.primefaces.util.AjaxRequestBuilder.addExpressions(AjaxRequestBuilder.java:92)
at org.primefaces.util.AjaxRequestBuilder.update(AjaxRequestBuilder.java:85)
at org.primefaces.behavior.ajax.AjaxBehaviorRenderer.getScript(AjaxBehaviorRenderer.java:80)
at javax.faces.component.behavior.ClientBehaviorBase.getScript(ClientBehaviorBase.java:103)
at org.primefaces.renderkit.CoreRenderer.encodeClientBehaviors(CoreRenderer.java:458)
Which, I presume, is caused by the browser looking for that reference, in this case "munEst2Reg3" and it not being there. However: why it throws the error? How is it different from removing the "Região" the first time? How to I solve the issue? Should I submit the page after each unselection? (which wouldn't be the most user friendly option)
Tiny's response put me on the right track and, after some debuging I found somethings:
As all the instances are altering the same list is paramount that all of them have a event or one will delete the inputs of the other;
You have also to take care on how the dataTable behaves and guarantee that he only gets the values that you are interested in;
How my code ended up being:
<h:outputLabel value="Regiões :" />
<p:autoComplete multiple="true" value="#{investimento.regioesSelecionadas}"
completeMethod="#{investimento.completaRegiao}"
var="reg" itemLabel="#{reg.label}" itemValue="#{reg}"
converter="entityConverter" forceSelection="true">
<p:column>
<h:outputText value="#{reg.label}" />
</p:column>
<p:ajax event="itemSelect" update="regiaoCol" />
<p:ajax event="itemUnselect" update="regiaoCol" listener="#{investimento.tiraUmaRegiao}"/>
</p:autoComplete>
<h:outputText />
<h:panelGroup id="regiaoCol">
<p:dataTable value="#{investimento.regioesSelecionadas}" var="regSel" rendered="#{investimento.regioesSelecionadas.isEmpty() == false}">
<p:column>
<h:outputLabel value="Região #{regSel.label} - Estados:" />
</p:column>
<p:column>
<p:autoComplete multiple="true" value="#{investimento.estadosSelecionados}"
var="est" itemLabel="#{est.label}" itemValue="#{est}"
completeMethod="#{investimento.completaEstado}"
converter="entityConverter" forceSelection="true">
<f:attribute name="regPar" value="#{regSel}" />
<p:column>
<h:outputText value="#{est.label}" />
</p:column>
<p:ajax event="itemSelect" update="#{investimento.idComposta()}" >
<f:attribute name="regiaoPar" value="#{regSel}" />
</p:ajax>
<p:ajax event="itemUnselect" update="#{investimento.idComposta()}" listener="#{investimento.tiraUmEstado}">
<f:attribute name="regiaoPar" value="#{regSel}" />
</p:ajax>
</p:autoComplete>
</p:column>
<p:column>
<h:panelGroup id="#{investimento.idComposta()}">
<f:attribute name="regiaoPar" value="#{regSel}" />
<p:dataTable value="#{investimento.meusEstSel()}" var="estSel" rendered="#{investimento.meusEstSel().isEmpty() == false}">
<f:attribute name="regiaoPar" value="#{regSel}" />
<p:column>
<h:outputLabel value="Estado #{estSel.label} - Municipios:" />
</p:column>
<p:column>
<p:autoComplete multiple="true" value="#{investimento.municipiosSelecionados}"
var="mun" itemLabel="#{mun.label}" itemValue="#{mun}"
completeMethod="#{investimento.completaMunicipio}" maxResults="8"
converter="entityConverter" forceSelection="true">
<f:attribute name="estPar" value="#{estSel}" />
<p:column>
<h:outputText value="#{mun.label}" />
</p:column>
<p:ajax event="itemSelect" />
<p:ajax event="itemUnselect" />
</p:autoComplete>
</p:column>
</p:dataTable>
</h:panelGroup>
</p:column>
</p:dataTable>
</h:panelGroup>
I'm working with a <p:overlayPanel> that includes a couple of <p:selectOneMenu>s, as well as several other components. When the <p:selectOneMenu>s are opened, some of the fields fall outside of the <p:overlayPanel>, and clicking on them causes the panel to close. (See image below).
.
.
.
One solution would be to modify the <p:overlayPanel> as follows:
dismissable="false"
showCloseIcon="true"
Another would be to modify the <p:selectOneMenu>:
height="50"
I'm looking for some options for solutions that are as simple as possible and preferably don't involve a change to the UI (the above solutions both change the UI). Is there a way to keep the <p:overlayPanel> open when a click outside of it falls within one of its <p:selectMenu>s?
More Complete Code
<p:overlayPanel styleClass="col-settings-panel"
id="colSettingsPanel"
for="columnSettingsBtn"
hideEffect="fade"
widgetVar="wvcolSettingsPanel"
rendered="#{empty rendered ? 'true' : rendered}" >
<p:pickList id="pickList"
value="#{fileSearchPersonalizationBean.columns}"
var="column"
showSourceFilter="true"
itemLabel="#{column}"
itemValue="#{column}"
itemDisabled="#{column eq 'Ref No'}">
<p:ajax event="transfer" listener="#{fileSearchPersonalizationBean.onTransfer}" update="pickList availableCount selectedCount selectSortBy" />
<f:facet name="sourceCaption">
<h:outputText value="Available Columns ("/>
<h:outputText id="availableCount" value="#{fileSearchPersonalizationBean.sourceCount}"/>
<h:outputText value=")"/>
</f:facet>
<f:facet name="targetCaption">
<h:outputText value="Selected Columns ("/>
<h:outputText id="selectedCount" value="#{fileSearchPersonalizationBean.targetCount}"/>
<h:outputText value=")"/>
</f:facet>
</p:pickList>
<p:panelGrid columns="1">
<p:outputPanel styleClass="col-settings-panel-option">
<h:outputLabel value="Sort By: " />
<p:selectOneMenu id="selectSortBy"
value="#{fileSearchPersonalizationBean.sortBy}" >
<p:ajax listener="#{fileSearchPersonalizationBean.sortByChanged}" />
<f:selectItems id="sortByList" value="#{fileSearchPersonalizationBean.columns.target}" />
</p:selectOneMenu>
</p:outputPanel>
<p:outputPanel styleClass="col-settings-panel-option">
<h:outputLabel value="Items per Page:"/>
<p:selectOneMenu id="selectRows" value="#{fileSearchPersonalizationBean.sRows}" >
<f:selectItem itemLabel="10" itemValue="10" />
<f:selectItem itemLabel="25" itemValue="25" />
<f:selectItem itemLabel="50" itemValue="50" />
<f:selectItem itemLabel="100" itemValue="100" />
</p:selectOneMenu>
</p:outputPanel>
</p:panelGrid>
<p:panelGrid styleClass="toolbar" columns="2">
<p:outputPanel>
<p:commandButton styleClass="btn-secondary"
id="loadDefaults"
value="Reset Defaults"
update="selectSortBy pickList selectRows"
actionListener="#{fileSearchPersonalizationBean.loadDefaultVO}" />
</p:outputPanel>
<p:outputPanel styleClass="toolbar-right">
<p:commandButton styleClass="btn-secondary"
id="columnClose"
value="Cancel"
actionListener="#{fileSearchPersonalizationBean.panelCancel}"
immediate="false">
<f:attribute name="panelId" value="#{formId}:colSettingsPanel" />
</p:commandButton>
<p:commandButton styleClass="btn-primary"
id="columnSubmit"
value="Save & Apply"
actionListener="#{fileSearchPersonalizationBean.panelSave}"
oncomplete="refreshSearchResults();" >
<f:attribute name="panelId" value="#{formId}:colSettingsPanel" />
</p:commandButton>
</p:outputPanel>
</p:panelGrid>
</p:overlayPanel>`
Please help me to find a example to update p:inputtext with data stored in a bean which is set(solved already) by selecting a row of a datatable of a p:dialog. I have succeeded updating outputtext in the same manner.
I am using (learning) netbeans 7.2 primefaces 3.2, glassfish 3.1
thansk for all your help
rs_ncs
Look at primefaces showcase and the user guide, you'll find everything you need; in detail search for rowSelect event for the datatable component. Good luck =)
If you would like to update a component on select of a row from a datatable, then you can use the update attribute of a <p:ajax> which is listening on rowselect event. Something like this:
<p:ajax event="rowSelect" update=":xx:xx" />
As Suggested by BalusC the code <p:ajax event="rowSelect" update=":xx:xx" /> should work....
Here is an example of updating both inputtext and outputtext .
<h:form>
<p:dataTable id="usertable" var="user" value="#{userManageBean.userList}"
rowKey="#{user.U_ID}" selection="#{userManageBean.selectedUser}"
selectionMode="single" paginator="true" rows="18" >
<p:ajax event="rowSelect" update=":useredit:edituser" />
<p:ajax event="rowSelect" update=":viewuser:displayuser" />
<p:column headerText="User Name">
<h:outputText value="#{user.username}" />
</p:column>
<p:column headerText="FName">
<h:outputText value="#{user.firstname}" />
</p:column>
<p:column headerText="LName">
<h:outputText value="#{user.lastname}" />
</p:column>
</p:dataTable>
</h:form>
<p:dialog id="userview" header="View User" widgetVar="dlg2" >
<h:form id="viewuser">
<h:panelGrid id="displayuser" columns="2" cellpadding="4">
<h:outputText value="User Name:" />
<h:outputText value="#{userManageBean.selectedUser.username}" />
<h:outputText value="First Name" />
<h:outputText value="#{userManageBean.selectedUser.firstname}" />
<h:outputText value="Last Name:" />
<h:outputText value="#{userManageBean.selectedUser.lastname}" />
</h:panelGrid>
</h:form>
</p:dialog>
<p:dialog id="user_edit" header="Edit User" widgetVar="dlgedit" >
<h:form id="useredit">
<h:panelGrid id="edituser" columns="2" cellpadding="4">
<h:outputText value="First Name" />
<h:inputText value="#{userManageBean.selectedUser.firstname}" />
<h:outputText value="Last Name" />
<h:inputText value="#{userManageBean.selectedUser.lastname}" />
<p:commandButton id="updateUser" value="Add" action="#{someaction}"
ajax="false" />
</h:panelGrid>
</h:form>
</p:dialog>