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 figure 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


http://sws.bfh.ch/~amrhein/

JavaServer Faces (JSF) : Introduction

JavaServer Faces (JSF) is a user interface (GUI)component framework for developing Java webapplications.

JavaServer Faces UI components are configurable, reusableelements that compose the user interfaces of JavaServerFaces applications.A component can be simple, such as a button, or can becompound, such as a table, composed of multiplecomponents.(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 ”official” presentation technology in Java EE7standard.

JavaServer Faces technology APIs are layered directly ontop of the Servlet API.



JSF is a MVC (Model-View-Controller) framework. MVCis a design pattern that divides the application into threeinteroperable components:

Model: Classes that represent the business data and anybusiness logic that govern access to and modification of thedata.View: Pages that your application uses to dynamicallygenerate HTML responses. The view renders the contentsof a model. A view also forwards user inputs to a controller.Controller: Classes that handle incoming browser requests,and it defines application behavior. It selects views forpresentation. It interprets user inputs and maps them intoactions to be performed by the model. A controller selectsthe next view to display based on the user interactions andthe outcome of the model operations.



JSF is a MVC framework.

Controller: The JSF controller consists primarily of aservlet called FacesServlet.View: Represented by a set of web pages composed of a treeof UI components.Model:

Model objects referenced by the backing beans.The backing beans can include some controller functionslike page selection.


What Is a JavaServer Faces Application?

A typical JavaServer Faces application includes the followingparts:

1 A set of web pages, JSF uses JavaServer Pages (JSP) orFacelets (recommended) for its presentation technology.

JavaServer Pages (JSP) technology does not support all thenew features available in JSF in the Java EE 7 platform.

2 A set of backing beans (managed beans), which areJavaBeans components that define properties and functionsfor 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 todefine user-defined navigation rules and configure beansand other custom objects, such as custom components.

5 Optionally, a set of custom objects, which can includecustom components, validators, converters, or listeners,created by the application developer.


What Is Facelets?

The term Facelets refers to the view declaration languagefor JavaServer Faces.

Facelets views are created as XHTML pages.

JSF EL expression use #{. . . }, while JSP EL expressionsuse the ${. . . } syntax.

Return to page 130 from:





The tag libraries supported by Facelets

JavaServer Faces technology supports various tag libraries to addcomponents to a web page. To support the JavaServer Faces taglibrary 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 typicalJSF application


http://download.oracle.com/javaee/6/tutorial/doc/javaeetutorial6.pdf


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) tagslibrary.

A Java runtime environment.

A web-container to use JSF in (for example Tomcat).


Some existing JSF Implementations

Sun implementation (Mojarra) (open source) used inmany 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 asNetBeans


Creating a JSF Application Using NetBeans (cont’)


Examples

Hello World in JSF!

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 beanaccessible through the EL.

You can specify an argument to the @Named to use anondefault name.

Example : @Named(”Hello”). With this annotation, theFacelets page would refer to the bean as Hello.

Managed beans are created and initialized the first timethey are requested by an EL expression.

The @RequestScoped annotation controls the lifespan ofthe managed bean. Managed beans are automaticallyinstantiated and registered in their scope.

Managed beans should be specified as serializable.


Creating the Web Page

index.xhtml, is a simple XHTML page. It has the followingcontent:

The web page connects to the backing bean through theExpression Language (EL) value expression #{hello.world},which retrieves the value of the world property from thebacking 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 asNetBeans IDE.


Libraries


Result


Example 2


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>


Example 3 : Guessing Game


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 validatethe input value.

rendered : Specifies a condition under which thecomponent should be rendered. If the condition is notsatisfied, 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 ofentities, 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();

}

}

}


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

Templating is a useful Facelets feature that allows you tocreate a page that will act as the base, or template, for theother pages in an application.

By using templates, you can reuse code and avoidrecreating similarly constructed pages.

The NetBeans IDE provides a Facelets Template wizard forcreating Facelets templates, and a Facelets Template Clientwizard for creating files 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 withui:insert (with default values in case client does not supplycontent).

2 Creating template client files

Use ui:composition to specify the template file used.Use ui:define to override content for each replaceable sectionin template (marked in template with ui:insert).

http://www.coreservlets.com/JSF-Tutorial/jsf2/


http://www.coreservlets.com/JSF-Tutorial/jsf2/

Templating Example


Templating Example (cont’)



Creating Template File:



Creating Template Client File:


HTML5 Friendly Markup

HTML5 Friendly Markup

JavaServer Faces technology supports HTML5 by allowingto use HTML5 markup directly. It also allows you to useHTML5 attributes within JavaServer Faces elements.

JavaServer Faces technology support for HTML5 falls intotwo 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 andattributes and to treat them as equivalent to JavaServerFaces components.

To make a non-JavaServer Faces element a pass-throughelement, specify at least one of its attributes using thehttp://xmlns.jcp.org/jsf namespace. For example, thefollowing code declares the namespace with the short namejsf:

<input type="email" jsf:id="email" name="email" value="#{bean.email}" required="required"/>

Here, the jsf prefix is placed on the id attribute so that theHTML5 input tag’s attributes are treated as part of theFacelets page. This means that, for example, you can useEL expressions to retrieve managed bean properties.


HTML5 Friendly Markup: Using Pass-throughAttributes

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 prefixthe attribute names within a JavaServer Faces component.Example : The following code passes the type, min, max,required, and title attributes through to the JSF inputcomponent:

<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 ExampleApplication

The reservation example application simulates purchasingtickets. It consists of two Facelets pages, reservation.xhtml andconfirmation.xhtml, and a backing bean, Bean.java. The pagesuse both pass-through attributes and pass-through elements.





HTML5 Friendly Markup: The reservation ExampleApplication (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>



confirmation.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";

}

}E-Commerce Systems 69

Questions?

lec5 ecom fall16_modified7_november16

Education