2160707

Advanced Java

Unit-5
Java Server Faces

Prof. Swati R. Sharma

[email protected]
 Subject Overview
Sr. No. Unit % Weightage
1 Java Networking 5
2 JDBC Programming 10
3 Servlet API and Overview 25
4 Java Server Pages 25
5 Java Server Faces 10
6 Hibernate 15
7 Java Web Frameworks: Spring MVC 10

Reference Book:
Black Book “ Java server programming” J2EE, 1st ed., Dream Tech Publishers,
2008. 3. Kathy walrath ”
Chapter 11

Unit-5 Java Server Faces 2 Darshan Institute of Engineering & Technology

 Introduction to JSF

Java Server Faces

3
Unit-5 Java Server Faces 3 Darshan Institute of Engineering & Technology
 What is JSF?
 Java Server Faces (JSF) is a MVC web framework.
 JSF simplifies the construction of user interfaces (UI) for server-
based applications by using reusable UI components in the page.
 The JSF specification defines a set of standard UI components and
provides an (API) for developing components.
 JSF enables the reuse and extension of the existing standard UI
components.

Unit-5 Java Server Faces 4 Darshan Institute of Engineering & Technology

 Advantages of JSF
 Providing reusable UI components
 Making easy data transfer between UI components
 Managing UI state across multiple server requests
 Enabling implementation of custom components
 Wiring client side event to server side application code
 Good separation of the logic and presentation

Unit-5 Java Server Faces 5 Darshan Institute of Engineering & Technology

 MVC

6
Unit-5 Java Server Faces 6 Darshan Institute of Engineering & Technology
 What is MVC Design Pattern?
 MVC design pattern designs an application using three separate
modules:
Model Model Carries Data and login
View Shows User Interface
Controller Handles processing of an application.
UI Logic Business Logic

View Model

Controller
Request & Relay data

Unit-5 Java Server Faces 7 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle

8
Unit-5 Java Server Faces 8 Darshan Institute of Engineering & Technology
 JSF Request Processing Life Cycle
JSF application lifecycle consist of six phases which are as follows:
Phase-I: Restore View (RV)
Phase-II: Apply Request Values (ARV)
Phase-III: Process Validations (PV)
Phase-IV: Update Model Values (UMV)
Phase-V: Invoke Application (IA)
Phase-IV: Render Response (RR)

Unit-5 Java Server Faces 9 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle

Request Apply
Create or Process
Request
Restore View Validations
Values

Response
Render Invoke Update
Response Application Model Values

Unit-5 Java Server Faces 10 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle
Phase 1: Restore view
 JSF begins the restore view phase as soon as a link or a button is
clicked and JSF receives a request.
 During this phase, the JSF builds the view, wires event handlers
and validators to UI components and saves the view in the
FacesContext instance.
 The FacesContext instance will now contains all the information
required to process a request.

Unit-5 Java Server Faces 11 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle

Request Apply
Create or Process
Request
Restore View Validations
Values

Response
Render Invoke Update
Response Application Model Values

Unit-5 Java Server Faces 12 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle
Phase 2: Apply request values
 In this phase, the values that are entered by the user will be
updated on each and every individual component defined in the
View graph.
 Component stores this value.
 If any of the Conversions or the Validations fail, then the current
processing is terminated and the control directly goes to
the Render Response for rendering the conversion or the
validation errors to the Client.

Unit-5 Java Server Faces 13 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle

Request Apply
Create or Process
Request
Restore View Validations
Values

Response
Render Invoke Update
Response Application Model Values

Unit-5 Java Server Faces 14 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle
Phase 3: Process validation
 This Phase will process any Validations that are configured for UI
Components.
 These validations will only happen for the UI Components only if
the property 'rendered' property is set to 'true'.

Unit-5 Java Server Faces 15 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle

Request Apply
Create or Process
Request
Restore View Validations
Values

Response
Render Invoke Update
Response Application Model Values

Unit-5 Java Server Faces 16 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle
Phase 4: Update model values
 After the JSF checks that the data is valid, it walks over the
component tree and set the corresponding server-side object
properties to the component’s local values.
 The JSF will update the bean properties corresponding to input
component's value attribute.

