Wizard in ModalPanel

[gabo.gabo80.gmail.com]

Hi,

I am trying to create a two page wizard embedded in a modal panel but I cannot get to the second page, apparently it is not even submitting the request.

What am I doing wrong? Thanks!!!

The code for the modal panel is the following:

<rich:modalPanel id="registrationPanel" width="530" height="500" resizeable="false" moveable="false">
     <h:form>
         <a4j:include viewId="/registrationStep1.xhtml" />
     </h:form>
</rich:modalPanel>

The registrationStep1.xhtml page contains some POJO attributes and a call to the saveUserInfo() method on a Stateful Session Bean:

<h:form>
    First name: <h:inputText name="fname" class="textboxes" id="fname" value="#{user.firstname}"/>
    Last name: <h:inputText name="lname" class="textboxes" id="lname" value="#{user.lastname}"/>
    <a4j:commandLink action="#{userService.saveUserInfo()}">Next</a4j:commandLink>
</h:form>

The Stateful Session Bean userService looks like this:

@Stateful
@Name("userService")
public class UserService implements UserServiceLocal {

     @PersistenceContext(type=PersistenceContextType.EXTENDED)
     private EntityManager em;

     @In
     private FacesMessages facesMessages;
     
     @In(required=false)
     @Out(required=false)
     private User user;

     private boolean userInfoValid;
     
     public void saveUserInfo() {
          userInfoValid = true;
          
          if (user.getFirstname() == null || user.getFirstname().length() == 0) {
               facesMessages.addToControl("fname", "Invalid first name");
               userInfoValid = false;
          }
          
          if (user.getLastname() == null || user.getLastname().length() == 0) {
               facesMessages.addToControl("lname", "Invalid last name");
               userInfoValid = false;
          }
          
          if (userInfoValid) {
               try {
                    em.merge(user);
               } catch (Exception e) {
                    facesMessages.add(e.getMessage());
                    userInfoValid = false;
               }
          }
     }

     public boolean isUserInfoValid() {
          return userInfoValid;
     }
}

And my pages.xml looks like this:

<page view-id="/registrationStep1.xhtml" 
     conversation-required="true">
              
     <description>Save user info</description>
      
        <navigation from-action="#{userService.saveUserInfo}">
         <rule if="#{userService.userInfoValid}">
           <redirect view-id="/layout/registrationStep2.xhtml"/>
         </rule>
     </navigation>
</page>

[mobwerner]

Hi,

I have been struggling with implementing a wizard with a modal panel too.

One thing you should definitely avoid is to nest forms. I guess Max Katz refers to this in his book(Practical Richfaces)

So in your case I guess the a4j:include should not be contained in a h:form.

It's also better to use a render instead redirect to a page.

I hope this will help,

Werner

[gabo.gabo80.gmail.com]

Thanks Werner!

How would I implement a render instead of a redirect?

If I set the rerender attribute in the a4j:commandLink, how would it render page 2 after a successful validation of page 1?

[mobwerner]

Your commandLink will be something like this

<a4j:commandLink value="next" action="page2"  />

Put something like this in your pages.xml

<page view-id="/page1.xhtml">
     <navigation>
          <rule if-outcome="page2">
               <render view-id="/page2.xhtml" />
          </rule>
          
     </navigation>
</page>

If you are having a wizard form, you also can use live validation. You associate a

<a4j:support event="onblur" byPassUpdates="true" reRender="viewid" />

as a child component with your inputText components.The byPassUpdates attribute will take care that the field gets validated as soon as you tab out of the field (onblur event) but it will not be updated on the serverside. In the last page of the wizard you can submit all the fields to the server.

[mobwerner]

Sorry a typo in my last reply should be bypassUpdates instead of byPassUpdates.