In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces
Upcoming SlideShare
Loading in...5

In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces



In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces

In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces



Total Views
Views on SlideShare
Embed Views



10 Embeds 940 558 268 64 37
http://smash 6 2 2 1 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces Presentation Transcript

    • 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
    • JSF Overview Standard for Java EE Component Oriented Event Driven RenderKits (web, mobile ...)
    • History JSR 127 - JSF 1 JSR 252 - JSF 1.2 JSR-314 - JSF 2.0 <- Coolest one
    • JSF Ecosytem Apache Software Foundation (MyFaces, Trinidad, Tobago, Tomahawk, ExtVal...) Oracle (ADF Faces - Mojarra Implementation) IBM (IBM JSF Component) Prime Technology (PrimeFaces) VMware/SpringSource (Spring WebFlow) RedHat/JBoss (Seam, RichFaces) JAVA EE 6 (CDI, Bean Validation) Other *Faces libs
    • JSF 2.0 Highlights Powered by Community Feedback Facelets/VDL • Navigations AJAX • Resource Loading • Bookmarking Custom Components • New Event API Behaviors • Exception Handling Partial State • 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.x Good match (Partial Output) Wheel reinvented by; IceFaces PrimeFaces Trinidad Tomahawk RichFaces OpenFaces ADF Faces *Faces Compatibility issues
    • AJAX and JSF 2.0 Now Standard! New APIs; Server: PartialViewContext Client: jsf.ajax.AjaxRequest New tag; <f:ajax />
    • AJAX and JSF 2.0 PartialViewContext API Partial Processing (execute) Partial Rendering (render) Standard request parameters
    • f:ajax Ajax Behavior <h:inputText value=”#{bean.value}”> <f:ajax render=”display”/> </h:inputText> <h:outputText id=”display” /> <h:inputText value=”#{bean.value}”> <f:ajax render=”display” execute=”@this”/> </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” />
    • No XML faces-config.xml is not optional Get rid of; <managed-bean /> <navigaton-case /> <component />, <renderer /> <converter />, <validator /> ...
    • Managed Beans with JSF 1.x <managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class></managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> package; public class ItemView { }
    • Managed Beans with JSF 2.0 NO XML @ManagedBean public class ItemView { }
    • Dependencies with JSF 1.x <managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class></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></managed-bean-class> <managed-bean-scope>application</managed-bean-scope> </managed-bean> package; public class ItemView { private ItemService itemService; //getter&setter }
    • Dependencies with JSF 2.0 NO XML @ManagedBean(name=”itemService”) @ApplicationScoped public class ItemServiceImpl implements ItemService { } @ManagedBean public class ItemView { @ManagedProperty(value=”itemService”) private ItemService itemService; //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... <h:inputText value=”#{bean.value}”> <f:event type=”preValidate” listener=”#{bean.preValidate}” /> </h:inputText>
    • Event Listeners New API SystemEventListener isListenerForSource(Object source) processEvent(SystemEvent event) Configure via xml or @ListenerFor Application.subscribeToEvent(event, listener); UIComponent.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
    • GET Support with JSF 1.x Assigned when bean is used for first time No validation/conversion support No post assignment listener (init view) <managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class></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>
    • GET Support with JSF 2.0 Introducing ViewParameters Validation/conversion support Post assignment listener (init view) <f:view> <f:metadata> <f:viewParam name=”itemId” value=”#{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.0 Post mapping listener <f:view> <f:metadata> <f:viewParam name=”itemId” value=”#{itemView.itemId}”> <f:validator validatorId=”itemValidator” /> </f:viewParam> <f:event type=”preRenderView” listener=”#{itemView.loadItem}”/> </f:metadata> </f:view> public void loadItem() { //load item with itemId from datatabase }
    • GET Support with JSF 1.2 GET component h:outputLink <h:outputLink value=”#{request.contextPath}”/itemView.jsf?itemId=10> View Item </h:outputLink> Manual URL generation No support for; context-path 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.itemId}” /> </h:button> Auto generated Bookmarkable URLs Integrated with Navigation Rules
    • Project Stage Runtime hint Mostly for use of implementation and extensions Development, Production, SystemTest, UnitTest <context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param> Application.getProjectStage()
    • 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
    • State Saving in JSF 2.0 Partial State Saving Initial state is marked Deltas are saved and helper StateHelper API for developers Much less in size
    • Resource Loading with JSF 1.x Loading bundles resources from jar Custom Servlet or Filter required
    • Resource Loading with JSF 2.0 New Resource APIs for; Registering Relocating Loading locale, version support New components <h:outputStylesheet /> and <h:outputScript />
    • Registering Resources located at; /webroot/resources/mylib /jar/META-INF/resources/mylib @ResourceDependency(name=”cool.js”, library=”mycoollib”) public class MyCoolComponent extends UIComponent { } @ResourceDependencies { @ResourceDependency(name=”cool.js”, library=”mycoollib”) @ResourceDependency(name=”cool.css”, library=”mycoollib”) } public class MyCoolComponent extends UIComponent { }
    • Relocating Resources placed at head or body <h:head />, <h:body /> @ResourceDependency(name=”cool.js”, library=”mycoollib”, target=”head”) public class MyCoolComponent extends UIComponent { } UIViewRoot.addComponentResource API
    • Resource Components Load from webroot or jar <h:outputStylesheet name=”cool.css” library=”mycoollib” /> <h:outputScript name=”cool.js” library=”mycoollib” target=”head”/> <h:graphicImage name=”cool.png” library=”mycoollib”/> <h:graphicImage value=”#{resource[‘mycoollib:cool.png’}”/>
    • Resources in CSS #{resource} variable .header { background:url(“#{resource[‘mylib:header.png’]}”); } Generates; .header { background:url(“/myapp/javax.faces.resource/header.png?ln=mylib”); }
    • Bean Validation JSR-303 Integration Reuse constraints @NotNull @Size(min=5, max=10) private String title; <h:inputText value=”#{bean.item.title}” /> instead of <h:inputText value=”#{bean.item.title}” required=”true”> <f:validateLength min=”5” max=”10” /> </h:inputText/>
    • UI Components Standard JSF Components (button, radio, checkbox) Third Party Suites (e.g. PrimeFaces) But how to build your own?
    • Custom Components with JSF 1.x 5 different artifacts required faces-config.xml config jsp tld config <component /> <renderer/ > JSP Tag Class Component Class Renderer Class
    • Custom Components with JSF 2.0 One .xhtml file is enough component.xhtml
    • DatePicker Demo <prime:datePicker /> /webroot/resources/prime/datepicker.xhtml /webroot/resources/jquery/...
    • PRIMEFACES Next Generation Component Suite Most Popular JSF 2.0 Library 100+ components (Everything you need) Lightweight: one jar, no dependencies, 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)
    • Setup No setup required, drop the jar and add the namespace; xmlns:p=”” <p:editor />
    • PrimeFaces UI
    • PrimeFaces Ajax Based on standard JSF 2.0 Ajax APIs Extensions; p:ajax callbacks p:ajaxStatus jquery based client side api implementation
    • Callbacks p:ajax f:ajax onstart onevent oncomplete onerror onsuccess onerror
    • Callback Params Pass data from server to client as JSON Built-in callback param : “validationFailed” public void save() { Request context = RequestContext.getCurrentInstance(); context.addCallbackParam(“saved”, true); } <p:commandButton value=”Submit” oncomplete=”handleComplete(xhr, status, args)” actionListener=”#{}”/> function handleComplete(xhr, status, args) { var saved = args.saved; }
    • Unobstrusive JSF Page: <p:schedule value=”#{bean.mode}” editable=”true”/> <div id=”_gen”></div> <script type=”text/javascript”> Renders: new PrimeFaces.widget.Schedule(‘_gen’, {editable:true}); </script> You get:
    • Progressive Enhancement JSF Page: <p:button value=”Submit” /> <button id=”gen”>Submit</button> <script type=”text/javascript”> Renders: new PrimeFaces.widget.Button(‘_gen’); </script> You get:
    • Themes Integrated with ThemeRoller 25+ Built-in Themes Online ThemeCreator to create your own easily
    • Theme Gallery
    • How to Create Your Own No need to know CSS Disable default skin <context-param> <param-name></param-name> <param-value>none</param-value> </context-param> See:
    • PrimeFaces Demo
    • Ajax Push Powered by Atmosphere Framework Currently Proof-of-Concept (http-streaming) Future; WebSockets, Long-Polling, Http-Streaming
    • TouchFaces Mobile UI components Optimized for webkit (eg IPhone, Android) Native looking webapps jqtouch based
    • TouchFaces Demo Translate Chat - Ajax Push PathFinder - GPS TwitFaces Weather Notes News
    • Integration Spring Core Spring WebFlow Seam CDI Portlets
    • IDE Support
    • Documentation 400+ pages (for now) Component reference, examples, tips
    • Community Support Huge community, 500 posts every week
    • Enterprise Support Fast reponse times Priority forum access Custom component development
    • 2.2 Trailer
    • Trainings Prime Technology Courses (onsite and online); JSF2 and PrimeFaces JSF2 - Spring - JPA (popular) JSF - Seam - JPA JSF2 - CDI- JPA (Java EE 6) and more
    • Finale in PrimeFaces Forum