Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 1 Eclipse Web Tools Platform – Uncovered

1

Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0

Eclipse Web Tools Platform – Uncovered : Building JavaServer Faces (JSF) web applications

The JavaServer Faces (JSF) Tools Project

Raghu [email protected]

Cameron [email protected]

Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 2

Goals

• Review JavaServer Faces (JSF) concepts

• Build an end-to-end JavaServer Faces (JSF) web application

• Get a thorough understanding of the features in the JSF Tools Project

• Preview the new features in the JSF Tools Project


Agenda

• Introduction to JavaServer Faces (JSF) Technology• JSF Tools Project Features • Hands on: Develop JSF “Hello JSF” Application• Demo: Deep Dive into JSF Web Application

Development• Demo: What’s new in the JSF Tools Project ?• Q&A


Introduction to JavaServer Faces (JSF) Technology


Introduction to JavaServer Faces (JSF)

• JavaServer Faces (JSF) is a UI Component Framework for building Java-based Web applications

• JSF is a standard specification developed through the Java Community Process (JCP) and is part of the Java EE 5 standards

• JSF is based on the Model-View-Controller (MVC) architecture

• JSF 1.2 is the current version of the specification• JSF 2.0 (JSR-314) is in the specification stage


JSF Implementations

• Reference Implementation (RI) from Sun https://javaserverfaces.dev.java.net/download.html

• Apache MyFaces project http://myfaces.apache.org/download.html

•Implementation consists ofJava API classes representing the JSF framework servicesThe JavaServer Faces Core Tag Library for wiring components to server-side objectsThe JavaServer Faces Standard HTML RenderKit Tag Library for expressing UI components within a JSP page


JSF Technology Key Concepts

A basic JSF application consists of: Web pages defined using JSF UI components

A JSP page built using JSP tags that encapsulate the corresponding JSF Components

Application configuration resource files (faces-config.xml) that defines rules for navigation between the web pages

Managed Beans and Backing Beans for data integrations and to facilitate the UI logic of the application

Helper objects - Event listeners, Validators, and Converters that are registered on the components

web.xml - Register the FacesServlet and its mapping



• JSF UI Components The basic building block for assembling a JSF web

application Server-side UI Component framework - a JSF Page is

represented on the server as a tree of UI Components JSF defines helper API’s to support the components

Events and Listeners – an Event broadcast and Listener registration model based on the JavaBeans specification

Converters – Pluggable data conversion class that converts markup value to and from the corresponding type in the model

Validators – Pluggable support classes that can ensure that the input values conform to business rules



• Managed Beans POJO beans registered in a application configuration

resource file (faces-config.xml) and accessed from a JSF page

• Backing Beans A managed bean where the UI Components of a page are

bound to properties in the bean

• Unified Expression Language (EL) A simple expression language that allows page authors to

dynamically read and write data from JavaBeans and invoke methods defined in them



• Page Navigation JSF provides a simple yet flexible Navigation model that

helps in defining page-to-page navigation in response to UI events and model interactions

Navigation rules define the next page to be displayed for a given event or outcome

Navigation rules are configured in the application configuration resource file (faces-config.xml)

Navigation handler is pluggable Default Navigation Handler derives the next page based on

Current page that is being processed Current action from that page Logical outcome of the action



• The Lifecycle The JSF specification defines a request processing lifecycle that

specifies the processing sequence of every request that involves a JSF component tree

• Phases Restore View – Build/Find the view for the current page Apply Request Values – Each component in the view extracts its

values from the request parameters Process Validation – Run the validators registered on this

component Update Model Values – update the bean properties bound to the

value attribute of the component Invoke Application – Process events and page navigation Render Response – Render the new page


Restore Restore View

Client / Browser

RenderRenderResponseResponse

JSF Technology Key ConceptsJSF Lifecycle – Initial Request


Restore ViewApply

RequestValues

UpdateModel

InvokeApplication

RenderResponse

ProcessValidation


Client / Browser

JSF Lifecycle - Post back



• Renderers JSF Component model architecture has a clear separation

between the functionality of a component and the way it is rendered on a client

Renderer adapts a component to a specific output for a specific client

Encode – represent the value of the component in the target client

Decode – interpret the value in the request parameter and update the component value

RenderKit – a family of Renderers for a specific client such as the HTML render kit


JSF Tools Project Features


JSF Tools Project Features

• Web Page Editor for HTML/JSP/JSF pages • Faces Configuration Model, Editor and Wizards• JSF Library Registry• Extensible Frameworks• Support for

The JSF Standard Tag Libraries The Apache MyFaces Trinidad Tag Library

• Support for view description types other than JSP.• Support for JavaServer Faces 1.1 and 1.2 versions


Web Page Editor


Web Page Editor

• Multi-page Editor• Visual Page Designer

Provides close-to-WYSIWYG editing experience Split-pane window shows both the Design and the Source

view with options to switch to a Source-only or a Design-only view

