Wizard-like navigation with form fields. Header facet allows to render any content above navigation and footer facet allows to render any content below.
Content of header / footer facet is shared between levels. This feature makes possible to show any custom title bar indicating current flow instead of built-in breadcrumbs.
PersonalAddressContactConfirmation
Source
<pe:masterDetail id="masterDetail" level="#{wizardMasterDetailController.currentLevel}" showBreadcrumb="false">
<f:facet name="header">
<p:messages showDetail="true"/>
<h:panelGroup layout="block" style="margin-top: 10px;">
<h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all
#{wizardMasterDetailController.currentLevel eq 1 ? 'ui-state-hover' : ''}">
<h:outputText value="Personal"/>
</h:panelGroup>
<h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all
#{wizardMasterDetailController.currentLevel eq 2 ? 'ui-state-hover' : ''}">
<h:outputText value="Address"/>
</h:panelGroup>
<h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all
#{wizardMasterDetailController.currentLevel eq 3 ? 'ui-state-hover' : ''}">
<h:outputText value="Contact"/>
</h:panelGroup>
<h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all
#{wizardMasterDetailController.currentLevel eq 4 ? 'ui-state-hover' : ''}">
<h:outputText value="Confirmation"/>
</h:panelGroup>
</h:panelGroup>
</f:facet>
<pe:masterDetailLevel level="1">
<p:panel header="Personal Details">
<h:panelGrid columns="2" columnClasses="formColumn1,formColumn2">
<h:outputText value="Firstname: *"/>
<p:inputText required="true" label="Firstname"
value="#{wizardMasterDetailController.user.firstname}"/>
<h:outputText value="Lastname: *"/>
<p:inputText required="true" label="Lastname"
value="#{wizardMasterDetailController.user.lastname}"/>
<h:outputText value="Age: "/>
<p:inputText value="#{wizardMasterDetailController.user.age}"/>
</h:panelGrid>
</p:panel>
<p:commandButton value="Next" process="masterDetail"
style="margin-top: 10px;" icon="ui-icon-arrowthick-1-e">
<pe:selectDetailLevel step="1"/>
</p:commandButton>
<p:commandButton value="Go to Save" process="masterDetail"
style="margin-top: 10px;" icon="ui-icon-arrowthickstop-1-e">
<pe:selectDetailLevel level="4"/>
</p:commandButton>
</pe:masterDetailLevel>
<pe:masterDetailLevel level="2">
<p:panel header="Adress Details">
<h:panelGrid columns="2" columnClasses="formColumn1,formColumn2">
<h:outputText value="Street: "/>
<p:inputText value="#{wizardMasterDetailController.user.street}"/>
<h:outputText value="Postal Code: "/>
<p:inputText value="#{wizardMasterDetailController.user.postalCode}"/>
<h:outputText value="City: "/>
<p:inputText value="#{wizardMasterDetailController.user.city}"/>
</h:panelGrid>
</p:panel>
<p:commandButton value="Back" style="margin-top: 10px;" icon="ui-icon-arrowthick-1-w"
process="@this" immediate="true">
<pe:selectDetailLevel step="-1"/>
</p:commandButton>
<p:commandButton value="Next" process="masterDetail"
style="margin-top: 10px;" icon="ui-icon-arrowthick-1-e">
<pe:selectDetailLevel step="1"/>
</p:commandButton>
</pe:masterDetailLevel>
<pe:masterDetailLevel level="3">
<p:panel header="Contact Information">
<h:panelGrid columns="2" columnClasses="formColumn1,formColumn2">
<h:outputText value="Email: *"/>
<p:inputText required="true" label="Email"
value="#{wizardMasterDetailController.user.email}"/>
<h:outputText value="Phone: "/>
<p:inputText value="#{wizardMasterDetailController.user.phone}"/>
<h:outputText value="Additional Info: "/>
<p:inputText value="#{wizardMasterDetailController.user.info}"/>
</h:panelGrid>
</p:panel>
<p:commandButton value="Back" style="margin-top: 10px;" icon="ui-icon-arrowthick-1-w"
process="@this" immediate="true">
<pe:selectDetailLevel step="-1"/>
</p:commandButton>
<p:commandButton value="Next" process="masterDetail"
style="margin-top: 10px;" icon="ui-icon-arrowthick-1-e">
<pe:selectDetailLevel step="1"/>
</p:commandButton>
</pe:masterDetailLevel>
<pe:masterDetailLevel level="4">
<p:panel header="Confirmation">
<h:panelGrid id="confirmation" columns="2" columnClasses="formColumn1,formColumn2">
<h:outputText value="Firstname: "/>
<h:outputText value="#{wizardMasterDetailController.user.firstname}"/>
<h:outputText value="Lastname: "/>
<h:outputText value="#{wizardMasterDetailController.user.lastname}"/>
<h:outputText value="Age: "/>
<h:outputText value="#{wizardMasterDetailController.user.age}"/>
<h:outputText value="Street: "/>
<h:outputText value="#{wizardMasterDetailController.user.street}"/>
<h:outputText value="Postal Code: "/>
<h:outputText value="#{wizardMasterDetailController.user.postalCode}"/>
<h:outputText value="City: "/>
<h:outputText value="#{wizardMasterDetailController.user.city}"/>
<h:outputText value="Email: "/>
<h:outputText value="#{wizardMasterDetailController.user.email}"/>
<h:outputText value="Phone "/>
<h:outputText value="#{wizardMasterDetailController.user.phone}"/>
<h:outputText value="Info: "/>
<h:outputText value="#{wizardMasterDetailController.user.info}"/>
</h:panelGrid>
</p:panel>
<p:commandButton value="Back" style="margin-top: 10px;" icon="ui-icon-arrowthick-1-w"
process="@this" immediate="true">
<pe:selectDetailLevel step="-1"/>
</p:commandButton>
<p:commandButton value="Submit" process="masterDetail"
actionListener="#{wizardMasterDetailController.save}"
style="margin-top: 10px;" icon="pi pi-save">
<pe:selectDetailLevel level="1"/>
</p:commandButton>
</pe:masterDetailLevel>
</pe:masterDetail>
@Named
@ViewScoped
public class WizardMasterDetailController implements Serializable {
private static final long serialVersionUID = 20120209L;
private User user = new User();
private int currentLevel = 1;
public User getUser() {
return user;
}
public void setUser(final User user) {
this.user = user;
}
public int getCurrentLevel() {
return currentLevel;
}
public void setCurrentLevel(final int currentLevel) {
this.currentLevel = currentLevel;
}
public void save(final ActionEvent actionEvent) {
final FacesMessage msg = new FacesMessage("Saved successful", "Welcome :" + user.getFirstname());
FacesContext.getCurrentInstance().addMessage(null, msg);
// create new empty user
user = new User();
currentLevel = 1;
}
}
public class User implements Serializable {
private static final long serialVersionUID = 1L;
private String firstname;
private String lastname;
private Integer age;
private String street;
private String city;
private String postalCode;
private String info;
private String email;
private String phone;
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getStreet() {
return street;
}
public void setStreet(String street) {
this.street = street;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public String getPostalCode() {
return postalCode;
}
public void setPostalCode(String postalCode) {
this.postalCode = postalCode;
}
public String getInfo() {
return info;
}
public void setInfo(String info) {
this.info = info;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}