Component Tree
When the Faces Servlet receives the request, it initializes the JSF code and reads the requested JSP page. f: and h:
tags cause the associated JSF tag handlers to be invoked. These tag handlers work together to build a user interface
component tree. For the login.jsp page, the component tree would look something like the set of related objects
depicted below.
After building the component tree, each component in the tree is then “rendered.” In the case of a Web application,
the JSF tags like h:inputText are converted into HTML. Each component created in the component tree produces
HTML that not only represents the HTML form fields but also the state of the component. For example, the h:
inputText field would be converted or “encoded” into HTML code that looks like this:
<input type=”text” name=”[some unique ID]” value=”[current value]”/>
On the next page, the full source of the example login.jsp produced by JSF’s component tree is shown. The result of
all the components rendering is displayed to the user in the browser.
During the rendering process, expressions like #{user.name} are evaluated. The beans getName() method is called
and supplies the value to display in the HTML input field.
HTML source produced by JSF’s component tree for login.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<body>
<h1>Please Login</h1>
<br/>
<form id="_id0" method="post" action="/SimpleLogin/faces/login.jsp;
jsessionid=17C719653BE66848B961BC7B440CDB0E" enctype="application/x-www-form-
urlencoded">
<table>
<tbody>
<tr>
<td>Name:</td>
<td><input id="_id0:name" type="text" name="_id0:name" value="
Your name here" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input id="_id0:password" type="password" name="_id0:
password" value="" /></td>
</tr>
</tbody>
</table>
<input type="submit" name="_id0:_id4" value="Login" />
<input type="hidden" name="com.sun.faces.VIEW" value="
H4sIAAAAAAAAALVWzW8bVRB/dpzEMankph[some text removed here for brevity]" />
<input type="hidden" name="_id0" value="_id0" /></form>
</body>
</html>
Faces UI components may “render” themselves or they may be rendered by separate classes. Classes that render are
called renderers (what a surprise). Renderers are organized into render kits. JSF ships with an HTML 4.0 render kit.
Renderers are said to “encode” the components. That is, a renderer translates the JSF components to the UI display
format of choice.
The UI component tree could be used to encode other types of output. In other words, the UI component tree can
be used to convert custom tags to other UI output. For example, a set of custom tags could be used to generate and
populate a Java Micro Edition (Java ME) form, or produce WML (as examples).
What part of a possible Java ME JSF page might look like.
<jme:form id=”login”>
<jme:input id=”user” value=”#{user.name}/>
<jme:input id=”pass” value=”#{user.pass}/>
</jme:form>
This requires the development of custom tag handlers and render kits, but would not require any changes to the UI
components or JSF framework. After a page like login.jsp is rendered, the user enters data in the form and the form
is submitted back to the server when the submit button is pushed. Data is sent back to the server in a POST request.
As is standard Web processing, the data is returned in a set of key/value pairs; in other words, request parameters.
The render kit (or components themselves) “decode” the response. In other words, JSF EL like #{user.name} is
evaluated and the setName() method is called on the bean (in this case the LoginBean). If the bean does not yet exist,
the bean is first created and then used. Not unlike how JSP’s useBean tags work.
When the Faces Servlet receives the request, it initializes the JSF code and reads the requested JSP page. f: and h:
tags cause the associated JSF tag handlers to be invoked. These tag handlers work together to build a user interface
component tree. For the login.jsp page, the component tree would look something like the set of related objects
depicted below.
After building the component tree, each component in the tree is then “rendered.” In the case of a Web application,
the JSF tags like h:inputText are converted into HTML. Each component created in the component tree produces
HTML that not only represents the HTML form fields but also the state of the component. For example, the h:
inputText field would be converted or “encoded” into HTML code that looks like this:
<input type=”text” name=”[some unique ID]” value=”[current value]”/>
On the next page, the full source of the example login.jsp produced by JSF’s component tree is shown. The result of
all the components rendering is displayed to the user in the browser.
During the rendering process, expressions like #{user.name} are evaluated. The beans getName() method is called
and supplies the value to display in the HTML input field.
HTML source produced by JSF’s component tree for login.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<body>
<h1>Please Login</h1>
<br/>
<form id="_id0" method="post" action="/SimpleLogin/faces/login.jsp;
jsessionid=17C719653BE66848B961BC7B440CDB0E" enctype="application/x-www-form-
urlencoded">
<table>
<tbody>
<tr>
<td>Name:</td>
<td><input id="_id0:name" type="text" name="_id0:name" value="
Your name here" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input id="_id0:password" type="password" name="_id0:
password" value="" /></td>
</tr>
</tbody>
</table>
<input type="submit" name="_id0:_id4" value="Login" />
<input type="hidden" name="com.sun.faces.VIEW" value="
H4sIAAAAAAAAALVWzW8bVRB/dpzEMankph[some text removed here for brevity]" />
<input type="hidden" name="_id0" value="_id0" /></form>
</body>
</html>
Faces UI components may “render” themselves or they may be rendered by separate classes. Classes that render are
called renderers (what a surprise). Renderers are organized into render kits. JSF ships with an HTML 4.0 render kit.
Renderers are said to “encode” the components. That is, a renderer translates the JSF components to the UI display
format of choice.
The UI component tree could be used to encode other types of output. In other words, the UI component tree can
be used to convert custom tags to other UI output. For example, a set of custom tags could be used to generate and
populate a Java Micro Edition (Java ME) form, or produce WML (as examples).
What part of a possible Java ME JSF page might look like.
<jme:form id=”login”>
<jme:input id=”user” value=”#{user.name}/>
<jme:input id=”pass” value=”#{user.pass}/>
</jme:form>
This requires the development of custom tag handlers and render kits, but would not require any changes to the UI
components or JSF framework. After a page like login.jsp is rendered, the user enters data in the form and the form
is submitted back to the server when the submit button is pushed. Data is sent back to the server in a POST request.
As is standard Web processing, the data is returned in a set of key/value pairs; in other words, request parameters.
The render kit (or components themselves) “decode” the response. In other words, JSF EL like #{user.name} is
evaluated and the setName() method is called on the bean (in this case the LoginBean). If the bean does not yet exist,
the bean is first created and then used. Not unlike how JSP’s useBean tags work.
Component Tree
Table of Contents
Copyright (c) 2008. Intertech, Inc. All Rights Reserved. This information is to be used exclusively as an
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
 |
 |
 |
 |
 |
 |
 |
 |
 |
Courseware
Training Resources
Tutorials
Services