LECTURE 4

JAVASERVER
FACES
LEK HSIANG HUI

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
 LEARNING OBJECTIVES
At the end of this lecture, you should understand:
• The basics of server-side UI component development
using JSF
• How to create templates in JSF
• The concept of associating UI components with
server components (managed beans)
• How to bind UI actions to server functions

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
2
 INTRODUCTION
JavaServer Faces (JSF) is a server-side user
interface (UI) component framework
• All UIs are rendered and processed on server and
sent to client as normal HTML
JSF technology consists of:
• API for representing UI components and managing
state
• Mechanism to connect UI components to server-
side objects

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
3
 JSF APPLICATION
JSF applications typically consist of:
• JSF pages with UI components

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
4
 EXAMPLE
page.xhtml:
<h:outputText value="Event Name:" />
<h:inputText required="true" id="eventName"
value="#{createEventManagedBean.event.eventName}" />

JSF HTML
Render Kit

Event Name:<input id="formMain:eventName" type="text"

name="formMain:eventName" />

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
5
 JSF APPLICATION
JSF applications typically consist of:
• JSF pages with UI components
• Managed beans (conforming to JavaBean
specification) that define properties and functions
• properties – store data
• functions – store logic

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
6
 UI component is bound to a
EXAMPLE Java object (Managed
bean)
page.xhtml:
<h:outputText value="Event Name:" />
<h:inputText required="true" id="eventName"
value="#{createEventManagedBean.event.eventName}" />

Specifically, we are binding this

inputText JSF component with
the event property of the
createdEventManagedBean

More specifically, we are binding to the

eventName attribute of the Event entity object
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
7
 JSF APPLICATION
JSF applications typically consist of:
• JSF pages with UI components
• Managed beans (conforming to JavaBean
specification) that define properties and functions
• Event listeners are used to link browser events to
managed beans functions
• Validators can be defined to apply constraints to
the form input data

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
8
 BENEFITS
Key benefits of JSF:
• Separation of behavior and presentation
• Simplify frontend development process
• “Object-oriented” development process rather than
thinking in terms of Request/Response
• UI is defined by data stored in Java classes
• Behaviors are defined by the methods in Java
classes
• Provides mechanism to facilitate enterprise web
application requirement (e.g. templating, navigation
, validation)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
9
 SETTING UP NETBEANS PROJECT FOR JSF

Go to Properties of
the war module

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
10
 SETTING UP NETBEANS PROJECT FOR JSF

Select Frameworks
Click Add …

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
11
 SETTING UP NETBEANS PROJECT FOR JSF

Choose JavaServer Faces

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
12
 SETTING UP NETBEANS PROJECT FOR JSF

Usually, we will change the URL pattern to *.xhtml

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
13
 SETTING UP NETBEANS PROJECT FOR JSF

If everything works out, you should be able to see a

new index.xhtml file under the Web Pages module
And see this starting page

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
14
 STEPS TO CREATE JSF
APPLICATION
Typical steps for creating enterprise web
application using JSF:
1. Create a Facelets Template
2. Create multiple Facelets Client pages using the
Facelets Template
3. Add components using the JSF component tags
for each of the (Facelets Client) page
4. Create Managed Beans and associate them in
the pages

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
15
 FACELETS
JSF TEMPLATING TECHNOLOGY

Managed Field
Facelets JSF tags Navigation
Beans Validation

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
16
 TEMPLATE
Often enterprise web applications have a consistent
look (e.g. the same side bar menu for every page)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
17
 FACELETS
Facelets is a page declaration language for:
• Creating Templates
Not a requirement but preferred for a
consistent look

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
18
 FACELETS TEMPLATES
Top Section (Fixed)

Menu
Section Content Section

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
19
 FACELETS TEMPLATES
Facelets template pages can contain fixed content that
should be present on every page

It can also define the sections which is dynamic

To achieving the templating feature, would need a

template page and each possible location is a client
page

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
20
 FACELETS TEMPLATES
Template page:

• Defines the layout used

by other pages
• Static content :e.g.
menubar
• Dynamic content:
depends on the page
(indicate by inserting
named sections)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
21
 FACELETS TEMPLATES
Client page (1 for every location):

• Indicate which template

page to use
• Defines the actual
contents for named
sections of the template

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
22
 FACELETS TEMPLATES
Template page:
• ui:insert : indicates dynamic section (by a
name) and where to put it
Client page:
• ui:composition : defines the template used
• ui:define : defines contents of the named
section

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
23
 CREATING A JSF FACELETS TEMPLATE

Right click war module

Select New > Others…
Choose the JavaServerFaces category
Select Facelets Template for File Types
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
24
 CREATING A JSF FACELETS TEMPLATE

Specify the template File Name and folder (if any)

Can choose one of the default layout style (but
usually we will override this)
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
25
 EXAMPLE
Template page (template/default.xhtml):
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">

