I got a problem. I have a bean CreateProjectBean which is RequestScope bean. I want to use Prime Faces component called Collector so i can dynamicly change in view createProject table groupRoleAdapters which is a field of CreateProjectBean. Unforuntely every time i click "add" or "remove" in collector, there is a new request being sent to bean, which means, that GroupRoleAdapters is being created once more - of course empty.
My collector code:
<p:panel header="Add group">
<h:panelGrid columns="2">
<h:outputLabel value="Group name: *" for="txt_title"></h:outputLabel>
<h:selectOneMenu id="groupMenu"
value="#{createProjectBean.groupRoleAdapter.groupName}">
<f:selectItems value="#{createProjectBean.groupNames}"
var="group" itemValue="#{group}" itemLabel="#{group}" />
</h:selectOneMenu>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:groupMenu" />
<h:outputLabel value="Role name: *" for="txt_title"></h:outputLabel>
<h:selectOneMenu id="roleMenu"
value="#{createProjectBean.groupRoleAdapter.roleName}">
<f:selectItems value="#{createProjectBean.roleNames}" var="role"
itemValue="#{role}" itemLabel="#{role}" />
</h:selectOneMenu>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:roleMenu" />
<f:verbatim>
<br />
</f:verbatim>
<p:commandButton value="Add" update="creationForm:out"
action="#{createProjectBean.reinit}">
<p:collector value="#{createProjectBean.groupRoleAdapter}"
addTo="#{createProjectBean.selectedGroupRoleAdapters}"/>
</p:commandButton>
</h:panelGrid>
</p:panel>
<f:verbatim>
<br />
</f:verbatim>
<p:outputPanel id="out">
<p:dataTable value="#{createProjectBean.selectedGroupRoleAdapters}"
var="groupRoleAdapter">
<p:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{groupRoleAdapter.groupName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Role" />
</f:facet>
<h:outputText value="#{groupRoleAdapter.roleName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Operation" />
</f:facet>
<p:commandLink value="Remove" update="creationForm:out">
<p:collector value="#{groupRoleAdapter}" removeFrom="#{createProjectBean.selectedGroupRoleAdapters}" />
</p:commandLink>
</p:column>
</p:dataTable>
</p:outputPanel>
I'd like to use the same instance of bean while adding and removing groupRoleAdapters from list selectedGroupRoleAdapters (represented by collector table), but create new instance of bean every time i try to create new project, so changing scope to sessionScope is not what i can accept.
Thanks in advance for every help.
I attach full code of that view:
<!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: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.prime.com.tr/ui">
<ui:composition template="/templates/template.xhtml">
<ui:define name="head">
<title>Create Project</title>
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/styles/style.css" />
</ui:define>
<ui:define name="content">
<div class="mainTable">
<center><f:view>
<h:outputText id="error" rendered="false" />
<h:message styleClass="errorMessage" for="error" />
<h:form id="creationForm">
<h:panelGrid columns="2" width="420">
<h:panelGroup width="300">
<h:outputLabel styleClass="formLabel" value="Name: "></h:outputLabel>
</h:panelGroup>
<h:panelGroup>
<h:inputText styleClass="formField" id="name"
value="#{createProjectBean.project.name}" required="true">
<f:validateLength minimum="3" />
</h:inputText>
</h:panelGroup>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:name" />
<h:panelGroup>
<h:outputLabel styleClass="formLabel" value="Short Name: " />
</h:panelGroup>
<h:panelGroup>
<h:inputText styleClass="formField" id="shortname"
value="#{createProjectBean.project.shortname}" required="false">
<f:validateLength maximum="8" />
</h:inputText>
</h:panelGroup>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:shortname" />
<h:panelGroup>
<h:outputLabel styleClass="formLabel" value="Homepage: " />
</h:panelGroup>
<h:panelGroup>
<h:inputText styleClass="formField" id="homepage"
value="#{createProjectBean.project.homepage}" required="false">
</h:inputText>
</h:panelGroup>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:hostname" />
<h:panelGroup>
<h:outputLabel styleClass="formLabel" value="Description: " />
</h:panelGroup>
<h:panelGroup>
<h:inputTextarea styleClass="formField" id="description"
value="#{createProjectBean.project.description}" required="false"
cols="50" rows="10" />
</h:panelGroup>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:description" />
<h:panelGroup>
<h:outputLabel styleClass="formLabel" value="Plugins: " />
</h:panelGroup>
<h:selectManyListbox id="pluginBox"
value="#{createProjectBean.selectedPluginNames}">
<f:selectItems value="#{createProjectBean.pluginNames}"
var="plugin" itemValue="#{plugin}" itemLabel="#{plugin}" />
</h:selectManyListbox>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:pluginBox" />
<h:panelGroup>
<h:outputLabel styleClass="formLabel" value="Tags: " />
</h:panelGroup>
<h:selectManyListbox id="tagBox"
value="#{createProjectBean.project.tags}">
<f:selectItems value="#{createProjectBean.allTags}" var="tag"
itemValue="#{tag}" itemLabel="#{tag.name}" />
</h:selectManyListbox>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:tagBox" />
<f:verbatim>
<br />
</f:verbatim>
<p:panel header="Add group">
<h:panelGrid columns="2">
<h:outputLabel value="Group name: *" for="txt_title"></h:outputLabel>
<h:selectOneMenu id="groupMenu"
value="#{createProjectBean.groupRoleAdapter.groupName}">
<f:selectItems value="#{createProjectBean.groupNames}"
var="group" itemValue="#{group}" itemLabel="#{group}" />
</h:selectOneMenu>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:groupMenu" />
<h:outputLabel value="Role name: *" for="txt_title"></h:outputLabel>
<h:selectOneMenu id="roleMenu"
value="#{createProjectBean.groupRoleAdapter.roleName}">
<f:selectItems value="#{createProjectBean.roleNames}" var="role"
itemValue="#{role}" itemLabel="#{role}" />
</h:selectOneMenu>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:roleMenu" />
<f:verbatim>
<br />
</f:verbatim>
<p:commandButton value="Add" update="creationForm:out"
action="#{createProjectBean.reinit}">
<p:collector value="#{createProjectBean.groupRoleAdapter}"
addTo="#{createProjectBean.selectedGroupRoleAdapters}"/>
</p:commandButton>
</h:panelGrid>
</p:panel>
<f:verbatim>
<br />
</f:verbatim>
<p:outputPanel id="out">
<p:dataTable value="#{createProjectBean.selectedGroupRoleAdapters}"
var="groupRoleAdapter">
<p:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{groupRoleAdapter.groupName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Role" />
</f:facet>
<h:outputText value="#{groupRoleAdapter.roleName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Operation" />
</f:facet>
<p:commandLink value="Remove" update="creationForm:out">
<p:collector value="#{groupRoleAdapter}"
removeFrom="#{createProjectBean.selectedGroupRoleAdapters}" />
</p:commandLink>
</p:column>
</p:dataTable>
</p:outputPanel>
<f:verbatim>
<br />
</f:verbatim>
<h:commandButton value="Create" styleClass="formButton"
action="#{createProjectBean.create}" />
</h:panelGrid>
</h:form>
</f:view></center>
</div>
</ui:define>
</ui:composition>
</html>
If you're already on JSF 2.0, just put the bean in view scope, by either #ViewScoped annotation or by <managed-bean-scope>view</managed-bean-scope> in faces-config.xml.
If you're still on JSF 1.x (which I'm afraid of since you're using those ugly JSF 1.0/1.1-mandatory <f:verbatim> tags), then you have to either put bean in session scope, eventually in combination with an unique request scoped parameter which is retained in subsequent requests by h:inputHidden or f:param, or to grab a 3rd party library with a component which is able to save the state of an entire request scoped bean for the subsequent request, like Tomahawk's t:saveState.
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;
}
}
In this page this part get called twice. I can't see the reason for this. The problem this leads to is that the selections in the selectonemenu will get reset and then return the incorrect result for the second call.
ServiceSeries is a session bean.
Can anyone tell me why this double call happens?
<c:forEach var="list" items="#{serviceSeries.getSeriesForPlayerInfo(club.name, player.stringID, st, calendarBean)}">
<!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:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/WEB-INF/templates/template.xhtml">
<ui:define name="content">
<h:form>
<div id="left">
<h:commandLink action="player" value="Gå till spelare" />
<br />
<h:commandLink action="club" value="Gå till Klubb" />
<br />
<h:commandLink action="serieType" value="Gå till Serie typ" />
<br />
<h:commandLink action="serie" value="Gå till En serie" />
<br />
<h:commandLink action="serieTotal" value="Gå till Serie Total" />
<br />
<h:commandLink action="showAverages" value="Gå till snittlista" />
<br />
</div>
<div id="right">
<div id="pageHeader">Snitt information</div>
<h:panelGrid columns="2">
Spelare
<p:selectOneMenu value="#{player}"
converter="playerConverter" id="playerList">
<f:selectItem itemLabel="---" noSelectionOption="true" />
<f:selectItems value="#{servicePlayer.allPlayers}"
var="n"
itemValue="#{n}"
itemLabel="#{n.combinedName}"
itemLabelEscaped="true"/>
</p:selectOneMenu>
<h:outputText value="Klubb"></h:outputText>
<p:selectOneMenu id="ClubMenu" value="#{club.name}">
<f:selectItems value="#{serviceHCP.clubs}" />
</p:selectOneMenu>
<h:outputText value="Serietyp"></h:outputText>
<p:selectOneMenu value="#{st}"
converter="serieTypeConverter" id="serieTypeList">
<f:selectItem itemLabel="---" noSelectionOption="true" />
<f:selectItems value="#{serviceSerieType.serieTypes}"
var="st"
itemValue="#{st}"
itemLabel="#{st.serie_type}"
itemLabelEscaped="true"/>
</p:selectOneMenu>
<h:outputText value="Startdatum"></h:outputText>
<p:calendar value="#{calendarBean.date1}" id="popupButtonCal" showOn="button" pattern="yyyy-MM-dd HH:mm:ss" >
</p:calendar>
<h:outputText value="Slutdatum"></h:outputText>
<p:calendar value="#{calendarBean.date2}" id="popupButtonCal2" showOn="button" pattern="yyyy-MM-dd HH:mm:ss" >
</p:calendar>
<h:outputText value=""></h:outputText>
<h:commandButton value="Visa lista" action="showSeriesInfo">
</h:commandButton>
</h:panelGrid>
</div>
<div id="right">
Players
<br />
<!-- h:form -->
<h:panelGrid columns="9" border="1" cellpadding="3">
<h:outputText value="Namn" />
<h:outputText value="ID" />
<h:outputText value="Klubb" />
<h:outputText value="Datum" />
<h:outputText value="typ" />
<h:outputText value="Info" />
<h:outputText value="Antal serier" />
<h:outputText value="Total" />
<h:outputText value="Snitt" />
<c:forEach var="list" items="#{serviceSeries.getSeriesForPlayerInfo(club.name, player.stringID, st, calendarBean)}">
<h:outputText value=" #{list[0].toString() }" />
<h:outputText value=" #{list[1].toString() }" />
<h:outputText value="#{serie.getSerieDateString(list[2]) }" />
<h:outputText value="#{list[3].toString()}"/>
<h:outputText value=" #{list[4].toString() }" />
<h:outputText value=" #{list[5].toString() }" />
<h:outputText value=" #{list[6].toString() }" />
<h:outputText value=" #{list[7].toString() }" />
<h:outputText value=" #{list[8].toString() }" />
</c:forEach>
</h:panelGrid>
</div>
</h:form>
</ui:define>
</ui:composition>
</html>
If I understand your problem description correctly, its expected behavior; JSF has 6 lifecycles for a request and the same method may be invoked in each and every one of them; in my experience it sometimes happens twice and sometimes happens three times in a single request depending on which phases JSF invokes and which ones it skips.
Its your job to know that this can happen, when it can happen (by studying the lifecycle phases) and design your code accordingly, for example by ensuring that the methods return exactly the same thing for each and every lifecycle phase. There are multiple strategies that may apply, such as utilizing specific scopes (view, session, conversation), through lazy initialization or by using a bean init method annotated with PostConstruct to do one time initialization for a bean.
If you need further assistance, I suggest you post the relevant server side (Java) code too. the problem originates there somewhere.
This might help: http://balusc.blogspot.nl/2006/09/debug-jsf-lifecycle.html
I'm trying to render validation messages. The trick I'm working on is that the messages appear only after pressing Enter key (not after submit button!). After that it works correctly.
Here's what I did at the JSF side (some parts have been omitted for simplicity) :
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:sec="http://www.springframework.org/security/facelets/tags"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<body>
<ui:composition>
<h:form id="idForm">
<h:panelGrid width="100%"
rendered="#{not empty declarationReglementaireModel.detailCurrentDecReg.decReg.listLigneGldsDTO}">
<rich:extendedDataTable id="listGLD" iterationStatusVar="itGLD"
rows="50"
value="#{declarationReglementaireModel.detailCurrentDecReg.decReg.listLigneGldsDTO}"
var="ligneGLD" frozenColumns="1" style="height:300px; width:920px;"
selectionMode="none">
<rich:column width="35px">
<h:panelGrid columns="1" cellpadding="2">
<a4j:commandLink render="editGridGLD" execute="#this"
oncomplete="#{rich:component('modifGLD')}.show()">
<span class="icone icone-edit icone-align-center" />
<a4j:param value="#{itGLD.index}"
assignTo="#{declarationReglementaireModel.currentLigneGldIndex}" />
<f:setPropertyActionListener
target="#{declarationReglementaireModel.currentLigneGld}"
value="#{ligneGLD}" />
</a4j:commandLink>
</h:panelGrid>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Montant encaissement exercice" />
</f:facet>
<div style="text-align: right">
<h:outputText value="#{ligneGLD.mtEncaissesExercice}">
<f:convertNumber currencySymbol="€" groupingUsed="true"
maxFractionDigits="2" type="currency" />
</h:outputText>
</div>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Montant réductions exercice" />
</f:facet>
<div style="text-align: right">
<h:outputText value="#{ligneGLD.mtReducExercice}">
<f:convertNumber currencySymbol="€" groupingUsed="true"
maxFractionDigits="2" type="currency" />
</h:outputText>
</div>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Date PACA" />
</f:facet>
<h:outputText value="#{ligneGLD.dtPaca}">
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="Europe/Paris" />
</h:outputText>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Numéro OLAF" />
</f:facet>
<h:outputText value="#{ligneGLD.noOlaf}">
</h:outputText>
</rich:column>
<rich:column width="200px">
<f:facet name="header">
<h:outputText value="Origine titre" />
</f:facet>
<h:outputText value="#{ligneGLD.origineTitre}">
</h:outputText>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Contentieux" />
</f:facet>
<h:outputText value="#{ligneGLD.boContentieux}">
</h:outputText>
</rich:column>
</rich:extendedDataTable>
<h:panelGrid columns="3" styleClass="liste">
<h:panelGroup>
<h:outputText id="paginationCompteurGLD"
value="Ligne #{composantPaginationGLDBack.firstElement} à #{composantPaginationGLDBack.lastElement} sur #{composantPaginationGLDBack.nbTotalElements}" />
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
<rich:popupPanel header="Données modifiables" id="modifGLD"
domElementAttachment="form" autosized="true" zindex="500"
left="auto" top="auto">
<h:panelGrid columns="1" id="editGridGLD">
<h:panelGroup styleClass="bloc-contenu-message " layout="block">
<rich:messages />
</h:panelGroup>
<h:panelGrid columns="6" cellspacing="10"
styleClass="criteresSaisie" rowClasses="critereLigne"
columnClasses="titreCourtColonne,,titreCourtColonne,,titreCourtColonne,">
<h:outputLabel for="GLDdtDeclCreanceMandataire"
value="Date déclaration mandataire" />
<rich:calendar id="GLDdtDeclCreanceMandataire" inputSize="8"
value="#{declarationReglementaireModel.currentLigneGld.dtDeclCreanceMandataire}"
enableManualInput="true" datePattern="dd/MM/yyyy"
showInput="true">
</rich:calendar>
<h:outputLabel value="Montant réductions exercice" />
<h:inputText
value="#{declarationReglementaireModel.currentLigneGld.mtReducExercice}"
onchange="this.value=this.value.replace(/\./g,',')" size="10">
<f:convertNumber maxFractionDigits="2" type="number" />
</h:inputText>
<h:outputLabel for="GLDdtPaca" value="Date PACA" />
<rich:calendar id="GLDdtPaca" inputSize="8"
value="#{declarationReglementaireModel.currentLigneGld.dtPaca}"
enableManualInput="true" datePattern="dd/MM/yyyy"
showInput="true">
</rich:calendar>
</h:panelGrid>
<h:panelGroup>
<div align="right">
<h:panelGrid columns="8">
<a4j:commandButton value="Enregistrer"
action="#{rechercheDecRgltCtrl.enregistrerLigneGLD}"
render="editGridGLD" execute="modifGLD"
oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('modifGLD')}.hide();}" />
<a4j:commandButton value="Annuler"
onclick="#{rich:component('modifGLD')}.hide(); return false;" />
</h:panelGrid>
</div>
</h:panelGroup>
</h:panelGrid>
</rich:popupPanel>
</h:form>
</ui:composition>
</body>
</html>
You can use a4j:support to sent request when you want,
like onblur / onkeyup ... or any javascript the item supported.
http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/a4j_support.html
<html xmlns="http://www.w3.org/1999/xhtml"
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">
<h:head>
<title>Community</title>
</h:head>
<h:body>
<rich:panel>
<f:facet name="header">
<h:outputText value="Login form" />
</f:facet>
<h:form id="loginform">
<h:panelGrid columns="2" width="210">
<rich:validator id="loginformvalidate">
<h:outputText value="Username:" />
<h:inputText label="username" id="username" value="#{loginMB.username}" required="true" requiredMessage="user name is requried">
<f:validateLength minimum="5" />
</h:inputText>
<h:outputText value="Password" />
<h:inputSecret label="password" id="password" value="#{loginMB.password}" requiredMessage="password is requried">
<f:validateLength minimum="8" maximum="16" />
</h:inputSecret>
</rich:validator>
<rich:notifyMessages stayTime="2000" nonblocking="true" />
<f:facet name="footer">
<a4j:commandButton value="Login"/>
</f:facet>
</h:panelGrid>
</h:form>
</rich:panel>
<rich:panel>
<h:form id="Questions">
<rich:dataTable value="#{contentBean.questions}" var="list" id="question" >
<rich:column>#{list.QUserid.fname}</rich:column><br/>
<rich:column> <rich:collapsiblePanel expanded="false" header="#{list.questionValue}" switchType="client" onclick="#{contentBean.onclick(list.qid)}" >
<rich:accordion id="answer" switchType="ajax">
<a4j:repeat value="#{contentBean.ansList}" var="skinName" >
<rich:accordionItem name="#{skinName.ansDate}">
#{skinName.ansValue}
</rich:accordionItem>
</a4j:repeat>
</rich:accordion></rich:collapsiblePanel></rich:column>
<br/><rich:column>
<h:commandButton value="Show popup">
<rich:componentControl target="popup" operation="show">
<a4j:param noEscape="true" value="event" />
<rich:hashParam>
<f:param name="width" value="500" />
<f:param name="height" value="300" />
<f:param name="minWidth" value="300" />
<f:param name="minHeight" value="150" />
<a4j:param noEscape="true" name="left" value="(jQuery(window).width()/2)-250" />
<a4j:param noEscape="true" name="top" value="(jQuery(window).height()/2)-150" />
</rich:hashParam>
</rich:componentControl>
</h:commandButton>
<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Add your answer" />
</f:facet>
<p>Enter your answer in less than 4000 char</p>
<p>
<h:inputTextarea id="answertxt" value="#{contentBean.ansvalue}" required="true" requiredMessage="this feild is required"/>
<h:commandButton value="Submit" onclick="#{rich:component('popup')}.hide(); return false;">
<a4j:actionListener for="Submit" listener="#{contentBean.addAnswer(list.QUserid,list.QGroupid, list)}"/>
</h:commandButton>
</p>
</rich:popupPanel>
</rich:column>
</rich:dataTable>
</h:form>
</rich:panel>
</h:body>
</html>
I am new to jsf and richfaces i am tring to create two panels in singles with different forms can i do that? the page worked until i have added new button which uses action listener in a popup window
i am getting following error
INFO: WEB0671: Loading application [My_community] at [/My_community]
INFO: My_community was successfully deployed in 19,911 milliseconds.
SEVERE: /index.xhtml #21,61 id="loginformvalidate" Unhandled by MetaTagHandler for type org.richfaces.component.behavior.ClientValidatorImpl
the page runs but submit button on popup generated action listener is not working
please let me know if i am doing any thing wrong
Are you sure, rich:validator can have children ? I think it should be inside the fields you want to validate:
<h:inputText label="username" id="username" value="#{loginMB.username}" required="true" requiredMessage="user name is requried">
<f:validateLength minimum="5" />
<rich:validator/>
</h:inputText>
Im trying to create a page that uses the rich:fileUpload, to (surprisingly) upload an image, once the upload is completed I want to 'hide' the rich:fileUpload component and display the jQuery plugin jCrop so that the image can be cropped before saving. once the image is saved from the crop selected, the two components should toggle their viewability again.
However, I dont appear to be able to get the rich:fileUpload to 'hide'. the jCrop component displays fine, as does the jCrop functionality. but no matter what I try rich:fileUpload is still displayed on the screen. Actually if I add rendered="#{!uploadAndCrop.newImage}" to the rich:panel that the rich:fileUpload is in, nothing seems to update. I have to remove this for the jCrop component to appear.
My code is below, it is a little messy as ive tried so many different things. Would be extremely grateful if someone could point me in the right direction with this, or advise a better way of doing it.
Thanks
<ui:define name="head">
<link href="stylesheet/jquery.Jcrop.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery.Jcrop.js"></script>
<script language="Javascript">// <![CDATA[ //
{
var $J = jQuery.noConflict();
}
//]]> //</script>
</ui:define>
<ui:define name="body">
<h:form>
<h:panelGrid columns="2" columnClasses="top,top">
<h:panelGroup id="uploadgroup">
<a4j:outputPanel id="uploadpanel">
<rich:panel rendered="#{!uploadAndCrop.newImage}">
<rich:fileUpload fileUploadListener="#{uploadAndCrop.listener}"
maxFilesQuantity="#{uploadAndCrop.uploadsAvailable}" id="upload"
immediateUpload="#{uploadAndCrop.autoUpload}"
acceptedTypes="jpg, gif, png, bmp"
allowFlash="#{uploadAndCrop.useFlash}" listHeight="80px">
<ui:remove>
onfileuploadcomplete="Richfaces.showModalPanel('croppanel');">
</ui:remove>
<a4j:support event="onuploadcomplete"
reRender="info, uploadgroup, cropgroup" />
</rich:fileUpload>
<h:outputText value="#{uploadAndCrop.newImage}" id="newimage" />
<a onclick="Richfaces.showModalPanel('croppanel');" href="#">Show
ModalPanel</a>
</rich:panel>
</a4j:outputPanel>
</h:panelGroup>
<h:panelGroup id="info">
<rich:panel bodyClass="info" rendered="#{!uploadAndCrop.newImage}">
<f:facet name="header">
<h:outputText value="Uploaded Image Preview" />
</f:facet>
<rich:dataGrid columns="1" value="#{uploadAndCrop.files}"
var="file" rowKeyVar="row">
<rich:panel bodyClass="rich-laguna-panel-no-header">
<h:panelGrid columns="2">
<a4j:mediaOutput element="img" mimeType="#{file.mime}"
createContent="#{uploadAndCrop.paint}" value="#{row}"
style="width:156x; height:71px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
</h:panelGrid>
</rich:panel>
</rich:dataGrid>
</rich:panel>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Clear Uploaded Image" />
</h:panelGroup>
<h:panelGroup id="cropgroup">
<rich:panel rendered="#{uploadAndCrop.newImage}">
<f:facet name="header">
<h:outputText value="Crop Image" />
</f:facet>
<a4j:outputPanel id="crop" layout="inline">
<rich:jQuery selector="#cropbox" timing="immediate"
query="Jcrop()" />
<a4j:mediaOutput element="img"
mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
createContent="#{uploadAndCrop.paintCrop}" value="null"
style="width:312; height:142px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Crop" />
</a4j:outputPanel>
</rich:panel>
</h:panelGroup>
</h:panelGrid>
<h:commandButton id="save" value="Save"
action="#{uploadAndCrop.save}">
<f:param name="cmsCompanyIdCom" value="" />
</h:commandButton>
<s:button id="cancelEdit" value="Cancel" propagation="end"
view="/CmsCompany.xhtml">
<f:param name="cmsCompanyIdCom" value="" />
</s:button>
</h:form>
<ui:remove>
<rich:modalPanel id="croppanel" width="350" height="240">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Crop Image"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="image">
<ui:remove>
<h:panelGroup>
<h:outputText value="close" />
<rich:componentControl for="croppanel" attachTo="close"
operation="hide" event="onclick" />
</h:panelGroup>
</ui:remove>
</f:facet>
<rich:panel rendered="#{uploadAndCrop.newImage}">
<ui:remove>
<f:facet name="header">
<h:outputText value="Crop Image" />
</f:facet>
</ui:remove>
<a4j:outputPanel id="crop" layout="inline">
<a4j:mediaOutput element="img"
mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
createContent="#{uploadAndCrop.paintCrop}" value="null"
style="width:312; height:142px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
<ui:remove>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Crop" />
</ui:remove>
</a4j:outputPanel>
</rich:panel>
<a onclick="Richfaces.hideModalPanel('croppanel');" href="#">Hide
ModalPanel</a>
</rich:modalPanel>
</ui:remove>
</ui:define>
I dont know how is your uploadAndCrop.newImage method, but you can just use a boolean and sets it to false on the fileUploadListener.
But reRender the <a4j:outputPanel id="uploadpanel">, not the <rich:fileUpload> or the group.
<a4j:outputPanel id="uploadpanel" rendered="#{bean.fileUpRendered}">
(...)
<rich:fileUpload...
<a4j:support event="onuploadcomplete"
reRender="info, uploadpanel, cropgroup" />
</rich:fileUpload>
(...)
</a4j:outputPanel>
Bean:
Boolean fileUpRendered;
(...)
public void listener(UploadEvent event) throws Exception {
try {
(...)
fileUpRendered = false;
catch (...) { (...) }
}
//Get set
public get/set fileUpRendered() { }...