Advanced JavaServer Faces Matthias Wessendorf | matzew@apache.org http://matthiaswessendorf.wordpress.com

Matthias Wessendorf Oracle ADFv team (ADF Faces) Apache Software Foundation Apache MyFaces (Trinidad | Core) Apache Shale Author Java- & Eclipse-Magazine Books on Struts, J2ME&WebServices Speaker Oracle Open World ApacheCon JavaOne JAX, W-JAX

Oracle

ADFv team (ADF Faces)

Apache Software Foundation

Apache MyFaces (Trinidad | Core)

Apache Shale

Author

Java- & Eclipse-Magazine

Books on Struts, J2ME&WebServices

Speaker

Oracle Open World

ApacheCon

JavaOne

JAX, W-JAX

Advanced JSF - ToC JSF – Background JSF – Overview of JSF - Frameworks Selecting Frameworks Framework Details Integration Some code samples

JSF – Background

JSF – Overview of JSF - Frameworks

Selecting Frameworks

Framework Details

Integration

Some code samples

JSF – Background It all started with Servlet API ... ... and JSPs ... ... and „Model 2“ Web frameworks Apache Struts Action-based ... and JSTL! Tons of „Model 2“ Frameworks ... (almost) no component-based approach UI Tags done with JSTL JavaServer Faces one standard for Java Web Apps

It all started with Servlet API ...

... and JSPs ...

... and „Model 2“ Web frameworks

Apache Struts

Action-based

... and JSTL!

Tons of „Model 2“ Frameworks ...

(almost) no component-based approach

UI Tags done with JSTL

JavaServer Faces

one standard for Java Web Apps

JSF – Details Java Standard of JCP lightweight Web-Framework API for UI Component Development Specs out there: JSR 127  JSF 1.1 (May 2004) JSR 252  JSF 1.2 [Java EE 5] (May 2006) JSR 314  JSF 2.0 [Java EE 6] (2008 ?) Goals Make Java-Web-Development simple Tooling (Jdev, Sun / Netbeans, Eclipse, ...) Implementations Apache MyFaces | RI (Sun) | OperaMasks.org

Java Standard of JCP

lightweight Web-Framework

API for UI Component Development

Specs out there:

JSR 127  JSF 1.1 (May 2004)

JSR 252  JSF 1.2 [Java EE 5] (May 2006)

JSR 314  JSF 2.0 [Java EE 6] (2008 ?)

Goals

Make Java-Web-Development simple

Tooling (Jdev, Sun / Netbeans, Eclipse, ...)

Implementations

Apache MyFaces | RI (Sun) | OperaMasks.org

JSF –Frameworks Wow! Really one standard ? Yes ! But... Lot‘s of optionen: View-Layer (JSP, Facelets, Shale-Clay, Tiles, ...) Dialog (Spring, Shale, Oracle ADFc) JSF-Frameworks (Seam / Web Beans) Custom JSF Lifecycle... (Mabon, ADF Faces) Components (many, many ...)

Wow! Really one standard ?

Yes !

But...

Lot‘s of optionen:

View-Layer (JSP, Facelets, Shale-Clay, Tiles, ...)

Dialog (Spring, Shale, Oracle ADFc)

JSF-Frameworks (Seam / Web Beans)

Custom JSF Lifecycle... (Mabon, ADF Faces)

Components (many, many ...)

JSF „Frameworks“... Apache MyFaces Tomahawk Apache MyFaces Sun RI IceFaces Oracle ADF Faces Apache MyFaces Tobago Apache MyFaces Trinidad Facelets Seam JSR 299 / Web Beans Rich Client Faces Jenia Yahoo UI 4 JSF  http://www.jsfmatrix.net  Add your lib here JBoss RichFaces

Apache MyFaces Tomahawk

Houston, we have a problem !

JSF Frameworks What you really need: JSF – Runtime: Apache MyFaces Sun RI View-Layer: JSP / JSPX (default) Facelets Apache Shale Clay Components: standard components very simple Usually you need more!

What you really need:

JSF – Runtime:

Apache MyFaces

Sun RI

View-Layer:

JSP / JSPX (default)

Facelets

Apache Shale Clay

Components:

standard components

very simple

Usually you need more!

Other frameworks That‘s it ? Yes, in case of the „VIEW“ What do you need for your Business-Layer ? EJB 2.x EJB 3.x Spring Spring + JPA ORM (Toplink, Hibernate) JDBC / Spring + JDBC A database...

That‘s it ?

Yes, in case of the „VIEW“

What do you need for your Business-Layer ?

EJB 2.x