• Source Editor Content assists, syntax and semantic validations

• Preview Page Renders the page as it would look in a browser


Web Page Editor

• Fly-out Component Palette Supports Drag & Drop editing

• Property View Groups key attributes of the selected tag in an accordion style

tabs

• Outline view Displays the content of the current page in an hierarchical

form


Faces Configuration Editor


Faces Configuration Model, Editor and Wizards

• Multi-page editor• Overview Page

Summary of elements in the configuration file• Navigation page

Graphical diagram editor for navigational rules• Managed bean page

Form-based editor, Wizards• Component and Others Page

Form-based editor for components, render kits, validators and other artifacts

• Source Page Contents kept in sync with changes in other pages


JSF Library Registry


JSF Library Registry

• Define a named collection of JARs including tag libraries, JSF reference implementations and utility jars

• Add, remove libraries associated with a project• Automate build classpath and deployment• Extension point for component developers to

contribute their libraries


Extensible Frameworks

• Design-time Meta-data Framework Uniform Meta-data support Define new services and enhance existing services

• Design-time Tag Processor Meta-data driven Pluggable tag converters

• Design-time Application Manager Provide an approximation of certain JSF runtime state

information at design-time. Pluggable design-time variable, property and method

resolvers


Extensible Frameworks

• JSF Application Configuration Manager Provide a unified application configuration model through API,

effectively merging all faces configuration models into a single model

Notification services to monitor changes to the EMF objects in the model

Cross model validation will be supportable


Hands on: Develop JSF “Hello JSF” Application


Hello! JSF Tools Project!!

• Build and execute a simple JSF application Setup Register JSF Libraries Create a Dynamic Web Project with JSF Facet Create JSF-JSP pages Resolve Validation errors Explore the Visual Page Designer Explore the Faces Configuration Editor Create and Register Managed Bean Define Page Navigation Run the application


Setup

• Configure the workspace with all the requisite software Download

The Java SE 5 Development Kit (JDK) http://java.sun.com/javase/downloads/index_jdk5.jsp

Eclipse IDE for Java EE Developers (Europa Winter maintenance) Includes Eclipse 3.3 + WTP 2.0 + Mylynhttp://www.eclipse.org/downloads/moreinfo/jee.php

Apache Tomcat 6.0http://tomcat.apache.org/download-60.cgi

JavaServer Faces RI v1.2 http://java.sun.com/javaee/javaserverfaces/download.html

JSP (tm) Standard Tag Library 1.2 implementationhttps://maven-repository.dev.java.net/repository/jstl/jars/


Register the Tomcat Server

• Select Windows > Preferences..

• Select Server > Installed Runtimes. Click Add.

• Select Apache Tomcat v6.0• Select Also create new local

server. Click Next• Browse to the Tomcat

installation directory.• Click Finish


Start and Stop the Tomcat Server

• Select Windows > ShowView >Servers

• Right mouse on the server Tomcat v6.0 Server at localhost

• Select Start to start the server. Wait for the state to change to Started

• Select Stop to stop the server


Make the Web Page Editor the default editor for JSP pages • Select Windows > Preferences..• Select General > Editors > File

Associations• Select *.jsp in the section File

Types• Select Web Page Editor In the

section Associated Editors• Select Default


Import the JSF-EL Template

• Select Window > Preferences...

• Select Web and XML > JSP Files > Templates

• Select Import• Browse to JSF-EL

Template.xml


Register JSF Libraries

• Select Windows > Preferences > Web and XML > JavaServer Faces Tools > Libraries. Click on the New..

• Create the SUN-RI library Select the jars from 3rd-

party\JSF12 Set the implementation flag

to true

• Create the JSTL library Select the jars from \3rd-

party\JSTL


Create a Dynamic Web Project with JSF Facet

• Select File->New->Project..• Select Web->Dynamic Web

Project Set the name of the project

to JSFToolsTutorial. In the configuration section,

select the JavaServer Faces v1.2 Project

On the JSF Capabilities page, add the JSTL library

Click Finish


Create JSF-JSP pages

• From the Package Explore view, right-mouse click on the WebContent folder, select New->JSP

For File Name, enter login.jsp Accept the defaults. Hit Finish. The page is opened in the Web

Page Editor

• Open the Properties View Right-mouse click on the

designer canvas and from the context menu, select Show->Properties

Wait for the ‘Reading Properties’ dialog to disappear (only in WTP 2.0.2)


Add CommandButton to the page

• From the Palette View, click on the section JSF HTML to display the list of components.

• DragAndDrop the CommandButton to the canvas

This wraps the CommandButton with view and form tag

• In the properties view, Click on Quick Edit

Set the value attribute to Login

Set the action attribute to ‘login’


Add PanelGrid

• From the Palette View, DragAndDrop PanelGrid to the canvas

Notice feedback on the drop target

• Drop before the command button, but inside the form

