3 Replies Latest reply on Apr 8, 2013 4:52 AM by michpetrov

    Creating a wizard using ui:include, rich:popupPanel and navigation-rules

    joegis

      I am trying to build a wizard using ui:include in a RichFaces 4 popupPanel and navigation-rules in the faces-config.xml, but on completing the actions in the backing bean, the page does not navigate to the target page. I have checked to ensure that the bean executes as expected and that it provides the expected outcome.

       

      The JSF page and the included page are listed below:

      <rich:popupPanel modal="true" id="addSvcAcctPanel" autosized="true">

             
      <rich:messages id="addSvcAcctPanelMessages" globalOnly="false"
                 
      styleClass="message" />

             
      <a:outputPanel id="includeAddSvcAcct">         
                 
      <ui:include src="/layout/addSvcAccPg2.xhtml" />
             
      </a:outputPanel>                   

             
      <h:form id="closeSvcAcctForm">
                 
      <div class="buttons">
                     
      <a:commandButton styleClass="save" id="closeAddSvcBtn"
                         
      value="close"
                         
      onclick="#{rich:component('addSvcAcctPanel')}.hide()"
                         
      render="hasAgentsAccItm,svcAccAccordItm,svcAcctsTab,svcAccInfo,agentPanel,ServiceAccts,noticesAccordion">
                         
      <rich:tooltip direction="topRight" mode="client" showDelay="300"
                             
      styleClass="tooltip" layout="block">

                             
      <span style="white-space: wrap">Click on the 'Close'
                                  button to close this panel and return to the main screen. If you
                                  have any unsaved information on this page, it will be lost when
                                  you click close.
      </span>

                         
      </rich:tooltip>
                     
      </a:commandButton>
                 
      </div>             
             
      </h:form>
         
      </rich:popupPanel>

      The inserted JSF code for the two panels is as follows:

      <?xml version="1.0" encoding="UTF-8" ?>
      <h:form xmlns="http://www.w3.org/1999/xhtml"
         
      xmlns:s="http://jboss.com/products/seam/taglib"
         
      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:rich="http://richfaces.org/rich"
         
      xmlns:richext="http://java.sun.com/jsf/composite/richext"
         
      xmlns:a="http://richfaces.org/a4j">

         
      <rich:panel id="addSvcAcctPanel" headerClass="head2" style="height:100%;">
             
      <f:facet name="header">
                 
      <h:outputText styleClass="med_black_type_bold_facet"
                     
      value="Add a Service Account" />
             
      </f:facet>



             
      <h:panelGrid columns="3">
                 
      <h:outputText styleClass="med_black_type_bold"
                     
      value="Department" id="companyLabel" />

                 
      <rich:select styleClass="med_black_type" id="companySelect"
                     
      required="true" value="#{main.selected_company}" render="acctWarning, accountLabel1" valueChangeListener="#{main.determineProperAccountName}">
                     
      <f:selectItem
                         
      itemLabel="Please select an Organisation"
                         
      itemValue="" />
                     
      <f:selectItems value="#{country_companies}" />
                     
      <a:ajax event="selectitem" render="acctWarning, accountLabel1, acctNumberExplain, acctIdHeader, acctIDHelp" execute="@this"/>              
                 
      </rich:select>

                 
      <rich:message for="companySelect" style=" width : 330px;" />

                 
      <h:outputText styleClass="med_black_type_bold"
                     
      value="Account 'Nickname'" id="nicknameLabel" />


                 
      <h:inputText styleClass="med_black_type" id="nickname"
                     
      value="#{main.alias}" onfocus="#{rich:component('nickNameHelpPanel')}.show()"
                     
      onblur="#{rich:component('nickNameHelpPanel')}.hide()">
                     
      <rich:validator /> 

                     
      <!-- <f:ajax event="focus" execute="@this" onevent="#{rich:component('nickNameHelpPanel')}.show()"/>       
                      <f:ajax event="blur" execute="@this" onevent="#{rich:component('nickNameHelpPanel')}.hide()"/> -->

                 
      </h:inputText>
                 
      <rich:message for="nickname" style=" width : 330px;" />

                 
      <richext:spacer width="30" />
                 
      <h:outputText id="acctWarning" styleClass="med_blue_type_bold"
                     
      value="Enter the #{main.accountProperName} below - numbers and letters only! No dots or dashes." />
                 
      <richext:spacer width="30" />

                 
      <h:outputText styleClass="med_black_type_bold"
                     
      value="#{main.accountProperName}" id="accountLabel1" />

                 
      <h:inputText styleClass="med_black_type" id="account"
                     
      value="#{main.account_id}" onfocus="#{rich:component('acctIDHelpPanel')}.show()"
                     
      onblur="#{rich:component('acctIDHelpPanel')}.hide()">
                     
      <rich:validator />

                     
      <!-- <f:ajax event="focus" execute="@this" onevent="#{rich:component('acctIDHelpPanel')}.show()"/>     
                      <f:ajax event="blur" execute="@this" onevent="#{rich:component('acctIDHelpPanel')}.hide()"/> -->

                 
      </h:inputText>
                 
      <rich:message for="account" style=" width : 330px;" />
             
      </h:panelGrid>

             
      <div class="buttons">

                 
      <a:commandButton styleClass="save" id="addServiceCompany"
                     
      value="save" action="#{main.addAccount}" render="includeAddSvcAcct, includeAddSvcAcct1"/>
             
      </div>
         
      </rich:panel>



      </h:form>


      Second Inserted Page

      <?xml version="1.0" encoding="UTF-8" ?>

      <h:form xmlns="http://www.w3.org/1999/xhtml"

          xmlns:s="http://jboss.com/products/seam/taglib"

          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:rich="http://richfaces.org/rich"

          xmlns:richext="http://java.sun.com/jsf/composite/richext"

          xmlns:a="http://richfaces.org/a4j">

         

         

          <rich:panel>

              <h:outputText value="The service account has been successfully added." styleClass="med_black_type"/>

          </rich:panel>   

      </h:form>


      The relevant excerpt from the faces-config is as follows:

      <?xml version="1.0" encoding="UTF-8"?>
      <faces-config version="2.1"
      xmlns="http://java.sun.com/xml/ns/javaee"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd">

      <navigation-rule>
       
      <from-view-id>/layout/addSvcAccPg2.seam</from-view-id>
       
      <navigation-case>
        
      <from-action>#{main.outcome}</from-action>
        
      <from-outcome>success</from-outcome>
        
      <to-view-id>/layout/addSvcAccPg3.seam</to-view-id>
       
      </navigation-case>
      </navigation-rule>

      <application>
       
      <locale-config>
        
      <default-locale>en</default-locale>
        
      <supported-locale>bg</supported-locale>
        
      <supported-locale>de</supported-locale>
        
      <supported-locale>en</supported-locale>
        
      <supported-locale>fr</supported-locale>
        
      <supported-locale>tr</supported-locale>
       
      </locale-config>
      </application>
      </faces-config>

      The method from the backing bean is as follows:

      public String addAccount() {
             
      String retVal = "failed";
             
      try {

                  getSAFctx
      .addService(getIntUserId(), 1, selected_company,
                          account_id
      , alias);        
                  retVal
      = "success";
             
      } catch (Exception e) {

                
      System.out.println(e.getMessage());                 

             
      } finally {                    

                 
      return retVal;
             
      }
      }

      I have tried to this using pages.xml, *.pages.xml and rich:togglePanel (which for some reason, does not permit commandButtons to engage backing beans). Does anyone have any suggestions that can help? Does anyone know how to make this wizard work?

      Thanks in advance.

      Dave.

        • 1. Re: Creating a wizard using ui:include, rich:popupPanel and navigation-rules
          ibstmt

          I created a wizard by using onclick to close the current popup, and oncomplete to open the next one. (I use 3.3.3, so please excuse the 3.3.3 language.)  Here is a sample:

           

          <h:panelGrid columns="2">

          <a4j:commandButton value="Continue"

              ajaxSingle="true"

              action="#{myBean.doSomething}"

              reRender="wizardForm2"

                onclick="#{rich:component('wizardModal1')}.hide();"

                oncomplete="#{rich:component('wizardModal2')}.show()"/>   

          <a4j:commandButton value="#{messages.cancel}"

              ajaxSingle="true"

              onclick="#{rich:component('wizardModal1')}.hide();return false;" />   

          </h:panelGrid>

          1 of 1 people found this helpful
          • 2. Re: Creating a wizard using ui:include, rich:popupPanel and navigation-rules
            joegis

            Hi ibstmt,

             

            I had to resort to doing something similar - closing one popup and opening another - instead of implementing a true wizard.  I also tried to do a dynamic src for the ui:include i.e. <ui:include src="#{backingbean.property}" but that stopped all of the seam factory methods from executing. I have no idea what happened there.

             

            In  any case, thank you for your reply.

             

            David.

            • 3. Re: Creating a wizard using ui:include, rich:popupPanel and navigation-rules
              michpetrov

              David Gibson wrote:

               

              I also tried to do a dynamic src for the ui:include i.e. <ui:include src="#{backingbean.property}" but that stopped all of the seam factory methods from executing. I have no idea what happened there.

               

              Your backingbean has to be @ApplicationScoped (javax.enterprise.context.ApplicationScoped) for it to work.

               

              As to your main issue:

               

               

              <a:commandButton styleClass="save" id="addServiceCompany"
                              value="save" action="#{main.addAccount}" render="includeAddSvcAcct, includeAddSvcAcct1"/>

               

               

              but in your navigation rules there is:

               

               

               <navigation-rule>
                <from-view-id>/layout/addSvcAccPg2.seam</from-view-id>
                <navigation-case>
                 <from-action>#{main.outcome}</from-action>
                 <from-outcome>success</from-outcome>
                 <to-view-id>/layout/addSvcAccPg3.seam</to-view-id>
                </navigation-case>
               </navigation-rule>

               

               

              The <from-action> has to be the same as the action on the button, i.e. #{main.addAccount}.