Basics and Concepts of Java Server FacesBasics and Concepts of Java Server Faces A standard approach to web-development Martin Marinschek IRIAN Solutions GmbH (http:/ / ) Submission

Basics and Concepts of Java Server FacesA standard approach to web- development

Martin Marinschek

IRIAN Solutions GmbH (http:/ / www.irian.at)

Submission ID 2220

2

AGENDA

1. Why JSF?

2. JSF – an introduct ion

3. Standard components of JSF

4. JSF – the LifeCycle

5. JSF Libraries and Add- On Frameworks

6. Outlook to the future of JSF

3

AGENDA

1. Why JSF?






4Java and its Standards!

1.0

1995 1996

1.1

1997

1.2

19981999

1.3

20002001

1.4

20022003

5.0

20042005

6.0

20062007

Java

Java- Servlets

1.0 2.0 2.1/ 2.2 2.3 2.4 2.5

0.92 1.0/ 1.1 1.2 2.0

JavaServer Pages (JSP)

2.1

JSP Standard Tag Library (JSTL)

1.11.0 1.2

5

Why JSF?

Rendering was already standardized

> JSP, Servlets, JSTL

Two- way- binding and form- handling missing

A host of frameworks f illed this GAP

6Java- Web- Frameworks

StrutsStripes

CocoonTapestry

Webwork

http:/ / www.java- source.net/ open- source/ web- frameworks

WicketMaverick

EchoSpring MVC

Sofia

Verge

Anvil

Jaffa

Japple

JPublish

Jucas

WebOnSwing

Chrysalis

VRaptor

SwingletsMillstone

SwingWeb

Barracuda

RIFE

DWRJSPWidget Josso

JAT

OpenXava

GWT

7Java and its Standards!

1.0

1995 1996

1.1

1997

1.2

19981999

1.3

20002001

1.4

20022003

5.0

20042005

6.0

20062007

Java

Java- Servlets

1.0 2.0 2.1/ 2.2 2.3 2.4 2.5

0.92 1.0/ 1.1 1.2 2.0

JavaServer Pages (JSP)

2.1

JSP Standard Tag Library (JSTL)

1.11.0 1.2

1.0/ 1.1 1.2

JavaServer Faces (JSF)

8

AGENDA

1. Why JSF?






9

JSF in a nutshell

• JSF is a …

• ... new framework for building highly interact ive web-apps

with a simple and clear role- model

• ... component- based framework

• ... event- driven framework

• … stateful framework on top of stateless protocols

• ... RAD (Rapid Applicat ion Development) enabling platform

• ... JCP standard!

10

Component driven framework

• JSF has built- in components

• connect components inside a view- definit ion- file

• (JSP, Facelets,..)

• the ‚rendering‘ t ransforms these to markup like (X)HTML

<h:inputText id="x" /> <input type="text" id="form:x"/>

11

Event driven framework

Event-Listener

Event

Event- Source

creates

triggers

registers at

sent to

12

JSF – a technology in wide use

IRIAN.at- JSF- Projects: > Deutsche Bank> Continentale> IPI.ch> OeKB> ICW AG> Erste Bank> Raiffeisen Capital ManagementOther JSF- Projects in Switzerland (we know of):> Credit SuisseIf you have one, come to the Swiss JSF- user group meeting today in the

evening!> More information at the end of this presentation…Apache MyFaces> „Companies using Apache MyFaces“

http:/ / wiki.apache.org/ myfaces/ Companies_Using_MyFaces

http://wiki.apache.org/myfaces/Companies_Using_MyFaces

13

A JSF – Hello World example

h:outputLabel h:inputText

h:panelGrid

h:commandButton

14

A JSF page needs… View- Template – e.g. JSP: <f:view>

<h:outputLabel value=„label for=„id“/>

<h:inputText id=„id“value=„#{myBean.text}“/>

</f:view>

One or more Backing- Beans (Managed- Beans)

public class MyBean {}

Configuration in faces-config.xml:

<managed-bean><managed-bean-name>myBean</managed-bean-

name></managed-bean>

15

JSF- JSP- Template - Hello World

<html>..<f:view><h:form id="form"> <h:panelGrid columns="2"> <h:outputLabel for="input1" value="first name"/> <h:inputText id="input1„

