JSF WorkshopMore Than Skin Deep: JavaServer Faces Foundation and Practice

Ed Burns | Oracle CorporationMichael Kurz | Irian Solutions GmbH

JSF Workshop2

Our plan for your time investment 1. Review High Level JSF Systems 2. Teach from Application Developer Viewpoint 3. Teach from UIComponent Developer Viewpoint 4. Teach from Framework Extender Viewpoint

All of this and more in: Ed Burns, Chris Schalk: JavaServer Faces 2.0:

The Complete Reference,McGraw-Hill

Marinschek, Kurz, Mllan: JavaServer Faces 2.0,dpunkt.verlag

JSF Workshop3

We will not be covering these JSF aspects JSF with thick client

technologies: Flex, Flash, JavaFX, Swing

JSF with non-DesktopWeb Browser client technologies: iPhone, WAP, JavaME

JSF with Spring JSF add-ons

JSF Workshop4

Our plan for your time investment 0. Review High Level JSF Systems 1. Teach from Application Developer Viewpoint

Traverse sample application: scrumtoys View and Controller Layer: navigation, ajax Model Layer: Managed Beans, JSR-303 Validation Review: JSF Lifecycle Persistence Layer: JPA I18N

2. Teach from UIComponent Developer Viewpoint 3. Teach from Framework Extender Viewpoint

JSF Workshop5

Our plan for your time investment 0. Review High Level JSF Systems 1. Teach from Application Developer Viewpoint 2. Teach from UIComponent Developer Viewpoint

Composite Components, including JSR-276 Metadata Resource Libraries Ajax Integration Scripting to save time Component annotations

3. Teach from Framework Extender Viewpoint

JSF Workshop6

Our plan for your time investment 0. Review High Level JSF Systems 1. Teach from Application Developer Viewpoint 2. Teach from UIComponent Developer Viewpoint 3. Teach from Framework Extender Viewpoint

Patterns that enable extension Survey of extension points Sample extensions

JSF Workshop7

0. Review High Level JSF Systems

JSF Workshop8

0. Review High Level JSF Systems

JSF Workshop9

1. Teach from Application Developer Viewpoint

JSF Workshop10

Traverse Sample Application: Scrumtoys Implement a

simple Scrum Whiteboard

Don't know Scrum? http://scrumalliance.org/

JSF Workshop11

Scrumtoys Architecture Two ways to slice a JSF app

Domain architecture How the Domain Architecture maps to JSF

JSF Workshop12

Domain Architecture

JSF Workshop13

How the Domain Architecture Maps to JSF

JSF Workshop14

Demo: Traverse Application

JSF Workshop15

Application Developer ViewpointThe V in MVC: View

Facelets is an official part of JSF2 JSF 2 Views authored as Facelets Pages: XHTML

Must be well formed XML Taglibs referenced using XML namespace

declaration in element

Components in a taglib are referenced in pages using prefix:tagName syntax, as in or

JSF Workshop16

Application Developer ViewpointThe V in MVC: View

Most new features in JSF2 only available when using the built-in Facelets

Facelets includes a powerful templating feature that enables reuse of page markup.

Exercise 1: Basic Facelets Templating

JSF Workshop17

Application Developer ViewpointThe C in MVC: Controller

Old school Struts Action concept It's HTML: one button-click per HTTP POST The button-click takes you to a new page, or keeps you

on the same page. For web applications,

Controller == Page Navigation JSF2 offers two ways to declare page navigation

In faces-config.xml elements In xhtml pages using implicit navigation

JSF Workshop18

Application Developer ViewpointThe C in MVC: Controller

Exercise 2: Convert XML based navigation toimplicit navigation

JSF Workshop19

Application Developer ViewpointThe C in MVC: Controller

New school: Ajax, update parts of the view without bothering the user with a full page refresh

Two approaches Declarative: tag Programmatic: jsf.ajax JavaScript Object

JSF Workshop20

Application Developer ViewpointThe C in MVC: Controller

Demo: Two approaches to Ajax

Programmatic Declarative

Modify sprint show page.

JSF Workshop21

Application Developer ViewpointThe M in MVC: Model

JSF was the first web framework to support Dependency Injected (DI) POJOs: Managed Beans

Managed Beans made JSF useful out of the box. Many other DI technologies can be easily used with JSF

Spring Seam Guice CDI (JSR-299 in JavaEE 6)

No matter which DI you use, the way they work with JSF will be mostly the same.

JSF Workshop22

Application Developer ViewpointThe M in MVC: Model

Every DI framework needs a way for the developer to tell the system which Java objects to manage and how to manage them.

The name by which the program will reference the object

The Java class (or script file name) for the object The scope into which an instance of the object

should be placed. If any properties on the object should be injected with

values, the names of the properties and how to get values for each one.

JSF Workshop23

Application Developer ViewpointThe M in MVC: Model

Exercise 3: Add an XML declared managed-bean to an existing application

JSF Workshop24

Application Developer ViewpointThe M in MVC: Model

Exercise 3a: Replace the XML declaration with Annotation based declaration

JSF Workshop25

Application Developer ViewpointThe M in MVC: Model JSF 1.0 1.2: only way to declare Managed Beans

was via XML

user request

JSF 2.0 on Java EE 5 non-mandatory javax.faces.bean Annotations

JSF 2.0 on Java EE 6 @javax.enterprise.context.RequestScoped @javax.inject.Named @javax.enterprise.inject.Model)

JSF Workshop26

Review: The Lifecycle Orchestrates MVCThe Baseball and Apple Pie of Web apps

Data Conversion and Validation Page Flow Database integration

