EXPLORING JSF 2.

0 AND PRIMEFACES
Cagatay Civici
PRIME
TECHNOLOGY

Cagatay Civici
JSF EG (Expert Group) Member PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer Consultant and Trainer for Prime Technology

Topics
JSF Overview What’s New in JSF 2.0? Go beyond with PrimeFaces

mobile ..) .JSF Overview Standard for Java EE Component Oriented Event Driven RenderKits (web..

0 <.History JSR 127 .JSF 2.2 JSR-314 .JSF 1.Coolest one .JSF 1 JSR 252 .

Mojarra Implementation) IBM (IBM JSF Component) Prime Technology (PrimeFaces) VMware/SpringSource (Spring WebFlow) RedHat/JBoss (Seam.) Oracle (ADF Faces . ExtVal.JSF Ecosytem Apache Software Foundation (MyFaces. Tobago. RichFaces) JAVA EE 6 (CDI. Trinidad.. Tomahawk.. Bean Validation) Other *Faces libs .

JSF 2.0 Highlights Powered by Community Feedback Facelets/VDL AJAX Custom Components Behaviors Partial State • Navigations • Resource Loading • Bookmarking • New Event API • Exception Handling • JSR-303 Bean Validation and general pain relief .

JSP with JSF Mismatch JSP tags create JSF components Content vs Component Two different lifecycles .

Facelets / VDL XHTML based Optimized for JSF Templating New View Declaration Language API NOW STANDARD! .

AJAX and JSF 1. IceFaces RichFaces PrimeFaces OpenFaces Trinidad ADF Faces Tomahawk *Faces Compatibility issues .x Good match (Partial Output) Wheel reinvented by.

<f:ajax /> .0 Now Standard! New APIs. Server: PartialViewContext Client: jsf.AjaxRequest New tag.AJAX and JSF 2.ajax.

0 PartialViewContext API Partial Processing (execute) Partial Rendering (render) Standard request parameters .AJAX and JSF 2.

value}”> <f:ajax render=”display”/> </h:inputText> <h:outputText id=”display” /> <h:inputText value=”#{bean.value}”> <f:ajax render=”display” execute=”@this” event=”blur”/> </h:inputText> <h:outputText id=”display” /> .f:ajax Ajax Behavior <h:inputText value=”#{bean.value}”> <f:ajax render=”display” execute=”@this”/> </h:inputText> <h:outputText id=”display” /> <h:inputText value=”#{bean.

<managed-bean /> <navigaton-case /> <component />.No XML faces-config.xml is not optional Get rid of. . <renderer /> <converter />.. <validator /> ..

prime.itemView</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> package com.prime.view.Managed Beans with JSF 1.x <managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class>com. public class ItemView { } .view.

Managed Beans with JSF 2.0 NO XML @ManagedBean public class ItemView { } .

prime.prime.view.view.service.x <managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class>com. //getter&setter } .ItemServiceImpl</managed-bean-class> <managed-bean-scope>application</managed-bean-scope> </managed-bean> package com.prime.itemView</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>itemService</property-name> <value>#{itemService}</value> </managed-property> </managed-bean> <managed-bean> <managed-bean-name>itemService</managed-bean-name> <managed-bean-class>com. public class ItemView { private ItemService itemService.Dependencies with JSF 1.

0 NO XML @ManagedBean(name=”itemService”) @ApplicationScoped public class ItemServiceImpl implements ItemService { } @ManagedBean public class ItemView { @ManagedProperty(value=”itemService”) private ItemService itemService.Dependencies with JSF 2. //getter&setter } .

Scopes @RequestScoped @ViewScoped @SessionScoped @CustomScoped Flash scope .

View Scope Between request and session Lives for postbacks #{viewScope} UIViewRoot.getViewMap() .

Flash Scope ROR concept Lives in subsequent request Survives redirect Post-Redirect-Get #{flash} ExternalContext.getFlash() .

System Events Phaselisteners are not enough Subscribe to various events in lifecycle Application Events Component Events .

Application Events Application wide events ExceptionQueuedEvent PostConstructApplicationEvent PreDestroyApplicationEvent more. ...

.Component Events View based events PostAddToViewEvent PreValidateEvent PreRenderViewEvent more.value}”> <f:event type=”preValidate” listener=”#{bean.preValidate}” /> </h:inputText> . <h:inputText value=”#{bean..