value="#{customer.firstname}"/> <h:outputLabel for="input2" value="second name"/> <h:inputText id="input2" value="#{customer.secondname}" required="true" />

<h:commandButton value="send it!"

action="#{customer.send}"/> <h:messages errorStyle="color:red"/> </h:panelGrid></h:form></f:view>..</html>

16

JavaBean – Hello World

public class Customer {

private String firstname = null;

private String secondname = null;

//getter and setter

public String send(){

//back-end access (e.g. BusinessDelegate)

return "fine";

}

}

17

Faces- config.xml – Hello World

<faces-config> <managed-bean> <managed-bean-name>customer</managed-bean-name> <managed-bean-class>foo.Customer</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/form.jsp</from-view-id> <navigation-case> <from-outcome>fine</from-outcome> <to-view-id>/output.jsp</to-view-id> </navigation-case> </navigation-rule></faces-config>

18

AGENDA

> Why JSF?

> JSF – an introduct ion

> Standard components of JSF

> JSF – the LifeCycle

> JSF Libraries and Add- On Frameworks

> Out look to the future of JSF

19

standard components - Text

• output of text - outputText<h:outputText value="#{user.userNameDescr}"/>

• input of text - inputText <h:inputText value="#{user.userName}"/>

• password input

<h:inputSecret/>

• hidden field (yes, you won’t need it anymore):

<h:inputHidden/>

• textareas

<h:inputTextarea/>

20

standard components - UICommand

• commandLink<h:commandLink action="#{actionBean.test}"/>

• commandButton<h:commandButton action="#{pageBean.test2}"/>

21

standard components - OutputLink

• Linking to websites/ web- apps outside of JSF:<h:outputLink value=„url“ target=„_blank“/>

• Caution: state gets lost, since this is not a postback

• HTTP parameters

<h:outputLink value=„url“><f:param name=„allowCache“

value=„true“/></h:outputLink>

22

standard components – UIData

• best for presenting structured data (like java.ut il.List)

• horizontal: every column is defined by a UIColumn component

• vertical: each row represents one item of the structured data

• Facets (<f:facet/>) allow defining header and footer

23

standard components - UIData

<h:dataTable value="#{bean.items}" var="item">

<h:column>

<h:outputText value="#{item.name}"/>

</h:column>

<h:column> <f:facet name="header"> <h:outputText value="Header 2"/>

</f:facet>

<h:outputText value="#{item.desc}"/>

</h:column>

</h:dataTable>

24

Switching Master- Detail

setPropertyActionListener (preparation)

Itemnavigation

25

Switching Master- Detail - Code

That‘s it :

<h:dataTable>

<h:column>

<h:commandLink action="edit" >

<f:setPropertyActionListener

value="#{item}" target="#{itemEdit.currentItem}"/>

</h:commandLink>

</h:column>

</h:dataTable>

26

Standard components - Label

• Label for a component:

<h:outputLabel for="myId"

value="#{bean.labelText}"/>

<h:inputText id="myId"

value="something"/>

Apache MyFaces Tomahawk:

• label text can be used in message

• use <t:outputLabel/> for this

27

Standard components - SelectMany

<h:selectManyCheckbox>

<h:selectManyListbox/>

28

Standard components - SelectOne

<h:selectOneRadio>

<h:selectOneListbox/>

<h:selectOneMenu/>

29

Example - JSP

SelectOneMenu for choosing gender of a person:

<h:selectOneMenu value="#{person.gender}"><f:selectItems value="#{person.genderItems}"/>

</h:selectOneMenu>

Person.java:

private String gender; //getter+setterprivate List genderItems;public List getGenderItems(){ if(genderItems == null){

genderItems = new ArrayList(); genderItems.add(new SelectItem("m","male",null));

genderItems.add(new SelectItem("w","female",null)); } return genderItems;

}

30

MyFaces Tomahawk: t:selectItems

Select- Item- List could also be created automatically:

<t:selectItems

var="person"

value="#{bean.persons}"

itemLabel="#{person.name}"

itemValue="#{person.id}"/>

31

AGENDA

> Why JSF?






32

JSF Request Lifecyle

Restore View

Apply Request

Values

Process Events

Conversion and

Validat ion

Process

events

Up

date

Mo

del

Process Events

Invoke Applicat ion

Process Events

Render Response

C L

I E

N T

