building jsf applications with the jsf tools project | © 2008 by oracle inc; made available under...
TRANSCRIPT
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 3
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 4
Introduction to JavaServer Faces (JSF) Technology
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 5
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 6
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 7
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 8
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 9
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 10
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 11
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Restore Restore View
Client / Browser
RenderRenderResponseResponse
JSF Technology Key ConceptsJSF Lifecycle – Initial Request
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0
Restore ViewApply
RequestValues
UpdateModel
InvokeApplication
RenderResponse
ProcessValidation
JSF Technology Key Concepts
Client / Browser
JSF Lifecycle - Post back
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 14
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 15
JSF Tools Project Features
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 16
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 17
Web Page Editor
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 18
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 19
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 20
Faces Configuration Editor
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 21
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 22
JSF Library Registry
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 23
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 24
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 25
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 26
Hands on: Develop JSF “Hello JSF” Application
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 27
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 28
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/
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 29
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 30
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 31
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 32
Import the JSF-EL Template
• Select Window > Preferences...
• Select Web and XML > JSP Files > Templates
• Select Import• Browse to JSF-EL
Template.xml
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 33
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 34
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 35
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)
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 36
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’
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 37
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 38
Modify the PanelGrid
• Click on Item2 and hit Delete • Add InputText after Item1 and
before Item3• Delete Item 4• Add InputSecret after Item3
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 39
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 40
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 41
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’
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 42
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 43
Add Welcome page
• Add a welcome.jsp page
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 44
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 45
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 46
Demo: Deep dive into JSF web application development
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 47
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 48
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 49
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 50
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 51
Run the Application
• Deploy and Run the application on the Tomcat server• Debug deployment, application errors
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 52
Demo: What’s new in the JSF Tools Project?
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 53
Support for the Apache MyFaces Trinidad Tag Library
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 54
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 55
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 56
Tag Content Assist
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 57
Attribute Name Content Assist
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 58
Static value content assist for JSF
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 59
EL content assist
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 60
EL hover help
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 61
EL hyperlink
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 62
Validation
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 63
Summary
• The JSF Tools Project adds comprehensive support to the Web Tools Platform Project to simplify development and deployment of JavaServer Faces applications
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 64
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
Building JSF applications with the JSF Tools Project | © 2008 by Oracle Inc; made available under the EPL v1.0 65
Q&A