Lec5 ecom fall16_modified7_november16

e-Commerce Systems
Zainab KHALLOUF, Ph.D.
Lecture 5: JavaServer Faces (JSF) : Introduction and Overview

Lecture References
The Java EE 7 Tutorial.
http://docs.oracle.com/javaee/7/tutorial/doc/javaeetutorial7.pdf
The ﬁgure in slide 4 is from: Mastering JavaServer Faces, by Bill Dudney, Jonathan
Lehr, Bill Willis, and LeRoy Mattingly.
JSF 2.0 lecture notes by Dr. Beatrice Amrhein, available from:
http://sws.bfh.ch/~amrhein/
E-Commerce Systems 2

JavaServer Faces (JSF) : Introduction
JavaServer Faces (JSF) is a user interface (GUI)
component framework for developing Java web
applications.
JavaServer Faces UI components are conﬁgurable, reusable
elements that compose the user interfaces of JavaServer
Faces applications.
A component can be simple, such as a button, or can be
compound, such as a table, composed of multiple
components.
(For more information about HTML Tag Library Tags, return to page 164 from :
The Java EE 7 Tutorial).

JavaServer Faces (JSF) : Introduction (cont’)
JSF works in the web tier from the server-side.
JSF is the ”oﬃcial” presentation technology in Java EE7
standard.
JavaServer Faces technology APIs are layered directly on
top of the Servlet API.

JSF is a MVC (Model-View-Controller) framework. MVC
is a design pattern that divides the application into three
interoperable components:
Model: Classes that represent the business data and any
business logic that govern access to and modiﬁcation of the
data.
View: Pages that your application uses to dynamically
generate HTML responses. The view renders the contents
of a model. A view also forwards user inputs to a controller.
Controller: Classes that handle incoming browser requests,
and it deﬁnes application behavior. It selects views for
presentation. It interprets user inputs and maps them into
actions to be performed by the model. A controller selects
the next view to display based on the user interactions and
the outcome of the model operations.

JSF is a MVC framework.
Controller: The JSF controller consists primarily of a
servlet called FacesServlet.
View: Represented by a set of web pages composed of a tree
of UI components.
Model:
Model objects referenced by the backing beans.
The backing beans can include some controller functions
like page selection.

What Is a JavaServer Faces Application?
A typical JavaServer Faces application includes the following
parts:
1 A set of web pages, JSF uses JavaServer Pages (JSP) or
Facelets (recommended) for its presentation technology.
JavaServer Pages (JSP) technology does not support all the
new features available in JSF in the Java EE 7 platform.
2 A set of backing beans (managed beans), which are
JavaBeans components that define properties and functions
for components on a page.
3 A web deployment descriptor (web.xml) file.
4 Optionally, one or more application configuration resource
files, such as a faces-config.xml file, which can be used to
define user-defined navigation rules and configure beans
and other custom objects, such as custom components.
5 Optionally, a set of custom objects, which can include
custom components, validators, converters, or listeners,
created by the application developer.

What Is Facelets?
The term Facelets refers to the view declaration language
for JavaServer Faces.
Facelets views are created as XHTML pages.
JSF EL expression use #{. . . }, while JSP EL expressions
use the ${. . . } syntax.
Return to page 130 from:

The tag libraries supported by Facelets
JavaServer Faces technology supports various tag libraries to add
components to a web page. To support the JavaServer Faces tag
library mechanism, Facelets uses XML namespace declarations.

The tag libraries supported by Facelets (cont’)

The tag libraries supported by Facelets (cont’)
Example of using XML namespace declarations in Facelets.

The interaction between client and server in a typical
JSF application
http://download.oracle.com/javaee/6/tutorial/doc/javaeetutorial6.pdf

To use JSF you need:
JSF Implementation (in the form of the JSF jars).
The JavaServer Pages Standard Tag Library (JSTL) tags
library.
A Java runtime environment.
A web-container to use JSF in (for example Tomcat).

Some existing JSF Implementations
Sun implementation (Mojarra) (open source) used in
many ASs.
JBoss RichFaces (open source).
Primefaces, (open source).
Apache MyFaces, (open source).

Creating a JSF Application Using NetBeans IDE

Creating a JSF Application Using an IDE, such as
NetBeans

Creating a JSF Application Using NetBeans (cont’)

