JEE 5: Java Servlet Technology

Part 4

FaaDoOcom
Engineers.
FaaDoOEngineers.com
Day 4 Coverage

 Module 1: Design pattern

 Module 2: Introduction to JSF
 Module 3: UI component model
 Module 4: Managed beans

FaaDoOEngineers.com
Module 1: Design pattern

FaaDoOcom
Engineers.
FaaDoOEngineers.com
Module objectives

After completing this module, you should be able to:

 Define pattern
 Justify the use of patterns
 Discuss the MVC Presentation tier Pattern
 Discuss the Business Delegate and Service locator
Business tier patterns
 Describe Integration tier patterns

FaaDoOEngineers.com
What are patterns?

 A pattern describes a proven solution to a recurring design problem,

placing particular emphasis on the context and forces surrounding the
problem, and the consequences and impact of the solution.

FaaDoOEngineers.com
Why use patterns?

 They are proven.

– Patterns reflect the experience, knowledge, and insights of developers who have
successfully used these patterns in their own work.
 They are reusable.
– Patterns provide a ready-made solution that can be adapted to different problems
as necessary.
 They are expressive.
– Patterns provide a common vocabulary of solutions that can express large
solutions succinctly.

FaaDoOEngineers.com
Presentation tier patterns

 The presentation tier patterns deal with the common problems occuring in the
presentation layer such as - view management and navigation, processing of
dynamic business data, efficiently accessing the read-only data, and so on.
 The following are the common Presentation tier patterns:
– MVC
– Intercepting Filter
– Front Controller
– View Helper
– Composite View
To SME:
– Service to Worker
Please define or describe Presentation tier pattern (in general).

FaaDoOEngineers.com
Presentation tier patterns: MVC: Forces

 There is a need for centralized controller for view selection and navigation
(Model 2) based on user entered data business logic processing client type.
 Common system services are typically rendered to each request, so having a
single point of entry is desirable.
– Examples include authentication, authorization, and logging.
– It can leverage filter pattern.

FaaDoOEngineers.com
Presentation tier patterns: MVC: Solution

 Use a controller as an centralized point of contact for all requests

– It promotes code reuse for invoking common system services.
 It can have multiple front controllers, each mapping to a set of distinct
services.
 It works with other patterns:
– Filter
– Command
– Dispatcher
– View Helper

FaaDoOEngineers.com
Presentation tier patterns: MVC: Class Diagram

Consumer Controller

Sends Service Request

To SME:
Please provide a brief description of the diagram.
JSP Controller Servlet Controller

FaaDoOEngineers.com
Business tier patterns

 Business tier patterns tackle problems occuring in an application resulting from

the presentation tier accessesing distributed business services, network
performances degradation due to multiple calls between client and server,
memory impact due to retrieval of a large list of data, and so on.
 Common Business tier patterns:
– Business Delegate
To SME:
– Service Locator
Please define or describe Business tier pattern (in general).
– Session Facade
– Data Transfer Object (DTO)
– Data Transfer Object Assembler
– Composite Entity
– Value List Handler

FaaDoOEngineers.com
Business tier patterns: Business Delegate: Forces

 Business service interface (Businessservice APIs) change as business

requirements evolve.
 Coupling between the presentation tier components and business service tier
(business services) should be kept to minimum.
 It is desirable to reduce network traffic between client and business services.

FaaDoOEngineers.com
Business tier patterns: Business Delegate: Solution

Use a Business Delegate to:

– Reduce coupling between presentation-tier and business service components
– Hide the underlying implementation details of the business service components
– Cache references to business services components
– Cache data
– Translate low level exceptions to application level exceptions

FaaDoOEngineers.com
Business tier patterns: Business Delegate: Class diagram

Client BusinessDeligate Business Service

Sends Service Request

Lookup service

To SME:
Lookup
Please provide a brief description of the diagram.

FaaDoOEngineers.com
Business tier patterns: Service Locator: Forces

 Service lookup and creation involves complex interfaces and network

operations
– JNDI operation is complex
 Service lookup and creation operations are resource intensive and redundant
