javaserver faces - developintelligence.com · jsf mvc architecture jsf defines mvc in terms of:...

!!2003 - 2009 DevelopIntelligence LLC

JavaServer Faces

An Introduction

! 2003 - 2007 DevelopIntelligence

What is Java Server Faces?

" ! A standards-based component model for web development

" ! Model-view-controller (MVC) framework for web development

" ! View-oriented; brings traditional user interface development to web development

" ! Addresses modular user interface design by defining:

" ! A standard UI component model

" ! An event process structure

" ! A standard request processing lifecycle

" ! JSF enables:

" ! Java developers to focus on server-side logic without worrying about HTTP details

" ! HTML designers / developers to create “look and feel” of web page without dealing with messy “code

" ! Rapid UI construction and usability due to component sets

History of JSF

" ! Pre-JSF there was standardized MVC architecture

" ! Multiple choices for creating controllers " ! Servlets / JSPs

" ! Struts ActionServlet

" ! Multiple choices for creating views

" ! JSPs

" ! JSP + JSTL

" ! Struts Form tags

" ! JSF tries to standardize MVC architecture " ! Enables application abstraction from implementation

" ! Prevents “vendor” lock-in


JSF MVC Architecture

JSF defines MVC in terms of:

" ! Model – Java Beans (aka backing beans) " ! Used to pass data from controller to view

" ! Used by JSP to render JSF view

" ! View – JSPs

" ! Contain JSF tag libraries

" ! View tag library – represents a component tree

" ! Html tag library – contains UI components

" ! Controller – Servlet " ! Known as the FacesServlet

" ! Uses “Front Controller” and “Command” patterns

" ! Navigation rules configured through faces-config.xml


Adopting JSF

" !JSF is defined as a specification (JSR 252) " !Two primary versions: 1.1 and 1.2

" !1.2 adds functionality and simplifies JSF development

" !Adoption requires: " !An implementation

" !JSF Reference Implementation – Sun

" !MyFaces – Apaches

" !ADF – Oracle

" !Compliant web container

" !Minimally Servlet 2.4 and JSP 2.0

" !Fully in Servlet 2.5 and JSP 2.1

" !Tomcat 6, GlassFish, Jboss 5, etc.


JSF Development Roles

" !Application Developer " !Responsible for developing backend logic

" !Focuses on business and persistence logic

" !Component Developer " !Responsible for linking backend logic to user interface

" !Writes custom components

" !Creates faces-config.xml

" !Page Author " !Responsible for developing application’s UI

" !Create’s pages containing static and dynamic content


Basic JSF Application

" ! There are two approaches to developing a JSF application:

" ! View driven

" !Create wire frames, user stories, etc. first

" !Then define backing beans and navigations second

" ! Model driven

" !Design model and database first

" !Then focus on how to represent those in a view

" ! Both are valid, but require development of same pieces

" ! JSPs for the View

" ! JavaBeans for the Model

" ! Navigation rules


Basic JSF Application Components

" !View – two view pages " !add-customer.jsp – collects data

" !view-customer.jsp – displays data

" !Model – one model " !Customer.java

" !Controller – two navigation rules

" !add-customer.jsp -> view-customer.jsp

" !view-customer.jsp -> add-customer.jsp


Basic JSF Application


Faces Servlet

http://localhost:8080/IntroJSF/basic/add-customer.faces

Building a JSF View

" ! Views developed in JSP, using JSF tag libraries

" ! Core (view) <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>

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

" ! Define a JSF view - <f:view> . . . </f:view> " ! Found in HTML body

" ! Contains JSF UI components

" ! Define UI components " ! Found in a FORM - <h:form> . . . </h:form>

" ! Input - <h:inputText> . . . </h:inputText>

" ! Output - <h:outputText> . . . </h:outputText>

" ! Command - <h:commandLink> . . . </h:commandLink>


Sample JSF View


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

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

<html><head><title>Add Customer Form</title></head> <body> <f:view>

<h:form>

<h:panelGrid columns="2"> <h:column>Name</h:column> <h:column><h:inputText value="#{customer.name}" /></h:column> <h:column>Address</h:column> <h:column> <h:inputText value="#{customer.address}" />

</h:column>

Sample JSF View [cont.]


<h:column>City</h:column> <h:column><h:inputText value="#{customer.city}" /></h:column> <h:column>State</h:column> <h:column><h:inputText value="#{customer.state}" /></h:column> <h:column>Zip</h:column> <h:column><h:inputText value="#{customer.zip}" /></h:column> <h:column></h:column> <h:column> <h:commandButton action="showCustomer" value="Add

Customer" />

</h:column> </h:panelGrid> </h:form>

</f:view>

</body> </html>

Building a JSF Model

" !Model developed using standard Java

" !Two types of Backing-beans " !Loosely coupled to JSF UI components

" !Tightly coupled to JSF UI components

" !Follow standard JavaBean semantics " !Public class

" !Public no-argument constructor

" !Public get/set methods

" !Over-ridden equals and hashCode – not required but good idea!


Sample Backing Bean


package com.di.examples.basic;