Creating a Simple JavaServer Faces Application
1 Developing backing beans.
2 Adding managed bean annotations (declaration).
3 Creating web pages using Facelets or JSP tags.
4 Mapping the FacesServlet instance.

Developing the Backing Bean

Developing the Backing Bean (cont’)
The @Named annotation makes the managed bean
accessible through the EL.
You can specify an argument to the @Named to use a
nondefault name.
Example : @Named(”Hello”). With this annotation, the
Facelets page would refer to the bean as Hello.
Managed beans are created and initialized the ﬁrst time
they are requested by an EL expression.
The @RequestScoped annotation controls the lifespan of
the managed bean. Managed beans are automatically
instantiated and registered in their scope.
Managed beans should be speciﬁed as serializable.

Creating the Web Page
index.xhtml, is a simple XHTML page. It has the following
content:
The web page connects to the backing bean through the
Expression Language (EL) value expression #{hello.world},
which retrieves the value of the world property from the
backing bean Hello.

Mapping the FacesServlet Instance
Done through the web deployment descriptor (web.xml),
automatically done for you if you are using an IDE such as
NetBeans IDE.

Libraries

package bean;
...
@RequestScoped
@Named
public class HelloBean implements Serializable{
private String name;
private int age;
private String helloText;
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getHelloText() {
return helloText;
}
....
....
/** Define the text to say hello. */
public String sayHello() {
if (age < 11) {
helloText = "Hello " + name + "!";
} else {
helloText = "Good Morning " + name + "!";
}
return ("home");
}
}

Creating the Web Pages
index.xhtml
<?xml version=’1.0’ encoding=’UTF-8’ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form id="main">
<h:outputText value="Hello World" styleClass="header" />
<table>
<tr>
<td><h:outputLabel for="helloInput" value="Your Name" /></td>
<td><h:inputText id="helloInput"
value="#{helloBean.name}" required="true" /></td>
</tr>
<tr>
<td><h:outputLabel for="helloAge" value="Your Age" /></td>
<td><h:inputText id="helloAge"
value="#{helloBean.age}" /></td>
</tr>
</table><p />
<h:commandButton value="Say Hello"
action="#{helloBean.sayHello}" />
</h:form>
</h:body>
</html>

Creating the Web Pages (cont’)
home.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TODO supply a title</title>
</head>
<body>
<p>
#{helloBean.helloText}
</p>
</body>
</html>

package bean;
...
@SessionScoped
@Named
public class GuessBean implements Serializable{
private int target;
private int guess = -1;
private int attempts;
private String message;
public GuessBean() {
target = (int) (Math.random() * 100);
}
//Setters and getters
....
....
public String guessCommand() {
if (guess == target) {
FacesContext context = FacesContext.getCurrentInstance();
HttpSession session = (HttpSession) context.getExternalContext().getSession(false);
session.invalidate();
return ("sucess");
} else {
this.attempts++;
this.message = "Your guess is incorrect, guess again please";
return ("index");
}
}
}

Creating the Web Pages
index.xhtml
...
<h:form>
<h:inputText id="guess" value="#{guessBean.guess}">
<f:validateLongRange minimum="0" maximum="100"/>
</h:inputText>
<h:message showSummary="true" showDetail="false"
styleClass="error"
for="guess"/>
<h:commandButton id="cmd" value="Try" action="#{guessBean.guessCommand}"/>
<br/>
<h:outputText id="msg" value="#{guessBean.message}"
rendered="#{guessBean.attempts gt 0}"/>
<br/>
<h:outputText id="attem" value="Attempts: #{guessBean.attempts}"
rendered="#{guessBean.attempts gt 0}"/>
</h:form>
...
f:validateLongRange : A standard validator tag to validate
the input value.
rendered : Speciﬁes a condition under which the
component should be rendered. If the condition is not
satisﬁed, the component is not rendered.

Creating the Web Pages (cont’)
sucess.xhtml
...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Congratulations</title>
</head>
<body>
<p>
Congratulations
</p>
</body>
</html>

Example 4 : A simple application to illustrate the use of
entities, facade session bean and JSF.

Example 4 (cont.)

Example 4 (cont.)
Account.java
...
@Entity
public class Account implements Serializable {
private static final long serialVersionUID = 1L;
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
private String ownerName;
private int balance;
public Account() {
}
...
//setters and getters
public void deposit(int amount) {
balance += amount;
}
public int withdraw(int amount) {
if (amount > balance) {
return 0;
} else {
balance -= amount;
return amount;
}
}
}