– Getting JNDI context

FaaDoOEngineers.com
Business tier patterns: Service Locator: Forces (continued)

 Use a Service Locator to

– Abstract naming service usage
– Shield complexity of service lookup and creation
– Enable optimize service lookup and creation functions
 A Service Locator is usually called within Business Delegate object.

FaaDoOEngineers.com
Business tier patterns: Service Locator: Implementation

Implementation strategies for Service Locator:

– EJB Service Locator Strategy
– JMS Queue Service Locator Strategy
– JMS Topic Service Locator Strategy
– Combined EJB and JMS Service Locator Strategy

FaaDoOEngineers.com
Integration tier patterns

 The integration tier is a boundary tier and interacts with different external
systems for data exchange.
 Common Integration tier patterns:
– Connector
– Data Access Object
– Service Activator

To SME:
Please define or describe Integration tier pattern (in general).
FaaDoOEngineers.com
Any questions?

FaaDoOEngineers.com
Module 2: Introduction to JavaServer
Faces (JSF)

FaaDoOcom
Engineers.
FaaDoOEngineers.com
Module objectives

After completing this module, you should be able to:

 Define JSF and discuss its purpose and features
 Discuss the roles in JSF Application Development
 Discuss the JSF lifecycle
 Discuss what goes in a JSF application
 Create pages in JSF
 Add view and form tags
 Elements inside h:form tag
 Define page navigation in application configuration
resource file
 Configure and run a JSF application

FaaDoOEngineers.com
What is JSF?

 A server side user interface component framework designed to build Java

based web applications.
 A specification and reference implementation for a web application
development framework which defines various things such as:
– UI Components
– Events-based interaction model
– Validators and converters
– Page Navigation support
– Back-end-data integration model

FaaDoOEngineers.com
Why JSF?

 JSF is designed to make web development faster and easier.

 It allows higher abstraction for Web application development [Event-driven
programming model (as opposed to HTTP request / response programming
model)] and provides:
– MVC based Web application framework
– Clean separation of roles between behavior and presentation
– Support for UI components, hence web development is easy
– Extendable UI component framework
– Rendering architecture
– Support for client device independence
– Standard
– Huge vendor and industry support

FaaDoOEngineers.com
Why JSF? (continued)

 JSP and Servlet

– No built-in UI component model
 Struts
– No built-in UI component model
– No built-in event model for UI components
– No built-in state management for UI components
– No built-in support of multiple renderers
– Not a standard (despite its popularity)
 Struts and JSF can be used together.

FaaDoOEngineers.com
JSF - A UI Framework for Java Web Applications

The UI created with JSF technology runs on the server and is rendered back to
the client in a mark up language that is appropriate to the client.

Client Server
Access page
HTTP Request

Browser UI

Renders HTML
HTTP Response

FaaDoOEngineers.com
JSF features

Tools provided to application designers and developers:

 A standard GUI component framework
 A set of HTML form input elements that represent server-side GUI
components
 Simple, lightweight classes to represent input events and stateful, server-side
GUI components
 A JavaBeans model for translating input events to server-side behavior
 Validation APIs for both the client side and server side
 Internationalization and localization
 Automatic view presentation, customized to client type (for example, browser
or media type)

FaaDoOEngineers.com
Roles – JSF Application Development

Perspectives of different development roles in developing a JSF application:

 A Page author creates pages by using JSF tag libraries.
 An Application developer creates programs for custom converters,
validators, listeners, and managed beans.
 A Component author creates custom UI components and renderers.
 An Application architect configures application, including defining navigation
rules, configuring custom objects, and creating deployment descriptors.

FaaDoOEngineers.com
The JSF lifecycle

JSF efficiently handles HTTP requests in distinct phases.

Faces
Request Reconstitute Apply
Process
Component Request
Validations
Tree Values

Redisplay requested

Faces
Response Update
Render Invoke
Model
Response Application
Values

Conversion errors

Validation errors

FaaDoOEngineers.com
The JSF lifecycle (continued)
Response Complete Response Complete