EJB 3.x

Spring

Spring + JPA

ORM (Toplink, Hibernate)

JDBC / Spring + JDBC

A database...

Frameworks We take: Apache MyFaces (runtime) Facelets (view-layer) Trinidad (JSF-Component Suite) The mother of PPR  Spring + JPA + Apache Derby JPA = Java Persistence API: Apache OpenJPA Oracle‘s Toplink (Eclipse Link) Apache Cayenne ... MyFaces Orchestra (ViewController + conversation scope)

We take:

Apache MyFaces (runtime)

Facelets (view-layer)

Trinidad (JSF-Component Suite)

The mother of PPR 

Spring + JPA + Apache Derby

JPA = Java Persistence API:

Apache OpenJPA

Oracle‘s Toplink (Eclipse Link)

Apache Cayenne

...

MyFaces Orchestra (ViewController + conversation scope)

Application Architecture JSF View DAO / Repository JSF Bean Service Spring Beans Java Persistence API (Apache OpenJPA) Apache Derby View Controller XHTML Pages Faces Apache MyFaces Orchestra

The choosen Frameworks

Apache MyFaces First OpenSource JSF Implementation JSF 1.1 and JSF 1.2 (in 2007) Notes on the TCK ... Since 2005 hosted at Apache Before: LGPL / Sourceforge largest JSF „user community“ several subprojects Tobago Tomahawk Trinidad Orchestra tbc 

First OpenSource JSF Implementation

JSF 1.1 and JSF 1.2 (in 2007)

Notes on the TCK ...

Since 2005 hosted at Apache

Before: LGPL / Sourceforge

largest JSF „user community“

several subprojects

Tobago

Tomahawk

Trinidad

Orchestra

tbc 

Facelets Alternate JSF-View-Technology JSP(X) is „old school“ lightweight Templating Framwork XHTML-based Templates friendly to Designer DEMO... Performance JSF 1.2 w/o JavaEE 5 Container JSR RI MyFaces 1.2.1 (soon) Damn simple Component Development! JavaServer Faces - Version 2.x

Alternate JSF-View-Technology

JSP(X) is „old school“

lightweight Templating Framwork

XHTML-based Templates

friendly to Designer

DEMO...

Performance

JSF 1.2 w/o JavaEE 5 Container

JSR RI

MyFaces 1.2.1 (soon)

Damn simple Component Development!

JavaServer Faces - Version 2.x

A simple Facelet <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml xmlns:h=&quot;http://java.sun.com/jsf/html &quot;> <body> <input type=&quot;text&quot; jsfc=&quot;h:inputText„ value=&quot;#{bean.property}&quot; /> </body> </html>

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>

<html

xmlns=&quot;http://www.w3.org/1999/xhtml

xmlns:h=&quot;http://java.sun.com/jsf/html &quot;>

<body> <input type=&quot;text&quot; jsfc=&quot;h:inputText„ value=&quot;#{bean.property}&quot; />

</body>

</html>

Faces Servlet Mapping http://server:8080/app/page.faces With Facelets „ Open Source“ http://server:8080/app/page.xhtml Servlet-Mapping: < servlet-mapping > < servlet-name > faces </ servlet-name > < url-pattern > *.xhtml </ url-pattern > </ servlet-mapping > http://server:8080/app/page.xhtml

http://server:8080/app/page.faces

With Facelets

„ Open Source“

http://server:8080/app/page.xhtml

Servlet-Mapping:

< servlet-mapping >

< servlet-name > faces </ servlet-name >

< url-pattern > *.xhtml </ url-pattern >

</ servlet-mapping >

http://server:8080/app/page.xhtml

Apache MyFaces Trinidad Part of Apache MyFaces Over 100 JSF components Several framework „goodies“ Test-Framework Maven Plugins Skinning (CSS based) (DEMO) Dialog-Support (DEMO) Ajax-API (DEMO) client-side (JavaScript) server-side (Java) stable JSF component set JSF 1.1 and 1.2 Donated by Oracle (2006) (ADF Faces)

Part of Apache MyFaces

Over 100 JSF components

Several framework „goodies“

Test-Framework

Maven Plugins

Skinning (CSS based) (DEMO)

Dialog-Support (DEMO)

Ajax-API (DEMO)

client-side (JavaScript)

server-side (Java)

stable JSF component set

JSF 1.1 and 1.2

Donated by Oracle (2006) (ADF Faces)

Apache MyFaces Trinidad The component show Trinidad Demo online: http://www.irian.at

The component show

Trinidad Demo online:

http://www.irian.at