Responsecomplete

Responsecomplete

Responsecomplete

Facesrequest

Facesresponse

Render Response

Conversion ErrorsRender Response Validation / Conversion Errors

Render Response

Responsecomplete

33

JSF Lifecycle – Initialization

Restore View

Apply Request

Values

Process Events

Conversion and

Validat ion

Process

events

Up

date

Mo

del

Process Events

Invoke Applicat ion

Process Events

Render Response

C L

I E

N T

Facesrequest

Facesresponse

No view available

Create View

34

JSF Lifecycle – Validation fails

Restore View

Apply Request

Values

Process Events

Conversion and

Validat ion

Process

events

Up

date

Mo

del

Process Events

Invoke Applicat ion

Process Events

Render Response

C L

I E

N T

Facesrequest

Facesresponse

Validation / Conversion ErrorsRender Response

35JSF Lifecycle – Input Values

same way

validation errorvalidation ok

a) If UICom.submittedValue = = null - > use ManagedBean.attribute

36

PhaseListener - configuration

• JSF provides a special listener for the lifecycle• PhaseListener executed at the beginning and at the end of a phase.

• register in faces- config.xml:

<lifecycle> <phase-listener> org.apache.training.DebugPhaseListener

</phase-listener>

</lifecycle>

37

PhaseListener - Sample

public class DebugPhaseListener implements PhaseListener

{

public void beforePhase(PhaseEvent event){}

public void afterPhase(PhaseEvent event){

System.out.println("afterPhase");

}

public PhaseId getPhaseId(){

return PhaseId.ANY_PHASE;// return

PhaseId.INVOKE_APPLICATION;

}

}

38

AGENDA

> Why JSF?






39JSF – implementations and add- on frameworksImplementat ions

> Sun RI

> Apache MyFaces (founded by Thomas Spiegl and Manfred Geiler, both IRIAN.at)

Extensions/ other frameworks on top of the standard

> Apache MyFaces orchestra (glue code for JSF – Spring – JPA, conversat ion support)

> Facelets (view definit ion language)

> TrAccess (translat ion and accessibility)

> Apache Shale (jsf goodies)

> Ajax4JSF (ajax support)

> JBoss Seam (persistence, jsf goodies)

40JSF – component- libraries3rd party UI- component libraries

> MyFaces Trinidad (formerly Oracle ADF Faces)

> MyFaces Rich Client Framework (coming soon, donat ion by Oracle)

> MyFaces Tomahawk, Tomahawk Sandbox

> MyFaces Tobago

> ICE Faces

> Rich Faces

> Backbase

41

AGENDA

> Why JSF?






42

JSF Future

Integration of Facelets (or something like Facelets)> easier templating> lightweight components Integration of AJAX> make the lifecycle AJAX- aware> include a basic client- side API> similar to the jsf- extensions- project State- Saving> Make stateless components the default> Allow GET- support in JSF (passing some of the state) Diverse stuff: > Annotation support> Validation: form- level and inter- component validation> Better Error- Handling

43

JSF User Group meeting Switzerland

Init ial meeting:

Today, 17:30 – open end…

> Credit Suisse Zürich- Uetlihof > Pausenzone 10. Etage > Uetlibergstrasse 231; 8045 Zürich

> Starring: – Ed Burns, JSF spec lead– Alexander Jesse, designated JSF user group Switzerland president

> Free beer ;) !

44

Links and books

JSF Books

– “JSF@Work” (German) by Mart in Marinschek

– “JSF – the complete Reference” by Ed Burns

– „JSF in Action“ by Kito D. Mann

– „JavaServer Faces“ by Hans Bergsten

– „Core JSF“ by David Geary

JSF Web Resources

– JSFCentral.com

– jamesholmes.com/ javaserverfaces

– myfaces.apache.org

Martin Marinschek http:/ / www.irian.at/

IRIAN Solutions GmbH [email protected]

MyFaces founders Expert group members:

JSF 2.0 Web- Beans JSF- Metadata JSF- Port let- Bridge

experienced JSF trainers and developershttp:/ / www.irian.at/

We love Swiss chocolate!

Documents

Basics and Concepts of Java Server FacesBasics and Concepts of Java Server Faces A standard approach to web-development Martin Marinschek IRIAN Solutions GmbH (http:/ / ) Submission