JSF Introduction:

Java Server Faces is a component oriented and event driven framework for web applications. JSF eases the development of GUI for web applications.

· There is no need to write request and response processing logic.

· JSF is based on well established Model-View-Controller (MVC) design pattern.

· JSF 1.2 is the latest release and it works with servlet 2.5 and jsp 2.1. If you want to run JSF 1.2 on Tomcat, you want 6.0 not 5.5

· JSP 2.1 is developed under JSR-245 and JSF 1.2 is developed under JSR-252

JSF Overview

JSF was developed by Java Community Process (JCP). This is a community of web application experts. These experts are from different groups like Jakarta Struts, Oracle, Sun, IBM, ATG etc. They all collectively worked together to take the best from existing technologies and removed problems. So their collective effort brought a new technology named Java Server Faces (JSF).

It is a robust component framework, event driven programming model.

Main feature of JSF is that it has not only been designed for coding experts but for others also like:

1. Page authors

Web designers have experience with graphic design. They can design look and feel of web application in html/jsp using custom tag libraries of JSF.

2. Application developers

Application developers can integrate this design with UI components. They program objects, event handles, converters, Validators.

3. Component writers

Component developer can build custom UI components because of JSF’s extensible and customizable nature. They can create their own components directly from UI component classes or extending the standard components of JSF.

4. Application architects

Application architects are responsible for designing web applications. Defining page navigation, ensuring Scalability of application, configuring beans object registration are the key points that an application architect handles.

5. Tool vendors

JSF is well suited for tool vendors, for example Sun Java Studio Creator application development tool, who provide tools that take advantages of JSF to create UI easier.

Benefits of JSF

JSF eases the development of web applications based on Java technologies.

Here are some of benefits of using JSF:

· JSF provides standard, reusable components for creating user interfaces for web applications.

· JSF provides many tag libraries for accessing and manipulating the components.

· It automatically saves the form data and repopulates the form when it is displayed at client side.

· JSF encapsulates the event handling and component rendering logic from programmers. Programmers just use the custom components.

· JSF is a specification and vendors can develop the implementations for JSF.

· There are many GUIs available these days to simplify the development of web based application based on JSF framework.

JSF Components

JSF includes mainly:

· Set of APIs to represent and manage state of components that helps server side validation, event handling, page navigation, data conversion etc.

· JSP custom tag library to create UI components in a view page.

New features and changes are

· Unified Expression Language (EL)

· Ajax Support

· New Tree Creation and Content Interweaving Model for Faces applications that use JSP .

· Integration with JSTL

· Back Button issues and Multi Frame or Multi Window Faces Apps

· Associating a message with a particular component in the page

· Use of multiple renderKits.

· Provide XML Schema for the Config files, instead of using DTD.

· Security enhancements for client side state saving.

· Solve the "duplicate button press" problem.

· The portlet related bug-fixes.

Key Points About JSF

· JSF is standard web user interface framework for Java.

· Built on top of Servlet API.

· JSF is a component framework

· UI components are stored on the server.

· Easy use of third party components.

· Event driven programming model.

· Events generated by user are handled on the server.

· Navigation handling.

· Can automatically synchronize UI components.

· JSF supports multiple client devices.

· JSF has extensible architecture.

· International language support

· Extensive tool support (Sun, Oracle, IBM etc.).

· Rapid application development approach.

JSF Components

1. Simple components, like text box, button

2. Compound components, like table, data grid

Standard UI Components:

· UI components like text fields, check boxes, list boxes, panel, label, radio button etc. These are called standard components. For example:

· UIForm represents a user input form that is a container of other components.

· UICommand represents UI components like buttons, hyperlinks and menu items.

· UIInput represents UI components like text input fields, numeric input fields.

Custom UI Components

JSF Tags

· JSF Core Tags Library

o <%@ taglib uri=”http://java.sun.com/jsf/core“ prefix=”f” %>

· JSF Html Tags Library

o <%@ taglib uri=”http://java.sun.com/jsf/htm “ prefix=”h” %>

1. Inputs (inputText, inputTextarea)

2. Outputs (outputText, outputLabel)

3. Commands (commandButton)