Unit-5 Java Server Faces 17 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle

Request Apply
Create or Process
Request
Restore View Validations
Values

Response
Render Invoke Update
Response Application Model Values

Unit-5 Java Server Faces 18 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle
Phase 5: Invoke application
 During this phase, the JSF handles any application-level events,
such as submitting a form / linking to another page.
 In this phase, JSF Implementation will call the
UIComponentBase.processApplications() method
which will immediately call the Render Response Phase.

Unit-5 Java Server Faces 19 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle

Request Apply
Create or Process
Request
Restore View Validations
Values

Response
Render Invoke Update
Response Application Model Values

Unit-5 Java Server Faces 20 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle
Phase 6: Render response
 And finally, we have reached the Render Response whose job is to
render the response back the Client Application.

Unit-5 Java Server Faces 21 Darshan Institute of Engineering & Technology

 JSF request processing Life cycle
Recover the component tree
Restore View

Adds new parameter to recovered component

Apply Request Values
tree

Process Validation Validates the parameter

update the bean properties corresponding to

Update Model Values input component's value attribute

Instances MB(Managed Bean), adds value of

Invoke Application component to properties of MB, Method of
MB is executed.

Render Response Add value of the attribute to Component tree,

Generates HTML code.
Unit-5 Java Server Faces 22 Darshan Institute of Engineering & Technology
 JSF Program
 Java Server Faces technology provides an easy and user-friendly
process for creating web applications.
 Developing a simple JavaServer Faces application typically requires
the following tasks:
1. Developing managed beans (.java file)
2. Creating web pages using component tags (.xhtml file)
3. Mapping the javax.faces.webapp.FacesServlet instance (web.xml)

Unit-5 Java Server Faces 23 Darshan Institute of Engineering & Technology

 JSF Program
Developing the Managed Bean
1. package hello;
2. import javax.faces.bean.ManagedBean;
3. @ManagedBean
4. public class Hello {
5. String world = "Hello World!";
6. public String getworld()
7. {
8. return world;
9. }
10.}
Unit-5 Java Server Faces 24 Darshan Institute of Engineering & Technology
 JSF Program : index.xhtml
Creating the Web Page
In a typical Facelets application, web pages are created in XHTML.
1. <?xml version='1.0' encoding='UTF-8' ?>
2. <html xmlns="http://www.w3.org/1999/xhtml"
3. xmlns:h="http://xmlns.jcp.org/jsf/html">
4. <head>
5. <title>Facelet Title</title>
6. </head>
7. <h:body>
8. #{hello.world}
9. </h:body>
10.</html>

Unit-5 Java Server Faces 25 Darshan Institute of Engineering & Technology

 JSF Program
Mapping the Faces Servlet Instance
 The final task requires mapping the FacesServlet, which is done
through the web deployment descriptor (web.xml).

Unit-5 Java Server Faces 26 Darshan Institute of Engineering & Technology

 JSF Tags

29
Unit-5 Java Server Faces 29 Darshan Institute of Engineering & Technology
 JSF Tag Libraries
 JSF framework provides a standard HTML tag library.
 Each tag will rendered into corresponding html output.
 To use these html tags we have to use the following namespaces of URI in
html node.

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
 Two types of JSF Tag library

<%@taglib uri=" http://java.sun.com/jsf/core"

prefix=" f" %>

<%@taglib uri=" http://java.sun.com/jsf/html"

prefix=" h" %>

Unit-5 Java Server Faces 30 Darshan Institute of Engineering & Technology

 JSF Basic Tags
JSF Basic Tag HTML Tag
h:inputText HTML input of type="text"
h:inputSecret HTML input of type="password",
h:inputHidden HTML input of type="hidden".
h:selectMany A group of HTML check boxes
Checkbox

h:selectOne Listbox Single HTML list box.

h:outputText HTML text.
h:commandButton HTML input of type="submit" button.
h:Link HTML anchor.
h:outputLabel HTML Label

Unit-5 Java Server Faces 31 Darshan Institute of Engineering & Technology

 JSP Basic Tags
JSF Basic Tag HTML Tag
f:param Parameters for JSF UI Component.
f:attribute Attribute for a JSF UI Component.
f:setProperty Sets value of a managed bean's property
ActionListener

