Scribd
Upload
34 views89 pages

Unit 5

Adavance java - be - unit 5

Uploaded by

istra0802
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views89 pages

Unit 5

Adavance java - be - unit 5

Uploaded by

istra0802
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 89

JavaServer Faces:

The Fundamentals
JavaServer Faces (JSF)

 It is a “server side user interface component


framework for Java™ technology-based web
applications”
 It is a specification and reference implementation for
a web application development framework
 Components
 Events
 Validators
 Back-end-data integration
 It is designed to be leveraged by tools
 NetBeans, RAD (Rational Application Developer),
Eclipse, JDeveloper, etc.
Why JSF?

 MVC for web applications


 Easy to use
 Extensible Component and Rendering architecture
 Support for client device independence
 Standard
 Huge vendor and industry support
 Built-in UI component model (unlike JSP and
Servlet)
Why JSF? (cont’d)

 Offers finer-grained separation of behavior


and presentation than JSP
 Component-specific event handling
 UI elements as stateful objects on the server
 UI-component and Web-tier concepts without
limiting you to a particular scripting
technology or markup language
 Can work with any presentation technology
including JSP
Sample Application
Code (index.jsp)
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
<head>
<title>A Simple JavaServer Faces Application</title>
</head>
<body>
<h:form>
<h3>Please enter your name and password.</h3>
<table>
<tr> <td>Name:</td>
<td> <h:inputText value="#{user.name}"/> </td> </tr>
<tr> <td>Password:</td>
<td> <h:inputSecret value="#{user.password}"/> </td> </tr>
</table> <p>
<h:commandButton value="Login" action="login"/> </p>
</h:form>
</body>
</f:view>
</html>
Bean
public class UserBean
{
public String getName() { . . . }
public void setName(String newValue) {. . . }
public String getPassword() { . . . }
public void setPassword(String newValue) { . .
.}...}
Welcome.jsp
output
faces-config.xml
<faces-config>
<navigation-rule>
<from-view-id>/index.jsp</from-view-id> <navigation-case>
<from-outcome>login</from-outcome>
<to-view-id>/welcome.jsp</to-view-id> </navigation-case>
</navigation-rule>
<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>com.corejsf.UserBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
JSF is a UI Framework for Java Web
Applications
JSF Architecture
Important Basic Capabilities

 Extensible UI component model


 Flexible rendering model
 Events-based interaction model (as opposed to the
old “request/response” model)
 Validation framework
 Basic page navigation support
 Internationalization
 Accessibility
How the JSF Specification Fits In
(prior to Facelets)
JSF Developer Roles
Roles Definition

 Page Author
 Creates the user interface of a web application
 Familiar with markup language(s) to be used
 Assembler of prebuilt components
 Component Writer
 Creates reusable components, renderers, and libraries
 Components – Render-independent properties
 Renderers – Render-dependent properties
Roles Definition

 Application Developer
 Creates the server-side functionality of a web application
not directly related to the user interface
 Business logic components implemented in standard J2EE
ways (EJBs, JavaBeans, Connectors)
 Persistence tier components implemented in standard
J2EE ways (EJBs, JDBC, Connectors)
 Model data exposed to user interface via JavaBean
programming model
 Validator, Converter, Event handler
Roles Definition

 Tool Provider
 Creates tools to assist page authors, component writers,
and application developers
 GUI-oriented page development tools
 IDEs to facilitate creation of components
 Application generators (from high level description)
 Web application frameworks that utilize JSF components
for their user interface
 JSF Implementor
 Provides runtime environment to execute JSF webapps
J2EE SDK 1.4
Criteria for choosing Struts or
JavaServer Faces
JSF JSP JSP and Struts

Components Rich UI-data-bound Standard tags (JSTL) that Struts-specific


tag library
components with events are non-UI and very basic Only very basic, form-bean-
provided Custom components through bound components provided
Custom components tag libraries

Device independence Reader kits that provide None None


device independence

Error handling and validation Validation


framework None Validationframework driven
Many predefined validators by an XML file (validation.xml)

Scripting Scripts can be attached to Embedded Java™ in the Scripts written in Java Action
events page classes
All components accessible Form data but not
from scripts components accessible

Page flow Simple navigation file (faces- None Sophisticated,flexible


config.xml) framework
XML file based

Session and object Automatic Manual Manual


management

JSF core tags

Attributes

Listeners

Converters

Validators

Facets

Parameters

Select items
Jsf html tags
HTML tag attributes
Button
Standard Converters
<h:inputText value="#{payment.amount}">
<f:convertNumber minFractionDigits="2"/>
</h:inputText>

<h:inputText value="#{payment.date}">
<f:convertDateTime pattern="MM/yyyy"/>
</h:inputText>

<h:outputText value="#{payment.amount}">
<f:convertNumber type="currency"/>
</h:outputText>
f:convertNumber tag
f:convertDateTime
Error message
JSF: Validator
 Common Validation API beign implemented
for all controls in javax.faces.validator
package and various custom tags.
 The validator framework is available with JSF