4. Selections (selectOneRadio, selectOneListbox, selectOneMenu for radio buttons, list boxes, menu etc)

5. Layouts (panelGrid)

6. Data table (dataTable)

7. Errors and messages (message, messages)

All JSF Html Tags:

column creates column in a dataTable
commandButton creates button
commandLink creates link that acts like a pushbutton
dataTable creates a table control
form creates a form
graphicImage displays an image
inputHidden creates hidden field
inputSecret creates input control for password
inputText creates text input control (single line)
inputTextarea creates text input control (multiline)
message displays the most recent message for a component
messages displays all messages
outputFormat creates outputText, but formats compound messages
outputLabel creates label
outputLink creates anchor
outputText creates single line text output
panelGrid creates html table with specified number of columns
panelGroup used to group other components where the specification requires one child element
selectBooleanCheckbox creates checkbox
selectManyCheckbox creates set of checkboxes
selectManyListbox creates multiselect listbox
selectManyMenu creates multiselect menu
selectOneListbox creates single select listbox
selectOneMenu creates single select menu
selectOneRadio creates set of radio buttons

All JSF Core Tags:

f :view Creates the top-level view
f:subview Creates a subview of a view
f:attribute Adds an attribute to a component
f:param Constructs a parameter component
f:converter Adds an arbitrary converter to a component
f:converterDateTime Adds a datetime converter to a component
f:converterNumber Adds a number converter to a component
f:actionListener Adds an action listener to a component
f:valueChangeListener Adds a valuechange listener to a component
f:validator Adds a validator to a component
f:validateDoubleRange Validates a double range for a components value
f:validateLength Validates the length of a components value
f:validateLongRange Validates a long range for a component?s value
f:facet Adds a facet to a component
f:loadBundle Loads a resource bundle, stores properties as a Map
f:selectitems Specifies items for a select one or select many component
f:selectitem Specifies an item for a select one or select many component
f:verbatim Adds markup to a JSF page

Some examples

· <f:view locale="en"> <h:outputText value="label" /></f:view>

· <f:subview id="sub_id"> <c:import url="second.jsp" /> </f:subview>

JSF Life Cycle

JSF application typically follows six steps in its life :

1. Restore view phase

2. Apply request values phase

3. Process validations phase

4. Update model values phase

5. Invoke application phase

6. Render response phase

JSF Architecture

JSF was developed integrating MVC design pattern so that applications can be designed well with greater maintainability.

Model: handles data and logic.

View: handles output (presentation)

Controller: handles processing of an application.

JSF Renderers

A renderer is a type of class that is responsible for encoding and decoding components.

1 encodeBegin () in doStartTag (). 2 encodeEnd () in doEndTag ().

Render kit

Render kit is a set of related renderers. Javax.faces.render.RenderKit is the class which represents the render kit. The default render kit contains renderers for html but it’s up to you to make it for other markup languages. Render kit can implement a skin (a look & feel).Render kit can target a specific device like phone, PC or markup language like HTML, WML, and SVG. This is one of the best benefits of JSF because JSF doesn't limit to any device or markup.

<render-kit>
<renderer>
<renderer-type>........</renderer-type>
<renderer-class>........</renderer-class>
</renderer>
</render-kit>

Display Data from Database in JSF Application

<h:dataTable id="dt1" value="#{tableBean.perInfoAll}" var="item" bgcolor="#F1F1F1" border="10" cellpadding="5" cellspacing="3" rows="4" width="50%" dir="LTR" frame="hsides" rules="all" summary="This is a JSF code to create dataTable." >

//Create Header or Footers

<h:column> // to create a Column
<f:facet name="header"> // to create a Header
<h:outputText value="First Name" />// to create a Header Value
</f:facet>
<h:outputText style="" value="#{item.firstName}" ></h:outputText> // insert the values
</h:column>

JSF column Tag

<h: DataTable border="1">
<f:facet name="header">
<h:outputText value="This is header."/>
</f:facet>
<h:column>
<f:facet name="header">
<h:outputText value="Student"/>
</f:facet>
</h:column>

<h:commandButton value="Go To Index Page." action="#{Bean.Method}" />