<h:head>
...
<title><ui:insert name="title">Title</ui:insert></title>
</h:head>
<h:body>
<div id="left">
...
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:body>
</html>
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
26
 EXAMPLE
Client page:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
template="./template/default.xhtml">

<ui:define name="title">
Index Page
</ui:define>

<ui:define name="content">
This is the Index Page
</ui:define>

</ui:composition>

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
27
 HANDS-ON TIME
Task: Setup NetBeans project to use JSF
framework and work with Facelets templating
engine
1. Setting up Netbeans Project for JSF
• Define the JavaServer Faces Configuration JSF
Servlet URL Pattern as *.xhtml
2. Create a Facelet Template (default.xhtml)
3. Create 2 Facelet Client pages (page1.xhtml,
page2.xhtml) using the default.xhtml template
4. Try accessing page1.xhtml and page2.xhtml

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
28
 HANDS-ON TIME

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
29
 JSF TAGS

Managed Field
Facelets JSF tags Navigation
Beans Validation

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
30
 JSF BASIC TAGS
Need to first declare the namespaces:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">

JSF tags are then rendered into their corresponding HTML output
• h:form : html form
• h:inputText : html input of type="text” (textbox)
• h:inputSecret : html input of type=”password” (textbox)
• h:inputArea : html textarea
• h:inputHidden : html input of type=”hidden”
• h:commandButton : html input of type=”submit” (button)
• h:commandLink : hyperlink
• etc
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
31
 MANAGED
BEANS
Managed Field
Facelets JSF tags Navigation
Beans Validation

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
32
 MANAGED BEANS
Managed Beans are JavaBean classes which is
used in the JSF pages
It provides the data and functionality for the UI
components
• Instance variables (of a managed bean) can be
bound to JSF UI components (read/write)
• UI components can call methods to perform
some business logic

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
33
 EVENT AND LISTENER
Action events:
• When user clicks on h:commandButton or
h:commandLink, it can trigger an action
Value change events:
• When user change the value of h:inputText,
it can trigger an auto-postback
Can associate an action/event to a managed
bean

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
34
 Notice the name of the
managed bean is in

EVENT AND LISTENER

camelCase, starting
with lower case
<h:form>
...
<h:commandButton value="Submit"
action="#{eventManagedBean.submit}" />
</h:form>

@Named(value="eventManagedBean")
@RequestScoped
public class EventManagedBean {
...
public EventManagedBean() {...}

public void submit() {

// Do processing here
}
}
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
35
 EVENT AND LISTENER
<h:form>
...
<h:commandButton value="Submit"
action="#{eventManagedBean.submit}" />
</h:form>

@Named(value="eventManagedBean")
@RequestScoped
public class EventManagedBean {
...
public EventManagedBean() {...}

public String submit() { Can also return a String:

// Do processing here page to forward to after
… doing the processing
return "another_page.xhtml" (but note that the URL
} shown on the browser
}
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
will still be the old URL) 36
 EVENT AND LISTENER
<h:selectOneMenu value="#{eventManagedBean.selectedCountry}"
valueChangeListener="#{eventManagedBean.countryChanged}">
<f:selectItems value="#{eventManagedBean.countries}"/>
</h:selectOneMenu>

@Named(value="eventManagedBean")
@RequestScoped
public class EventManagedBean {
…
// this HashMap will be initialized with countries data
private static Map<String, String> countries;
private String selectedCountry = "SG"; //default value
//should have the getter/setter for the countries and country attributes

public void countryChanged(ValueChangeEvent event) {

country = e.getNewValue().toString();
}
…
}
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
37
 EXPRESSION LANGUAGE
Expression language allows us to bind
variables/function of the managed bean
• Reference variables should have the getter (and setter
if necessary)
• () in functions may be omitted if no parameters are
supplied

<h:selectOneMenu value="#{eventManagedBean.selectedCountry}"
valueChangeListener="#{eventManagedBean.countryChanged}">
<f:selectItems value="#{eventManagedBean.countries}"/>
</h:selectOneMenu>
<h:commandButton value="Submit" action="#{eventManagedBean.submit}" />
Selected country:
<h:outputText value="#{eventManagedBean.selectedCountry}" />
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
38
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
39
 MANAGED BEAN SCOPE
@Named(value="eventManagedBean")
@RequestScoped
public class EventManagedBean {
...
}

Different type of scoping that can be defined:

• RequestScoped
• ViewScoped
• SessionScoped
• ApplicationScoped

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
40
 MANAGED BEAN SCOPE
RequestScoped
• Bean is created for every new request (and destroyed
at the end of every request)

Each time when the page is refreshed (or

when there is a new action), a new
managed bean is created (and the value is
defaulted back to SG)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
41
 MANAGED BEAN SCOPE
ViewScoped
• Bean lives if the user is interacting with the same JSF
view (get destroyed once the user go to a different
url/view)

Often, we need to do multiple actions