Pluggable. Using which the developer
provides their own cutom validation class
through the help of configuration files.
Standard Validators
Validating String Lengths and Numeric Ranges
It's easy to use JSF validators within JSF
pages—simply add validator tags to the body
of a component tag, like this:

<h:inputText value="#{payment.card}">
<f:validateLength minimum="13"/>
</h:inputText>
UserRegistration.jsp
UserRegistration.jsp
Success.jsp
UserBean.java
UserBean.java
PhoneNumberValidator.java
PhoneNumberValidator.java
Faces-config.xml
Faces-config.xml
Web.xml
JSF Standard UI Components

 JSF is a UI Framework, implying that it is not only


provides some tags to create and customize UI
Components on the Web page, but also enables
programmers to access these components within
the code.
 Therefore, all UI components have their
corresponding component classes.
 The JSF Standard Components are categorized into
different groups according to their characteristics as
well as super classes.
UI Component Class Hierarchy
Facelets

 Facelets is a powerful but lightweight page declaration language


that is used to build JavaServer Faces views using HTML style
templates and to build component trees.
 Facelets features include the following:
 Use of XHTML for creating web pages
 Support for Facelets tag libraries in addition to JavaServer Faces
and JSTL tag libraries
 Support for the Expression Language (EL)
 Templating for components and pages
Facelets (cont’d)

 Advantages of Facelets for large-scale development


projects include the following:
 Support for code reuse through templating and composite components
 Functional extensibility of components and other server-side objects
through customization
 Faster compilation time
 Compile-time EL validation
 High-performance rendering

 In short, the use of Facelets reduces the time and effort


that needs to be spent on development and deployment.
Example 1
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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Jsf Form</title>
</h:head>
<h:body>
<h:form id="form">
<h:outputLabel for="username">User Name</h:outputLabel>
<h:inputText id="name" value="#{user.name}" required="true">
<f:validateRequired for="name" />
</h:inputText><br/>
<h:commandButton value="OK" action="response.xhtml"></h:commandButton>
</h:form>
</h:body>
</html>
response.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/x
html1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Response Page</title>
</h:head>
<h:body>
<h1>
Hello #{user.name}
</h1>
</h:body>
</html>
Example 2
header.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:ui = "http://java.sun.com/jsf/facelets">

<body>
<ui:composition>
<h1>Default Header</h1>
</ui:composition>
</body>
</html>
Footer.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:ui = "http://java.sun.com/jsf/facelets">

<body>
<ui:composition>
<h1>Default Footer</h1>
</ui:composition>
</body>
</html>
Contents.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:ui = "http://java.sun.com/jsf/facelets">

<body>
<ui:composition>
<h1>Default Content</h1>
</ui:composition>
</body>
</html>
Common.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"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<h:head></h:head>
<h:body>
<div style = "border-width:2px; border-color:green; border-style:solid;">
<ui:insert name = "header" >
<ui:include src = "/templates/header.xhtml" />
</ui:insert>
</div>
<br/>
<div style = "border-width:2px; border-color:black; border-style:solid;">
<ui:insert name = "content" >
<ui:include src = "/templates/contents.xhtml" />
</ui:insert>
</div>
<br/>
<div style = "border-width:2px; border-color:red; border-style:solid;">
<ui:insert name = "footer" >
<ui:include src = "/templates/footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
Page1.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"
xmlns:ui = "http://java.sun.com/jsf/facelets">

<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "header">
<h2>Page1 header</h2>
</ui:define>

<ui:define name = "content">


<h2>Page1 content</h2>
<h:link value = "Back To Home" outcome = "home" />
</ui:define>

<ui:define name = "footer">


<h2>Page1 Footer</h2>
</ui:define>
</ui:composition>

</h:body>
</html>
Page2.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"
xmlns:ui = "http://java.sun.com/jsf/facelets">

<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "header">
<h2>Page2 header</h2>
</ui:define>

<ui:define name = "content">


<h2>Page2 content</h2>
<h:link value = "Back To Home" outcome = "home" />
</ui:define>

<ui:define name = "footer">


<h2>Page2 Footer</h2>
</ui:define>
</ui:composition>

</h:body>
</html>
home.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"
xmlns:ui = "http://java.sun.com/jsf/facelets">

<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "content">
<br/><br/>
<h:link value = "Page 1" outcome = "page1" />
<h:link value = "Page 2" outcome = "page2" />
<br/><br/>
</ui:define>
</ui:composition>

</h:body>
</html>
Output
PrimeFaces
 PrimeFaces is an open source component library for JSF 2.0
with more than 100 rich components.
 PrimeFaces is far better than many other JSF component
libraries because of the following reasons:

 Rich set of UI components (DataTable, AutoComplete,


HtmlEditor, Charts etc).
 No extra xml configuration is required and there is no
required dependencies.
 Built-in Ajax based on standard JSF 2.0 Ajax APIs.
 Skinning Framework with 25+ built-in themes.
 Awesome documentation with code examples
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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<h:head>
</h:head>
<h:body>
<h1>Hello World PrimeFaces</h1>

<h:form>
<p:editor value="#{editor.value}" />
</h:form>

</h:body>
</html>
Output
The End

You might also like