<h:commandLink value="list of examples." action="#{Bean.Method}" />

<h:graphicImage id="gi" alt="The image could not be found." value="/image/rose.gif" width="250" height="250" title="'graphicImage tag" ></h:graphicImage>

<h:inputHidden id="ih" value="hv"></h:inputHidden>

<h:inputSecret value="chandan" />

<h:inputTextarea id="name"></h:inputTextarea> <h:outputLink value="../index.jsp">
<h:outputText value="Go to index page."/>
</h:outputLink>

<h:inputText id="input_text" value="#{MessageBean.a}" required="true"/>
<h:message for="input_text" />

<h:messages showDetail="false" showSummary="true" layout="table"/>

<h:outputFormat value="Hello, {0} !"><f:param value="chandan"/> </h:outputFormat>

<h:inputText id="name">

 <h:outputLabel for="name" value="Enter your name: "/>

 </h:inputText>

<h:outputLink value="index.jsf"><h:outputText value=" page."/></h:outputLink>

PanelGrid

<h:panelGrid columns="3" border="1" rules="all" title="panelGriddemo">
<f:facet name="header"><h:outputText value="Fill Numbers Below"/>
</f:facet>
<h:inputText/> <h:inputText/> <h:inputText/>
<h:inputText/> <h:inputText/> <h:inputText/>
<h:inputText/> <h:inputText/> <h:inputText/> </h:panelGrid>

rules : This specifies which line between the cells will be appear in the table. It can take some values :
1) none    no rules (This is the default value.)
2) groups   between row groups
3) rows    between rows only
4) cols    between columns only
5) all between rows and columns

JSF panelGroup

It acts as a container to group a set of components. So this can be useful when we want to nest two or more components into one parent panelGrid column. If we want to render two components without using this tag then these will be rendered in separate columns. This component renders its all children and count them as one component. So this fact of this tag can be useful for us in the case where a component allows only one child component.

JavaServer Faces HTML Tags

This is a handy reference guide for the standard HTML tag library that is built into JSF. For these tags you need to use the following uri attribute for the JSP taglib directive at the top of the file:

http://java.sun.com/jsf/html

The table that follows shows you examples of HTML output and browser-rendered output for example uses of the tag library

Categories of JSF HTML Tags

JSF HTML Tag Reference

JSF Tag

Rendered Result

HTML Source

UIForm

form

<h:form id="jsftags">

...

</h:form>

No Renderer

<form id="jsftags" method="post"

action="/jsftags/faces/pages/tags.jsp"

enctype="application/x-www-form-urlencoded">

...

<input type="hidden" name="jsftags"

value="jsftags" />

</form>

UICommand

commandButton

<h:commandButton

id="submit"

value="#{msg.buttonHeader}"

action="nextPage">

</h:commandButton>

<input

id="_id0:submit"

type="submit"

name="_id0:submit"

value="Next Step"/>

commandLink

<h:commandLink id="link" action="goto">

<h:outputText value="#{msg.linkName}"/>

</h:commandLink>

<a id="_id0:link"

href="#" onclick=

"document.forms['_id0']['_id0:link'].value=

'_id0:link';

document.forms['_id0'].submit();

return false;">Next Page</a>

UIGraphic

graphicImage

<h:graphicImage id="image"

alt="jsf-sun"

url="/images/winter.gif">

</h:graphicImage>

<img id="jsftags:image"

src="/jsf-example/images/winter.gif"

alt="jsf-sun" />

UIInput

inputText

<h:inputText id="address"

value="#{jsfexample.address}" />

<input type="text" name="jsftags:_id1"

value="123 JSF Ave" />

inputSecret

<h:inputSecret redisplay="false"

value="#{jsfexample.password}" />

<input id="jsftags:password"

type="password"

name="jsftags:password"

value="secret" />

inputHidden

<h:inputHidden id="hidden"

value="userPreference" />

No Renderer

<input id="jsftags:hidden"

type="hidden"

name="jsftags:hidden"

value="userPreference" />

inputTextArea

<h:inputTextarea id="textArea"

rows="4" cols="7"

value="Text goes here.."/>