Unit-5 Java Server Faces 32 Darshan Institute of Engineering & Technology

 JSF Program: Basic Tag Index.xhtml
1. <html xmlns="http://www.w3.org/1999/xhtml"
2. xmlns:h="http://java.sun.com/jsf/html"
3. xmlns:f="http://xmlns.jcp.org/jsf/core">
4. <h:body>
5. <h:form>
6. <h3>JSF Login Logout</h3>
7. <h:outputText value="Username:" />
8. <h:inputText id="username" value=""></h:inputText>
<h:outputText value="Password:" />
9. <h:inputSecret id="password" value="" />
10. <h:commandButton action="/index.xhtml"
value="Login"></h:commandButton>

Unit-5 Java Server Faces 33 Darshan Institute of Engineering & Technology

 JSF Program: Basic Tag
11.<h:selectManyCheckbox value="">
12. <f:selectItem itemValue="1" itemLabel="Diet J2SE" />
13. <f:selectItem itemValue="2" itemLabel="Diet J2EE" />
14.</h:selectManyCheckbox>
15.<h:selectOneRadio value="">
16. <f:selectItem itemValue="1" itemLabel="Sem 4" />

17. <f:selectItem itemValue="2" itemLabel="Sem 6" />

18.</h:selectOneRadio>

Unit-5 Java Server Faces 34 Darshan Institute of Engineering & Technology

 JSF Program: Basic Tag
19.<h:selectOneListbox value="">
20. <f:selectItem itemValue="1" itemLabel="List1" />
21. <f:selectItem itemValue="2" itemLabel="List2" />
22. <f:selectItem itemValue="2" itemLabel="List3" />
23. <f:selectItem itemValue="2" itemLabel="List4" />
24.</h:selectOneListbox>

25. <h:graphicImage value=

"http://www.darshan.ac.in/Upload/DIET/Brochure/2016/D
IET_Placement_Brochure_CE_2016.jpg"/>
26. </h:form>
27. </h:body>
28.</html>

Unit-5 Java Server Faces 35 Darshan Institute of Engineering & Technology

 JSF Facelet Tags
 A viewhandler purely created for JSF
 No more JSP
 .xhtml instead of .jsp
 No tld files and no tag classes to defined a UIComponent.
 Faster than using JSP.

Unit-5 Java Server Faces 36 Darshan Institute of Engineering & Technology

 JSF Facelet Tags
 JSF provides special tags to create common layout for a web
application tags.
 These tags gives flexibility to manage common parts of a multiple
pages at one place.
Templates
ui:insert Inserts content into a template. That content is define with
the ui:define tag
ui:define The define tag defines content that is inserted into a page by a
template.
ui:composition The <ui:composition> tag provides a template encapsulating the
content to be included in the other facelet.
ui:include This tag includes the component in the src attribute as a part of
the current JSF page. 

Unit-5 Java Server Faces 37 Darshan Institute of Engineering & Technology

 JSF Convertor Tags
 JSF has convertors to convert its UI component's data to object
used in a managed bean and vice versa.
 For example, we can convert a text into date object and can
validate the format of input as well.
f:convertNumber Converts a String into a Number of desired format
f:convertDateTime Converts a String into a Date of desired format
Custom Convertor Creating a custom convertor

Unit-5 Java Server Faces 38 Darshan Institute of Engineering & Technology

 JSF Validator Tags
 JSF has built in validators to validate its UI components.
f:validateLength Validates length of a string
f:validateLongRange Validates range of numeric value
f:validateDoubleRange Validates range of float value
f:validateRegex Validate JSF component with a given regular expression.
Custom Validator Creating a custom validator

Unit-5 Java Server Faces 39 Darshan Institute of Engineering & Technology

 JSF Expression Language
 JSF provides a rich expression language.
 Notation:
#{operation-expression}
 Example
#{i=10} <!-- output: 10-->
#{10 > 9} <!-- output: true-->
#{userCar.add} <!– calls add() of UserCar
bean -->

Unit-5 Java Server Faces 40 Darshan Institute of Engineering & Technology

 JSF Program: LoginBean.java
