Technologies and Tools for Web 2.

0: JavaServer Faces and Creator

Agenda
• JavaServer Faces: Quick Overview • Java Studio Creator
> Demo

• Visual Web Pack over NetBeans 5.5

JavaServer Faces: Quick Overview

The Classic Definition

“JavaServer Faces is a server side, user interface component framework for building Java technology based web applications.”

Core Concepts
• • • • • • • • • Workflow Components Converters / Validators Events Binding expressions Application Interface Navigation Rendering Managed Bean Creation

JSF Architecture
Server Client
Request
(events)

UI

Response
(markup)

Workflow

Maps closely to web application workflow
> Pages composed of components > Page flow described by flexible XML syntax > JavaBeans concepts leveraged for Data Integration
View Root Form id=guess UIIput id=guessNum UICommand id=submit Business Delegate
Next view

Backing Bean getUserNumber() setUserNumber(..) guess()

XML File

guess()

Components

• Contains the current state of a component:
> Visual appearance characteristics > Bindings to model tier data and event handlers > May have validators, converters and event listeners

attached to them

• Implemented as a classic JavaBean:
> Properties – state characteristics > Methods – encapsulated behavior exposed to apps > Events – respond to UI related events

• Composed into a component tree per logical view
> Single “view root” component > Arbitrary levels of nesting for child components

Components

So... what is a component?
> To a page author – JSP custom tag(s) > To a component writer – JavaBean(s)
Component Class

Custom Tag

Renderer

Converters / Validators
• Converters – Plugins for conversion
> > > > >

Maximum of one converter per component Explicit (by id) or implicit (by type) registration Output – object to string Input – string to object Standard implementations included

• Validators – correctness checks on input values
> Built in (to component) validation > Register one or more external validators > Standard implementations included

Value and Method Binding
• Application access to the component tree:
> Programmatic API to look up components by ID > DOM-like navigation of the component tree > Option for binding direct references

