How to realize a multi-page wizard with client-side controller "rules" in JSF2 or GWT2?

Question

In (JSF2 + jQuery) or in GWT: What would be the best way to realize a multi-page form wizard with explicitly specified form controller "rules" running on the client-side?

The goal is:

1. form with 3 pages, each containing 'prev'/'next' buttons and finally 1 'submit' button.
2. all form items have unique ids for addressing/accessing them.

3. for client-side form control there are 2 kind of control "rules" specified in a central place and stored somehow:

   • active behaviour of 1 item (modifying 1+ other items):

     WHEN form item x is checked/changed/text=="MyText"
     THEN show/hide/modifyTextOf item y and item z.
     

   • passive behaviour of 1 item (waiting for 1+ events):
     

     WHEN ((itemA.propX is 'blah') AND (itemB.text()=="Yeah!") OR
           (itemC is checked) AND (itemD.value() >= 10))  
     THEN 
         self.setVisible(true); /self.hide(true);   //and
         itemF.setText("It's Magic!"); 
         ... 
     END-THEN 
     

The action triggering resp. event listening is intented to be on a per-page basis -- one later enhancement could be to also run "cross-page modifications/listenings", e.g. itemA on page 1 triggers some action on itemC on page 3.

How would you define, persist (XML,JSON?) this logic and finally run it within a client-side form controller?

Answer 1

PrimeFaces has a ready-to-use component for this, the p:wizard.

With regard to control rules, make use of the rendered attribute.