Structuring the web application

Up to this point, the application has only one page and a simple form, which would not be acceptable as the interface provided for our fictional customers. To fix that we're going to add a few more pages and templates to make the application look better and leverage what we have already learned from the previous chapters and also by adding some JSF Facelets and PrimeFaces components.

Applying templates through Facelets

Let's create a template with the basic components of an application such as header, menu, main page, and so on. On OEPE, open the Store web project and perform the following actions:

1. Create a new folder under the WEB-INF directory named templates.

2. Now we need to create the basis for our template, which will basically consist of two files: template.xhtml and top.xhtml.

3. The main part of template.xhtml is to the define areas (variables) that will be replaced by other pages, using the inner structure declared at each of them. In our example, we have...