Saturday, January 12, 2013

How to create wizard with dynamic include in JSF2

In Richfaces, wizard can be created with <rich:togglePanel />, but the disadvantage of this solution is, the component tree would be quite large.
Because the togglePanel component needed to hold all components for all pages in <rich:togglePanelItem />
Which mean the server needs more memory in order to work well in this situation.

and this solution, applicable to Richfaces only.

In this post, I will show how to create a wizard application with dynamic include. Thus, the component tree only hold the required page. and this solution is applicable to all JSF implementation.

Steps:


1. Create the xhtml for wizard wrapper.
    Highlighted codes are the important section for the dynamic include.
creating dynamic panel

2. Create the xhtml for wizard pages.
    It contains the content of the wizard. eg, wizardStep1.xhtml, wizardStep2.xhtml, and so on.
    with a navigation link/button to navigate to the next wizard step.
    Highlighted codes are the important section to navigate to next step.
action source to render the dynamic section

3. Create the @SessionScoped wizardBean for navigation case.
creating sessionScoped managedBean

3.1 create the url property for value binding.
declaring value holder for dynamic path

3.2 if url is null, default to first page.
setting initial value for dynamic path

3.3 create the wizard navigation cases
action to set dynamic path
      In this step, it could be gotoWizard3(), gotoWizard4() and so on.

complete source for step 3:
complete managedBean for dynamic include

Done!!

How to create layout with dynamic include is a similar example on using dynamic include
Dynamic include with richfaces popupPanel is another example on using dynamic include.

LinkWithin

Related Posts Plugin for WordPress, Blogger...