This is a more complex use-case of a wizard constructed using the rich:togglePanel component.
Main advantages of using this component for wizard creation:
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:outputStylesheet> .col1, .wform td { vertical-align: top; } .col2 { vertical-align: top; width: 450px; } .wizard { width: 400px; } .wfcol1 { text-align: right; white-space: nowrap; } .s1row td { height: 30px; } .navPanel { position: absolute; bottom: 0; height: 23px; margin: 0; padding: 2px; } </h:outputStylesheet> <br /> <h:panelGrid width="100%" columns="2" columnClasses="col1,col2"> <rich:panel styleClass="wizard"> <f:facet name="header"> <h:outputText value="Using rich:togglePanel for Wizard-like behaviour" /> </f:facet> <h:form id="form"> <rich:togglePanel switchType="ajax"> <rich:togglePanelItem> <ui:include src="/richfaces/togglePanel/samples/wstep1.xhtml" /> </rich:togglePanelItem> <rich:togglePanelItem> <ui:include src="/richfaces/togglePanel/samples/wstep2.xhtml" /> </rich:togglePanelItem> <rich:togglePanelItem> <ui:include src="/richfaces/togglePanel/samples/finalStep.xhtml" /> </rich:togglePanelItem> </rich:togglePanel> </h:form> </rich:panel> </h:panelGrid> </ui:composition>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <div style="position: relative; height: 140px"> <h:panelGrid rowClasses="s1row" columns="3" columnClasses="wfcol1,wfcol2,wfcol3"> <h:outputText value="First Name:" /> <h:inputText id="fn" value="#{profile.firstName}" label="First Name" required="true" /> <rich:message for="fn" /> <h:outputText value="Last Name:" /> <h:inputText id="ln" value="#{profile.lastName}" label="Last Name" required="true" /> <rich:message for="ln" /> <h:outputText value="Company:" /> <h:inputText id="comp" value="#{profile.company}" label="Company" required="true" /> <rich:message for="comp" /> </h:panelGrid> <div class="navPanel" style="width: 100%;"> <a4j:commandButton style="float:right" value="Next >>"> <rich:toggleControl targetItem="@next" event="click" /> </a4j:commandButton> </div> </div> </ui:composition>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <div style="position: relative; height: 140px"> <h:panelGrid columns="3" columnClasses="wfcol1,wfcol2,wfcol3"> <h:outputText value="Notes:" /> <h:inputTextarea cols="20" rows="4" id="notes" value="#{profile.notes}" label="Notes" required="true" style="max-height: 90px"/> <rich:message for="notes" /> </h:panelGrid> <div class="navPanel" style="width: 100%;"> <a4j:commandButton value="<<Previous" style="float:left"> <rich:toggleControl targetItem="@prev" event="click" /> </a4j:commandButton> <a4j:commandButton value="Next >>" style="float:right"> <rich:toggleControl targetItem="@next" event="click" /> </a4j:commandButton> </div> </div> </ui:composition>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <div style="position: relative; height: 140px; word-break: break-all; overflow: auto"> <h:panelGrid columns="2" columnClasses="wfcol1"> <h:outputText value="First Name:" /> <h:outputText value="#{profile.firstName}" /> <h:outputText value="Last Name:" /> <h:outputText value="#{profile.lastName}" /> <h:outputText value="Company:" /> <h:outputText value="#{profile.company}" /> <h:outputText value="Notes:" /> <h:outputText value="#{profile.notes}" /> </h:panelGrid> <div class="navPanel"> <a4j:commandButton value="<<Previous" style="float:left"> <rich:toggleControl targetItem="@prev" event="click" /> </a4j:commandButton> </div> </div> </ui:composition>