listener). UIComponent.Event Listeners New API SystemEventListener isListenerForSource(Object source) processEvent(SystemEvent event) Configure via xml or @ListenerFor Application.subscribeToEvent(event.subscribeToEvent(event. . listener).

Navigations
Implicit Navigation Configurable NavigationHandler

Navigations with JSF 1.x
<navigation-rule> <from-view-id>/source.xhtml</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>target.xhtml</to-view-id> </navigation-case> </navigation-rule> public String buttonClick() { return “success”; }

source.xhtml

target.xhtml

Navigations with JSF 2.0
NO XML
public String buttonClick() { return “target”; }

source.xhtml

target.xhtml

GET Support Navigate by GET View Metadata and View Parameters Bookmarkable URLs Post-Redirect-Get .

site.jsf?itemId=10 <managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class>com.x Assigned when bean is used for first time No validation/conversion support No post assignment listener (init view) http://www.itemView</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>itemId</property-name> <value>#{param[‘itemId’]}</value> </managed-property> </managed-bean> .view.prime.GET Support with JSF 1.com/itemView.

0 Introducing ViewParameters Validation/conversion support Post assignment listener (init view) http://www.site.jsf?itemId=10 <f:view> <f:metadata> <f:viewParam name=”itemId” value=”#{itemView.com/itemView.itemId}” /> </f:metadata> </f:view> .GET Support with JSF 2.

0 Validation/conversion support <f:view> <f:metadata> <f:viewParam name=”itemId” value=”#{itemView.itemId}”> <f:validator validatorId=”itemValidator” /> </f:viewParam> </f:metadata> </f:view> .GET Support with JSF 2.

itemId}”> <f:validator validatorId=”itemValidator” /> </f:viewParam> <f:event type=”preRenderView” listener=”#{itemView.GET Support with JSF 2.loadItem}”/> </f:metadata> </f:view> public void loadItem() { //load item with itemId from datatabase } .0 Post mapping listener <f:view> <f:metadata> <f:viewParam name=”itemId” value=”#{itemView.

contextPath}”/itemView.jsf?itemId=10> View Item </h:outputLink> Manual URL generation No support for. context-path navigation-rules .2 GET component h:outputLink <h:outputLink value=”#{request.GET Support with JSF 1.

itemId}” /> </h:button> Auto generated Bookmarkable URLs Integrated with Navigation Rules .GET Support with JSF 2.0 <h:button /> and <h:link /> <h:link outcome=”main” /> <h:button outcome=”main” includeViewParams=”true”/> <h:button outcome=”main” includeViewParams=”true”> <f:param name=”itemId” value=”#{itemView.

PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param> Application. Production.getProjectStage() . SystemTest.faces. UnitTest <context-param> <param-name>javax.Project Stage Runtime hint Mostly for use of implementation and extensions Development.

Behaviors Attaching behaviors <h:commandButton value=”Submit” onclick=”return confirm(‘Sure?’)”/> <h:commandButton value=”Submit”> <custom:confirmation message=”Sure?” /> </h:commandButton> One built-in client behavior. f:ajax .

State Saving in JSF 1.x Full Component Tree saved/restored Attributes saved/restored Performance/Memory issues Burden for component developer .

0 Partial State Saving Initial state is marked Deltas are saved and helper StateHelper API for developers Much less in size .State Saving in JSF 2.

x Loading bundles resources from jar Custom Servlet or Filter required .Resource Loading with JSF 1.

0 New Resource APIs for. Registering Relocating Loading locale.Resource Loading with JSF 2. version support New components <h:outputStylesheet /> and <h:outputScript /> .

js”. library=”mycoollib”) public class MyCoolComponent extends UIComponent { } @ResourceDependencies { @ResourceDependency(name=”cool.css”. /webroot/resources/mylib /jar/META-INF/resources/mylib @ResourceDependency(name=”cool. library=”mycoollib”) @ResourceDependency(name=”cool. library=”mycoollib”) } public class MyCoolComponent extends UIComponent { } .js”.Registering Resources located at.

Relocating Resources placed at head or body <h:head />. <h:body /> @ResourceDependency(name=”cool.addComponentResource API .js”. target=”head”) public class MyCoolComponent extends UIComponent { } UIViewRoot. library=”mycoollib”.

js” library=”mycoollib” target=”head”/> <h:graphicImage name=”cool.css” library=”mycoollib” /> <h:outputScript name=”cool.png” library=”mycoollib”/> <h:graphicImage value=”#{resource[‘mycoollib:cool.Resource Components Load from webroot or jar <h:outputStylesheet name=”cool.png’}”/> .

resource/header.Resources in CSS #{resource} variable .png?ln=mylib”).png’]}”).header { background:url(“/myapp/javax.faces. } Generates.header { background:url(“#{resource[‘mylib:header. } . .

item.item.title}” /> instead of <h:inputText value=”#{bean. max=10) private String title.Bean Validation JSR-303 Integration Reuse constraints @NotNull @Size(min=5.title}” required=”true”> <f:validateLength min=”5” max=”10” /> </h:inputText/> . <h:inputText value=”#{bean.