<textarea id="jsftags:textArea"

name="jsftags:textArea"

cols="5" rows="3">

Text goes here..

</textarea>

UIOutput

outputText

<h:outputText

value="#{jsfexample.zipCode}"/>

10032

outputLabel

<h:outputLabel for="address">

<h:outputText id="addressLabel"

value="User Home Address"/>

</h:outputLabel>

User Home Address

User Home Address</span>

outputLink

<h:outputLink

value="#{msg['devratupadhyay@blogspot.com.home.url']">

<f:verbatim>Blog</f:verbatim>

</h:outputLink>

blog

JSF Studio

</a>

outputFormat

<h:outputFormat

value="#{msg.jsfstudioThankYou}">

<f:param value="Joe Blow"/>

<f:param id="productName"

value="#{msg['jsfstudio.label']}"/>

</h:outputFormat>

Thank you, Joe Blow, for trying Exadel JSF Studio!

Thank you, Joe Blow, for tryimg Exadel JSF Studio!

UIMessage and UIMessages

message

Enter address:

<h:message style="color: red"

for="useraddress" />

<h:inputText id="useraddress"

value="#{jsfexample.address}"

required="true"/>

<h:commandButton action="save" value="Save"/>

Enter address: Validation Error: Value is required.

Enter address:

Validation Error: Value is required.

</span>

<input id="jsftags:useraddress"

type="text"

name="jsftags:useraddress" value="" />

<input type="submit" name="jsftags:_id1"

value="Save" />

UISelectBoolean

selectBooleanCheckbox

<h:selectBooleanCheckbox

title="emailUpdates"

value="#{jsfexample.wantsEmailUpdates}" >

</h:selectBooleanCheckbox>

<h:outputText

value="Would you like email updates?"/>

Would you like email updates?

<input type="checkbox"

name="jsftags:_id6" checked

title="emailUpdates" />

Would you like email updates?

UISelectMany

selectManyCheckboxlist

<h:selectManyCheckbox id="cars"

value="#{carsBean.car}">

<f:selectItems

value="#{carBean.carList}"/>

</h:selectManyCheckbox>

Honda Accord

Toyota 4Runner

Nissan Z350

<table>

<tr>

<input name="jsftags:cars"

value="accord" type="checkbox">

Honda Accord</input>

</label></td>

<input name="jsftags:cars"

value="4runner" type="checkbox">

Toyota 4Runner</input>

</label></td>

<input name="jsftags:cars"

value="nissan-z" type="checkbox">

Nissan Z350</input<

</label></td>

</tr>

</table>

</span>

selectManyMenu

<h:selectManyMenu

id="cars_selectManyMenu"

value="#{carBean.car}">

<f:selectItems

value="#{carBean.carList}"/>

</h:selectManyMenu>

<select id="jsftags:cars_selectManyMenu"

name="jsftags:cars_selectManyMenu"

multiple size="1">

<option value="accord">Honda Accord</option>

<option value="4runner">Toyota 4Runner</option>

<option value="nissan-z">Nissan Z350</option>

</select>

selectManyListbox

<h:selectManyListbox

id="cars_selectManyListbox"

value="#{carBean.car}">

<f:selectItems

value="#{carBean.carList}"/>

</h:selectManyListbox>

<select id="jsftags:cars_selectManyListbox"

name="jsftags:cars_selectManyListbox"

multiple size="3">

<option value="accord">Honda Accord</option>

<option value="4runner">Toyota 4Runner</option>

<option value="nissan-z">Nissan Z350</option>

</select>

UISelectOne

selectOneRadio

<h:selectOneRadio

value="#{carBean.currentCar}">

<f:selectItems

value="#{carBean.carList}" />

</h:selectOneRadio>

Honda Accord

Toyota 4Runner

Nissan Z350

<td>

<input type="radio"

name="jsftags:_id9" value="accord">

Honda Accord

</input></label>

</td>

<td>

<input type="radio"

name="jsftags:_id9" value="4runner">

Toyota 4Runner

</input></label>

</td>

<td>

<input type="radio"

name="jsftags:_id9" value="nissan-z">

Nissan Z350

</input>/label>

