AK 4 JSF

JavaServer Faces (JSF)

Atul Kahate

(akahate@gmail.com)

JavaServer Faces (JSF) |
Atul Kahate 1

What is JSF?
JSF is a standard Java framework for building
user interfaces for Web applications
Created as a Java Community Process (JCP) –
and hence has higher chances of being a
success
Attempts to make client-side development
browser-independent and also includes
features such as state management, etc

Atul Kahate 2

JSF Characteristics
Server-side
User-interface related
Component framework
Components are UI-related, Validations-
related, Error handling-related, etc

Atul Kahate 3

JSF Application Features
Similar to JSP-servlet application
Has a deployment descriptor (web.xml),
JSP files, tag libraries, static resources,
etc
See next slide

Atul Kahate 4

JSF Features Elaborated
JSP pages: Form the UI
Deployment descriptor: Indicates use of
JSF
Swing-like enhanced UI
Managed backing beans: Used to hold
data entered by the user
Superior validation
Atul Kahate 5

JSF and MVC
Similar to Swing and other GUI frameworks:
Model = Properties of an application (e.g. user
name in an user object)
View = UI components that specify what events
occurred (e.g. value changed or button clicked)
Controller = External event listeners that are
attached to the UI to handle events

Atul Kahate 6

JSF Advantages
Based on MVC
Well-defined programming model and tag libraries
Sun Standard
Helps reusability
UI development is easier, faster
Event handling is easier
Separates behavior and presentation of information

Atul Kahate 7

JSF Drawbacks
Complex without the use of an IDE
Still growing
Applications without using MVC are tough to
build
Confusion in file naming (pages are saved
with .jsp but accessed as .jsf or .faces)
Absence of regular expressions in validations
Does not support GET method
Atul Kahate 8

JSF Parts
JSF has three parts:
Set of pre-fabricated User Interface
components
Event-driven programming model
Component model with the facility for
allowing third-party components

Atul Kahate 9

JSF Application Lifecycle
There are six phases
1. Restore view
2. Apply request values
3. Process validations
4. Update model values
5. Invoke application
6. Render response
There are two types of requests
1. Initial request
2. Postback requests

Atul Kahate 10

JSF Request Types
1. Initial request
Very first request for a page
First time, so no UI processing/validations
Deals with Restore view and Render
response phases
2. Postback request
User has submitted a form
All the six phases are dealt with here
Atul Kahate 11