public class Customer {

private String name, address, city, state, zip; public Customer () {}

public String getName() {

return name; } public void setName(String name) { this.name = name; }

public String getAddress() { return address; } public void setAddress(String address) {

this.address = address; }

Sample Backing Bean [cont.]


public String getCity() { return city; }

public void setCity(String city) { this.city = city; }

public String getState() {

return state; } public void setState(String state) { this.state = state; }

public String getZip() { return zip; } public void setZip(String zip) {

this.zip = zip; } } //end Customer

Connecting the Model & View

" !The responsibilities: " !View is responsible for rendering model

" !Model is responsible for holding view data

" !The problem: " !Don’t want to hand code M-V connection in source code

" !Many views should be able to use a single model

" !Multiple models could be used in a single view

" !The solution: " !Managed beans – defined in faces-config.xml

" !Unified Expression Language – used in JSF


Managed Beans

" !JSF provides JavaBean lifecycle management " !Similar to <jsp:useBean> in JSP

" !Responsible for creating, storing, and destroying

" !Registered with the JSF framework using: " ! faces-config.xml

" !<managed-bean> . . . </managed-bean>

" !Handed to views automatically

" !Three characteristics of a managed bean: " !Name – way to reference bean in JSF

" !Class – fully qualified class name of bean

" !Scope – how long the bean will live (application, session, request)


Declaring a Managed Bean


<faces-config> . . . <managed-bean> <managed-bean-name> customer </managed-bean-name> <managed-bean-class> com.di.examples.basic.Customer </managed-bean-class> <managed-bean-scope></managed-bean-scope> </managed-bean> . . . </faces-config>

Unified Expression Language [EL]

" !Model is “glued” to View using JSF EL " !Can reference any managed bean

" !#{customer.name}

" !Glue happens automatically

" !Built on JSTL EL

" !JSTL EL was introduced to separate model from JSP views " !Used to access objects (JavaBeans) and properties in

JSP

" !${header[‘User-agent’]}

" !Both JSTL EL and JSF EL can be used in a JSF


Referencing a Managed Bean


<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <html><head><title>Add Customer Form</title></head> <body> <f:view> <h:form> <h:panelGrid columns="2"> <h:column>Name</h:column> <h:column><h:inputText value="#{customer.name}" /></h:column> <h:column>Address</h:column> <h:column><h:inputText value="#{customer.address}" /></h:column> <h:column>City</h:column> <h:column><h:inputText value="#{customer.city}" /></h:column> <h:column>State</h:column>

<h:column><h:inputText value="#{customer.state}" /></h:column> . . .

Connecting the View-Controller

" !The responsibilities: " !View is responsible for generating events

" !Controller is responsible directing events (navigation)

" !The problem: " !Don’t want to hand code V-C connection in source code

" !Anytime a V-C path changes, would have to update code

" !Alternatively, many views may generate events to get to a navigation path

" !The solution: " !Actions – defined in JSF

" !Navigation rules – defined in faces-config.xml ! 2003 - 2007 DevelopIntelligence

JSF Actions

" !Actions represent an “action event”

" !Function as an indicators to controller on how to direct the navigation

" !Defined in JSF typically through: " !Action parameter of a HTML “command” UI control

" !Can be

" !Static – hard coded

" !Dynamic – result of method call

" ! <h:commandButton action=“showCustomer” />

" ! <h:commandLink action=“addCustomer” />


Navigation Rules

" !When FacesServlet (controller) receives a request, it needs to “route” the request from the source to the target

" !The routing is defined in faces-config.xml as set of navigation rules

" !A <navigation-rule> is defined by: " !A navigation case

" !The originating source

" !The originating action

" !The resulting outcome (of the action)

" !The path to the destination resource


Sample Navigation Rule


<faces-config> . . . <navigation-rule> <navigation-case> <from-action>showCustomer</from-action> <to-view-id>/basic/view-customer.jsp</to-view-id> </navigation-case> </navigation-rule> . . . </faces-config>

Basic JSF Application [source]


Faces Servlet

http://localhost:8080/IntroJSF/basic/add-customer.faces

Basic JSF: add-customer.jsp


Basic JSF: view-customer.jsp


Basic JSF: Customer.java


Basic JSF: faces-config.xml


Installing JSF

" !Configure WAR " ! Include JSF custom tag library Jars in WEB-INF/lib

" !Add faces-config.xml to WEB-INF

" !Map faces in web.xml

" !Access using .faces instead of .jsp " !Develop using .jsp instead of .faces

" ! Including tag-lib directive in jsp

" !Use jsp actions


Basic JSF: web.xml


About DevelopIntelligence

! "Founded in 2003

! "Provides outsourced services to learning organizations in area of software development

! "Represents over 35 years of combined experience, enabling software development community through educational and performance services

! "Represents over 50 years of combined software development experience

! "Delivered training to over 40,000 developers worldwide


Areas of Expertise

! " Instruction

! " Java

! " J2EE

! "WebServices / SOA

! "Web Application

Development

! "Database Development

! "Open Source

Frameworks

! "Application Servers

! "Courseware

! " Java Application

Development

! " Java Web App

Development

! "Enterprise Java

Development

! "OOAD / UML

! " IT Managerial

! "Emerging Technologies and Frameworks


Contact Us

! "For more information about our services, please

contact us:

! "Kelby Zorgdrager

! "[email protected]

! "303-395-5340


javaserver faces - developintelligence.com · jsf mvc architecture jsf defines mvc in terms of:...

Documents