Faces
Request
Reconstitute Apply
Component Request Process Process Process
Tree Values Events Validations Events

Render Response

Response Complete Response Complete

Update
Render Process Invoke Process
Model
Response Events Application Events
Values
Faces
Response

Conversion errors
Validation errors

FaaDoOEngineers.com
What goes in a JSF Application?

A typical JSF application contains the following:

 A set of JSP pages
It uses standard tag libraries defined by JSF technology for representing UI
components and other objects on the page.
 A set of backing beans
JavaBeans components that define properties and functions for UI
components on a page.
 An application configuration resource file (a faces-config.xml)
– It defines page navigation rules, adds managed bean declarations.
– It configures other custom objects, such as custom components.

FaaDoOEngineers.com
What goes in a JSF Application? (continued)

A typical JSF application contains the following:

 A deployment descriptor (a web.xml file)
 A set of custom objects if created by the application developer
Objects maybe custom components, validators, converters, or listeners.
 A set of custom tags for representing custom objects on the page

FaaDoOEngineers.com
A simple JSF application

Create a simple web application called HelloJsfApp that takes a user's name and
email ID and returns success on submission of form. The button in the form
directly specifies a return condition.
Following are the steps required in developing a simple JSF application:
 Create a JSP page greeting.jsp using UI components and core tags
 Create a JSP result page response.jsp that displays “Welcome to JSF!”
 Set up Page Navigation in the application configuration resource file
 Configure and Run the Application

FaaDoOEngineers.com
Creating the pages

 It must include JSF tag library

– HTML and core tags
 All JSF tags must be enclosed between a set of view tag.
 Use JSF form and form component tags:
– <h:input_text> (<input type=”text”> is html equivalent)
– <h:command_button> (<input type=”submit”> is html equivalent)
 May include validators, converters, and event listeners on any form
components.

FaaDoOEngineers.com
Creating the pages using UI component and core tags

Example: Create a JSP page greeting.jsp

Declare the JSF tag libraries
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
Create an input form enclosed in view tag
<f:view>
<h:form>
<p>Enter your details: </p>
<p>Name: <h:inputText value="" /></p>
<p>Email: <h:inputText value="" /></p>
<h:commandButton value="Submit” action="success" />
</h:form>
</f:view>

FaaDoOEngineers.com
Adding view and form tags

The combination of components that make up a specific user interface screen is

called a view in JSF.
 The f:view tag represents the root of the view. All JSF component tags must
be inside of a view tag defined in the core tag library.
 The h:form tag represents an input form component, which allows the user to
input some data and submit it to the server, usually by clicking a button.
 All UI component tags that represent editable components (such as text fields
and menus) must be nested inside the form tag.

FaaDoOEngineers.com
Elements inside h:form tag

 Adding a Text field

– Use inputText component to get user input
h:inputText corresponds to <INPUT TYPE="TEXT">
 Adding a Button
– Use commandButton component to submit the form
h:commandButton corresponds to <INPUT TYPE="SUBMIT">

– The action attribute specifies an outcome that helps navigation

mechanism decide which page to open next.
Example: Create another JSP page (result page) response.jsp that simply
displays “Welcome to JSF!”

FaaDoOEngineers.com
Defining page navigation

Page navigation in JSF framework is controlled by faces-config.xml

<faces-config>
<navigation-rule>
<description> handle user input </description>
<from-view-id>/greeting.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/response.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Map “success” action from commandButton to response.jsp, so that user
sees a success message immaterial of what is entered in the fields
<h:commandButton value="Submit" action="success" />

FaaDoOEngineers.com
Configuring and running the application

Mapping the FacesServlet instance:

 All JSF applications must include a mapping to the FacesServlet instance in their
deployment descriptors (web.xml).
 The FacesServlet instance accepts incoming requests, passes them to the life cycle
for processing, and initializes resources.
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>

FaaDoOEngineers.com
Any questions?

FaaDoOEngineers.com
Module 3: UI Component Model

FaaDoOcom
Engineers.
FaaDoOEngineers.com
Module objectives

After completing this module, you should be able to:

 Describe the UI Component Model
 Describe UI Component classes and subclasses and its