JSF Configuration
A JSF application is a standard Java EE application,
with the need for the following configuration files
Entry in the web.xml file Enables the Faces controller servlet when
a URL pattern such as /faces/* is
received
JSF configuration file faces-config.xml Allows for the configuration of the JSF
application – at par with web.xml file,
and is located in the WEB-INF/ folder
WEB-INF directory containing Actual JSF libraries jsf-api.jar and jsf-
impl.jar

Apache commons libraries, such as
commons-beanutils.jar, commns-
collections.jar, commons-
digester.jar, commons-logging.jar
JSTL jar files: jstl.jar and standard.jar
Atul Kahate 12

Converting a JSP to a JSF
The first thing to do in order to convert a JSP page
into a JSF page for better view is to add the following
two taglibs:
<%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f” %>
<%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h” %>
Then add a <f:view> tag in the body of the JSP
This tag becomes the base UI component of the component
tree in memory of the server when the page is requested for
viewing
If the page also takes user input, we also need to
add a <h:form> tag as a child element of the above
tag
Subsequent HTML form element tags would be
<h:inputText>, <h:commandButton>, etc
Atul Kahate 13

Example
<%@ page contentType="text/html" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<f:view>
<html>
<body>
<h:form>
<h2>A simple JSF Page</h2>

<h:inputText value="#{modelBean.username}" />
<h:commandButton value="Click here" />
</h:form>
</body>
</html>
</f:view>

Atul Kahate 14

JSF UI Component Tree – 1
A JSF page like the above causes a UI component tree on the
server, exactly matching with the components specified in the
page

HtmlInputText HtmlCommandButton

HtmlForm

UIViewRoot

Atul Kahate 15

JSF UI Component Tree – 2
Once a tree like the above is created
and loaded in the server’s memory, it is
possible to interact with the server-side
UI components, and manipulate them
directly

Atul Kahate 16

JSF Request Processing
Lifecycle
Sequence of events when a request is sent to
a JSF page is called as the JSF request
processing lifecycle, or simply JSF lifecycle
Example:
<h:inputText value=“#{modelBean.username}” />
This specifies that when the form is submitted, the
value entered by the user in the input text box
should be passed on to the corresponding
property in the server-side JavaBean named
modelBean

Atul Kahate 17

JSF Navigation Model – 1

View
(JSF pages)

Controller Model
(Faces servlet) (Managed beans)

Atul Kahate 18

Like Struts, JSF design is also based on an MVC
approach
Model is bound to methods and properties in the
managed beans as specified in the faces-
config.xml file
Controller is a servlet, that responds to all requests
that have a certain URL pattern, such as /faces/*,
as defined in web.xml file
The controller prepares an object, called as JSF context,
which contains all accessible application data and routes the
client to the appropriate view component (page)
View is the set of JSF pages

Atul Kahate 19

The navigation model is based on a set
of navigation rules
Example
If something is a success then pass control
to something-1; else to something-2
Achieved by specifying appropriate
rules in the faces-config.xml file (See
next slide)
Atul Kahate 20

<navigation-rule>
<from-view-id>/page1.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/page2.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>/page3.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Atul Kahate 21

JSF Case Study – Login

D:Atul-personalLecturesSICSRWeb
TechnologiesWT-2JSFJSF-
SimpleLogin (in NetBeans)

Atul Kahate 22

Application Logic
The application should accept the user
ID and password from the user and
display a welcome page
The actual user ID and password logic
would not be built in initially

Atul Kahate 23

index.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
<f:view>
<head>
<title>JSF Login Page Example</title>
</head>
<body bgcolor="pink">
<h:form>
<h1 align="center">The Login Page</h1>
<table border="1" bordecolor="maroon" cellspacing="1" cellpadding="1" align="center">
<tr>
<td>
<h:outputLabel for="txtName">
<h:outputText value="Name" />
</h:outputLabel>
</td>
<td><h:inputText id="txtName" value="#{UserBean.name}" /></td>
</tr>
<tr>
<td>
<h:outputLabel for="txtPassword">
<h:outputText value="Password" />
</h:outputLabel>
</td>
<td><h:inputSecret id="txtPassword" value="#{UserBean.password}" /></td>
</tr>
<tr align="center">
<td colspan="2">
<h:commandButton id="cmdLogin" value="Login" action="login" />
</td>
</tr>
</table>
</h:form>
</body>
</html>
</f:view>

Atul Kahate 24

Understanding the JSP – 1

These taglib directives refer to the JSTL tags
jsf/core – Core library, contains custom action
elements that represent JSF objects (which are
independent of the page markup language)
Jsf/html – HTML library, contains custom action
elements that represent JSF objects (which are to
be rendered as HTML elements)
Atul Kahate 25

<f:view>

This is an action element
A view in JSF is the grouping of components
that make a specific UI screen
The view contains an instance of the
javax.faces.component.UIViewRoot class
It does not display anything, but it is a
container for other view components (e.g.
input fields, buttons, etc)

Atul Kahate 26

<h:form>

Represents a form component
Acts as a container for all input
components that hold values that needs
to be processed together
Examples: <h:inputText>,
<h:inputSecret>, <h:commandButton>
Atul Kahate 27

<h:outputLabel for="txtName">
<h:outputText value="Name" />
</h:outputLabel>

Identifies a component that generates
an HTML label

Atul Kahate 28

<h:inputText id="txtName" value="#{UserBean.name}" />

Generates a text box with id txtName
The value that user enters here would
populate an attribute called as name of
a server-side JavaBean titled UserBean

Atul Kahate 29

<h:commandButton id="cmdLogin" value="Login" action="login" />

Generates a command button with type
as submit or reset
The action attribute here has relevance,
as explained later

Atul Kahate 30

How is this linked to the next
page (welcome.jsp)?
index.jsp

…
<h:commandButton id … action = “login” />
…

faces-config.xml
1 …
<navigation-rule>
<from-view-id>/index.jsp<from-view-id>
<navigation-case> 2
<from-outcome>login</from-outcome>
<to-view-id>/welcome.jsp</to-view-id>
3 …

welcome.jsp

…
<h:commandButton id … action = “login” />
…

Atul Kahate 31

UserBean.java
/*
* UserBean.java
*
* Created on September 25, 2007, 4:34 PM
*
* To change this template, choose Tools | Template Manager
* and open the template in the editor.
*/

package com.jsf.login;

