Building applications with WTP JavaServer Faces (JSF ... - EclipseCon

thickbugSoftware and s/w Development

Oct 28, 2013 (3 years and 9 months ago)

164 views


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 :
Building JavaServer Faces (JSF) web
applications


The JavaServer Faces (JSF) Tools Project

Raghu Srinivasan

raghunathan.srinivasan@oracle.com

Cameron Bateman

cameron.bateman@oracle.com


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 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


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
View

Client / Browser

Render

Response

JSF Technology Key Concepts

JSF Lifecycle


Initial Request


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

Restore View

Apply

Request

Values

Update

Model

Invoke

Application

Render

Response

Process

Validation

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 + 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/




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.xm
l


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 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






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:
wtp
-
jsf
-
dev@eclipse.org


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