1. import javax.faces.bean.ManagedBean;
2. @ManagedBean
3. public class LoginBean {
4. String username;
5. String password;
6. public String getUsername() {return username;}
7. public void setUsername(String username) {
8. this.username = username;}
9. public String getPassword() {return password;}
10. public void setPassword(String password) {
11. this.password = password;}
12. public String login() {
13. if(username.equals("java") && password.equals("jsf"))
14. return "success";
15. else{return "failure";} }}
Unit-5 Java Server Faces 41 Darshan Institute of Engineering & Technology
 JSF Program: index.xhtml
1. <html xmlns="http://www.w3.org/1999/xhtml"
2. xmlns:c="http://java.sun.com/jsf/core"
3. xmlns:ui="http://java.sun.com/jsf/facelets"
4. xmlns:h="http://java.sun.com/jsf/html">
5. <h:body>
6. <h:form id="loginForm">
7. <h:outputLabel value="username" />
8. <h:inputText value="#{loginBean.username}" />
9. <h:outputLabel value="password" />
10. <h:inputSecret
value="#{loginBean.password}"></h:inputSecret>
11. <h:commandButton value="Login"
action="#{loginBean.login}"></h:commandButton>
12. </h:form>
13. </h:body></html>

Unit-5 Java Server Faces 42 Darshan Institute of Engineering & Technology

 Output

Unit-5 Java Server Faces 43 Darshan Institute of Engineering & Technology

 JSF Event Handling
 When a user clicks a JSF button or link or changes any value in text
field, JSF UI component fires event which will be handled by the
application code.
 To handle such event, event handler are to be registered in the
application code or managed bean.
 When a UI component checks that a user event has happened, it
creates an instance of the corresponding event class and adds it to
an event list.

Unit-5 Java Server Faces 44 Darshan Institute of Engineering & Technology

 JSF Event Handling
Event Handlers Description
valueChangeListener Value change events get fired when user make changes
in input components.
actionListener Action events get fired when user clicks on a button or
link component.
Application Events Events firing during JSF lifecycle:
PostConstructApplicationEvent,
PreDestroyApplicationEvent , PreRenderViewEvent.

Unit-5 Java Server Faces 45 Darshan Institute of Engineering & Technology

 JSF Database ACCESS
 We can easily integrate JDBC with JSF for Database Access, let’s
understand with an example.
 Files required for JSF DB access are as follows:
1. AuthenticationBean.java
2. index.xhtml
3. success.xhtml
4. fail.xhtml
5. Faces-config.xml [Navigational file]

Unit-5 Java Server Faces 46 Darshan Institute of Engineering & Technology

 JSF Database ACCESS AuthenticationBean.java