/**
*
* @author AtulK
*/
public class UserBean {

private String name;
private String password;

public String getName() {
return name;
}

public void setName(String userName) {
name = userName;
}

public String getPassword() {
return password;
}

public void setPassword(String userPassword) {
password = userPassword;
}
}
Atul Kahate 32

Role of UserBean.java
index.jsp

<html>
…
<td><h:inputText id = “txtName” value = “#{UserBean.name}” /></td>
…

Whatever the user enters on the
screen in the text box is passed to
the JavaBean’s set method

UserBean.java

…

public String get ame () {
return name;
}

public void set ame (String userName) {
name = username;
}

…
}

Atul Kahate 33

welcome.jsp

<html>
<f:view>
<head>
<title>Welcome to JSF!</title>
</head>

<body>
<h:form>
<h1 align="center">
<h:outputText id="txtUserName" value="Welcome #{UserBean.name}!" />
</h1>
</h:form>

</body>
</f:view>
</html>

Atul Kahate 34

Managed Beans and
Navigation

Atul Kahate 35

Managed Beans
We know that the model in MVC is
many times made up of JavaBeans
A JavaBean in JSF is called as a
managed bean

Atul Kahate 36

Temperature Conversion

Atul Kahate 37

Requirement
Accept temperature in Celsius and
convert it into Fahrenheit

D:Atul-personalLecturesSICSRWeb
TechnologiesWT-
2JSFTemperatureConversion (or in
NetBeans 6.0 JSF-Temperature-
Conversion)
Atul Kahate 38

index.jsp
<html>
<head>
<title>Celsius converter</title>
</head>
<body>
<f:view>
<h:form>
<table width="30%" height="30%" border="2" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2">
<h:message for="celsiusEdit" />
</td>
</tr>
<tr>
<td>
<h:inputText id="celsiusEdit" value="#{pageBean.celsius}"/>
</td>
<td><b>
<h:outputText value="Celsius"/>
</b></td>
</tr>
<tr>
<td colspan="2">
<h:commandButton action="#{pageBean.convertToFahrenheit}" value="Convert"/>
</td>
</tr>
<tr>
<td>
<h:outputText value="#{pageBean.fahrenheit}"/>
</td>
<td><b>
<h:outputText value="Fahrenheit"/>
</b></td>
</tr>
</table>
</h:form>
</f:view>
</body>
</html>

Atul Kahate 39

Understanding index.jsp – 1
<td colspan="2">
<h:message for="celsiusEdit" />
</td>

Space reserved for possible error
messages

Atul Kahate 40

<td>
<h:inputText id="celsiusEdit“ value="#{pageBean.celsius}"/>
</td>

Text box called as celsiusEdit would be
created, which maps to the celsius
property of the pageBean

Atul Kahate 41

<td><b>
<h:outputText value="Celsius"/>
</b></td>

HTML label would get created

Atul Kahate 42

<td colspan="2">
<h:commandButton
action="#{pageBean.convertToFahrenheit}" value="Convert"/>
</td>

An HTML button would created, which
would call the convertToFahrenheit
method of the pageBean

Atul Kahate 43

<td>
<h:outputText value="#{pageBean.fahrenheit}"/>
</td>

Would display the value of the property
fahrenheit of the pageBean

Atul Kahate 44

<td><b>
<h:outputText value="Fahrenheit"/>
</b></td>

Would create a label

Atul Kahate 45

faces-config.xml
<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>
<managed-bean>
<description>
Simple backing bean.
</description>
<managed-bean-name>pageBean</managed-bean-name>
<managed-bean-class>com.iflex.PageBean</managed-bean-
class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config>

Atul Kahate 46

pageBean.java
/*
* PageBean.java
*
* Created on September 20, 2007, 5:28 PM
*
* To change this template, choose Tools | Template Manager
*/
package com.iflex;
public class PageBean {
private Double celsius = null;
private Double fahrenheit = null;
public PageBean(){
System.out.println("PageBean()");
}
public void setCelsius(Double celsius){
System.out.println("setCelsius");
this.celsius = celsius;
}
public Double getCelsius(){
System.out.println("getCelsius");
return celsius;
}
public void setFahrenheit(Double fahrenheit){
System.out.println("setFahrenheit");
this.fahrenheit = fahrenheit;
}
public Double getFahrenheit(){
System.out.println("getFahrenheit");
return fahrenheit;
}
public void convertToFahrenheit(){
System.out.println("convertToFahrenheit");
setFahrenheit(new Double(getCelsius().doubleValue() * 1.8 + 32));
}
}

