JSF 2.2 Faces flows

JSF 2.2 introduced Faces flows, which defines a scope that can span several pages. Flow scoped beans are created when the user enters a flow (a set of web pages), and are destroyed when the user leaves the flow.

Faces flows adopts the convention over configuration principle of JSF. The following conventions are typically used when developing applications employing faces flows:

• All pages in the flow must be placed in a directory whose name defines the name of the flow
• An XML configuration file named after the directory name, and suffixed with -flow, must exist inside the directory that contains the pages in the flow (the file may be empty, but it must exist)
• The first page in the flow must be named after the directory name that contains the flow
• The last page in the flow must not be located inside the directory containing the flow and must be named after the directory name and suffixed with -return

The following screenshot illustrates these conventions:

In the preceding example, we define a flow named customerinfo; by convention, these files are inside a directory named customerinfo, and the first page on the flow is named customerinfo.xhtml (there are no restrictions on the names of other pages in the flow). When we exit the flow, we navigate to a page named flowname-return.xml; in our case, since our flow is named customerinfo, the name of the page in question is customerinfo-return.xhtml, which follows the naming convention and takes us out of the flow.

The markup for the pages doesn't illustrate anything we haven't seen before; therefore we will not show it. All example code is available as part of this book's code download bundle.

All of the previous pages store data in a named bean called Customer, which has a flow of scope:

@Named 
@FlowScoped("customerinfo") 
public class Customer implements Serializable { 
   //class body omitted 
} 

The @FlowScoped annotation has a value attribute that must match the name of the flow that the bean is meant to work with (customerinfo, in this example).

This example creates a wizard-style set of pages in which data for a user is entered across several pages in the flow.

In the first page, we enter name information:

In the second page, we enter address information:

In the next page, we enter phone number information:

Finally, we display a Confirmation page:

If the user verifies that the information is correct, we navigate outside the flow to customerinfo-return.xhtml; otherwise, we go back to the first page in the flow to allow the user to make any necessary corrections.