CSCI 6962: Server-side Design and Programming

Introduction to Java Server Faces

Outline

• Model-based architectures and value binding• Creating JSF page and managed beans in NetBeans• Adding member variables to managed beans• Basic JSF tags• Binding variables to JSF form elements

Java Server Faces

• Model-based architecture

JJava Server Faces page

User interface components

Managed Bean

Support class

• Data storage and manipulation

• Validation• Navigation and

redirection• Long term data

storage (sessions, databases, etc.)

JJSF

JJSF

JBean

JBean

Java Server Faces

Value Binding• Form elements can be directly linked to variables inside bean• Changing values on form changes value of those variables when

form submitted

Creating a JSF

• New Project Java Web Web Application Enter name and press NEXT twice (not finish)

• Check Java Server Facesunder Frameworks

Creating a JSF Page

• New File Web JSF Page• Make sure Facelets selected

Creating a Managed Bean

• New File Java Server Faces JSF Managed Bean

• Give it a name and a package

• Set its scope to request(for now)

Managed Beans

• Generated bean file contains– Name that any JSF can use

to refer to it

– Scope for which bean exists• Request (single page)• Session (multiple pages in

same user session)• Application (accessible by

all user sessions)

Defining Member Variables

• Data stored or computed by bean

• Any form elements bean binds to

• Must be type String for text elements

Getter/Setter Methods

• Each member variable variable should have methods– public String getVariable()– public void setVariable(String)

• Required if variable bound to form element– Get called when page loaded to insert value– Set called when form submitted to change bean value

• Done “behind the scenes” with request.getParameter calls

Getter/Setter Methods

• Can use ALT-INSERT to do automatically

Java Server Faces Tags

• JSF tags instead of html

Java Server Faces Tags

• JSF tags instead of html– Tags of form <h:tagname…> or <f:tagname…>

(XML syntax)– Many similar in form to html tags– Tag libraries set in enclosing html tag

– Reference:http://docs.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/

Java Server Faces Tags

• Translated to html in response sent to client

JSF Text Input• Goal: Bind input field to member variable in bean– Form submitted variable value updated automatically– Page sent back as response variable value automatically

inserted

• Syntax:<h: inputText value=‘#{beanname.variablename}’/>

JSF Text Output• Like input field, but “read only”– Variable value automatically inserted into response– Translated into simple text

• Syntax:<h: outputLabel value=‘#{beanname.variablename}’/>

JSF Submit Buttons

• Syntax:<h:commandButton value=‘label on button' action=“page to redirect to"/>

• Note that address defined in button rather than form– Crucial for bean-directed redirection

Computed Values

• Can bind to computed values instead of bean variables• Example: – Bean computes cost of widget order– Receipt gets and displays that value

Computed Values

• Must define get and set method for input field• Must define set method for input field

Cost not a member variable

getCost computed from member variables

Initial Values

• Can load values into form elements when page loaded• Assign corresponding bean variables initial values

JSF/Bean Lifecycle

Request for JSF page(initial form request)

JJSF

JBean

bean constructed (if it does not already exist)

bean values loaded into bound elements using get methods

Jhtml

Sent as html form

Form submitted

Parameter values parsed parameter values

from bound elements stored in bean using set methods