HTML and CSS Reference
In-Depth Information
<ui:define name="content">
<h:form>
<h:panelGrid columns="3">
<h:outputText value="#{bundle['user.fname']}"></h:outputText>
<h:inputText id="fname"
value="#{flowScope.fname}"
required="true"
requiredMessage="#{bundle['user.fname.validation']}">
</h:inputText>
<h:message for="fname" styleClass="errorMessage"/>
<h:outputText value="#{bundle['user.lname']}"></h:outputText>
<h:inputText id="lname"
value="#{flowScope.lname}"
required="true"
requiredMessage="#{bundle['user.lname.validation']}">
</h:inputText>
<h:message for="lname" styleClass="errorMessage"/>
<h:outputText value="#{bundle['user.profession']}"></h:outputText>
<h:selectOneMenu id="profession"
value="#{flowScope.profession}">
<f:selectItem itemLabel="#{bundle['user.profession.profession1']}"
itemValue="SE"/>
<f:selectItem itemLabel="#{bundle['user.profession.profession2']}"
itemValue="PM"/>
<f:selectItem itemLabel="#{bundle['user.profession.profession3']}"
itemValue="OT"/>
</h:selectOneMenu>
<h:message for="profession" styleClass="errorMessage"/>
</h:panelGrid>
<h:commandButton value="#{bundle['application.cancel']}" action="flowReturn"
immediate="true" />
<h:commandButton value="#{bundle['application.back']}" action="registration"
immediate="true" />
<h:commandButton value="#{bundle['application.next']}" action="final"/> <br/>
</h:form>
</ui:define>
</ui:composition>
</html>
The expressions
#{flowScope.fname}
,
#{flowScope.lname}
, and
#{flowScope.profession}
are binded with the
user first name, last name, and profession input fields. One thing to notice is that flow data are alive as long as the user
is navigating between the flow pages; this means that if the user clicks the
back
button to go to the initial registration,
then (s)he will be able to see the data (s)he entered before in the initial page. Listing 10-14 shows the final page in the
registration flow (
final.xhtml
) page.