• Value binding expressions:
> All properties and attributes can be expressed as: > A literal value (“foo”, “123”) > Calculated on demand (“#{customer.name}”) > Bidirectional access: > “Pull” data when rendering the view > “Push” data when processing the postback > Expression syntax based on JSTL 1.1/JSP 2.0 EL

Value and Method Binding (cont.)
• Method binding expressions:
> Great for tools if we could reference methods in a single

“backing bean” class > Syntax follows value binding expression: (“{mybean.mymethod}”) > Last element identifies a public method

Events
• Standard JavaBeans design patterns • Strongly typed listener registration
> Register one or more listener implementations

• Standard events and listeners
> ActionEvent – UI component was activated > ValueChangeEvent – Input component's local value has

changed and it has been validated

• Framework has default ActionListener

Events and Listeners: Method Binding
• UICommand – actionListener • UIInput – validate
> Method acts like Validator.validate() > Method acts like ActionListener.processAction()

• UIInput – valueChangeListener
> Method acts like

ValuechangeListener.processValueChange()

• UICommand action
> Method is called when an action event occurs

Application Interface
• Page author references the business logic method to be executed:
<h:commandButton type=”submit” action=”#{logonBean.logon}”
● ●

Can execute immediately or after model updates Application provides a backing bean accessible via a key (“ logonBean “) Backing bean provides one or more public access methods (“ logon “) Action method returns a logical outcome that can be used to drive navigation

Navigation
• Navigation decisions externalized to pluggable NavigationHandler • Decision outcome is the name of the view to be displayed next:
> Details are dependent on ViewHandler instance in use > Most common use case - “view” == “JSP page”

• Default NavigationHandler implementation bases decision on:
> Which view is being processed > Which logical outcome was returned by invoked action

• Navigation rules configured in faces-config.xml

Login Screen Navigation to-view Example
from-outcome from-view
login.jsp

es s c su c
n ew

menu.jsp

use r
new_usr.jsp

r er
error.jsp

or

Navigation
<navigation-rule> <!-- Search Button on every page --> <from-view-id> * </from-tree-id> <navigation-case> <from-action> searchHandler.go </from-action> <from-outcome> success </from-outcome> <to-view-id> /search-results.jsp </to-tree-id> </navigation-case> </navigation-rule>

Managed Bean Creation
• The previous code samples showed references to “logonBean” • Faces tries to find this bean in any scope:
> Request > Session > Application

• If not found, optionally:
> Instantiate a bean of a specified class > Store bean instance in a specified scope

• Configuration rules specified in faces-config.xml

Managed Bean Creation
<managed-bean> <!-- Customer Bean created on demand --> <managed-bean-name>logonBean</managed-beanname> <managed-bean-class> mypackage.LogonBean </managed-bean-class> <managed-bean-scope>request</managed-beanscope> <managed-property> <property-name>creditLimit</property-name> <value>#{initParam.defaultCreditLimit}</value> </managed-property> </managed-bean>

Binding UI to Managed Bean
login.jsp
<h:input_text id=”userName” value =”LoginFormBean.userName”/>

faces-config.xml

LoginFormBean.java <managed-bean> <managed-bean-name> public class LoginFormBean ... LoginFormBean public void setUserName(...) </managed-bean-name> { <managed-bean-class> public String myapp.LoginFormBean getUserName(...) { </managed-bean-class>

> Renderers— Adapt components to a specific markup

Rendering Model
language

> Encoding – Create markup to represent component value > Decoding – Interpret request parameters to update component value

> RenderKit— a library of Renderers
> defines how component classes map to component tags appropriate for a particular client > Extensible at runtime > For JSP™ pages, represented as a custom tag library > Basic HTML RenderKit part of the standard
Button Link

Sample JSF Page
TM

1: <%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %> 2: <%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %> 3: <f:view> 4: <h:form formName=”logonForm”> 5: <h:panel_grid columns=”2”> 6: <h:output_text value=”Username:”/> 7: <h:input_text id=”username” length=”16” 8: value=”#{loginFormBean.userName}”/> 9: 10: <h:command_button type=”submit” 11: label=”Log On” 12: action=”success”/> 13: <h:command_button type=”reset” 14: label=”Reset”/>

View Tag Hierarchy

Lifecycle

JavaServer Faces 1.2 New Feature
• Alignment with JSP technology
> Support of JSTL's forEach tag with Faces components > Improvements in tree creation and content interweaving > In favor of the unified EL > New requiredMessage, converterMessage, and

• Ease-of-use improvements in support for custom messages • Improved state-saving behavior
validatorMessage Attributes

• Ability to turn off generation of component client IDs • New setPropertyActionListener Tag
associated with a component

> Solving state becoming disoriented when uses multiple frames > encrypt client-side state before send to the client > register a special action listener to the ActionSource instance

Java Studio Creator

Sun Java Studio Creator Benefits
• Rapid, visual web application & portlet development using JavaServer Faces components • Your choice:
> Windows, SolarisTM, Linux, Mac OSX

• • • • • •

Offers Complete Development Environment Full Visual Development Support Comprehensive UI Component Support AJAX Support Simplified Application Model Simplified Data Access

Features (1 of 4)
• Complete development environment
> Sun JavaTM System Application Server PE > Sample DB > Sample applications (new)

• Bundled database
> Java DB (Derby) > Allows us to ship working examples with the IDE > Provides database support for prototyping

• Support for coding at level you're comfortable with
> Visually in Designer > Directly in JavaServer Pages (JSP) > In Java

Features (2 of 4)
• Rich library of JavaServer Faces components (new)
> e.g. table, calendar, tree, tab set, file upload, and many

more > Validators and converters

• Query Editor
> Visually create SQL queries including joins, where

clauses, criteria, etc.

• DataProviders (new)
> Bind components to a variety of data > Enables drag-and-drop Web Service and EJB method

binding

• Built on NetBeans
> > > > > >

Features (3 of 4)
Rich Java Editor Code Completion Debugger HTTP Monitor Refactoring Projects

• Stylesheet Editor
> Visual CSS development (new)

• Page Navigator
> Point and click to define user flow

• Virtual Forms
> dealing with multiple input scenarios in a single page

Features (4 of 4)
• Export WAR
> i.e. WAR can be deployed to a number of containers

including Sun Application Server, WebLogic, WebSphere, Tomcat, etc.

• Full support for JSR-168 JavaServer Faces portlet development.
> Modes, Preferences, Portlet Config

• Design-Time APIs (new)
> Enables excellent design-time experience with third-party

JavaServer Faces components (e.g. Otrix, Software FX, ILOG, JSCAPE, among others)

AJAX Support
• Components provide AJAX support
> Javascript and Servlet details already worked out > Complicated communication details hidden > Makes AJAX a commodity

AJAX Support
• Sample Sun BluePrints AJAX Components Provided
> > > > > > > >

Auto Complete Text Field Map Viewer (uses Google Map API) Progress Bar Rich Textarea Editor (provides word processing features) Select Value Text Field Buy Now Button (PayPal purchase) Rating Popup Calendar

Demo

Visual Web Pack over NetBeans 5.5

Visual Web Pack
• Provides the visual drag and drop web application design experience, similar to Sun Java Studio Creator 2 • Fully integrated with the NetBeans 5.5 IDE
> Which means you get take advantage of: > Java SE 5 > Java EE 5 > JAX-WS > EJB 3.0 > Java Persistence API

Visual Web Pack
• Sample of features included in 5.5:
> > > > > > >

JSF 1.2 support One-click deployment to Glassfish, JBoss, and Tomcat Visual Web Page Designer Visual Database Binding to Components Visual Page Navigation Visual Data Binding Visual Query Editor

• Planned For Future Releases:
> EJB 3.0 Consumption (Definition and Drag-n-Drop

binding) > Web Service Consumption (Drag-n-Drop binding)

Current Status
• JavaServer Faces 1.1.01 Final
> http://java.sun.com/j2ee/1.4/download.html > http://java.sun.com/javaee/javaserverfaces/download

.html

• JavaServer Faces 1.2 is part of Java EE 5
> http://java.sun.com/javaee/ > https://glassfish.dev.java.net/

• Free!!! Sun Java Studio Creator 2 update 1plus Sun Developer Network (SDN) membership
> http://developers.sun.com/prodtech/javatools/jscreat

or/downloads/index.jsp

Summary
• JavaServer Faces is part of JavaEE 5 • Use Creator to ease the development of JavaServer Faces Application

• http://java.sun.com/J2EE/javaserverfaces/
> Official site from Sun > Links to content rich discussion forum

For More Information

• http://www.jsfcentral.com/
> Links to implementations, renderkits, components > News stories featuring JSF.

• http://jakarta.apache.org/builds/jakartastruts/nightly/struts-faces/
> Struts integration library

• http://www.sun.com/jscreator/ • http://forums.java.sun.com/forum.jsp?forum=427 Online forum (free registration required)

Getting Started With Creator
• http://developer.sun.com/jscreator > Sample Applications > Tutorials • Questions/Problems > Start With Forum > Search Blogs (Google site “blogs.sun.com”) > Sun Developer Expert Assistance > Sun Services • Feedback – We Really Do Listen! > Web Site - CreatorSiteFeedback@sun.com > Docs - CreatorDocsFeedback@sun.com

Technologies and Tools for Web 2.0: JavaServer Faces and Creator

Training Support your career and ● Java and web services your organization's goals ● Solaris app development ls ● Middleware r go a you development with Sun stand n der s Java Enterprise System U ll gap i ur sk o ● Building apps using Sun ess y Ass Studio 11, NetBeans, kills s and Sun Java Studio your ild Bu Creator d www.sun.com/training ertifie et C G Certification Industry recognized certifications in Java www.sun.com/training/ce 1 M developers trained rtification 300 k Java certifications granted
❑ ❑ ❑ ❑

Developer Training

Sun Offers Comprehensive Support for Developers
• Sun Developer Forums – Community & Sun. http://forum.sun.com • Incident support for Java, Developer Tools and Solaris > For as little as $99 get answers to your programming questions > Solaris incident support is free till October 31st. • Sun Software Services Plans for Developer Tools > Unlimited incidents, bugs and escalations, telephone support > 5x12 or 7x24 worldwide • Sun Developer Service Plans for Java and Developer Tools > Get how-to incident help, Unlimited bugs/escalation, telephone support and Sun Training credits > 5x12 or 7x24 worldwide • Java MultiPlatform – 7x24 Enterprise Java Support for Linux and Windows > Get your run-time Java issues addressed in the release you want to use > Comprehensive run time support for your Java deployment environment > Make $$ by providing front-line Java support to your customers • http://developers.sun.com/services