Spring Framework Well-known OpenSource Framework Apache 2.0 License „ Help“ for Java EE (J2EE) Makes EJB / J2EE simple! POJOs are first class citizens Added values to Java EE 5 Several „goodies“ (AOP, Transaction, DI, JDBC, ...) Integration points for different Frameworks JSF, Struts, EJB, Hibernate, AspectJ,...

Well-known OpenSource Framework

Apache 2.0 License

„ Help“ for Java EE (J2EE)

Makes EJB / J2EE simple!

POJOs are first class citizens

Added values to Java EE 5

Several „goodies“ (AOP, Transaction, DI, JDBC, ...)

Integration points for different Frameworks

JSF, Struts, EJB, Hibernate, AspectJ,...

Java Persistence API Standard for Java Persistence Important Part of EJB3 (JSR 220) Not tied to a EJB-Container RI => Toplink Essentials (Glassfish) Lessons learned (Toplink, Hibernate, JDO) Simplifies EJB (2.x and 1.x) Java5 Annotations (or XML...) ORM-Frameworks (w/ JPA Support): Eclipse Link (Oracle Toplink) Hibernate (JBoss) OpenJPA & Cayenne (Apache)

Standard for Java Persistence

Important Part of EJB3 (JSR 220)

Not tied to a EJB-Container

RI => Toplink Essentials (Glassfish)

Lessons learned (Toplink, Hibernate, JDO)

Simplifies EJB (2.x and 1.x)

Java5 Annotations (or XML...)

ORM-Frameworks (w/ JPA Support):

Eclipse Link (Oracle Toplink)

Hibernate (JBoss)

OpenJPA & Cayenne (Apache)