Example 4 (cont.)
AccountFacade.java
...
@Stateless
public class AccountFacade {
@PersistenceContext(unitName = "BankEntityWebApplicationPU")
private EntityManager em;
public Account openAccount(String ownerName, int balance) {
Account account = new Account();
account.setOwnerName(ownerName);
account.setBalance(balance);
em.persist(account);
return account;
}
public void deposit(int accountNumber, int amount) {
Account account = em.find(Account.class, accountNumber);
account.deposit(amount);
}
public int withdraw(int accountNumber, int amount) {
return account.withdraw(amount);
}
public void close(int accountNumber) {
em.remove(account);
}
public List<Account> listAccounts() {
Query query = em.createQuery("SELECT a FROM Account a");
return query.getResultList();
}
}E-Commerce Systems 45

Example 4 (cont.)
AccountInfoView.java
...
@RequestScoped
@Named
public class AccountInfoView implements Serializable{
@EJB
private AccountFacade accountFacade;
private Account account;
public List<Account> getAccounts() {
return (accountFacade.listAccounts());
}
public Account getAccount() {
return account;
}
public void setAccount(Account account) {
this.account = account;
}
public AccountInfoView() {
this.account = new Account();
}
public void SetAccountInfo(String ownername, int balance) {
account.setOwnerName(ownername);
account.setBalance(balance);
}
public String creatAccount() {
this.accountFacade.openAccount(account.getOwnerName(), account.getBalance());
return "response";
}
}

Example 4 (cont.)
index.xhtml
<?xml version=’1.0’ encoding=’UTF-8’ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<f:view>
<h:form>
<h:outputLabel value="Client Name:"/>
<h:inputText value="#{accountInfoView.account.ownerName}"/>
<h:outputLabel value="Balance:"/>
<h:inputText value="#{accountInfoView.account.balance}"/>
<h:commandButton action="#{accountInfoView.creatAccount}" value="Create Account"/>
</h:form>
</f:view>
</h:body>
</html>

Example 4 (cont.)
response.xhtml : Using h:dataTable.
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
</head>
<body>
<p>
<h:dataTable var="acc"
value="#{accountInfoView.accounts}"
border="1">
<h:column>
<f:facet name="header">Owner Name</f:facet>
#{acc.ownerName}
</h:column>
<h:column>
<f:facet name="header">Balance</f:facet>
#{acc.balance}
</h:column>
</h:dataTable>
</p>
</body>
</html>

Example 4 (cont.)
response.xhtml : Using ui:repeat.
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<head>
</head>
<body>
<p>
<ul>
<ui:repeat var="acc" value="#{accountInfoView.accounts}">
<li> #{acc.ownerName} , #{acc.balance}</li>
</ui:repeat>
</ul>
</p>
</body>
</html>

Generating JSF pages for Entities in Netbeans

Templating
Templating is a useful Facelets feature that allows you to
create a page that will act as the base, or template, for the
other pages in an application.
By using templates, you can reuse code and avoid
recreating similarly constructed pages.
The NetBeans IDE provides a Facelets Template wizard for
creating Facelets templates, and a Facelets Template Client
wizard for creating ﬁles that rely on a template.

Basic Steps to Use Templating
1 Creating template file
Content that will appear in all clients is entered directly.
Content that can be replaced in client files is marked with
ui:insert (with default values in case client does not supply
content).
2 Creating template client files
Use ui:composition to specify the template file used.
Use ui:define to override content for each replaceable section
in template (marked in template with ui:insert).
http://www.coreservlets.com/JSF-Tutorial/jsf2/

Templating Example

Templating Example (cont’)

Creating Template File:

Creating Template Client File:

HTML5 Friendly Markup
JavaServer Faces technology supports HTML5 by allowing
to use HTML5 markup directly. It also allows you to use
HTML5 attributes within JavaServer Faces elements.
JavaServer Faces technology support for HTML5 falls into
two categories:
Pass-through elements.
Pass-through attributes.
Return to page 145 from:

