HTML and CSS Reference
In-Depth Information
The
<!DOCTYPE html>
declares the template
doctype
: in the
firstApplication
pages, all the pages use this
doctype
, which represents the HTML5
doctype
. In order to include the JSF HTML, core, and Facelets UI tags, the
following declaration is used:
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:ui="
http://java.sun.com/jsf/facelets
"
xmlns:f="
http://java.sun.com/jsf/core
"
xmlns:h=
"http://java.sun.com/jsf/html">
The first line is a standard XHTML practice, the second line declares the Facelets UI tags, the third line declares
the JSF core tags, and finally the last line declares the JSF HTML tags to be used in the template page.
The
<h:head>
and
<h:body>
elements are replacements for the HTML
<head>
and
<body>
elements. The template
consists of a container element whose ID is
"container"
. The
"container"
element contains three sub-elements:
•
The header element:
The header of the page is defined inside the
"header"
div element.
•
The content element:
The content of the page is defined inside the
"content"
div element.
•
The footer element:
The footer of the page is defined inside the
"footer"
div element.
Inside the header, content, and the footer elements, there is a Facelets
<ui:insert>
tag. The Facelets
<ui:insert>
tag is used for declaring an initial default content that can be overridden by the pages that use the template. The
content inside the
<ui:insert>
tag represents the initial value of the content. The
#{...}
represents the JSF expression
language. The JSF expression language can be used for binding the JSF model with the JSF page; in the template page,
it binds the resource bundle content with the page through the
#{bundle['key name']}
. The
bundle
variable is defined
in the
faces-config.xml
, as shown in the “Configuration Files” section. Listing 1-4 shows the
messages.properties
resource bundle file.
Listing 1-4.
The message.properties File
user.name = Your name
user.password = password
user.name.validation = You need to enter a username
user.password.validation = You need to enter a password
application.login = Login
application.loginpage.title = Login page
application.welcome = Welcome
application.welcomepage.title = Welcome page
application.welcomepage.return = Back to home
application.defaultpage.title = Default Title
application.defaultpage.header.content = Welcome to the first application
application.defaultpage.body.content = Your content here ...
application.defaultpage.footer.content = Thanks for using the application
The resource bundle is a set of key and value pairs. Using the JSF expression language, the values of the bundle
keys are resolved in the runtime. For example, the
#{bundle['application.defaultpage.header.content']}
expression is evaluated to
"Welcome to the first application"
in the runtime.
The template file also includes a CSS (Cascading Style Sheets) file, which is the
simple.css
file. The
simple.css
is responsible for the template page layout. Listing 1-5 shows the
simple.css
file.