Java Persistence API @Entity public class Customer { @Id @GeneratedValue (strategy= GenerationType. AUTO ) private Long id ;

@Entity

public class Customer

{

@Id

@GeneratedValue (strategy= GenerationType. AUTO )

private Long id ;

Java Persistence API @Temporal (value = TemporalType. DATE ) private Date birthday ; @OneToOne (cascade= CascadeType. ALL ) private Address address ;

@Temporal (value = TemporalType. DATE ) private Date birthday ;

@OneToOne (cascade= CascadeType. ALL ) private Address address ;

Spring and JPA Uses JPA w/o EJB-Container JPA used as ORM-Framework Supported JPA Implementations: Hibernate OpenJPA (Apache) Toplink JPA Template Use it for migration only! Direct usage of PersistenceContext AbstractEntityManagerFactoryBean

Uses JPA w/o EJB-Container

JPA used as ORM-Framework

Supported JPA Implementations:

Hibernate

OpenJPA (Apache)

Toplink

JPA Template

Use it for migration only!

Direct usage of PersistenceContext

AbstractEntityManagerFactoryBean

Spring and JPA (Config) <bean id=&quot;entityManagerFactory&quot; class=&quot; org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean &quot; p:dataSource-ref=&quot;dataSource&quot; p:persistenceUnitName=&quot;kickstart&quot; > <property name=&quot;jpaVendorAdapter&quot;> <bean class=&quot;org.springframework.orm.jpa.vendor.OpenJpaVendorAdapter&quot;> <property name=&quot;showSql&quot; value=&quot;true&quot;/> <property name=&quot;generateDdl&quot; value=&quot;true&quot;/> </bean> </property> <!– See OPENJPA-40 --> <property name=&quot;loadTimeWeaver&quot;> <bean class=&quot;net.wessendorf.wjax.openjpa.OpenJpaLoadTimeWeaver&quot;/> </property> </bean>

<bean id=&quot;entityManagerFactory&quot; class=&quot; org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean &quot;

p:dataSource-ref=&quot;dataSource&quot;

p:persistenceUnitName=&quot;kickstart&quot; >

<property name=&quot;jpaVendorAdapter&quot;>

<bean class=&quot;org.springframework.orm.jpa.vendor.OpenJpaVendorAdapter&quot;>

<property name=&quot;showSql&quot; value=&quot;true&quot;/>

<property name=&quot;generateDdl&quot; value=&quot;true&quot;/>

</bean>

</property>

<!– See OPENJPA-40 -->

<property name=&quot;loadTimeWeaver&quot;>

<bean class=&quot;net.wessendorf.wjax.openjpa.OpenJpaLoadTimeWeaver&quot;/>

</property>

</bean>

Spring and JPA (Config) <bean id=&quot;transactionManager&quot; class=&quot;org.springframework.orm.jpa.JpaTransactionManager&quot; p:entityManagerFactory-ref=&quot;entityManagerFactory&quot; /> <bean class=„ org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor &quot;/> <bean class=„ org.springframework.orm.jpa.support.PersistenceAnnotationBeanPostProcessor &quot;/>

<bean id=&quot;transactionManager&quot; class=&quot;org.springframework.orm.jpa.JpaTransactionManager&quot;

p:entityManagerFactory-ref=&quot;entityManagerFactory&quot;

/>

<bean class=„

org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor

&quot;/>

<bean class=„

org.springframework.orm.jpa.support.PersistenceAnnotationBeanPostProcessor

&quot;/>

Spring and JPA (DAO) @Repository @Transactional (propagation = Propagation. SUPPORTS ) public class JpaCustomerDaoImpl implements CustomerDao { private final String QUERY_ALL = &quot;select c from Customer c&quot; ; private final String QUERY_BY_SECONDNAME = &quot;select c from Customer c where c.secondname LIKE :param&quot; ; private EntityManager em ; @PersistenceContext public void setEntityManager(EntityManager entityManager) { this . em = entityManager; } ...

@Repository

@Transactional (propagation = Propagation. SUPPORTS )

public class JpaCustomerDaoImpl implements CustomerDao

{

private final String QUERY_ALL = &quot;select c from Customer c&quot; ;

private final String QUERY_BY_SECONDNAME = &quot;select c from Customer c where c.secondname LIKE :param&quot; ;

private EntityManager em ;

@PersistenceContext

public void setEntityManager(EntityManager entityManager)

{

this . em = entityManager;

}

...

Spring and JPA (DAO) public void remove(Customer customer) { Customer toDel = findById(customer.getId()); em .remove(toDel); } public List queryBySecondname(String name) { Query q = em .createQuery( QUERY_BY_SECONDNAME ); q.setParameter( &quot;param&quot; , name+ &quot;%&quot; ); return q.getResultList(); }

public void remove(Customer customer)

{

Customer toDel = findById(customer.getId());

em .remove(toDel);

}

public List queryBySecondname(String name)

{

Query q = em .createQuery( QUERY_BY_SECONDNAME );

q.setParameter( &quot;param&quot; , name+ &quot;%&quot; );

return q.getResultList();

}

Services with Spring private CustomerDao customerDao ; public void setCustomerDao(CustomerDao customerDao) { this . customerDao = customerDao; } @Transactional(propagation = Propagation.REQUIRED) public void removeCustomer(Customer customer) { customerDao .remove(customer); }

private CustomerDao customerDao ;

public void setCustomerDao(CustomerDao customerDao)

{

this . customerDao = customerDao;

}

@Transactional(propagation = Propagation.REQUIRED)

public void removeCustomer(Customer customer)

{

customerDao .remove(customer);

}

Spring: Service and DAO Config: < bean class = „ com.sessions.myfaces.daos. JpaCustomerDaoImpl &quot; id = &quot; customerDao &quot; /> < bean class = „ com.sessions.myfaces.services. CustomerServiceImpl &quot; id = &quot;customerService„ p:customerDao-ref = &quot;customerDao&quot; />

Config:

< bean class = „

com.sessions.myfaces.daos. JpaCustomerDaoImpl &quot; id = &quot; customerDao &quot; />

< bean class = „

com.sessions.myfaces.services. CustomerServiceImpl &quot; id = &quot;customerService„

p:customerDao-ref = &quot;customerDao&quot; />

MyFaces Orchestra Simpler Application State Management Conversation-Scope (dialog / wizard) Better integration of View- and Persistence Layer Conversation-Scope persistance contexts JSF-Extension Not tied to Apache MyFaces Core not tied to JSF API... No other framework supported (yet!) JSF‘s „Managed Bean Facility“ replaced by Spring‘s IoC Container Requires Spring 2.0 ViewController

Simpler Application State Management

Conversation-Scope (dialog / wizard)

Better integration of View- and Persistence Layer

Conversation-Scope persistance contexts

JSF-Extension

Not tied to Apache MyFaces

Core not tied to JSF API...

No other framework supported (yet!)

JSF‘s „Managed Bean Facility“ replaced by Spring‘s IoC Container

Requires Spring 2.0

ViewController

Session Application Manual Conversation Flash Conversation Request Conversation Scopes

Conversation-Scope persistance contexts

Common Pattern „ bean name“ similar to JSF View-Id form.xhtml  form users/form.xhtml  usersForm Lifecycle Hooks initView (nach RESTORE_VIEW ) preProcess (vor INVOKE_APPLICATION ) preRender (vor PRE_RENDER ) Orchestra supports Java5 Annotations Pattern known in: JDeveloper + ADFc Apache Shale Apache Struts 2 ViewController

Common Pattern

„ bean name“ similar to JSF View-Id

form.xhtml  form

users/form.xhtml  usersForm

Lifecycle Hooks

initView (nach RESTORE_VIEW )

preProcess (vor INVOKE_APPLICATION )

preRender (vor PRE_RENDER )

Orchestra supports Java5 Annotations

Pattern known in:

JDeveloper + ADFc

Apache Shale

Apache Struts 2

Let‘s integrate them!

Main configuration Lot‘s of XML Files... Servlet Container (web.xml) All frameworks... Faces (faces-config.xml) Spring XML file(s) Trinidad: trinidad-config.xml trinidad-skin.xml Facelets: (custom) taglib...

Lot‘s of XML Files...

Servlet Container (web.xml)

All frameworks...

Faces (faces-config.xml)

Spring XML file(s)

Trinidad:

trinidad-config.xml

trinidad-skin.xml

Facelets:

(custom) taglib...

Important configuration JSF FacesServlet (web.xml) Facelets ViewHandler (web.xml b/c Trinidad) javax.faces.DEFAULT_SUFFIX (web.xml) Trinidad RenderKit (faces-config.xml) TrinidadFilter (web.xml) ResourceServlet (web.xml) Orchestra Several things... (spring-xml(s) & web.xml) Spring RequestContextListener (web.xml) ContextLoaderListener (web.xml) DelegatingVariableResolver (faces-config.xml)

JSF

FacesServlet (web.xml)

Facelets

ViewHandler (web.xml b/c Trinidad)

javax.faces.DEFAULT_SUFFIX (web.xml)

Trinidad

RenderKit (faces-config.xml)

TrinidadFilter (web.xml)

ResourceServlet (web.xml)

Orchestra

Several things... (spring-xml(s) & web.xml)

Spring

RequestContextListener (web.xml)

ContextLoaderListener (web.xml)

DelegatingVariableResolver (faces-config.xml)

Notes on JSF Managed Beans

JSF Managed Bean‘s Use Spring 2 Offers Scopes (request / session) Required configuration: < faces-config > < application > < variable-resolver > org.springframework.web.jsf.DelegatingVariableResolver </ variable-resolver > </ application > ...

Use Spring 2

Offers Scopes (request / session)

Required configuration:

< faces-config >

< application >

< variable-resolver >

org.springframework.web.jsf.DelegatingVariableResolver

</ variable-resolver >

</ application >

...

JSF Managed Bean‘s A Bean clazz file: public class FooController { private CustomerService customerService ; public CustomerService getCustomerService() { return customerService ; } public void setCustomerService(CustomerService customerService) { this . customerService = customerService; } ... }

A Bean clazz file:

public class FooController

{

private CustomerService customerService ;

public CustomerService getCustomerService()

{

return customerService ;

}

public void setCustomerService(CustomerService customerService)

{

this . customerService = customerService;

}

...

}

JSF Managed Bean‘s Bean configuration (in Spring !): Spring offers lot‘s of features Orchestra requires this! No Beans in faces-config.xml < bean id = &quot;create„ class = „....FooController„ scope = &quot;request&quot; p:customerService-ref = &quot; customerServiceImpl “ / >

Bean configuration (in Spring !):

Spring offers lot‘s of features

Orchestra requires this!

No Beans in faces-config.xml

< bean

id = &quot;create„ class = „....FooController„ scope = &quot;request&quot;

p:customerService-ref = &quot; customerServiceImpl “ / >

Let‘s code!

Facelets Template Engine, XHTML based Layout with CSS Define areas in your master-template (content, footer, ...) <tr:document xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot; xmlns:tr=&quot;http://myfaces.apache.org/trinidad&quot; ...> ... <div class=„content&quot;> <ui:insert name=&quot;content&quot;>My default Content</ui:insert> </div> ...</tr:document>

Template Engine, XHTML based

Layout with CSS

Define areas in your master-template

(content, footer, ...)

<tr:document

xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot;

xmlns:tr=&quot;http://myfaces.apache.org/trinidad&quot;

...>

...

<div class=„content&quot;>

<ui:insert name=&quot;content&quot;>My default Content</ui:insert>

</div>

...</tr:document>

Facelets Template Client regular web-page <ui:composition xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:tr=&quot;http://myfaces.apache.org/trinidad&quot; xmlns:mw=&quot;http://wessendorf.net/kickstart&quot; ... template=&quot;WEB-INF/facelets/layout/template.xhtml&quot; > <!-- content --> <ui:define name=&quot;content&quot;> My concrete JSF-Content !!! </ui:define> </ui:composition>

Template Client

regular web-page

<ui:composition xmlns=&quot;http://www.w3.org/1999/xhtml&quot;

xmlns:tr=&quot;http://myfaces.apache.org/trinidad&quot;

xmlns:mw=&quot;http://wessendorf.net/kickstart&quot;

...

template=&quot;WEB-INF/facelets/layout/template.xhtml&quot; >

<!-- content -->

<ui:define name=&quot;content&quot;>

My concrete JSF-Content !!!

</ui:define>

</ui:composition>

Facelets JSF is not „DRY“ ? <h:dataTable ...> ... <h:colum> <f:facet name=„header“> <h:outputText value=„Name“ /> </f:facet> <h:outputText value=„#{bean.name}“ /> </column> ... <h:colum> <f:facet name=„header“> <h:outputText value=„some other value“ /> </f:facet> <h:outputText value=„#{bean.foo}“ /> </column> ... </h:dataTable>

JSF is not „DRY“ ?

<h:dataTable ...>

...

<h:colum>

<f:facet name=„header“>

<h:outputText value=„Name“ />

</f:facet>

<h:outputText value=„#{bean.name}“ />

</column>

...

<h:colum>

<f:facet name=„header“>

<h:outputText value=„some other value“ />

</f:facet>

<h:outputText value=„#{bean.foo}“ />

</column>

...

</h:dataTable>

Facelets This would be nice! <h:dataTable ...> ... <x:smartColumn header=„Name“ visibleValue=„#{bean.name}“/> <x:smartColumn header=„ some other value“ visibleValue=„#{bean.foo}“/> ... </h:dataTable ... but...

This would be nice!

<h:dataTable ...>

...

<x:smartColumn header=„Name“ visibleValue=„#{bean.name}“/>

<x:smartColumn header=„ some other value“ visibleValue=„#{bean.foo}“/>

...

</h:dataTable

... but...

Facelets P(l)ain JSF: Too much to do for comp. Dev: Java: UIComponent (JavaBean) Renderer (creates the markup (HTML)) Tag-Class (connects Comp. and Renderer) XML Faces-config.xml TLD file

P(l)ain JSF:

Too much to do for comp. Dev:

Java:

UIComponent (JavaBean)

Renderer (creates the markup (HTML))

Tag-Class (connects Comp. and Renderer)

XML

Faces-config.xml

TLD file

Facelets With Facelets... Simple component development „ Rendering“ via XHTML file NO! Java-Code required Just: XHTML file Facelet‘s Taglib XML file register Taglib in web.xml

With Facelets...

Simple component development

„ Rendering“ via XHTML file

NO! Java-Code required

Just:

XHTML file

Facelet‘s Taglib XML file

register Taglib in web.xml

Facelets My JSF Component: <tr:column xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot; xmlns:f=&quot;http://java.sun.com/jsf/core&quot; xmlns:tr=&quot;http://myfaces.apache.org/trinidad &quot;> <f:facet name=&quot;header&quot;> <tr:outputText value=&quot;#{ header }&quot; /> </f:facet> <tr:outputText value=&quot;#{ visibleValue }&quot; /> </tr:column>

My JSF Component:

<tr:column

xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot;

xmlns:f=&quot;http://java.sun.com/jsf/core&quot;

xmlns:tr=&quot;http://myfaces.apache.org/trinidad &quot;>

<f:facet name=&quot;header&quot;>

<tr:outputText value=&quot;#{ header }&quot; />

</f:facet>

<tr:outputText value=&quot;#{ visibleValue }&quot; />

</tr:column>

Facelets Taglib.xml: <facelet-taglib> <namespace>http://corp.com/smart</namespace> <tag> <tag-name>smartColumn</tag-name> <source>.../column.xhtml</source> </tag> </facelet-taglib> web.xml: <context-param> <param-name>facelets.LIBRARIES</param-name> <param-value>/WEB-INF/mw.taglib.xml</param-value> </context-param>

Taglib.xml:

<facelet-taglib>

<namespace>http://corp.com/smart</namespace>

<tag>

<tag-name>smartColumn</tag-name>

<source>.../column.xhtml</source>

</tag>

</facelet-taglib>

web.xml:

<context-param>

<param-name>facelets.LIBRARIES</param-name>

<param-value>/WEB-INF/mw.taglib.xml</param-value>

</context-param>

Facelets Using the custom component: Add Namespace to your page: <tr:document xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot; xmlns:x=&quot; http://corp.com/smart&quot; xmlns:f=&quot;http://java.sun.com/jsf/core&quot;> Inside the XHTML file: <x:smartColumn header =„Name“ visibleValue =„#{bean.name}“/>

Using the custom component:

Add Namespace to your page:

<tr:document

xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot;

xmlns:x=&quot; http://corp.com/smart&quot;

xmlns:f=&quot;http://java.sun.com/jsf/core&quot;>

Inside the XHTML file:

<x:smartColumn header =„Name“ visibleValue =„#{bean.name}“/>

Trinidad Offers Ajax (aka PPR) for free XHR + IFrame (for Uploads) Components include Ajax: autoSubmit partialSubmit partialTriggers Ajax-API server client Dialog-Framework CSS Skinning

Offers Ajax (aka PPR) for free

XHR + IFrame (for Uploads)

Components include Ajax:

autoSubmit

partialSubmit

partialTriggers

Ajax-API

server

client

Dialog-Framework

CSS Skinning

Trinidad PPR in Action <tr:selectOneRadio value=&quot;#{partialBean.selectOne}&quot; autoSubmit=&quot;true&quot; id=&quot;select1&quot; > <tr:selectItem label=&quot;First&quot; value=&quot;Beer&quot;/> <tr:selectItem label=&quot;Second&quot; value=&quot;more beer&quot;/> <tr:selectItem label=&quot;Third&quot; value=&quot;sold out!&quot;/> </tr:selectOneRadio> <tr:outputText value=&quot;#{partialBean.selectOne}&quot; partialTriggers=&quot;select1&quot; />

PPR in Action

<tr:selectOneRadio value=&quot;#{partialBean.selectOne}&quot; autoSubmit=&quot;true&quot; id=&quot;select1&quot; >

<tr:selectItem label=&quot;First&quot; value=&quot;Beer&quot;/>

<tr:selectItem label=&quot;Second&quot; value=&quot;more beer&quot;/>

<tr:selectItem label=&quot;Third&quot; value=&quot;sold out!&quot;/>

</tr:selectOneRadio>

<tr:outputText value=&quot;#{partialBean.selectOne}&quot;

partialTriggers=&quot;select1&quot; />

Trinidad Call JavaScript from the Server... ExternalRenderKitService.addScript(): public String doTheWork() { ... FacesContext context = FacesContext.getCurrentInstance(); ExtendedRenderKitService erks = Service.getRenderKitService(context, ExtendedRenderKitService.class); erks.addScript(context, &quot;hello();&quot;);  JS-function return (&quot;success&quot;); }

Call JavaScript from the Server...

ExternalRenderKitService.addScript():

public String doTheWork()

{

...

FacesContext context = FacesContext.getCurrentInstance();

ExtendedRenderKitService erks =

Service.getRenderKitService(context,

ExtendedRenderKitService.class);

erks.addScript(context,

&quot;hello();&quot;);  JS-function

return (&quot;success&quot;);

}

Trinidad: Monitoring PPR function addListener() { var requestQueue = TrPage.getInstance().getRequestQueue(); requestQueue.addStateChangeListener(myCallback); } function myCallback(state) { var busy = state == TrRequestQueue.STATE_BUSY; var div = document.getElementById(&quot;load&quot;); div.style.display = busy ? &quot;inline&quot; : &quot;none&quot;; } In XHTML: <tr:commandLink onclick=&quot;addListener(); &quot; ...>

function addListener()

{

var requestQueue = TrPage.getInstance().getRequestQueue();

requestQueue.addStateChangeListener(myCallback);

}

function myCallback(state)

{

var busy = state == TrRequestQueue.STATE_BUSY;

var div = document.getElementById(&quot;load&quot;);

div.style.display = busy ? &quot;inline&quot; : &quot;none&quot;;

}

In XHTML:

<tr:commandLink onclick=&quot;addListener(); &quot; ...>

Trinidad Dialog Framework „ new Window“ or lightweight Dialogs... <tr:commandLink text=&quot;Google Maps&quot; useWindow=&quot;true&quot; action=&quot;dialog:map&quot; returnListener=&quot;#{bean.returnListener}&quot; /> CSS Skinning needs trinidad-skins.xml register „skin-family“ in trinidad-config.xml create a CSS Datei

Dialog Framework

„ new Window“ or lightweight Dialogs...

<tr:commandLink text=&quot;Google Maps&quot; useWindow=&quot;true&quot; action=&quot;dialog:map&quot; returnListener=&quot;#{bean.returnListener}&quot; />

CSS Skinning

needs trinidad-skins.xml

register „skin-family“ in trinidad-config.xml

create a CSS Datei

Trinidad CSS Skinning : .AFRequiredIconStyle { color: #CC0000; -tr-rule-ref: selector(&quot;.AFDefaultFont:alias&quot;); } af|inputDate::launch-icon { content: url(/images/calendar_icon.gif); }

CSS Skinning :

.AFRequiredIconStyle {

color: #CC0000;

-tr-rule-ref: selector(&quot;.AFDefaultFont:alias&quot;);

}

af|inputDate::launch-icon

{

content: url(/images/calendar_icon.gif);

}

Orchestra - ViewController Three ways Reflection (initView(),...) Interface (ViewController) Annotations (@ViewController, @InitView,...) „ Multi-ViewController“ @ViewController(viewIds={&quot;/all.xhtml&quot;, ...)

Three ways

Reflection (initView(),...)

Interface (ViewController)

Annotations (@ViewController, @InitView,...)

„ Multi-ViewController“

@ViewController(viewIds={&quot;/all.xhtml&quot;, ...)

Orchestra - ViewController Orchestra ViewController @ConversationRequire( conversationNames = &quot;editor&quot;, entryPointViewIds = {&quot;/all.xhtml&quot;}, redirect=&quot;/all.xhtml&quot;) @ViewController(viewIds={&quot;/edit1.xhtml&quot;, &quot;/edit2.xhtml&quot;}) public class Editor ... { ... @PreRenderView public void loader() { ... } ... }

Orchestra ViewController

@ConversationRequire(

conversationNames = &quot;editor&quot;,

entryPointViewIds = {&quot;/all.xhtml&quot;},

redirect=&quot;/all.xhtml&quot;)

@ViewController(viewIds={&quot;/edit1.xhtml&quot;, &quot;/edit2.xhtml&quot;})

public class Editor ...

{

...

@PreRenderView public void loader()

{

...

}

...

}

Orchestra - Scope Manuel-Scope <bean id=&quot; googleMapBean &quot; class=&quot;net.wessendorf.faces.starter.view.controller.GoogleMapBean&quot; scope=&quot;conversation.manual&quot; orchestra:conversationName=&quot; googleMap &quot; p:userService-ref=&quot;userServiceImpl&quot;> <aop:scoped-proxy /> </bean> Closing a Conversation Conversation currentConv = ConversationManager.getInstance().getConversation(&quot; googleMap &quot;); currentConv.invalidate();

Manuel-Scope

<bean id=&quot; googleMapBean &quot; class=&quot;net.wessendorf.faces.starter.view.controller.GoogleMapBean&quot; scope=&quot;conversation.manual&quot;

orchestra:conversationName=&quot; googleMap &quot;

p:userService-ref=&quot;userServiceImpl&quot;>

<aop:scoped-proxy />

</bean>

Closing a Conversation

Conversation currentConv = ConversationManager.getInstance().getConversation(&quot; googleMap &quot;);

currentConv.invalidate();

Orchestra - Scopes ConversationBindingListener interface valueBound() valueUnbound() Usem it for both scope‘s Flash manual Conversation has „timeout“ 30 minutes (default)

ConversationBindingListener interface

valueBound()

valueUnbound()

Usem it for both scope‘s

Flash

manual

Conversation has „timeout“

30 minutes (default)

Discussion JBoss Seam, „a Java EE framework“ JSF EJB 3 Base for „Web Beans“ (JSR 299) Dependency-Injection... Google Guice A (web) framework for Java EE JavaServer Faces 2.0 Better Integration for component sets Ajax-Layer ? Taking up good ideas Facelets Trinidad ... „ Modern Web Frameworks“ ... ?

JBoss Seam, „a Java EE framework“

JSF

EJB 3

Base for „Web Beans“ (JSR 299)

Dependency-Injection...

Google Guice

A (web) framework for Java EE

JavaServer Faces 2.0

Better Integration for component sets

Ajax-Layer ?

Taking up good ideas

Facelets

Trinidad

...

„ Modern Web Frameworks“ ... ?

Documentation http://myfaces.apache.org http://myfaces.apache.org/trinidad http://springframework.org https://facelets.dev.jav.net Slides  http://slideshare.net/mwessendorf/ Demo: http://code.google.com/p/facesgoodies/

http://myfaces.apache.org

http://myfaces.apache.org/trinidad

http://springframework.org

https://facelets.dev.jav.net

Slides  http://slideshare.net/mwessendorf/

Demo:

http://code.google.com/p/facesgoodies/

Q&A Questions ? Thank you !

Questions ?

Thank you !