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 !

http://www.slideshare.net	43
http://www.zjsyc.com	27
http://upheart.blogspot.com	13
http://innovationstartups.wordpress.com	12
http://static.slideshare.net	3
http://203.208.37.132	1

Advanced Jsf

by mwessendorf on Nov 17, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 99

Statistics

Advanced Jsf — Presentation Transcript