The PanelGrid is created with four OutputText components


Modify the PanelGrid

• Click on Item2 and hit Delete • Add InputText after Item1 and

before Item3• Delete Item 4• Add InputSecret after Item3


Modify the PanelGrid (continued)

• Click on Item1• Change its value in the

Source View to ‘Name’• Click on Item3• Change its value in the

Property View to ‘Password• Click on the inputText tag next

to Name• In the Property View, set the

value attribute to ‘#{loginBean.name}’.

• Save


Create and Register a Managed Bean• Click on Problem View. Note the

warning message ‘loginBean cannot be resolved’

• Open Webcontent->WEB-INF->faces-config.xml

• Switch to the Managed Bean Page

• Click on session in the list and select add

• Select the Create Java class option

• For Package name, enter jsftutorial

• For Class name, enter LoginBean

• Complete the wizard• Save


Create the Managed Bean class

• Click on the hyperlink Managed Bean class* to edit the Java class, jsftutorial.LoginBean.java

• Add two string properties, name and password

• Generate Setters and Getters Right-mouse click on the editor

and select Source->Generate Getters And Setters

• Save

• Validate the login.jsp page In the Package Explorer, Right-

mouse click on ‘login.jsp’ and from the context menu, select ‘Valdate’


Explore Content Assist

• Open the login.jsp• Click on the inputSecret tag

for password• In the Source Page, click next

to the tag, inputSecret and hit Ctrl+Space to get Content Assist. Type ‘J’ to narrow choice to JSF Value EL binding. Select it.

• Use ContentAssist to bind the value attribute to #{loginBean.password}

• Save


Add Welcome page

• Add a welcome.jsp page


Define Page Navigation

• In the Package Explorer, navigate to and open the file WEB-INF/faces-config.xml

• Click on the Navigation Rule tab• From the Package Explorer,

DragAndDrop the login.jsp and welcome.jsp to the Navigation tab.

• Connect the two pages. Click on the Link control in the Palette, select the login page and draw a line to the welcome page.

• Select the line in the Navigation tab and in the property view, set the value of the from-outcome to login


Run the Application on the Server

• In the Package explorer, select login.jsp

• From the Context Menu, select Run As.->Run On Server

• Follow the wizard


Demo: Deep dive into JSF web application development


Deep dive into JSF web application development• Build a typical JSF web application and get an in-depth

understanding of the features in the JSF Tools Project Build scalar forms Build a tabular form Explore syntax and semantic validation Use Resource Bundles Enhance Look and Feel Run, debug the application


Build Scalar Forms

• Use the Web Page Editor to build JSF-JSP pages Drag and Drop components from the palette Set the value of properties of a component Use Property View to add non-visual child component Navigate to the parent, child of a component Use the Source Editor Get a preview of the page


Build a Tabular Form

• Use the Web Page Editor to build a form with the Data Table component

Add the Data Table component to a page Add columns

Using the Context Menu, the Properties View and Drag and Drop from the palette

Select a columnBy direct interaction with the designer canvas, Using the Context

Menu, Using the Outline View Move a column by Drag and Drop and Using the Outline View Add Table Header and Footer


Enhance Look and Feel

• Use CSS styles to give a uniform Look and Feel for the application

Explore the CSS Style Editor in the Visual Page Designer Set inline styles for components Use style classes Use the Preview page to get instant feedback


Run the Application

• Deploy and Run the application on the Tomcat server• Debug deployment, application errors


Demo: What’s new in the JSF Tools Project?


Support for the Apache MyFaces Trinidad Tag Library


Support for Alternate View Description languages

• Pluggable design-time support for alternate view description languages.

• JSF Facelets Tools Incubator Project Facelets is not part of the current version of the JSF

specification, JSF 1.2 Facelets-like view handler planned for JSF 2.0 (JSR – 314) Incubator project will enable current features of the JSF Tools

Project in a dynamic web project for Facelets


JSF Facelets Tools Incubator Project

• Supported Features In the HTML Editor Tag content assist Tag attribute name content assist Static value content assist for JSF attributes EL content assist EL hover support for bean variables EL hyperlink for bean variables and properties Validation for both static and EL values


Tag Content Assist


Attribute Name Content Assist


Static value content assist for JSF


EL content assist


EL hover help


EL hyperlink


Validation


Summary

• The JSF Tools Project adds comprehensive support to the Web Tools Platform Project to simplify development and deployment of JavaServer Faces applications


Resources

• JSF Tools Project Home http://www.eclipse.org/webtools/jsf

• JSF Tools Project Wiki http://wiki.eclipse.org/index.php/JSF_Tools_Project

• Feedback Newsgroup: eclipse.webtools.jsf Mailing list: [email protected] Bugzilla:

https://bugs.eclipse.org/bugs/enter_bug.cgi?product=Java%20Server%20Faces


Q&A

Documents

Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 1 Eclipse Web Tools Platform – Uncovered