hierarchy
 Describe what happens in a typical JSF Component Tree
 Discuss the Component Rendering Model
 Describe the role of the RenderKit
 Describe how to use UI Component tags, UICommand
Tags, JSF Tag libraries and Core Tags
 Discuss the JSF Application Development Process

FaaDoOEngineers.com
UI Component Model

JSF User Interface (UI) components are configurable, reusable elements that
compose user interfaces of JSF applications. A UI component can be simple, like
a button, or compound, like a table, which can be composed of multiple
components.

FaaDoOEngineers.com
UI Component Model (continued)

JSF technology provides a rich, flexible component architecture that includes:

 A set of UIComponent classes for specifying the state and behavior of UI
components
 A rendering model that defines how to render components in various ways
 An event and listener model: defines how to handle component events
 A conversion model: defines how to register data converters onto a component
 A validation model: defines how to register validators onto a component

FaaDoOEngineers.com
UI Components

 JSF implementation provides a set of UI component classes.

– Custom UI components can be created by extending these classes.
 All JSF UI component classes extend from UIComponentBase
– UIComponentBase defines the default state and behavior of a
UIComponent
 Standard UIComponent Subclasses:
– UICommand, UIForm, UIOutput
– UIGraphic, UIInput, UIPanel, UIParameter
– UISelectBoolean, UISelectMany, UISelectOne
 Example:

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

FaaDoOEngineers.com
Standard JSF UI Component Hierarchy

FaaDoOEngineers.com
UI Component Trees

UI components in JSF are composable. In other words, you can nest one
component within another to form more complex client interfaces. These
compositions are referred to as component trees in JSF.
Here is an example of a component tree:
A form component is a root component and inside it there are input components
and a command button that submits the contents of the input component.

FaaDoOEngineers.com
Typical JSF Component Tree

View

Form

Input command combo

FaaDoOEngineers.com
Component Rendering Model

Component Rendering is handled by Render kit and not by component classes.

Appearance of a component on the page can be changed by selecting the tag
that represents the appropriate component / renderer combination.
<h:commandButton>
<h:commandLink>

FaaDoOEngineers.com
RenderKit

 RenderKit defines how component classes map to component tags

appropriate for a particular client.
 JSF implementation includes a standard HTML RenderKit for rendering to an
HTML client.
 For every UI component that a RenderKit supports, the RenderKit defines a
set of Renderer objects.

To SME:
In the second bullet point, is it HTML render kit or HTML RenderKit?

Source: Armstrong et al, 2007.

FaaDoOEngineers.com
The UIComponent tags

Tag Functions Rendered As Appearance

commandButton It submits a form to the An HTML <input A button
Application type=type> element

commandLink It links to another page or An HTML <a href> A hyperlink

location on a page element

form It represents an input An HTML <form> No appearance

form. The inner tags of the element
form receive the data that will
be submitted with the form.

inputText It allows a user to input a An HTML <input A text field

string type=text> element

outputText It displays a line of text Plain text Plain text

FaaDoOEngineers.com
UICommand Tags

 Each JSP custom tag defined in the standard HTML render kit is composed of:
– the component functionality (defined in the UIComponent class)
– the rendering attributes (defined by the Renderer class)
 For example, the two tags below represent a UICommand component
rendered in two different ways.
– commandButton tag is rendered as
– commandLink tag is rendered as Back

FaaDoOEngineers.com
Using JSF Tag libraries

JSF technology provides two tag libraries: html_basic TLD and jsf_core TLD
 JSF html tag library
– Defines tags that represent common HTML user interface components.
 JSF core tag library
– Defines standard JSF core tags
– Independent of a particular render kit

JSP page need to declare them

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

FaaDoOEngineers.com
Types of Core Tags

 The core tags include those related to expressions, flow control, and a generic way to
access URL-based resources whose content can then be included or processed within the
JSP page.
– Event handling tags
– Attribute configuration tag
– Data conversion tags
– Facet tag To SME:
– Localization tag
Please define or describe Core Tags (in general).
– Parameter substitution tag
– Tags for representing items in a list
– Container tag
– Validator tags
– Output tag
– Container for form tags