</td>

</tr></table>

selectOneMenu

<h:selectOneMenu id="selectCar"

value="#{carBean.currentCar}">

<f:selectItems

value="#{carBean.carList}" />

</h:selectOneMenu>

<select id="jsftags:selectCar"

name="jsftags:selectCar" size="1">

<option value="accord">Honda Accord</option>

<option value="4runner">Toyota 4Runner</option>

<option value="nissan-z">Nissan Z350</option>

</select>

selectOneListbox

<h:selectOneListbox id="pickCar"

value="#{carBean.currentCar}">

<f:selectItems

value="#{carBean.carList}" />

</h:selectOneListbox>

<select id="jsftags:pickCar"

name="jsftags:selectCar" size="3">

<option value="accord">Honda Accord</option>

<option value="4runner">Toyota 4Runner</option>

<option value="nissan-z">Nissan Z350</option>

</select>

UIPanel

Grid and Group

<h:panelGrid columns="4" footerClass="subtitle"

headerClass="subtitlebig" styleClass="medium"

columnClasses="subtitle,medium">

<f:facet name="header">

<h:outputText value="Table with numbers"/>

</f:facet>

<h:outputText value="1" />

<h:outputText value="2" />

<h:outputText value="3" />

<h:outputText value="4" />

<h:outputText value="5" />

<h:outputText value="6" />

<h:outputText value="7" />

<f:facet name="footer">

<h:panelGroup>

<h:outputText value="one row" />

<h:outputText value=" " />

<h:outputText

value="grouped with panelGroup" />

</h:panelGroup>

</f:facet>

</h:panelGrid>

Table with numbers
one row grouped with panelGroup
1	2	3	4
5	6	7

<thead>

<tr><th class="subtitlebig" colspan="4"

scope="colgroup">Table with numbers</th>

</tr>

</thead>

<tfoot>

<tr><td class="subtitle"

colspan="4">

one row grouped with panelGroup

</td>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

UIColumn and UIData

dataTable and column

<h:dataTable id="books"

columnClasses="list-column-center,

list-column-right, list-column-center,

list-column-right" headerClass="list-header"

rowClasses="list-row" styleClass="list-

background" value="#{BookStore.items}" var="store">

<h:column>

<f:facet name="header">

<h:outputText value="#{msg.storeNameLabel}"/>

</f:facet>

<h:outputText value="#{store.name}"/>

</h:column>

<h:column>

<f:facet name="header">

<Subject

</f:facet>

<h:outputText value="#{store.subject}"/>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="#{msg.storePriceLabel}"/>

</f:facet>

<h:outputText value="#{store.price}"/>

</h:column>

</h:dataTable>

Title	Subject	Price ($)
JSF For Dummies	JSF	25.0
Struts For Dummies	Struts	22.95

<table id="jsftags:books"

class="list-background">

<thead>

<tr>

<th class="list-header"

scope="col">Title</th>

<th class="list-header"

scope="col">Subject</th>

<th class="list-header"

scope="col">Price ($)</th>

</tr>

</thead>

<tbody>

JSF For Dummies</td>

JSF</td>

25.0</td>

</tr>

Struts For Dummies</td>

Struts</td>

22.95</td>

</tr>

</tbody>

</table>

UISelectItems

selectItems

<h:selectOneMenu id="selectOneCar"

value="#{carBean.currentCar}">

<f:selectItems

value="#{carBean.carList}" />

</h:selectOneMenu>

<select id="jsftags:selectOneCar"

name="jsftags:selectCar" size="1">

<option value="accord">Honda Accord</option>

<option value="4runner">Toyota 4Runner</option>

<option value="nissan-z">Nissan Z350</option>

</select>

UISelectItem

selectItem

<h:outputText value="Select car color:" />

<h:selectOneMenu id="chooseCarColor"

value="apple">

<f:selectItem

itemValue="red" itemLabel="Red"/>

<f:selectItem

itemValue="blue" itemLabel="Blue"/>

<f:selectItem

itemValue="black" itemLabel="Black"/>

<f:selectItem

itemValue="green" itemLabel="Green"/>

<f:selectItem

