I developed a composite JSF 2 component, and it is working pretty well.
In one of the pages where I use my custom component, it is necessary that composite component should be rendered according to a boolean condition.
Pretty Much similar as the rendered attribute works in JSF standard components.
So I tried to implement it like this:
<cc:interface componentType="ciudadComponent">
<cc:attribute name="paises" type="java.util.List" required="true" />
<cc:attribute name="departamentos" type="java.util.List" required="true" />
<cc:attribute name="ciudades" type="java.util.List" required="true" />
<cc:attribute name="name" type="java.lang.String" required="true" />
<cc:attribute name="value" type="org.colfuturo.model.to.CiudadTO" required="true"## Heading ## />
<cc:attribute name="etiquetaPais" type="java.lang.String" />
<cc:attribute name="etiquetaBotonOK" type="java.lang.String" />
<cc:attribute name="etiquetaBotonCancelar" type="java.lang.String" />
<cc:attribute name="etiquetaDepartamento" type="java.lang.String" />
<cc:attribute name="etiquetaCiudad" type="java.lang.String" />
<cc:attribute name="styleClass" type="java.lang.String" />
<cc:attribute name="backGroundColor" type="java.lang.String" default="#b0c4de" />
<cc:attribute name="rendered" type="java.lang.Boolean" required="false" default="true" />
</cc:interface>
<cc:implementation>
<h:inputText id="seleccionado" binding="#{cc.seleccionado}" disabled="true" rendered="#{cc.rendered}">
<f:converter converterId="CiudadConverter" />
</h:inputText>
</cc:implementation>
In the page where I insert the composite component, it is like this:
<gambatte:ciudad
paises="#{menuTreeBean.listaPaises}"
departamentos="#{menuTreeBean.listaDepartamentos}"
ciudades="#{menuTreeBean.listaCiudades}" styleClass="mySelectStyle"
etiquetaBotonOK="#{msg['perfil.common.btnOK']}" etiquetaBotonCancelar="#{msg['perfil.common.btnCancelar']}"
etiquetaPais="#{msg['perfil.common.lblPais']}"
etiquetaDepartamento="#{msg['perfil.common.lblDepartamento']}"
etiquetaCiudad="#{msg['perfil.common.lblCiudad']}" name="otraSedeCiudad"
value="#{EstudiosRealizadosBean.otraSedeCiudad}"
rendered="#{EstudiosRealizadosBean.showOtraSede()}" />
The method EstudiosRealizadosBean.showOtraSede() returns java.lang.Boolean.
I get the following Exception when rendering the page:
java.lang.IllegalArgumentException: rendered
How can I solve this ?
I have also tried to put a boolean condition, but the same exception is raised
I am posting my whole component code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:cc="http://java.sun.com/jsf/composite">
<cc:interface componentType="ciudadComponent">
<cc:attribute name="paises" type="java.util.List" required="true" />
<cc:attribute name="departamentos" type="java.util.List" required="true" />
<cc:attribute name="ciudades" type="java.util.List" required="true" />
<cc:attribute name="name" type="java.lang.String" required="true" />
<cc:attribute name="value" type="org.colfuturo.model.to.CiudadTO" required="true" />
<cc:attribute name="etiquetaPais" type="java.lang.String" />
<cc:attribute name="etiquetaBotonOK" type="java.lang.String" />
<cc:attribute name="etiquetaBotonCancelar" type="java.lang.String" />
<cc:attribute name="etiquetaDepartamento" type="java.lang.String" />
<cc:attribute name="etiquetaCiudad" type="java.lang.String" />
<cc:attribute name="styleClass" type="java.lang.String" />
<cc:attribute name="backGroundColor" type="java.lang.String" default="#b0c4de" />
<cc:attribute name="cacheInterface" type="org.colfuturo.business.interfaces.IServicioCache" required="false" />
</cc:interface>
<cc:implementation>
<span id="#{cc.clientId}" style="white-space:nowrap">
<h:inputText id="seleccionado" binding="#{cc.seleccionado}" disabled="true" >
<f:converter converterId="CiudadConverter" />
</h:inputText>
<a4j:commandButton execute="#none" immediate="true" value=".." oncomplete="document.getElementById('#{cc.attrs.name}').style.position = 'absolute'; document.getElementById('#{cc.attrs.name}').style.display = 'inline-block';" />
<br />
<ui:fragment>
<div id="#{cc.attrs.name}" layout="block" style="border-radius: 10px; background-color:#{cc.attrs.backGroundColor}; display:none;" >
<table border="0">
<tr>
<td><h:outputText value="#{cc.attrs.etiquetaPais}" /></td>
<td>
<rich:select id="pais" binding="#{cc.pais}" styleClass="#{cc.attrs.styleClass}" defaultLabel="Seleccione un País" >
<f:selectItems value="#{cc.listaPaises}" />
<f:ajax event="selectitem" execute="#this" listener="#{cc.updatePais}" />
</rich:select>
</td>
</tr>
<tr>
<td><h:outputText value="#{cc.attrs.etiquetaDepartamento}" /></td>
<td>
<rich:select id="departamento" binding="#{cc.departamento}" styleClass="#{cc.attrs.styleClass}" defaultLabel="Seleccione un Departamento" >
<f:selectItems value="#{cc.listaDepartamentos}" />
<f:ajax event="selectitem" execute="#this" listener="#{cc.updateDepartamento}" />
</rich:select>
<a4j:outputPanel layout="block" binding="#{cc.panelOtroDepartamento}" >
<h:inputText id="otroDepartamento" binding="#{cc.otroDepartamento}" >
<f:ajax event="keyup" listener="#{cc.enableSubmit}" execute="#this otraCiudad" />
</h:inputText>
</a4j:outputPanel>
</td>
</tr>
<tr>
<td><h:outputText value="#{cc.attrs.etiquetaCiudad}" /></td>
<td>
<rich:select id="ciudad" binding="#{cc.ciudad}" styleClass="#{cc.attrs.styleClass}" defaultLabel="Seleccione una Ciudad" >
<f:selectItems value="#{cc.listaCiudades}" />
<f:ajax event="selectitem" execute="#this" listener="#{cc.updateCiudad}" />
</rich:select>
<a4j:outputPanel layout="block" binding="#{cc.panelOtraCiudad}" >
<h:inputText id="otraCiudad" binding="#{cc.otraCiudad}" >
<f:ajax event="keyup" listener="#{cc.enableSubmit}" execute="#this otroDepartamento" />
</h:inputText>
</a4j:outputPanel>
</td>
</tr>
<tr>
<td>
<h:commandButton value="#{cc.attrs.etiquetaBotonOK}" disabled="true" binding="#{cc.botonAcccion}" onclick="document.getElementById('#{cc.attrs.name}').style.position = 'absolute'; document.getElementById('#{cc.attrs.name}').style.display = 'none';" >
<f:ajax execute="ciudad" listener="#{cc.submit}" />
</h:commandButton>
</td>
<td>
<a4j:commandButton value="#{cc.attrs.etiquetaBotonCancelar}" execute="#none" immediate="true" oncomplete="document.getElementById('#{cc.attrs.name}').style.position = 'absolute'; document.getElementById('#{cc.attrs.name}').style.display = 'none';" />
</td>
</tr>
</table>
</div>
</ui:fragment>
<div style="display:block;" ></div>
</span>
</cc:implementation>
</html>
Get rid of <cc:attribute name="rendered">.
It's already defined in UIComponent class, which <cc:implementation> extends from. You don't need to redefine it. The same story applies to id and binding attributes, by the way.
You also don't need to re-apply rendered="#{cc.rendered}" on the composite component's first child. You can also just get rid of it. The <my:composite rendered> already applies on the whole composite component itself.
Related
I am working with a h:panelgrid in a p:tabView, but the components in the panelgrid are more smaller than components(inputtext, buttons, the font size) that are outside of him.
The code is :
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<p:panel header="Datos Generales de Proyecto" />
<h:panelGrid id="idPgProyecto" columns="4" width="100%" border="0" columnClasses="colC1-T,colC2-T,colC3">
<p:outputLabel for="idEmpresa" value="Empresa:" style="margin-right:2px;" />
<p:inputText id="idEmpresa" style="width:350px;" value="#{proyectoBean.prVista.strEmpresa}"
readonly="true"/>
<h:outputText value=" " />
<h:outputText value=" " />
<p:outputLabel for="idCodProyecto" value="Codigo: " style="margin-right:2px;"/>
<p:inputText id="idCodProyecto" value="#{proyectoBean.prVista.codigo}" style="width:350px;" />
<p:message for="idCodProyecto" display="text" />
<h:outputText value=" " />
</h:panelGrid>
<h:panelGrid id="idPgPr1" columns="5" width="100%" border="0" columnClasses="colC1-T,colC2-T,colC3,colC1-T">
<p:outputLabel for="idNombre" value="Nombre: " style="margin-right:2px;"/>
<p:inputText id="idNombre" value="#{proyectoBean.prVista.nombre}" style="width:350px;"
required="true" requiredMessage="Ingrese Nombre"/>
<p:message for="idNombre" display="icon" />
<p:outputLabel for="idFechaInicio" value="Fecha Inicio: " style="margin-right:10px;"/>
<p:calendar id="idFechaInicio" value="#{proyectoBean.prVista.fechaInicio}" showOn="button" pattern="dd-MM-yyyy"
navigator="true">
</p:calendar>
</h:panelGrid>
<p:outputPanel rendered="#{proyectoBean.prVista.id != null and proyectoBean.prVista.strEstadoProyecto == 'INC'}">
<h:panelGrid id="idPgProyecto5" columns="3" width="100%" border="0" columnClasses="colC1-T,colC2-T">
<h:outputText value=" " />
<p:commandButton value="Cerrar Proyecto" style="width: 360px; color: blue;" actionListener="#{proyectoBean.cerrarProyecto}" update="idFormProyecto">
<p:confirm header="Confirmacion de Cierre de Proyecto" message="¿Esta seguro de cerrar Proyecto?" icon="ui-icon-alert" />
</p:commandButton>
<h:outputText value=" " />
</h:panelGrid>
</p:outputPanel>
<p:tabView >
<p:tab title="Maquinas Perforacion" >
<h:outputText value="Este es un texto de prueba"/>
<h:panelGrid id="idPgMaquina" columns="5" width="100%" border="0" columnClasses="colC1-T,colC2-T,colC3,colC1-T">
<p:outputLabel for="idSlcMaquina" value="Asignar Maquina:" style="margin-right:2px;font-size: 12px;"/>
<p:selectOneMenu id="idSlcMaquina" style="width:358px;" effect="none" value="#{proyectoBean.pu.idMaquina}"
disabled="#{proyectoBean.prVista.id == null}">
<f:selectItem itemLabel=" ---- Seleccione Maquina ---- " itemValue="#{null}" noSelectionOption="true"/>
<f:selectItems value="#{proyectoBean.pu.lstMaquinas}" var="m" itemValue="#{m.id}" itemLabel="#{m.nombre}"/>
</p:selectOneMenu>
<p:commandButton id="idBtnASignar" actionListener="#{proyectoBean.asignarMaquinaProyecto}"
update="idPgMaquina,idDTMaquinasProyecto" title="Agregar Maquina a lista" icon="ui-icon-plus"/>
<h:outputText value=" " />
<h:outputText value=" " />
</h:panelGrid>
</p:tab>
<p:tab title="Empleados" >
<h:panelGrid columns="3" width="100%" columnClasses="colC1-T,colC2-T" border="0">
<p:outputLabel value="Empleado:" for="idAutoCompleteEmpleado" style="margin-right:2px;"/>
<p:autoComplete id="idAutoCompleteEmpleado" value="#{proyectoBean.pu.empleado}" completeMethod="#{proyectoBean.completarEmpleado}"
var="empleado" itemLabel="#{empleado.nombreCompleto}" itemValue="#{empleado}" converter="empleadoPRConverter"
minQueryLength="2" onclick="this.select();" forceSelection="true" size="65" disabled="#{proyectoBean.prVista.id == null}">
<p:ajax event="itemSelect" listener="#{proyectoBean.seleccionarEmpleado}" update="idDTEmpleadoProyecto"/>
</p:autoComplete>
<p:message for="idAutoCompleteEmpleado" display="text"/>
</h:panelGrid>
</p:tab>
</p:tabView>
</ui:composition>
The panelgrid inside a outputpanel or tabview has the components more smaller that the others panelgrid that are outside. I'm working with PF 4.0 and JSF 2.2
Thanks for all
Seems like this is because it scales based on width. In tabview width of panelgrid is much smaller, than outside.
In this case, I would suggest to create css styles for each component and apply them, rather then making them stretch automatically
i am trying to display the message of the outcome of a validation done in managed bean in the dialog but it is not getting displayed in the dialog on submit of the form.
Please help me in fixing this
My JSF page snippet with dialog
<p:dialog header="Add LPC" id="lpcDlg" widgetVar="dlg" rendered="true"
appendToBody="true" resizable="true" modal="true" height="320px"
width="38%">
<h:form id="addLpc">
<div align="center" style="margin-bottom: 1px; padding-bottom: 1px;">
<h:outputLabel value="Add New LPC"
style="font-color:#000000;font-weight:bold;font-size:24px;padding-bottom:1px;"></h:outputLabel>
</div>
<div align="center">
<p:messages id="lpcDlgMsg" showDetail="false" autoUpdate="true"
closable="true" />
<p:messages id="lpcDlgMsg2" for="lpcDlgMessage" showDetail="false"
autoUpdate="true" closable="true" />
<h:panelGrid id="addLpcForm" columns="2" appendToBody="true">
<h:outputText value="LPC ID" />
<p:inputText id="lpcId" value="#{lpcBean.lpcId}" required="true"
requiredMessage="LPC ID is required">
<f:ajax event="blur" render="lpcDlgMsg" />
</p:inputText>
<h:outputText value="First Name" />
<p:inputText id="firstName" value="#{lpcBean.firstName}" />
.
.
.
.
</h:panelGrid>
</div>
<div align="center">
<p:commandButton id="submitButton" value="Submit" ajax="true"
update=":lpcForm:lpcDataTable,addLpc"
action="#{lpcBean.formSubmit}" oncomplete="dlg.hide()" />
<p:commandButton id="cancelButton" value="Cancel"
onclick="dlg.hide()" />
</div>
</h:form>
</p:dialog>
message with id lpcDlgMsg2 is the message i am trying to display on submit.The other message is getting displayed correct on blur.
Snippet of the method that is called on submit
public void formSubmit()
{
if(resultSet.next())
{
int lpcIdCount=rs.getInt("lpcCount");
if(lpcIdCount!=0)
{
FacesContext.getCurrentInstance().addMessage("lpcDlgMessage", new FacesMessage(FacesMessage.SEVERITY_ERROR," ", "Duplicate LPCID"));
System.out.println("after display");
}
else
{
.
.
.
.
}
}
}
}
Here is my suggestion:
<p:dialog header="Add LPC" id="lpcDlg" widgetVar="dlg" rendered="true"
appendToBody="true" resizable="true" modal="true" height="320px"
width="38%">
<h:form id="addLpc">
<div align="center">
<p:messages id="lpcDlgMsg" showDetail="false" autoUpdate="true"
closable="true" />
<h:panelGrid id="addLpcForm" columns="2" >
<h:outputText value="LPC ID" />
<p:inputText id="lpcId" required="true" />
<h:outputText value="First Name" />
<p:inputText id="firstName" required="true" />
</h:panelGrid>
</div>
<div align="center">
<p:commandButton id="submitButton" value="Submit"
oncomplete="if (!args.validationFailed){dlg.hide();}" />
<p:commandButton id="cancelButton" value="Cancel"
onclick="dlg.hide()" />
</div>
</h:form>
</p:dialog>
Note that I've simplified your code in order to avoid using a managedbean.
If you want your managed bean to perform the validation, use RequestContext to conditionally execute the code that will close the dialog and remove the oncomplete from Submit button.
if (success) {
RequestContext.getCurrentInstance().execute("dlg.hide()");
}else{
//show all the messages you need here
}
You have to add this javascript first inside head tag
function handleComplete(xhr, status, args) {
if (!args.validationFailed) {
dlg.hide();
} else {
}
}
More changes are
<p:commandButton id="submitButton" value="Submit" ajax="true"
update=":lpcForm:lpcDataTable,addLpc :lpcDlgMsg2"
actionListener="#{lpcBean.formSubmit}" oncomplete="handleComplete(xhr, status, args)" />
action to actionListener because action has String return type.
This will work fine.
I am in a little bit of trouble with my preRenderView-Event. My page also uses a commandbutton to submit data but unfortunately the preRenderView-Event is always called before the buttons action is invoked.
<h:body style="width:600px; ">
<ui:composition template="/common/master-layout.xhtml">
<ui:define name="title">#{message['app.page.main.title']}</ui:define>
<ui:debug
rendered="#{initParam['javax.faces.PROJECT_STAGE'] eq 'Development'}"
hotkey="x" />
<ui:define name="metadata">
<f:metadata>
<f:viewParam name="id" value="#{saisieDevisController.idDemande}" />
<f:event type="preRenderView"
listener="#{saisieDevisController.init}" />
</f:metadata>
</ui:define>
<ui:define name="content">
<p:fieldset legend="Programme" style="margin-top: 20px;">
<h:form id="etudeDemSaisieDevisForm">
<p:tabView id="etudeDemSaisieDevisTabView">
<p:tab id="programmeTab" title="Programme">
<h:panelGrid columns="4" cellpadding="10">
<h:outputText id="programmeInput" value="Programme"
style="font-weight:bold" />
<h:outputText for="programmeInput"
value="#{saisieDevisController.selectedDemande.idProgramme.codeProgImmobilier}" />
<h:outputText id="lotInput" value="Lot" style="font-weight:bold" />
<h:outputText for="lotInput"
value="#{saisieDevisController.selectedDemande.idBien.numLotCommercial}" />
<h:outputText id="nomAcqInput" value="Nom Acquereur"
style="font-weight:bold" />
<h:outputText for="nomAcqInput"
value="#{saisieDevisController.selectedDemande.idAcquereur.genreEtatCivil} #{saisieDevisController.selectedDemande.idAcquereur.prenomAcquereur} #{saisieDevisController.selectedDemande.idAcquereur.nomAcquereur}" />
</h:panelGrid>
</p:tab>
<p:tab id="datesFraisTab" title="Dates et frais">
<h:panelGrid columns="4" cellpadding="10">
<h:outputLabel value="Date de valité de devis"
style="font-weight:bold" />
<p:calendar
value="#{saisieDevisController.selectedDemande.lastDevis.datValidite}"
id="dateValiditeDevis" showOn="button" required="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:calendar>
<h:outputLabel value="Date butoire de chantier"
style="font-weight:bold" />
<p:calendar
value="#{saisieDevisController.selectedDemande.lastDevis.dateButoire}"
id="dateButoireDevis" showOn="button" required="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:calendar>
<h:outputText value="Frais de dossier" style="font-weight:bold" />
<p:selectOneMenu
value="#{saisieDevisController.selectedDemande.lastDevis.fraDossiers}"
style="width: 175px;">
<f:selectItem itemLabel="Choisir..." itemValue=""
noSelectionOption="true" />
<f:selectItem itemLabel="Aucun" itemValue="Aucun" />
<f:selectItem itemLabel="Déjà réglé" itemValue="Déjà réglé" />
<f:selectItem itemLabel="Charge Acquéreur"
itemValue="Charge Acquéreur" />
<f:selectItem itemLabel="Charge SNC" itemValue="Charge SNC" />
</p:selectOneMenu>
<h:outputLabel value="Date de plan de référence"
style="font-weight:bold" />
<p:calendar
value="#{saisieDevisController.selectedDemande.lastDevis.datPlanReference}"
id="datePlanRef" showOn="button" required="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:calendar>
<h:outputText value="Frais de pilotage" style="font-weight:bold" />
<p:selectOneMenu
value="#{saisieDevisController.selectedDemande.lastDevis.fraPilotage}"
style="width: 175px;">
<f:selectItem itemLabel="Choisir..." itemValue=""
noSelectionOption="true" />
<f:selectItem itemLabel="Oui" itemValue="Oui" />
<f:selectItem itemLabel="Non" itemValue="Non" />
<f:selectItem itemLabel="Pour mémoire" itemValue="Pour mémoire" />
</p:selectOneMenu>
<h:outputText value="Frais de plan" style="font-weight:bold" />
<p:selectOneMenu
value="#{saisieDevisController.selectedDemande.lastDevis.fraPlan}"
style="width: 175px;">
<f:selectItem itemLabel="Choisir..." itemValue=""
noSelectionOption="true" />
<f:selectItem itemLabel="Aucun" itemValue="Aucun" />
<f:selectItem itemLabel="Charge Acquéreur"
itemValue="Charge Acquéreur" />
<f:selectItem itemLabel="Charge SNC" itemValue="Charge SNC" />
</p:selectOneMenu>
</h:panelGrid>
</p:tab>
<p:tab id="devisTab" title="Devis">
<h:panelGrid columns="2" cellpadding="10">
<h:panelGrid columns="4" cellpadding="10">
<h:outputText id="numDevis" value="Numéro de devis"
style="font-weight:bold" />
<h:inputText for="numDevis"
value="#{saisieDevisController.selectedDemande.lastDevis.numDevis}" />
<h:outputText id="dateRecepDemande"
value="Date de la réception de la demande"
style="font-weight:bold" />
<h:outputText for="dateRecepDemande"
value="#{saisieDevisController.selectedDemande.dateDemande}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
<h:outputText id="dateSaisieDevis"
value="Date de saisie de la demande" style="font-weight:bold" />
<h:outputText for="dateSaisieDevis"
value="#{saisieDevisController.selectedDemande.dateSaisie}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
<h:outputText id="ficheOptionDevis" value="Fiche d'oprion"
style="font-weight:bold" />
<h:outputText for="ficheOptionDevis"
value="#{saisieDevisController.selectedDemande.ficheOption}" />
</h:panelGrid>
</h:panelGrid>
</p:tab>
<p:tab id="previsualisationTab" title="Prévisualisation">
<h:panelGrid columns="2" cellpadding="10">
</h:panelGrid>
</p:tab>
</p:tabView>
<p:panel>
<ui:include src="ligneDataTable.xhtml" />
</p:panel>
<h:panelGrid columns="4" cellpadding="10"
style="text-align: center;margin-left: 25%;width: 50%; margin-right: 25%; margin-top: 30px; background-color:RGB(225,240,233)">
<h:outputText id="chargeSncHt" value="Charge SNC HT"
style="font-weight:bold" />
<h:outputText for="chargeSncHt"
value="#{saisieDevisController.selectedDemande.idDemande}" />
<h:outputText id="chargeAcqHt" value="Charge Acq HT"
style="font-weight:bold" />
<h:outputText for="chargeAcqHt" value="200" />
<h:outputText id="chargeSncTtc" value="Charge SNC TTC"
style="font-weight:bold" />
<h:outputText for="chargeSncTtc" value="0" />
<h:outputText id="chargeAcqTtc" value="Charge ACQ TTC"
style="font-weight:bold" />
<h:outputText for="chargeAcqTtc" value="0" />
</h:panelGrid>
<h:panelGrid columns="3" cellpadding="10" style="margin: 0 auto;">
<p:commandButton value="Valider" id="saveDemande"
styleClass="ui-priority-primary"
action="#{saisieDevisController.updateValidate}"
style="margin-left:10px;margin-top:10px;margin-bottom:10px;height:125%;width:90px">
</p:commandButton>
<p:commandButton value="Annuler" id="cancelDemande"
styleClass="ui-priority-primary"
action="#{saisieDevisController.updateCancel}"
style="margin-left:10px;margin-top:10px;margin-bottom:10px;height:125%;width:90px"
immediate="true" />
<p:commandButton value="Suspendre" id="suspendDemande"
styleClass="ui-priority-primary"
action="#{saisieDevisController.updateSuspend}"
style="margin-left:10px;margin-top:10px;margin-bottom:10px;height:125%;width:90px">
</p:commandButton>
</h:panelGrid>
</h:form>
</p:fieldset>
</ui:define>
</ui:composition>
Controller:
#Component
#Scope("view")
public class SaisieDevisController implements Serializable {
//...
#ManagedProperty("#{demandeController.selectedDemande}")
private DemandeDto selectedDemande;
private Long idDemande;
//...
public String init(){
if (!FacesContext.getCurrentInstance().isPostback()) {
selectedDemande = new DemandeDto();
selectedDemande.setIdBien(new BienDto());
listDescriptifs = new ArrayList<DescriptifDto>();
selectedDecriptif = new DescriptifDto();
actualize();
}
return null;
}
public String initLigne(){
ligneToSave = new LigneDto();
listLots = new ArrayList<LotDto>();
listLots = lotService.findAll();
listSituations = new ArrayList<SituationDto>();
listSituations = situationService.findAll();
listUnites = new ArrayList<UniteDto>();
listUnites = uniteService.findAll();
return "/views/demande/saisieDevis/addLigne?faces-redirect=true";
}
public void actualize(){
selectedDemande = saisieDevisService.findById(idDemande);
selectedDemande.setLastDevis(selectedDemande.getLastDevis());
}
With the JSF Lifecycle in mind, it is not really possible to have an preRenderView-Event being triggered before the "Invoke application" phase is finished. Please double-check the following:
Is the action invoked at all? In case of an converter/validation error the "invoke action" phase is skipped and the response is rendered instantly.
Are you calling the method from somewhere else? saisieDevisController.init sounds pretty generic. Maybe a trigger like #PostConstruct calls it earlier (nested).
Hope it helps...
I create facelet tag component, glue:input and glue:group
input.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:ocp="http://java.sun.com/jsf/composite/ocpcommon"
>
<c:set var="id" value="#{not empty id ? id : (not empty name ? name : action)}" />
<c:set var="required" value="#{not empty required and required}" />
<c:set var="render" value="#{not empty render ? 'panel-group-'.concat(render) : (not empty id ? 'panel-group-'.concat(id) : 'panel-group-'.concat(mame))}" />
<c:set var="validator" value="#{not empty validator ? validator : 'safeTextValidator'}" />
<h:panelGroup id="panel-group-#{id}" layout="block" class="clearfix">
<label for="#{name}" class="#{(not empty required and required) ? 'required' : ''}">#{label}#{(not empty required and required) ? '* ' : ''}</label>
<div class="input">
<c:choose>
<c:when test="#{type == 'java.lang.String' or type == 'text'}">
<h:inputText value="#{value}" id="#{name}" styleClass="xLarge span4" required="#{required}" label="#{label}">
<f:validator validatorId="#{validator}"/>
<f:ajax execute="#{execute}" render="#{render}" />
</h:inputText>
</c:when>
<c:when test="#{type == 'java.util.Date' or type == 'calendar'}">
<p:calendar value="#{a.value}" id="#{name}" navigator="true" label="#{label}">
<p:ajax event="dateSelect" listener="#{listener}" update="panel-group-#{id}" />
</p:calendar>
</c:when>
<c:when test="#{type == 'checkbox'}">
<h:selectBooleanCheckbox value="#{value}" id="#{name}" styleClass="xLarge" required="#{required}" label="#{label}">
<f:ajax execute="#{execute}" render="#{render}" />
</h:selectBooleanCheckbox>
<span>#{inlinehelp}</span>
</c:when>
<c:when test="#{type == 'textarea'}">
<h:inputTextarea value="#{value}" id="#{name}" styleClass="xLarge span4" required="#{required}" label="#{label}" style="width: 400px; height: 100px;" >
<f:ajax execute="#{execute}" render="#{render}" />
</h:inputTextarea>
</c:when>
<c:when test="#{type == 'org.eqaula.glue.model.Catalogue' or type == 'select'}">
</c:when>
<c:otherwise>
<h:inputText value="#{value}" id="#{name}" styleClass="xLarge span4" required="#{required}" label="#{label}">
<f:ajax execute="#{execute}" render="#{render}" />
</h:inputText>
</c:otherwise>
</c:choose>
<h:graphicImage value="#{resource['success.gif']}" rendered="#{value != null}"
styleClass="validation-status" />
<span class="help-inline"><br/>#{inlinehelp} <ocp:message forId="#{name}" /></span>
</div>
</h:panelGroup>
</ui:composition>
group.xhtml
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:ocp="http://java.sun.com/jsf/composite/ocpcommon"
>
<c:set var="id" value="#{not empty id ? id : (not empty name ? name : action)}" />
<c:set var="required" value="#{not empty required and required}" />
<c:set var="group" value="#{not empty group ? group : null}" />
<h:panelGroup id="panel-group-#{id}" layout="block" class="clearfix">
<label for="#{name}" class="#{(not empty required and required) ? 'required' : ''}">#{label}#{(not empty required and required) ? '* ' : ''}</label>
<div class="input">
<p:commandButton id="button-#{id}" action="#{controller[addAction]}" process="#this"
value="#{messages['common.add']} #{label}" ajax="true"
icon="ui-icon-plus" update="group-data-table-#{id}"/>
<p:dataTable var="m" value="#{group.members}" id="group-data-table-#{id}"
editable="true" rendered="#{not empty group.members}"
selection="#{controller[bussinesEntity]}" >
<f:facet name="header">
#{group.attribute.label}
</f:facet>
<!-- //TODO activar ajax
<p:ajax event="rowEdit" listener="#{controller[editListener]}" update=":form:messages" />
<p:ajax event="rowEditCancel" listener="#{tableBean.onCancel}" update=":form:messages" />
-->
<p:column headerText="#{messages['common.name']}" style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{m.name}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{m.name}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="#{messages['common.options']}" style="width:50px">
<p:rowEditor />
</p:column>
</p:dataTable>
</div>
</h:panelGroup>
</ui:composition>
The input and group tags rendered well in this page, inclusive input tag works fine in Save button:
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui"
xmlns:s="http://jboss.org/seam/faces"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:glue="http://eqaula.org/jsf/facelets"
xmlns:ocp="http://java.sun.com/jsf/composite/ocpcommon">
<ui:composition template="/WEB-INF/view/templates/glue.xhtml">
<ui:define name="content">
<f:metadata>
<f:viewParam name="id" value="#{profileHome.profileId}" />
<s:viewAction action="#{profileHome.load}" if="#{conversation.transient}"/>
</f:metadata>
<h2>#{messages['common.edit']} #{messages['Profile']}: #{profileHome.instance.fullName}</h2>
<h:form id="profile">
<div class="actions">
<h:commandButton id="save" action="#{profileHome.saveAjax()}" value="#{messages['common.save']}" styleClass="btn primary"/>
<h:commandButton action="/pages/home.xhtml?faces-redirect=true"
value="#{messages['common.cancel']}" styleClass="btn" immediate="true"/>
</div>
<!-- Attributos para usuario -->
<glue:input id="fstn" name="firstname" type="text" label="#{messages['common.firstname']}" value="#{profileHome.instance.firstname}" required="true" inlinehelp="#{messages['common.firstname.inlinehelp']}" execute="#this save" render="fstn"/>
<glue:input id="srn" name="surname" type="text" label="#{messages['common.surname']}" value="#{profileHome.instance.surname}" required="true" inlinehelp="#{messages['common.surname.inlinehelp']}" execute="#this save"/>
<glue:input id="cod" name="code" type="text" label="#{messages['profile.dni']}" value="#{profileHome.instance.code}" required="false" inlinehelp="#{messages['profile.dni.inlinehelp']}" execute="#this save"/>
<glue:input id="eml" name="text" type="email" label="#{messages['common.email']}" value="#{profileHome.instance.email}" required="true" validator="emailValidator" inlinehelp="#{messages['common.email.inlinehelp']}" execute="#this save"/>
<glue:input id="emlSecret" name="emailSecret" type="checkbox" value="#{profileHome.instance.emailSecret}" required="true" inlinehelp="#{messages['common.keepemailsecret']}" execute="#this save"/>
<glue:input id="bio" name="bio" type="textarea" label="#{messages['common.bio']}" value="#{profileHome.instance.bio}" required="false" inlinehelp="#{messages['common.bio.inlinehelp']}" execute="#this save"/>
<!-- Atributos par administrador -->
<!-- Attributos personalizados -->
<c:forEach items="#{profileHome.instance.attributes}" var="a" >
<glue:input id="#{a.structureAttribute.id}" name="#{a.name}" type="#{a.type}" label="#{a.structureAttribute.label}" value="#{a.value}" required="#{a.structureAttribute.required}" inlinehelp="#{a.structureAttribute.helpInline}" execute="#this save" listener="#{account.saveAjax()}" render="#{a.structureAttribute.id} #{a.structureAttribute.render != null ? a.structureAttribute.render : ''}"/>
</c:forEach>
<!-- Atributos relación -->
<glue:group id="#{profileHome.findGroup('spouse').id}" label="#{profileHome.findGroup('spouse').attribute.label}" group="#{profileHome.findGroup('spouse')}" inlinehelp="#{profileHome.findGroup('spouse').attribute.helpInline}"
controller="#{profileHome}"
addAction="addAction"
editListener="editListener">
</glue:group>
</h:form>
</ui:define>
</ui:composition>
</html>
In group.xhtml, the p:commandButton should fire addAction into profileHome bean
#Named
#ViewScoped
public class ProfileHome
....
public void addAction() {
System.out.println("TODO rowAddAction");
}
The button not works!. I try to isolate the button in the page, this works without tags glue:input o glue:group.
Please an advice.
PD. I use primefaces 4.3.1, jsf2, jboss AS7, seam3
This is the first time I am using prime 3.3.1 with JSF 2.1. I have all the necessary jars for prime faces and I am using the Wizard from their website https://www.primefaces.org/showcase/ui/panel/wizard.xhtml.
Here is my code:
wizard.xthml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div 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:p="http://primefaces.org/ui"
lang="en" xml:lang="en" style="padding-bottom: 8px;">
<h:form>
<p:growl id="growl" sticky="true" showDetail="true" />
<p:wizard widgetVar="wiz" flowListener="#{userWizard.onFlowProcess}">
<p:tab id="personal" title="Personal">
<p:panel header="Personal Details">
<h:messages errorClass="error" />
<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
<h:outputText value="Firstname: *" />
<p:inputText required="true" label="Firstname" value="#{userWizard.user.firstname}" />
<h:outputText value="Lastname: *" />
<p:inputText required="true" label="Lastname" value="#{userWizard.user.lastname}" />
<h:outputText value="Age: " />
<p:inputText value="#{userWizard.user.age}" />
<h:outputText value="Skip to last: " />
<h:selectBooleanCheckbox value="#{userWizard.skip}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="address" title="Address">
<p:panel header="Adress Details">
<h:messages errorClass="error" />
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Street: " />
<p:inputText value="#{userWizard.user.street}" />
<h:outputText value="Postal Code: " />
<p:inputText value="#{userWizard.user.postalCode}" />
<h:outputText value="City: " />
<p:inputText value="#{userWizard.user.city}" />
<h:outputText value="Skip to last: " />
<h:selectBooleanCheckbox value="#{userWizard.skip}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="contact" title="Contact">
<p:panel header="Contact Information">
<h:messages errorClass="error" />
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Email: *" />
<p:inputText required="true" label="Email" value="#{userWizard.user.email}" />
<h:outputText value="Phone: " />
<p:inputText value="#{userWizard.user.phone}" />
<h:outputText value="Additional Info: " />
<p:inputText value="#{userWizard.user.info}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="confirm" title="Confirmation">
<p:panel header="Confirmation">
<h:panelGrid id="confirmation" columns="6">
<h:outputText value="Firstname: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.firstname}" />
<h:outputText value="Lastname: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.lastname}" />
<h:outputText value="Age: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.age}" />>
<h:outputText value="Street: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.street}" />
<h:outputText value="Postal Code: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.postalCode}" />
<h:outputText value="City: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.city}" />
<h:outputText value="Email: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.email}" />
<h:outputText value="Phone " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.phone}" />
<h:outputText value="Info: " />
<h:outputText styleClass="outputLabel" value="#{userWizard.user.info}" />
<h:outputText />
<h:outputText />
</h:panelGrid>
<p:commandButton value="Submit" update="growl" actionListener="#{userWizard.save}" />
</p:panel>
</p:tab>
</p:wizard>
</h:form>
</div>
UserWizard.java:
package com.verisign.vcc.program.marketing.mbean;
import javax.faces.event.ActionEvent;
import org.primefaces.event.FlowEvent;
public class UserWizard
{
private boolean skip;
public void save(ActionEvent actionEvent)
{
// Persist user
}
public boolean isSkip()
{
return skip;
}
public void setSkip(boolean skip)
{
this.skip = skip;
}
public String onFlowProcess(FlowEvent event)
{
if (skip)
{
skip = false; // reset in case user goes back
return "confirm";
}
else
{
return event.getNewStep();
}
}
}
When I access the wizard.xhtml I am getting the wizard with no styles.
But here is how it is in the prime faces website:
Could you please tell me what am I missing?
The problem is that you're using invalid Facelets markup. You shouldn't use a normal html div tag and stick namespace declarations in it.
For this purpose you should either use a page starting with html having h:head and h:body tags in it or use ui:composition for templating.
In the example below, JSF resources and PrimeFaces themes will be added properly.
XHTML page
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
</h:head>
<h:body>
<!-- your code here -->
</h:body>
</html>
I hope it helps.