Transcript Building applications with WTP JavaServer Faces (JSF) Tools

1
Eclipse Web Tools Platform – Uncovered :
Building JavaServer Faces (JSF) web
applications
The JavaServer Faces (JSF) Tools Project
Raghu Srinivasan
[email protected]
Cameron Bateman
[email protected]
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
2
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
3
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Introduction to JavaServer Faces (JSF) Technology
4
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
5
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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 of
Java API classes representing the
JSF framework services
The JavaServer Faces Core Tag
Library for wiring components to
server-side objects
The JavaServer Faces Standard
HTML RenderKit Tag Library for
expressing UI components within a
JSP page
6
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
7
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
JSF Technology Key Concepts
• 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
8
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
JSF Technology Key Concepts
• 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
9
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
JSF Technology Key Concepts
• 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
10
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
JSF Technology Key Concepts
• 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
11
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
JSF Technology Key Concepts
JSF Lifecycle – Initial Request
Client / Browser
Restore View
Render
Response
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
JSF Technology Key Concepts
JSF Lifecycle - Post back
Client / Browser
Restore View
Apply
Request
Values
Process
Validation
Render
Response
Invoke
Application
Update
Model
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
JSF Technology Key Concepts
• 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
14
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
JSF Tools Project Features
15
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
16
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Web Page Editor
17
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
18
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
19
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Faces Configuration Editor
20
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
21
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
JSF Library Registry
22
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
23
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
24
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
25
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Hands on: Develop JSF “Hello JSF” Application
26
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Hello! JSF Tools Project!!
•
Build and execute a simple JSF application










27
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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 + Mylyn
 http://www.eclipse.org/downloads/moreinfo/jee.php
 Apache Tomcat 6.0
 http://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 implementation
 https://maven-repository.dev.java.net/repository/jstl/jars/
28
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
29
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
30
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
31
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Import the JSF-EL Template
• Select Window >
Preferences...
• Select Web and XML >
JSP Files > Templates
• Select Import
• Browse to JSF-EL
Template.xml
32
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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 3rdparty\JSF12
 Set the implementation flag
to true
• Create the JSTL library
 Select the jars from \3rdparty\JSTL
33
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
34
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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)
35
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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’
36
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
37
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Modify the PanelGrid
• Click on Item2 and hit Delete
• Add InputText after Item1 and
before Item3
• Delete Item 4
• Add InputSecret after Item3
38
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
39
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
40
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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, Rightmouse click on ‘login.jsp’ and
from the context menu, select
‘Valdate’
41
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
42
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Add Welcome page
• Add a welcome.jsp page
43
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Define Page Navigation
• In the Package Explorer, navigate
to and open the file WEBINF/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
44
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
45
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Demo: Deep dive into JSF web application development
46
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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






47
Build scalar forms
Build a tabular form
Explore syntax and semantic validation
Use Resource Bundles
Enhance Look and Feel
Run, debug the application
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Build Scalar Forms
• Use the Web Page Editor to build JSF-JSP pages






48
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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 column
 By 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
49
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Enhance Look and Feel
• Use CSS styles to give a uniform Look and Feel for
the application




50
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Run the Application
• Deploy and Run the application on the Tomcat server
• Debug deployment, application errors
51
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Demo: What’s new in the JSF Tools Project?
52
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Support for the Apache MyFaces Trinidad Tag Library
53
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
54
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
JSF Facelets Tools Incubator Project
• Supported Features In the HTML Editor







55
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Tag Content Assist
56
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Attribute Name Content Assist
57
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Static value content assist for JSF
58
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
EL content assist
59
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
EL hover help
60
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
EL hyperlink
61
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Validation
62
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Summary
• The JSF Tools Project adds comprehensive support to
the Web Tools Platform Project to simplify
development and deployment of JavaServer Faces
applications
63
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
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
64
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Q&A
65
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0