FaaDoOEngineers.com
Steps in JSF Application Development Process

1. Develop model objects (managed bean) which hold the data.

2. Declare model objects in Application Configuration File faces-config.xml.
3. Create JSP Pages using UI component and core tags.
4. Define Page Navigation in faces-config.xml.
5. Configure web.xml.

FaaDoOEngineers.com
Any questions?

FaaDoOEngineers.com
Module 4: Managed beans

FaaDoOcom
Engineers.
FaaDoOEngineers.com
Module objectives

After completing this module, you should be able to:

 Discuss the process in in developing and using managed
beans
 Discuss how to add managed bean declarations in faces-
config.xml
 Discuss how to refer to beans in input form
 Discuss how to output bean properties

FaaDoOEngineers.com
Managed Beans

Steps in developing and using managed beans:

1. Writing managed beans
2. Adding managed bean declarations in faces-config.xml
3. Referring to beans in input forms
4. Outputting bean properties
i. Standard JSF approach
ii. JSP 2.0 expression language

FaaDoOEngineers.com
Developing managed bean

 A JSF managed bean is a regular JavaBeans component.

– It defines bean properties and methods which are available to the JSF UI
components
 A typical JSF application couples a managed bean with each page in the
application.
 You can bind a component’s value to a bean property using component tag’s
value attribute to refer to the property.

FaaDoOEngineers.com
Developing managed bean

Methods in a managed bean may be:

 Getter and setter methods of bean properties
 JSF related methods: validation methods, action event handler method, value
change event handler methods, or navigation handling methods called action
methods

FaaDoOEngineers.com
Developing managed bean (continued)

public class UserBean {

private String name;
private String email;
public UserBean() { }
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}

FaaDoOEngineers.com
Adding managed bean declarations in faces-config.xml

<managed-bean>
<managed-bean-name>UserBean</managed-bean-name>
<managed-bean-class>bean.UserBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

FaaDoOEngineers.com
Referring to beans in input form

<f:view>
<h:form>
<p>Enter your details: </p>
<p>Name: <h:inputText value="#{UserBean.name}" /></p>
<p>Email: <h:inputText value="#{UserBean.email}" /></p>
<h:commandButton value="Submit" action="submit" />
</h:form>
</f:view>

FaaDoOEngineers.com
Outputting bean properties

Use h:outputText to display bean properties

<h:outputText value="#{beanName.propertyName}"/>

Example:
<f:view>
To SME:
<h:form>
Please identify the bold text in the success.jsp code.
<p>Your name is: <h:outputText value="#{UserBean.name}" /></p>
<p>Your email is: <h:outputText value="#{UserBean.email}" /></p>

</h:form>
</f:view>
I have removed the code snippet as the example is already given on the slide.

FaaDoOEngineers.com
Any questions?

FaaDoOEngineers.com
Session summary

FaaDoOcom
Engineers.
FaaDoOEngineers.com
Summary

 Why use Patterns?

Patterns reflect the experience, knowledge, and insights of developers who

have successfully used these patterns in their own work.
 Types of Patterns
– Presentation Tier
– Business Tier
– Integration Tier

FaaDoOEngineers.com
Summary (continued)

 What is JSF?

It is a specification and reference implementation for a web application

development framework which defines various things such as:
– UI Components
– Events-based interaction model
– Validators and converters
– Page Navigation support
– Back-end-data integration model

FaaDoOEngineers.com
Summary (continued)

 JSF life cycle is split up into multiple phases to support the sophisticated UI
component model.
 JSF has an event-driven nature.
 The combination of components that make up a specific user interface screen
is called a view in JSF.
 JSF UI components are configurable, reusable elements that compose user
interfaces of JSF applications.

FaaDoOEngineers.com
Exercise

Create an Online Shopping Cart using JSF.

Hint : Recreate the implementation of Online Shopping Cart example in the Day1
session (Slide -74, Session management) by using JSF.

FaaDoOEngineers.com