itemValue="white" itemLabel="White"/>

</h:selectOneMenu>

Select car color:

<select id="jsftags:chooseCarColor"

name="jsftags:chooseCarColor" size="1">

<option value="black">Black</option>

<option value="green">Green</option>

<option value="white">White</option>

</select>

Once you have downloaded the Jar file, only a few steps are required. Unzip it by typing:

jar -xvf jsftags-guide.jar

Then add this context to Tomcat server:

<Context debug="0"

docBase="Path_to_WebContent"

path="/jsftags-guide" reloadable="true"/>

where Path_to_WebContent is the path on your system to the WebContent folder in the jsftags-guide folder. Finally, start Tomcat and type this in your web browser:

http://localhost:8080/jsftags-guide

Facelet Tags Content:

Library used:

Facelet component Tag:only content inside this tag is render.

<ui:component >

<h2>This is the content to be included in the page.</h2>

</ui:component >

composition Tag: only content inside this tag is render

<ui:composition template="/template.xhtml">

<h2>This is the content to be included in the template.xhtml page.</h2>

</ui:composition>

Facelet debug Tag: information will be displayed in a popup window of browser when we press

Ctrl+Shift+(a key). This key will be specified in hotkey attribute.

<ui:debug hotkey="p" rendered="true"/>

Facelet decorate Tag: the content outside of the decorate tag is rendered while it is reverse for composition

tag.

<ui:decorate template="template.xhtml">
<ui:define name="face1">
<h1>hello</h1>
</ui:define>
</ui:decorate>

Facelet define Tag:This tag is used to define the name of the content. This named content can be included within a template. This tag is used within those tags that allows templating like composition and decorate tags. This tag takes one attribute named "name" that is required to be included when using this define tag.

<ui:define name="face1"><h3>Welcome to the Facelet world....</h3>

</ui:define>

Facelet Fragment Tag:This tag is used to insert the new UIcomponent to the component tree and the content outside of the tag is included to the tree. So this tag is same with component tag as decorate tag is with composition tag.

<body>
<h2>Content above fragment tag will be rendered.</h2>
<ui:fragment >
<h4>This is the content to be included in the page.</h4>
</ui:fragment >
<h2>Content below fragment tag will be rendered.</h2>
</body>

Facelet include Tag: This tag is used to include the content of a page. This page name is specified by src attribute of include tag. The page that has been included should use composition tag or component tag.

<ui:define name="face5">
<ui:include src="includepage.xhtml"/>
</ui:define>

Facelet insertTag:This tag is used to replace the content defined in another facelet to the template. This tag takes one attribute that is not a required attribute and is used in conjunction with define tag.

<ui:insert name="face1"> </ui:insert>

Facelet param Tag:This tag is used to pass objects as variables between facelets. This tag has two required attributes name and value. name attribute is the name of the variable and the value attribute is to set the value of this variable.

<ui:define name="face5">
<ui:include src="includeparampage.xhtml">
<ui:param name="user" value="#{MessageBean.userid}"/>
<ui:param name="pwd" value="#{MessageBean.password}"/>
</ui:include>
</ui:define>

Facelet remove Tag:This tag is used to remove content within this tag from a facelet at compile time. This tag don't have any attribute. This tag can be used with jsfc attribute which shows that the particular tag will be removed.

<ui:define name="face1">
<h3><h:outputText value="This is the text to be displayed."/></h3>
  <input type="text" jsfc="h:inputText" value="This i/p box is rendered" />
<input type="text" jsfc="ui:remove" value="IT" />
  <ui:remove>This line will be removed</ui:remove>
  </ui:define>

Facelet repeat Tag:This tag is used to iterate over the list of items. The name of list of items is specified by the EL expression in the value attribute of this tag. This tag contains two attributes "value" "name". The literal name specified in the name attribute is used to iterate over the items.

<ui:define name="face1">
   <h3><h:outputText value="This is the list of ID and Names."/></h3>
   <ui:repeat value="#{TableBean.perInfoAll}" var="info">
   <li>
<h:inputText value="#{info.id}" />
<h:inputText value="#{info.name}" />
   </li>
</ui:repeat>
   </ui:define>