I18N, L10N, A11Y Support CSS, Markup

based layout User Friendliness!

JSF Workshop27

Review: The Lifecycle Orchestrates MVCThe Baseball and Apple Pie of Web apps

JSF Workshop28

Review: The Lifecycle Orchestrates MVCThe Baseball and Apple Pie of Web apps

The JSF Lifecycle uses some elements of the strategy design pattern

Define a family of algorithms Encapsulate each one Make them interchangeable

For each Lifecycle phase, traverse theUIComponent hierarchy and take theappropriate action.

JSF Workshop29

Review: The Lifecycle Orchestrates MVCAdditional details added

JSF Workshop30

PersistenceMaking it real

Persistence not part of the JSF spec, for good reason It's a different problem It requires different kinds of expertise Selling point for using JCP based technologies: you

can't go too far wrong because application partitioning is at least loosely defined

Contrast with IBM's San Francisco Framework (1999)

JSF Workshop31

PersistenceMaking it real

Demo: JPA in Scrumtoys

JSF Workshop32

InternationalizationGet local

Forget It doesn't work with Ajax It mixes layers inappropriately

Use and elements inside in faces-config.xml

i18n i18n i18n

JSF Workshop33

InternationalizationGet local

Demo: I18N in Scrumtoys

ValidationMessages.properties

Properties files declared in faces-config

JSF Workshop34

2. Teach from UIComponent Developer Viewpoint

JSF Workshop35

Developing UIComponentsWhy JSF Exists

This was way too hard to begin with Informed by old school Struts thinking

Config files XML entries that must be kept in synch No configuration via convention

On the plus side, very configurable and customizable This way still works and the new way is built on top of

the old way.

JSF Workshop36

JSF 1.x Vision for Components

Create a market for re-usable JSF components, allowing developers to easily create UI's for web applications by combining off-the-shelf components from multiple vendors using nice GUI tools.UserUser

ComponentsComponents

OracleOracleComponentsComponents

SunSunComponentsComponents

JSF Workshop37

JSF Workshop38

New Way to build UIComponentsUse Markup for Markup, Code for Code

This...

JSF Workshop39

New Way to build UIComponentsUse Markup for Markup, Code for Code

Becomes this...

JSF Workshop40

New Way to build UIComponentsUse Markup for Markup, Code for Code

Or maybe this...

if you want to get fancy

Pay as you go complexity

JSF Workshop41

JSF 2.0 Component Vision multi-select components on a

JSF page press a componentize

button you get a wizard that lets you

choose how to expose the content of this component to the page author

the component appears in a palette.

JSF Workshop42

Demo: Change Sprint form to be Composite Component

JSF Workshop43

How do we enable this vision? Reduce the number of artifacts required Provide a way to bundle associated resources with the

component Do it all dynamically, while the app is deployed Allow the composite component to be a real component

attached objects children components facets ajax capable

The old way still works.

JSF Workshop44

Multi-component-vendors in a single page How do we solve this problem?

Look at what each vendor had to invent and standardize it

Source of difficulty Old Way Standard WayResource Loading PhaseListener, Filter, etc. Built into the

LifecycleAjax Proprietary .js file for

innerHTML updating Proprietary XML Ajax

Response Format

jsf.ajax JavaScript Object with four functions

Standard XML Ajax Response Format

Library Loading Precedence

Rename Jar files for alphabetical sort order

, elements

JSF Workshop45

Composite Component Exercise Exercise 4: Create a simple composite component

JSF Workshop46

Coming to Terms with Composite Components Composite Component

A tree of UIComponent instances, rooted at a top level component that can be thought of and used as a single component in a view

Using Page The page in which a composite component is used

Composite Component Tag Instance The tag that places an instance of a composite

component in the using page

Defining Page The markup page, usually Facelets that contains the

composite component declaration and definition

JSF Workshop47

Coming to Terms with Composite Components Top Level Component

The UIComponent instance implicitly createdby the run-time to serve as the root for thecomposite component tree.

Inner Component Any UIComponent inside the defining page or

any pages used by that defining page

JSF Workshop48

Other Composite Component Concepts Method Expressions DEMO: dashboard Runtime Metadata Resources Per-component ResourceBundle Custom top level components, also from Script

JSF Workshop49

3. Teach from Framework Extender Viewpoint

JSF Workshop50

Patterns that enable extension Decorator pattern Wrapper Classes Implementation savvy: never use this in the

implementation of classes that can be decorated

JSF Workshop51

Survey of Extension Points

Class or interface Class or interface

ActionListener PhaseListener

ApplicationFactory PropertyResolver

Converter RenderKit

ELResolver RenderKitFactory

ExceptionHandlerFactory StateManager

ExternalContextFactory VariableResolver

FacesContextFactory Validator

LifecycleFactory ViewDeclarationLanguageFactory

NavigationHandler ViewHandler

= artifact can be decorated

JSF Workshop52

Framework Extension Demo Create a custom ELResolver, in ScrumToys

JSF Workshop53

How we invested your time 1. Review High Level JSF Systems 2. Teach from Application Developer Viewpoint 3. Teach from UIComponent Developer Viewpoint 4. Teach from Framework Extender Viewpoint

All of this and more in: Ed Burns, Chris Schalk: JavaServer Faces 2.0:

The Complete Reference,McGraw-Hill

Marinschek, Kurz, Mllan: JavaServer Faces 2.0,dpunkt.verlag

Thank you!

Ed Burns | Oracle Corporationhttp://ridingthecrest.com/Michael Kurz | Irian Solutions GmbHhttp://www.irian.at