HTML5 Friendly Markup: Pass-through elements
Pass-through elements allow you to use HTML5 tags and
attributes and to treat them as equivalent to JavaServer
Faces components.
To make a non-JavaServer Faces element a pass-through
element, specify at least one of its attributes using the
http://xmlns.jcp.org/jsf namespace. For example, the
following code declares the namespace with the short name
jsf:
<input type="email" jsf:id="email" name="email" value="#{bean.email}" required="required"/>
Here, the jsf preﬁx is placed on the id attribute so that the
HTML5 input tag’s attributes are treated as part of the
Facelets page. This means that, for example, you can use
EL expressions to retrieve managed bean properties.

HTML5 Friendly Markup: Using Pass-through
Attributes
They allow you to pass non-JavaServer Faces attributes.
There are several ways to specify pass-through attributes,
in his lecture we will focus on one method:
Use the JavaServer Faces namespace:
xmlns:p=”http://xmlns.jcp.org/jsf/passthrough, to preﬁx
the attribute names within a JavaServer Faces component.
Example : The following code passes the type, min, max,
required, and title attributes through to the JSF input
component:
<html ... xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
...
<h:inputText id="nights" p:type="number" value="#{bean.nights}"
p:min="1" p:max="30"
p:required="required"
p:title="Enter a number between 1 and 30 inclusive."/>

HTML5 Friendly Markup: The reservation Example
Application
The reservation example application simulates purchasing
tickets. It consists of two Facelets pages, reservation.xhtml and
conﬁrmation.xhtml, and a backing bean, Bean.java. The pages
use both pass-through attributes and pass-through elements.

Application (cont’)

reservation.xhtml
...
<!DOCTYPE html>
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
xmlns:jsf="http://xmlns.jcp.org/jsf">
<h:head>
</h:head>
<h:form prependId="false">
<p>
<label>Name (First Last):</label>
<br/>
<input type="text" jsf:id="full_name" name="full_name"
placeholder="John Doe"
value="#{bean.name}" required="required"/>
</p>
<p>
<label>Email:</label>
<br/>
<input type="email" jsf:id="email" name="email" value="#{bean.email}"
required="required"/>
</p>

reservation.xhtml (cont’)
<p>
<label>Date Of Arrival:</label>
<br/>
<input type="date" jsf:id="arrival" name="arrival" value="#{bean.arrival}"
required="required"/>
</p>
<p>
<label>Number Of Nights:</label>
<br/>
<h:inputText id="nights" p:type="number" value="#{bean.nights}"
p:min="1" p:max="30" p:required="required"
p:title="Enter a number between 1 and 30 inclusive."/>
</p>
<p>
<label>Number Of Guests:</label>
<br/>
<input jsf:id="guests" type="number" value="#{bean.guests}" min="1"
max="4" required="required"
title="Enter a number between 1 and 4 inclusive."/>
</p>
<p>
<h:commandButton value="Make Reservation" action="#{bean.calculateTotal}"/>
</p>
</h:form>
</html>

conﬁrmation.xhtml
<!DOCTYPE html>
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf">
<h:head>
</h:head>
<h:outputStylesheet name="stylesheet.css" />
<h:form>
<output jsf:id="confirm" name="confirm">
Thanks for your reservation, #{bean.name}. #{bean.guests} guests are
confirmed for #{bean.arrival}. A fictitous email has been sent to #{bean.email}.
<p>
<label>Estimated Total:</label>
<br/>
<output jsf:id="total" name="total">#{bean.totalValue}</output>
</p>
</output>
<p>
<h:commandButton value="Back" action="reservation"/>
</p>
</h:form>
</html>

Bean.java
...
@RequestScoped
@Named
public class Bean implements Serializable {
private String name = "";
private String totalValue = "";
private String email = "";
private String arrival = "";
private String nights = "1";
private String guests = "1";
....
public String calculateTotal() {
int nightsNum = 0;
int guestsNum = 1;
int total = 0;
if (nights.trim().length() > 0) {
nightsNum = Integer.parseInt(nights);
}
if (guests.trim().length() > 0) {
guestsNum = Integer.parseInt(guests);
}
total = (nightsNum * 99) + ((guestsNum - 1) * 10);
totalValue = String.valueOf(total) + ".00";
return "confirmation";
}
}

Lec5 ecom fall16_modified7_november16

More Related Content

What's hot

Viewers also liked

Similar to Lec5 ecom fall16_modified7_november16

More from Zainab Khallouf

Recently uploaded

Lec5 ecom fall16_modified7_november16