I have this code, I want to gain advantage of the left space (Not filed value)...
[![<h:panelGrid columns="2" cellpadding="5" >
<p:outputLabel value="Field1:" for="itField1" />
<p:inputText id="itField1" style="width:200px" required="true"
value="#{bean.field1}">
</p:inputText>
<p:outputLabel value="Field2:" for="itField2" />
<h:panelGrid columns="2" style="width:200px" cellpadding="0" cellspacing="0" >
<p:inputText id="itField2" required="true"
value="#{="#{bean.field2}"
/>
<p:commandButton icon="fa fa-search"
/>
</h:panelGrid>
<p:outputLabel value="Field3:" for="itField3" />
<p:inputText id="itField3" style="width:200px" required="true"
value="#{bean.field3}">
</p:inputText>
</h:panelGrid>]
I want this!
But, I get that :( :
How to do it?
This can be achieved by adding CSS style width:100% to <p:inputText id="itField2" ..... /> and <p:commandButton .... />as follows:
<p:inputText id="itField2" value="#{bean.field2}" required="true" style="width:100%" />
<p:commandButton icon="fa fa-search" style="width:100%" />
Related
I implement a <h:form> to edit Employee data which gets preloaded from the database. The preload works fine - all fields get filled with data. The <h:form id="editEmployeeForm"> is surrounded by a <h:form> which contains a <p:dataTable>.
When I do an edit on Employee data and click the "Speichern"-button nothing happens. <p:messages> says all my fields are empty what is obviously a wrong validation because all fields are prefilled. Then I deleted all <p:message> tags from my <h:inputText> tags to check whether the doSaveEmployeeEdit() gets called at all. But nothing happens - no error in console, etc. Even a simple System.out.println() doesn't get printed from the doSaveEmployeeEdit() at all.
Below the <p:dialog> what I have at the time:
<h:form id="editEmployeeForm">
<p:dialog header="Angestellten ändern" id="employeeEditDialog" widgetVar="employeeEditDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" closeOnEscape="true">
<p:outputPanel id="employeeDataEdit" rendered="#{not empty employeeEditController.employee}">
<h:panelGrid columns="2">
<p:outputLabel for="usernameEdit" value="Benutzername: " />
<p:inputText id="usernameEdit" value="#{employeeEditController.employee.username}" disabled="true" />
</h:panelGrid>
<p:separator/>
<h:panelGrid columns="6">
<p:outputLabel for="firstnameEdit" value="Vorname: " />
<p:inputText id="firstnameEdit" value="#{employeeEditController.employee.firstName}" />
<p:outputLabel for="lastnameEdit" value="Nachname: " />
<p:inputText id="lastnameEdit" value="#{employeeEditController.employee.lastName}" />
<p:outputLabel for="birthdayEdit" value="Geburtsdatum: " />
<p:inputMask mask="99/99/9999" id="birthdayEdit" value="#{employeeEditController.employee.birthday}" />
<p:outputLabel for="locationEdit" value="Wohnort: " />
<p:inputText id="locationEdit" value="#{employeeEditController.employee.location}" />
<p:outputLabel for="streetEdit" value="Straße: " />
<p:inputText id="streetEdit" value="#{employeeEditController.employee.streetName}" />
<p:outputLabel for="postcodeEdit" value="Postleitzahl: " />
<p:inputMask id="postcodeEdit" mask="9999?9" slotChar=" " value="#{employeeEditController.employee.postcode}" />
<p:outputLabel for="phonenumberEdit" value="Telefonnummer: " />
<p:inputMask id="phonenumberEdit" mask="9?99999999999" slotChar=" " maxlength="12" value="#{employeeEditController.employee.phoneNumber}" />
<p:outputLabel for="emailEdit" value="Email: " />
<p:inputText id="emailEdit" validatorMessage="Ungültiges Email-Format!" value="#{employeeEditController.employee.email}">
<f:validateRegex pattern="^$|^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
</p:inputText>
</h:panelGrid>
<p:separator/>
<h:panelGrid columns="6">
<p:outputLabel for="familyStatus" value="Familienstatus: " />
<p:selectOneMenu id="familyStatus" value="#{employeeEditController.employee.familyStatus}" style="width:150px">
<f:selectItem itemLabel="Wähle Familienstatus" itemValue="#{employeeEditController.employee.familyStatus}" />
<f:selectItems value="#{enumController.familyStatus}" />
</p:selectOneMenu>
<p:outputLabel for="Religion" value="Religion: " />
<p:selectOneMenu id="Religion" value="#{employeeEditController.employee.religion}" style="width:150px">
<f:selectItem itemLabel="Wähle Religion" itemValue="#{employeeEditController.employee.religion}" />
<f:selectItems value="#{enumController.religions}" />
</p:selectOneMenu>
<p:outputLabel for="Role" value="Rolle: " />
<p:selectOneMenu id="Role" value="#{employeeEditController.employee.workRole}" style="width:150px">
<f:selectItem itemLabel="Wähle Arbeitsrolle" itemValue="#{employeeEditController.employee.workRole}" />
<f:selectItems value="#{enumController.workRoles}" />
</p:selectOneMenu>
</h:panelGrid>
<p:separator/>
<h:panelGrid columns="3">
<p:commandButton value="Speichern" action="#{employeeEditController.doSaveEmployeeEdit()}" />
<p:commandButton value="Neu laden" action="#{employeeEditController.doReloadEmployee()}" />
<p:commandButton value="Abbruch" onclick="PF('employeeEditDialog').hide()" />
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
What can be the reason that html or whatever still do the validation and don't call the doSaveEmployeeEdit()?
UPDATE:
I made a new xhtml-file with same outputs - no validation anymore. But my controller method doesn't get called.
My children.xhtml:
<h:body>
<body class="theme-blue sidebar-mini sidebar-collapse">
<div class="wrapper">
<div class="content-wrapper" style="min-height: 1126px;">
<section class="content">
<div class="box">
<div class="box-body">
<h:form id="childForm">
<p:dataTable id="childTable" var="child" value="#{childController.children}">
<p:column headerText="Vorname">
<h:outputText value="#{child.firstName}" />
</p:column>
<p:column headerText="Nachname">
<h:outputText value="#{child.lastName}" />
</p:column>
<p:column headerText="Geburtsdatum">
<h:outputText value="#{child.birthday}" />
</p:column>
<p:column style="width:32px;text-align: center">
<p:commandButton update=":childForm:childEdit" oncomplete="PF('childEditDialog').show()" icon="ui-icon-note" title="Bearbeiten">
<f:setPropertyActionListener value="#{child}" target="#{childEditController.childEdit}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="Kind bearbeiten" widgetVar="childEditDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:messages autoUpdate="true" />
<p:outputPanel id="childEdit" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty childEditController.childEdit}" columnClasses="label,value">
<p:outputLabel id="primParent" value="primäres Elternteil:" />
<p:inputText for="primParent" value="#{childEditController.childEdit.primaryParent.id}" disabled="true" />
<p:outputLabel id="firstName" value="Vorname:" />
<p:inputText for="firstName" value="#{childEditController.childEdit.firstName}" />
<p:outputLabel id="lastName" value="Nachname:" />
<p:inputText for="lastName" value="#{childEditController.childEdit.lastName}" />
<p:outputLabel id="birthDay" value="Geburtsdatum:" />
<p:inputText for="birthDay" value="#{childEditController.childEdit.birthday}" />
<p:outputLabel id="emgNum" value="Notfallkontakt:" />
<p:inputText for="emgNum" value="#{childEditController.childEdit.emergencyNumber}" />
<p:outputLabel id="imgName" value="Bildname:" />
<p:inputText for="imgName" value="#{childEditController.childEdit.imgName}" />
<p:outputLabel for="gender" value="Geschlecht: " />
<p:inputText id="gender" value="#{childEditController.childEdit.gender}" disabled="true" />
<p:separator />
<h:panelGrid columns="3">
<p:commandButton value="Speichern" action="#{childEditController.doSaveChild}" update=":childForm:childTable" />
<p:commandButton value="Abbruch" onclick="PF('childEditDialog').hide()" immediate="true" />
</h:panelGrid>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</div>
</div>
</section>
</div>
</div>
</body>
</h:body>
My childEditController:
#Component
#Scope("request")
public class ChildEditController {
#Autowired
private ChildService childService;
private Child childEdit;
public Child getChildEdit() {
return childEdit;
}
public void setChildEdit(Child childEdit) {
this.childEdit = childEdit;
}
public void doSaveChild(){
childEdit = childService.saveChild(childEdit);
childEdit = null;
}
}
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 :)
Following is my code:
<p:contentFlow value="#{fileOnDeskViewDlgBacking.filesContentFlowList}" var="row">
<p:panel styleClass="filePanel" >
<p:outputLabel value="#{row.srNo}" />
<p:panelGrid styleClass="borderless" columns="2">
<p:graphicImage name="/dashboard/images/file_64px.png"/>
<p:panelGrid styleClass="borderless" columns="1">
<p:outputLabel value="(#{row.subject})" />
</p:panelGrid>
</p:panelGrid>
<p:outputLabel style="color:#3D83B5;" value="Files#{row.date}">
<f:convertDateTime pattern="dd/mm/yyy HH:mm" />
</p:outputLabel>
<h:panelGrid styleClass="borderless" columns="2">
<p:outputLabel value="FileId:" />
<p:outputLabel styleClass="wrapText" value="#{row.Id}" />
<p:outputLabel value="Description:" />
<p:outputLabel styleClass="wrapText" value="#{row.description}" />
<p:outputLabel value="Heading:" />
<p:outputLabel value="#{row.name}" />
<p:outputLabel value="Priority:" />
<p:outputLabel value="#{row.priorityName}" />
<p:outputLabel value="Type:" />
<p:outputLabel value="#{row.typeName}" />
<!-- <p:outputLabel value="Created By:" />
<p:outputLabel value="#{row.createdBy}" /> -->
</h:panelGrid>
<p:spacer height="5px" />
<p:separator />
<p:commandButton value="#{row.fileId}" action="#{fileOnDeskViewDlgBacking.fileNoting(row.fileId)}" />
</p:panel>
</p:contentFlow>
The problem is here on button <p:commandButton value="#{row.fileId}" action="#{fileOnDeskViewDlgBacking.fileNoting(row.fileId)}" /> the method does not pass fileId and it resolved to null, where as #{row.fileId} alwasys give its value.
MORE
It do work in p:dataTable, there is any problem with the component i think.
Does anyone knows how to disable the sourceCaption from primefaces picklist template?
I need that my user set three informations
(crudMB.upf.dataImplantacao, crudMB.upf.responsavelImplantacao, crudMB.upf.prazoSenha ) before selecting any options at the picklist.
At my code you guys can see this three variables that i need to enable the source part of the picklist.
<p:panel header="Produtos Fornecidos" style="height: auto;">
<h:panelGrid columns="2">
<h:outputLabel value="Data Implantação:" />
<p:calendar value="#{crudMB.upf.dataImplantacao}" />
<h:outputLabel value="Responsavel Implantação: " />
<p:inputText value="#{crudMB.upf.responsavelImplantacao}" />
<h:outputLabel value="Prazo de Senha: " />
<p:selectOneMenu value="#{crudMB.upf.prazoSenha}" >
<f:selectItem itemLabel="Selecione Um" itemValue="" itemDisabled="true" />
<f:selectItems value="#{crudMB.prazosSenha}" var="ps" itemLabel="#{ps.descricao}" />
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid>
<p:pickList id="picklist" value="#{crudMB.produtosFornecidos}" var="pf" itemValue="#{pf}" itemLabel="#{pf.nome}" converter="genericPickListConverter" >
<f:facet name="sourceCaption" >Disponiveis</f:facet>
<f:facet name="targetCaption" >Escolhidos</f:facet>
<p:ajax event="transfer" listener="#{crudMB.onTransfer}" />
<p:column>
<p:outputLabel value="#{pf.nome}"/>
</p:column>
<p:column>
<p:outputLabel value="#{pf.plataforma}"/>
</p:column>
<p:column>
<p:outputLabel value="#{pf.versaoAtual}"/>
</p:column>
</p:pickList>
</h:panelGrid>
I have a Form to add a new user. I am using Validator messages to control empty fields. If I enter invalid data and submit the form, error messages were displayed. After that I click on reset button, it doesn't work.
This my code in html:
<h:form id="newCustomerForm">
<p:dialog draggable="true" header="New Customer" widgetVar="customerDialogNew" resizable="false"
showEffect="clip" hideEffect="fold" style="position: absolute ;" id="dialog2">
<p:panelGrid id="newCustomer" columns="6" >
<f:facet name="header">
<p:graphicImage value="../../pictures/customerAdd.jpg"/>
</f:facet>
<p:outputLabel value="Name:" for="name" />
<p:inputText id="name" value="#{customerMB.name}" title="Name" required="true" requiredMessage="The Name field is required."/>
<p:message for="name" />
<p:outputLabel value="FamilyName:" for="familyName" />
<p:inputText id="familyName" value="#{customerMB.familyName}" title="FamilyName" required="true" requiredMessage="The FamilyName field is required."/>
<p:message for="familyName" />
</p:panelGrid>
<p:commandButton type="reset" immediate="true" update="newCustomerForm" value="Clear" icon="ui-icon-arrowrefresh-1-n" styleClass="ui-priority-primary">
</p:commandButton>
<p:commandButton value="Save" ajax="false" icon="ui-icon-circle-check" styleClass="ui-priority-primary" action="#{customerMB.addCustomer()}" />
</p:dialog>
</h:form>