How to use popupPanel in RichFaces 4.
hantsy Sep 5, 2011 4:51 AMI am richfaces 3.3 user, and I want to migrate my application to richfaces 4, and encoutered many problems....such as the the popupPanel in richfaces4, it is very strange, I have tried all the method I used in richfaces 3.3, still did not work.
I wasted two days on teh popupPanel...
I used Seam 3, JBoss 7.0.1.Final, Richfaces 4 release...
In the CityEdit page, I added a city with several areacodes, I used a popupPanel to add areaCode..I found I can not get the value of it in the backend bean.
Where is wrong?
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ui:composition 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:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:p="http://java.sun.com/jsf/composite/components/property" template="/WEB-INF/layout/template.xhtml"> <ui:define name="content"> <div class="section"> <h1>#{cityEdit.currentCity.id==null?'Add City':'Edit City'}</h1> <a4j:outputPanel id="editPane"> <h:form id="editForm"> <fieldset> <p:input id="cityCountry" label="#{messages['City.Country']}" required="true"> <h:selectOneMenu value="#{cityEdit.currentCity.country}" style="width:200px" required="true"> <f:selectItems value="#{countries}" var="c" itemLabel="#{c.name}" /> <f:validateRequired /> <f:converter converterId="countryConverter" /> </h:selectOneMenu> </p:input> <p:input id="cityName" label="#{messages['City.Name']}" required="true"> <h:inputText id="input" value="#{cityEdit.currentCity.name}" style="width:200px"> <f:validateRequired /> </h:inputText> </p:input> <p:output id="cityAreaCodeOP" label="#{messages['City.AreaCode']}" verbatim="true"> <a4j:outputPanel id="areaCodeField"> <ui:repeat var="a" value="#{cityEdit.currentCity.areaCodes}" varStatus="s"> #{a.areaCode} <a4j:commandLink styleClass="no-decor" render="areaCodeField" execute="@this" action="#{cityEdit.deleteAreaCode(a)}" immediate="true" onclick="if(confirm('#{messages['Confirmation.Delete']}')){return true;}"> <h:graphicImage value="/images/icons/delete.gif" alt="Delete areacode" /> </a4j:commandLink> <ui:fragment rendered="#{not empty cityEdit.currentCity.areaCodes and s.index!=fn:length(cityEdit.currentCity.areaCodes)-1}"> , </ui:fragment> </ui:repeat> #{' '} <h:graphicImage value="/images/icons/new.gif" alt="new areacode" /> <a4j:commandLink styleClass="no-decor" render="areaCodeFormInputs" execute="@this" actionListener="#{cityEdit.initAddAreaCode}" oncomplete="#{rich:component('newAreaCodePane')}.show();"> <h:outputText value="#{messages['Link.AddAreaCode']}" /> </a4j:commandLink> </a4j:outputPanel> </p:output> <div class="buttonBox"> <h:commandButton id="save" value="#{messages['Buttons.Save']}" action="#{cityEdit.save}" render="@none" /> #{' or '} <h:commandLink value="#{messages['Buttons.Cancel']}" action="#{cityEdit.cancel}" immediate="true" /> </div> </fieldset> <rich:popupPanel id="newAreaCodePane" autosized="true" resizeable="false" model="true" width="480" height="180"> <f:facet name="header"> #{messages['City.Title.AddCityAreaCode']} </f:facet> <a4j:outputPanel id="areaCodeFormInputs" layout="block"> <p:input id="cityAreaCode" label="#{messages['City.AreaCode']}" required="true"> <h:inputText id="input" value="#{cityEdit.areaCode}" required="true"> </h:inputText> </p:input> <div class="buttonBox"> <a4j:commandButton id="saveAreaCode" value="#{messages['Buttons.Save']}" action="#{cityEdit.saveAreaCode}" render="editForm:cityAreaCodeOP:areaCodeField, areaCodeFormInputs" execute="newAreaCodePane" oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('newAreaCodePane')}.hide();}" /> #{' or '} <a4j:commandLink value="#{messages['Buttons.Cancel']}" onclick="#{rich:component('newAreaCodePane')}.hide(); return false;" /> </div> </a4j:outputPanel> </rich:popupPanel> </h:form> </a4j:outputPanel> </div> </ui:define> </ui:composition>
package com.telopsys.siorc.addressee; import javax.annotation.PostConstruct; import javax.ejb.Stateful; import javax.enterprise.context.ConversationScoped; import javax.enterprise.event.Event; import javax.enterprise.event.Observes; import javax.enterprise.event.TransactionPhase; import javax.inject.Inject; import javax.inject.Named; import javax.persistence.EntityManager; import javax.persistence.PersistenceContext; import org.jboss.seam.faces.context.conversation.Begin; import org.jboss.seam.faces.context.conversation.End; import org.jboss.seam.international.status.Messages; import org.jboss.seam.logging.Logger; import org.slf4j.LoggerFactory; import com.telopsys.siorc.i18n.DefaultBundleKey; import com.telopsys.siorc.model.City; import com.telopsys.siorc.model.CityAreaCode; @Stateful @ConversationScoped @Named("cityEdit") public class CityEditAction { private static final org.slf4j.Logger logger=LoggerFactory.getLogger(CityEditAction.class); @PersistenceContext() EntityManager em; @Inject Logger log; private City currentCity; private String areaCode; @Inject private Event<City> citySavedEventSrc; @Inject Messages messages; public City getCurrentCity() { return currentCity; } public void setCurrentCity(City currentCity) { this.currentCity = currentCity; } public String getAreaCode() { return areaCode; } public void setAreaCode(String areaCode) { this.areaCode = areaCode; } @PostConstruct public void init() { if (log.isDebugEnabled()) { log.debug("call init..."); } } @Begin public void initAdd() { if (log.isDebugEnabled()) { log.debug("call initAdd..."); } this.currentCity = new City(); } @Begin public void initEdit(City city) { if (log.isDebugEnabled()) { log.debug("call initEdit...@" + city); } this.currentCity = em.merge(city); } public void saveAreaCode() { if (log.isDebugEnabled()) { log.debug("call saveAreaCode..."); log.debug("areacode @"+this.areaCode); } logger.debug("areacode @"+this.areaCode); this.currentCity.addAreaCode(new CityAreaCode(this.areaCode)); } public void initAddAreaCode() { if (log.isDebugEnabled()) { log.debug("call initAddAreaCode..."); } this.areaCode =""; } public void deleteAreaCode(CityAreaCode c) { if (log.isDebugEnabled()) { log.debug("call initAddAreaCode..."); } this.currentCity.removeAreaCode(c); } @End public void save() { if (log.isDebugEnabled()) { log.debug("call save..."); } if (this.currentCity.getId() == null) { em.persist(this.currentCity); } else { this.currentCity = em.merge(this.currentCity); } System.out.print("@current city @"+this.currentCity); this.citySavedEventSrc.fire(this.currentCity); } public void onSaved( @Observes(during = TransactionPhase.AFTER_SUCCESS) City city) { messages.info(new DefaultBundleKey("city_saved")) .defaults("City saved").params(city.getName()); } @End public void cancel() { if (log.isDebugEnabled()) { log.debug("call end..."); } em.clear(); } }