7 Replies Latest reply on Sep 10, 2011 11:15 AM by Adrien Adrien

    How to use popupPanel in RichFaces 4.

    hantsy bai Master

      I 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();
          }
      }
      
        • 1. Re: How to use popupPanel in RichFaces 4.
          Ilya Shaikovsky Master

          Sorry, but I do not think that's migration issue. Popup panel always had requirement either 1) to be  placed outside forms and have one inside or 2) to have domElementAttachment attribute to set properly. That's just the first problem I see.

           

          And b.t.w. http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=dataTable&sample=dataTableEdit&skin=blueSky that sample was not changed functionally during migration. Only few renaimed attributes was changed.

          1 of 1 people found this helpful
          • 2. Re: How to use popupPanel in RichFaces 4.
            Chris Ericsson Newbie

            Hi, I also have issues when trying to submit values inside a pop-up panel. Does the form go around the popupPanel or inside. I only got it to pop-up when it's around the panel. When I submit i get a conversion error; null Converter. The popupPanel has it own bean and the values are always null, independen on scope of the bean. Do you know what it could be, or guess, without posting the complete code ?

            • 3. Re: How to use popupPanel in RichFaces 4.
              hantsy bai Master

              I also tried to put a form inside or outside of the popupPanel, it did not work(in before modelPanel in Richfaces, I like put a form inside the modelPanel)...from the log in the jboss server, the values in the popupPanel had not been updated to the backend bean.

              • 4. Re: How to use popupPanel in RichFaces 4.
                hantsy bai Master

                The modifed version...put a form outside, the same result...I can not get the value input in the popupPanel...

                 

                 

                <!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="entityConverter" />
                                            </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}" />
                                            #{' or '}
                                            <h:commandLink value="#{messages['Buttons.Cancel']}"
                                                action="#{cityEdit.cancel}" immediate="true" />
                                        </div>
                                    </fieldset>
                                </h:form>
                            </a4j:outputPanel>
                            <h:form>
                                <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}">
                                                <f:validateRequired/>
                                            </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>
                
                        </div>
                    </ui:define>
                
                </ui:composition>
                
                • 5. Re: How to use popupPanel in RichFaces 4.
                  hantsy bai Master

                  I added domElementAttachment attribute, it worked...But I can not understand why  I needed this attribute.

                   

                  Another big problem is the avalidation  was delayed.

                   

                  When click the new click, in the popupPanel, I did not input anything, and I click save, it did not render the input field and display errors...

                  After I closed the popupPanel, and click new click to get the popupPanel again, the input field was decorated by error css style.

                  • 6. Re: How to use popupPanel in RichFaces 4.
                    hantsy bai Master

                    The current working code...The validation in the popupPanel is problematic, as described above

                     

                     

                    <!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}" />
                                                #{' or '}
                                                <h:commandLink value="#{messages['Buttons.Cancel']}"
                                                    action="#{cityEdit.cancel}" immediate="true" />
                                            </div>
                                        </fieldset>
                                    </h:form>
                                </a4j:outputPanel>
                                <h:form>
                                    <rich:popupPanel id="newAreaCodePane" autosized="true"
                                        domElementAttachment="form" resizeable="false" model="true"
                                        width="480" height="180">
                                        <f:facet name="header">
                                            #{messages['City.Title.AddCityAreaCode']}
                                        </f:facet>
                                        <a4j:region>
                                            <a4j:outputPanel id="areaCodeFormInputs">
                    
                                                <p:input id="cityAreaCode" label="#{messages['City.AreaCode']}"
                                                    required="true">
                                                    <h:inputText id="input" value="#{cityEdit.areaCode}"
                                                        required="true">
                                                    </h:inputText>
                                                </p:input>
                    
                                            </a4j:outputPanel>
                                            <div class="buttonBox">
                                                <a4j:commandButton id="saveAreaCode"
                                                    value="#{messages['Buttons.Save']}"
                                                    action="#{cityEdit.saveAreaCode}"
                                                    render="@region, editForm:cityAreaCodeOP:areaCodeField"
                                                    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:region>
                                    </rich:popupPanel>
                                </h:form>
                            </div>
                        </ui:define>
                    
                    </ui:composition>
                    
                    • 7. Re: How to use popupPanel in RichFaces 4.
                      Adrien Adrien Apprentice

                      look my last response about mojarra 2.1.3

                      http://community.jboss.org/thread/171909