Atul Kahate 47

Exercises
Modify the temperature conversion example by
reversing the logic (accept temperature in F, convert
to C)
Accept the number of dollars the user has got, and
convert that into the equivalent Indian Rupees (USD
1 = INR 43.10)
NetBeans USDToINR
Accept two numbers from the user and tell the user
which is greater among the two
NetBeans USDToINR

Atul Kahate 48

Message Bundles

D:AtulLecturesSICSRWeb
TechnologiesWT-2JSFJSF-More-
Examples

Atul Kahate 49

What are Message Bundles?
When we implement a Web application, it is a good
idea to collect all message strings in a central
location
Helps keeping messages consistent and also makes
in application localization/internationalization easier
Example
indexWindowTitle=Hi there!
thankYouWindowTitle=Thank you for submitting your
information

Atul Kahate 50

Using Message Bundle – Step 1
Add a properties file to your application
(e.g. messages.properties file in Source
packages -> com.corejsf)
indexWindowTitle=Using Textfields and Textareas
thankYouWindowTitle=Thank you for submitting your information
thankYouPageTitle=Thank You!
indexPageTitle=Please enter the following personal information
namePrompt=Name:
submitPrompt=Submit your information

Atul Kahate 51

Make references to properties defined
earlier in your JSP as needed
(index.jsp)
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<%--
This file is an entry point for JavaServer Faces application.
--%>

<html>
<f:view>
<head>
<title>
<h:outputText value = "#{msgs.indexWindowTitle}" />
</title>
</head>
<body>
<h1><h:outputText value="#{msgs.indexPageTitle}" /></h1>

<h:form>
<table>
<tr>
<td>
<h:outputText value = "#{msgs.namePrompt}" />
</td>
<td>
<h:inputText value = "#{user.name}" />
</td>
</tr>
</table>
<h:commandButton value="#{msgs.submitPrompt}" action="thankYou" />
</h:form>
</f:view>
</body>
</html>

Atul Kahate 52

The other JSP (thankYou.jsp)
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<html>
<f:view>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
<h:outputText value = "#{msgs.thankYouWindowTitle}" />
</title>
</head>
<body>

<h1><h:outputText value="#{msgs.namePrompt}" />
<h:outputText value="#{user.name}" /></h1>

</f:view>
</body>
</html>

Atul Kahate 53

Code the Bean (UserBean.java)
/*
* To change this template, choose Tools | Templates
*/

package com.corejsf;

/**
*
* @author atulk
*/


public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

}

Atul Kahate 54

Add references to the config file (faces-config.xml)
<?xml version='1.0' encoding='UTF-8'?>



<faces-config version="1.2"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">

<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<from-outcome>thankYou</from-outcome>
<to-view-id>/thankYou.jsp</to-view-id>
</navigation-case>
</navigation-rule>

<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>com.corejsf.UserBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

<application>
<resource-bundle>
<base-name>com.corejsf.messages</base-name>
<var>msgs</var>
</resource-bundle>
</application>
</faces-config>

Atul Kahate 55

Various JSF UI-related Tags

D:AtulLecturesSICSRWeb
TechnologiesWT-2JSFJSF-More-
Examples

Atul Kahate 56

index-UIExample.jsp
<%@taglib prefix="f"
uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h"
uri="http://java.sun.com/jsf/html"%>

<html>
<f:view>
<head> JavaServer Faces (JSF) |
Atul Kahate 57
<link href="styles.css"

showMoreInformation-
UIExample.jsp

<html>
<f:view>
<head> JavaServer Faces (JSF) |
Atul Kahate 58
<link href="styles.css"

faces-config.xml
<?xml version='1.0' encoding='UTF-8'?>



xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">

<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<from-outcome>thankYou</from-outcome>
<to-view-id>/thankYou.jsp</to-view-id>
</navigation-case>
</navigation-rule>

<navigation-rule>
<from-view-id>/index-UIExample.jsp</from-view-id>
<navigation-case>
<from-outcome>showInformation</from-outcome>
<to-view-id>/showMoreInformation-UIExample.jsp</to-view-id>
</navigation-case>
</navigation-rule>

<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>com.corejsf.UserBean</managed-bean-class>
</managed-bean>