1. import java.sql.*;
2. import javax.faces.bean.ManagedBean;
3. import javax.faces.bean.RequestScoped;
4. @ManagedBean
5. @RequestScoped
6. public class AuthenticationBean {
7. String uname;
8. String password;
9. public String getUname()
10. {return uname;}
11.public String getPassword()
12. {return password;}
13.public void setUname(String uname)
14. {this.uname = uname;}
15.public void setPassword(String password)
16. {this.password = password;}

Unit-5 Java Server Faces 47 Darshan Institute of Engineering & Technology

 JSF Database ACCESS AuthenticationBean.java

17.// This method will perform authentication from database

18.public String validateFromDB()throws Exception{
19. int i=0;
20. if(uname.equals("diet") && password.equals("diet") ){
21. Class.forName("com.mysql.jdbc.Driver");
22. Connection con= DriverManager.getConnection
("jdbc:mysql://localhost:3306/ajava", "root", "root");
23. Statement st=con.createStatement();
24. i=st.executeUpdate("insert into cxcy
values(2011,'dfg','r1')");
25.}
26.if(i!=0)
27.{return "success";}
28.else {return "failure";}
29.}}

Unit-5 Java Server Faces 48 Darshan Institute of Engineering & Technology

 JSF Database ACCESS index.xhtml

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

2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml"
4. xmlns:h="http://java.sun.com/jsf/html">
5. <h:body><h:form><center>
6. Enter Name :<h:inputText id="name"
value="#{authenticationBean.uname}" ></h:inputText>
7. Enter Password <h:inputSecret id="pwd"
8. value="#{authenticationBean.password}"/>
9. <h:commandButton value="Submit"
10. action="#{authenticationBean.validateFromDB}"/>
11.</center></h:form></h:body></html>

Unit-5 Java Server Faces 49 Darshan Institute of Engineering & Technology

 JSF Database ACCESS success.xhtml

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

2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml"
5. xmlns:h="http://java.sun.com/jsf/html">
6. <h:head>
7. <title>Welcome</title>
8. </h:head>
9. <h:body>
10. Welcome Home: query executed
11.</h:body>
12.</html>
Unit-5 Java Server Faces 50 Darshan Institute of Engineering & Technology
 JSF Database ACCESS fail.xhtml

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

2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml"
5. xmlns:h="http://java.sun.com/jsf/html">
6. <h:head>
7. <title>login failed</title>
8. </h:head>
9. <h:body>
10. Login Failed
11.</h:body>
12.</html>
Unit-5 Java Server Faces 51 Darshan Institute of Engineering & Technology
 JSF Database ACCESS Faces-config.xml

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

2. <faces-config version="2.1"
3. xmlns="http://java.sun.com/xml/ns/javaee"
4. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-
facesconfig_2_1.xsd">
6. <navigation-rule>
7. <from-view-id>/index.xhtml</from-view-id>

Unit-5 Java Server Faces 52 Darshan Institute of Engineering & Technology

 JSF Database ACCESS Faces-config.xml

8. <navigation-case>
9. <from-action>
#{authenticationBean.validateFromDB}</from-action>
10. <from-outcome>success</from-outcome>
11. <to-view-id>/success.xhtml</to-view-id>
12.</navigation-case>
13.<navigation-case>
14. <from-action>
#{authenticationBean.validateFromDB}</from-action>
15. <from-outcome>failure</from-outcome>
16. <to-view-id>/fail.xhtml</to-view-id>
17.</navigation-case>
18.</navigation-rule>
19.</faces-config>

Unit-5 Java Server Faces 53 Darshan Institute of Engineering & Technology

 JSF Database ACCESS:output

Unit-5 Java Server Faces 54 Darshan Institute of Engineering & Technology

 JSF Libraries: PrimeFaces
 PrimeFaces is a lightweight library with one jar, zero-configuration
and no required dependencies
 To use JSF prime faces library we need to use following code:
 <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui ">

Unit-5 Java Server Faces 55 Darshan Institute of Engineering & Technology

 Introduction to PrimeFaces
Simplicity and Performance
 PrimeFaces is a lightweight library, all decisions made are based
on keeping PrimeFaces as lightweight as possible.
 Usually adding a third-party solution could bring a overhead
however this is not the case with PrimeFaces.
 It is just one single jar with no dependencies and nothing to
configure.

Unit-5 Java Server Faces 56 Darshan Institute of Engineering & Technology

 Introduction to PrimeFaces
Ease of Use
 Components in PrimeFaces are developed with a design principle
which states that "A good UI component should hide complexity
but keep the flexibility"

Unit-5 Java Server Faces 57 Darshan Institute of Engineering & Technology

 Introduction to PrimeFaces
Strong Community Feedback
 PrimeFaces community continuously helps the development of
PrimeFaces by providing feedback, new ideas, bug reports and
patches.

Unit-5 Java Server Faces 58 Darshan Institute of Engineering & Technology

 PrimeFaces Tags
JSF prime faces provides following collection of tags:
1. <p:inputText>
2. <p:inputSecret>
3. <p:commandButton>
4. <p:commandLink>
5. <p:ajax>
6. <p:barChart>
7. <p:calendar>
8. <p:colorPicker>
9. <p:dialog>
10. <p:fileUpload>
11. <p:fileDownload>

Unit-5 Java Server Faces 59 Darshan Institute of Engineering & Technology

 GTU Questions
1. Draw the JSF request processing life cycle and briefly give the
function of each phase.
2. Write a short note on JSF Facelets.
3. List the JSF validation tags and explain any two.

Unit-5 Java Server Faces 60 Darshan Institute of Engineering & Technology