Advanced Jsf

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

Advanced JSF - ToC

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

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

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

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

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!

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

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)

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 

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

A simple Facelet

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

<html

xmlns="http://www.w3.org/1999/xhtml

xmlns:h="http://java.sun.com/jsf/html ">

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

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

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)

Apache MyFaces Trinidad

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

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)

@Entity

public class Customer

{

@Id

@GeneratedValue (strategy= GenerationType. AUTO )

private Long id ;

@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

Spring and JPA (Config)

<bean id="entityManagerFactory" class=" org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean "

p:dataSource-ref="dataSource"

p:persistenceUnitName="kickstart" >

<property name="jpaVendorAdapter">

<bean class="org.springframework.orm.jpa.vendor.OpenJpaVendorAdapter">

<property name="showSql" value="true"/>

<property name="generateDdl" value="true"/>

</bean>

</property>

<!– See OPENJPA-40 -->

<property name="loadTimeWeaver">

<bean class="net.wessendorf.wjax.openjpa.OpenJpaLoadTimeWeaver"/>

</property>

</bean>

Spring and JPA (Config)

<bean id="transactionManager" class="org.springframework.orm.jpa.JpaTransactionManager"

p:entityManagerFactory-ref="entityManagerFactory"

/>

<bean class=„

org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor

"/>

<bean class=„

org.springframework.orm.jpa.support.PersistenceAnnotationBeanPostProcessor

"/>

Spring and JPA (DAO)

@Repository

@Transactional (propagation = Propagation. SUPPORTS )

public class JpaCustomerDaoImpl implements CustomerDao

{

private final String QUERY_ALL = "select c from Customer c" ;

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

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( "param" , name+ "%" );

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

}

Spring: Service and DAO

Config:

< bean class = „

com.sessions.myfaces.daos. JpaCustomerDaoImpl " id = " customerDao " />

< bean class = „

com.sessions.myfaces.services. CustomerServiceImpl " id = "customerService„

p:customerDao-ref = "customerDao" />

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

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

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

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)

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 >

...

A Bean clazz file:

public class FooController

{

private CustomerService customerService ;

public CustomerService getCustomerService()

{

return customerService ;

}

public void setCustomerService(CustomerService customerService)

{

this . customerService = customerService;

}

...

}

Bean configuration (in Spring !):

Spring offers lot‘s of features

Orchestra requires this!

No Beans in faces-config.xml

< bean

id = "create„ class = „....FooController„ scope = "request"

p:customerService-ref = " customerServiceImpl “ / >

Let‘s code!

Facelets

Template Engine, XHTML based

Layout with CSS

Define areas in your master-template

(content, footer, ...)

<tr:document

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:tr="http://myfaces.apache.org/trinidad"

...>

...

<div class=„content">

<ui:insert name="content">My default Content</ui:insert>

</div>

...</tr:document>

Facelets

Template Client

regular web-page

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:tr="http://myfaces.apache.org/trinidad"

xmlns:mw="http://wessendorf.net/kickstart"

...

template="WEB-INF/facelets/layout/template.xhtml" >

<ui:define name="content">

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>

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

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

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

Facelets

My JSF Component:

<tr:column

xmlns:f="http://java.sun.com/jsf/core"

xmlns:tr="http://myfaces.apache.org/trinidad ">

<f:facet name="header">

<tr:outputText value="#{ header }" />

</f:facet>

<tr:outputText value="#{ visibleValue }" />

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

Facelets

Using the custom component:

Add Namespace to your page:

<tr:document

xmlns:x=" http://corp.com/smart"

xmlns:f="http://java.sun.com/jsf/core">

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

Trinidad

PPR in Action

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

<tr:selectItem label="First" value="Beer"/>

<tr:selectItem label="Second" value="more beer"/>

<tr:selectItem label="Third" value="sold out!"/>

</tr:selectOneRadio>

<tr:outputText value="#{partialBean.selectOne}"

partialTriggers="select1" />

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,

"hello();");  JS-function

return ("success");

}

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("load");

div.style.display = busy ? "inline" : "none";

}

In XHTML:

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

Trinidad

Dialog Framework

„ new Window“ or lightweight Dialogs...

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

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(".AFDefaultFont:alias");

}

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={"/all.xhtml", ...)

Orchestra - ViewController

Orchestra ViewController

@ConversationRequire(

conversationNames = "editor",

entryPointViewIds = {"/all.xhtml"},

redirect="/all.xhtml")

@ViewController(viewIds={"/edit1.xhtml", "/edit2.xhtml"})

public class Editor ...

{

...

@PreRenderView public void loader()

{

...

}

...

}

Orchestra - Scope

Manuel-Scope

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

orchestra:conversationName=" googleMap "

p:userService-ref="userServiceImpl">

<aop:scoped-proxy />

</bean>

Closing a Conversation

Conversation currentConv = ConversationManager.getInstance().getConversation(" googleMap ");

currentConv.invalidate();

Orchestra - Scopes

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“ ... ?

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/

Q&A

Questions ?

Thank you !

Advanced Jsf

2 comments

Notes on slide 1

5 Favorites

Advanced Jsf - Presentation Transcript

More by user

More Info

Categories

Tags

Advanced Jsf

2 comments

Notes on slide 1

5 Favorites

Advanced Jsf - Presentation Transcript

Related Presentations

More by user

More Info

Categories

Tags