radio. checkbox) Third Party Suites (e. PrimeFaces) But how to build your own? .UI Components Standard JSF Components (button.g.

Custom Components with JSF 1.x 5 different artifacts required faces-config.xml config <component /> <renderer/ > jsp tld config JSP Tag Class Component Class Renderer Class .

Custom Components with JSF 2.xhtml .0 One .xhtml file is enough component.

xhtml /webroot/resources/jquery/...DatePicker Demo <prime:datePicker /> /webroot/resources/prime/datepicker. .

no dependencies.PRIMEFACES Next Generation Component Suite Most Popular JSF 2.0 Library 100+ components (Everything you need) Lightweight: one jar. zero-config Skinning support with 25+ themes and theme creator Extensive documentation Huge and active community jQuery based Mobile UI Kit: TouchFaces Ajax Push support Open Source (Apache License) .

tr/ui” <p:editor /> . xmlns:p=”http://primefaces. drop the jar and add the namespace.com.prime.Setup No setup required.

PrimeFaces UI .

0 Ajax APIs Extensions. p:ajax callbacks p:ajaxStatus jquery based client side api implementation .PrimeFaces Ajax Based on standard JSF 2.

Callbacks p:ajax onstart oncomplete onsuccess onerror f:ajax onevent onerror .

saved. } <p:commandButton value=”Submit” oncomplete=”handleComplete(xhr. } . args)” actionListener=”#{bean.save}”/> function handleComplete(xhr.Callback Params Pass data from server to client as JSON Built-in callback param : “validationFailed” public void save() { Request context = RequestContext. status. true). context.addCallbackParam(“saved”. args) { var saved = args. status.getCurrentInstance().

widget.Unobstrusive JSF Page: Renders: <p:schedule value=”#{bean. </script> You get: . {editable:true}).mode}” editable=”true”/> <div id=”_gen”></div> <script type=”text/javascript”> new PrimeFaces.Schedule(‘_gen’.

Progressive Enhancement JSF Page: Renders: <p:button value=”Submit” /> <button id=”gen”>Submit</button> <script type=”text/javascript”> new PrimeFaces.Button(‘_gen’). </script> You get: .widget.

Themes Integrated with ThemeRoller 25+ Built-in Themes Online ThemeCreator to create your own easily .

Theme Gallery .

com/14235640 .skin</param-name> <param-value>none</param-value> </context-param> See: http://vimeo.How to Create Your Own No need to know CSS Disable default skin <context-param> <param-name>primefaces.

PrimeFaces Demo .

Http-Streaming . WebSockets.Ajax Push Powered by Atmosphere Framework Currently Proof-of-Concept (http-streaming) Future. Long-Polling.

TouchFaces Mobile UI components Optimized for webkit (eg IPhone. Android) Native looking webapps jqtouch based .

Ajax Push PathFinder .TouchFaces Demo Translate Chat .GPS TwitFaces Weather Notes News .

Integration Spring Core Spring WebFlow Seam CDI Portlets .

IDE Support .

tips . examples.Documentation 400+ pages (for now) Component reference.

Community Support Huge community. 500 posts every week .

org/support.primefaces.html .Enterprise Support Fast reponse times Priority forum access Custom component development http://www.

2.2 Trailer .

html .Trainings Prime Technology Courses (onsite and online).com. JSF2 and PrimeFaces JSF2 .CDI.prime.tr/training.Seam .JPA (Java EE 6) and more www.JPA (popular) JSF .JPA JSF2 .Spring .

tr optimus.primefaces.civici@prime.Finale http://www.com.prime in PrimeFaces Forum .org cagatay.

Sign up to vote on this title
UsefulNot useful