within a page (e.g. set various fields before
submitting) – RequestScoped will lose the
managedBean state after an action

ViewScoped will allow us to maintain the

same managed bean if we do not go into
another view (and do not refresh the page)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
42
 MANAGED BEAN SCOPE
SessionScoped
• Bean lives as long as the HTTP session lives (i.e. only
destroyed when you close your browser)

When you submit the value and refresh the

page (or open a new tab and point to the
URL), you are still using the same
managed bean

To clear session, you need to exit and

rerun the browser

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
43
 MANAGED BEAN SCOPE
ApplicationScoped
• Bean is created upon first HTTP request and
maintained as long as the application is running

Now even if you open another browser, the

state is persisted throughout

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
44
 FIELD
VALIDATION
Managed Field
Facelets JSF tags Navigation
Beans Validation

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
45
 VALIDATION MODEL
JSF provides server-side data validation using a
declarative approach via JSF core tags:
• f:validateLength : validates the length of a string
• f:validateLongRange : validates the range of a
numeric value
• f:validateDoubleRange : validates the range of a
float value
• f:validateRegex : validates using a regular
expression
Can also register a custom validator

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
46
 EXAMPLE
<h:form id="form1">
Event Name:
<h:inputText value="#{eventManagedBean.eventName}" required="true"
requiredMessage="Event name is required" id="eventName">
<f:validateLength minimum="3" maximum="8" />
</h:inputText>
<h:message for="eventName" styleClass="error" /><br />
<h:commandButton value="Submit" action="#{eventManagedBean.submit}"/>
</h:form>

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
47
 BEAN VALIDATION
Possible to define validation rules in the managed bean
instead of the JSF pages

@Named(value="eventManagedBean")
@RequestScoped
public class EventManagedBean {
…
@NotNull
@Size(min=3, max=8)
@Pattern(regexp = "^[A-Z].*$")
private String eventName;
…
}

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
48
 BEAN VALIDATION
Other constraints:
• @DecimalMax, @DecimalMin
• @Digits : e.g. @Digits(integer=5, fraction=2)
• @Future, @Past (must be a Date in the future/past)
• @Max, @Min : e.g. @Max(5)
• @Size : string must fit within a certain length

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
49
 CONVERSION MODEL
JSF can auto convert the component data between the model
object and the presentation view
• E.g. java.util.Date can be auto converted to a text string to
be displayed in a h:outputText (and vice versa)
Need to use the following JSF core namespace
<html xmlns="http://www.w3.org/1999/xhtml"
…
xmlns:f = "http://java.sun.com/jsf/core">
And use the convertor tags
<h:inputText value="#{managedBean.startDate}">
<f:convertDateTime pattern="yyyy MM dd" />
</h:inputText>

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
50
 NAVIGATION

Managed Field
Facelets JSF tags Navigation
Beans Validation

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
51
 IMPLICIT NAVIGATION
Can specify the target location to navigate to in the action
attribute of h:commandLink and h:commandButton

<h:commandButton action="#{eventManagedBean.goPage1}"
value="Go to Page 1"/><br />
<h:commandButton action="#{eventManagedBean.goPage2}"
value="Go to Page 2"/><br />
<h:commandButton action="page3.xhtml" value="Go to Page 3"/><br />
<h:commandButton action="page3" value="Go to Page 3"/>

@Named(value="eventManagedBean")
@RequestScoped
public class EventManagedBean {
…
public String goPage1(){ return "page1"; }
public String goPage2(){ return "page2"; }
}
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
52
 NAVIGATION RULES
Also, possible to define explicit navigation rules in
faces-config.xml

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
53
 Specify a page

map a outcome to a
NAVIGATION RULES xhtml page

faces-config.xml
<navigation-rule>
<from-view-id>/navigation-example.xhtml</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/success-page.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
Specify a page to
navigation-example.xhtml redirect to
<h:commandButton action="success" value="Go to success"
actionListener="#{eventManagedBean.successAction}"/>

@Named(value="eventManagedBean")
@RequestScoped actionlistener will finish
public class EventManagedBean { execution before redirecting
…
public void successAction(ActionEvent event){
//do processing
System.out.println("Do success processing");
}
}
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
54
 FORWARD/REDIRECT
JSF by default performs page forward (i.e. the URL does not
change)

To enable page redirect, append ?faces-redirect=true to the

end of the action rule:
<h:commandButton action="page3?faces-redirect=true"
value="Go to Page 3 (redirect)"/>

For navigation rules, use

<navigation-rule>
<from-view-id>/navigation-example.xhtml</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/success-page.xhtml</to-view-id>
<redirect />
</navigation-case>
</navigation-rule>
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
55
 SUMMARY
Server-side UI component development using JSF
Basics of JSF development approach:
• JSF pages with UI components (JSF tags)
• Managed beans that binds UI components’
properties/action to attributes/methods at the server

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
56
 WHAT’S NEXT?
PrimeFaces

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
57