Chapter 3. Developing JSF Views with Facelets

3.1 Building the Good Eats! Homepage with Facelets

This chapter does something you are unlikely to do once you are familiar with Facelets. It creates a web page without using a Facelets template in order to simplify the introduction to Facelets, Nonetheless, it demonstrates two of the three core ideas of Facelets discussed in the first chapter: JSF integration and compositions. After you are introduced to templates in the next chapter, you'll understand why you'll typically develop a Facelets view using templates.

The purpose of this chapter is to introduce the reader to the basics of developing views with Facelets. For this introduction, it performs a walk through of a prototype homepage for the Good Eats! web site. This example includes the key elements of a Facelets view: the XHTML view document, the Expression Language (EL) bindings, the JSF backing bean, the Facelets ui:include and ui:composition tags, and how to style Facelets views with CSS. We'll cover these elements at a high level in order to give you an overview of developing JSF views with Facelets. The goal of this chapter is to show you how all of these elements work together. Subsequent chapters will elaborate upon separate Facelets elements in detail.

3.2 The Facelets View File

Facelets views are xhtml documents that use the following declaration:

Example 7. 

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...

Get Facelets now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.