<managed-bean>
<managed-bean-name>form</managed-bean-name>
<managed-bean-class>com.corejsf.RegisterForm</managed-bean-class>
</managed-bean> JavaServer Faces (JSF) |
<application> Atul Kahate 59
<resource-bundle>
<base-name>com.corejsf.messages</base-name>

RegisterForm.java
/*
* To change this template, choose Tools | Templates
*/

import java.text.DateFormatSymbols;
import java.util.*;

import javax.faces.model.SelectItem;

/**
*
* @author atulk
*/
public class RegisterForm {

enum Education {
HIGH_SCHOOL, BACHELOR, MASTER, DOCTOR
};

private boolean contactMe;
private Integer [] bestDaysToContact;
private Integer yearOfBirth;
private String [] colors;
private String [] languages;
private Education education;

public Integer [] getBestDaysToContact () {
return bestDaysToContact;
}

public void setBestDaysToContact(Integer[] bestDaysToContact) {
this.bestDaysToContact = bestDaysToContact;
} JavaServer Faces (JSF) |
public String[] getColors() { Atul Kahate 60
return colors;
}

messages.properties
# To change this template, choose Tools | Templates
# and open the template in the editor.
indexWindowTitle=Using JSF UI Features
indexPageTitle=Please enter the following information

namePrompt=Name:
contactMePrompt=Contact me
bestDayPrompt=What is the best day to contact you?
yearOfBirthPrompt=What year were you born?
buttonPrompt=Submit information
languagePrompt=Select the languages you speak:
educationPrompt=Select your highest education level:
emailAppPrompt=Select your email application:
colorPrompt=Select your favourite colors:

thankYouLabel=Thank you {0}, for your information
contactMeLabel=Contact me:
bestDayLabel=Best day to contact you:
yearOfBirthLabel=Your year of birth:
colorLabel=Colors:
languageLabel=Languages:
educationLabel=Education:

Atul Kahate 61

Messages

Atul Kahate 62

JSF Messages
During the JSF life cycle, any object can
create a message and add it to a queue of
messages maintained by the faces context
At the end of the life cycle (i.e. in the Render
Response phase), we can display those
messages in a view
Usually, messages are associated with a UI
component and are used to show validation
errors
Atul Kahate 63

Message Types
Information
Warning
Error
Fatal

Atul Kahate 64

Message Details
All messages can contain a summary and a detail
Example: summary could be Invalid entry and detail could
be Age > 100 is not accepted
Two JSF tags are used for message handling:
h:messages (Multiple messages for a component)
h:message (Only a single message for a component)
They have many attributes, such as
errorClass, errorStyle, fatalClass, tooltip, etc

Atul Kahate 65

index-messageExample.jsp

<%--
This file is an entry point for
JavaServer Faces application.
Atul Kahate 66
--%>

thankYou-
messageExample.jsp
<%--
Document : thankYou-
messageExample
Created on : May 5, 2008, 3:26:50
PM
Author : atulk
--%>
Atul Kahate 67
<%@page contentType="text/html"

AgeCheckBean.java
/*
* To change this template, choose
Tools | Templates
*/

Atul Kahate 68

/**

messages.properties
# To change this template, choose
Tools | Templates
# and open the template in the editor.

greeting=Please fill out the following
details

indexWindowTitle=Using JSF UI
Atul Kahate 69
Features

faces-config.xml
<?xml version='1.0' encoding='UTF-
8'?>



Atul Kahate 70

Panels

Atul Kahate 71

What are Panels?
Normally we use HTML tables to align
form prompts and messages
It is error-prone and tedious
Hence, JSF introduces h:panelGrid,
which generates a table element
<h:panelGrid columns=“3”>
…
</h:panelGrid>
Atul Kahate 72

Note about columns
The columns attribute is optional – defaults to
1
If specified, UI components are placed from
left to right and top to bottom
Example: If we specify columns as 3 and we have
9 components, we will get a panel grid with 3
rows and 3 columns – instead, if we have 10
components, we will have 4 rows and 3 columns
(last two columns in the fourth row would be
empty)
Atul Kahate 73

index-panelGrid.jsp

<%--
This file is an entry point for
JavaServer Faces application.
Atul Kahate 74
--%>

faces-config.xml
<?xml version='1.0' encoding='UTF-
8'?>



Atul Kahate 75

Thank You!

Atul Kahate 76

AK 4 JSF

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to AK 4 JSF

Similar to AK 4 JSF (20)

More from gauravashq

More from gauravashq (18)

Recently uploaded

Recently uploaded (20)

AK 4 JSF