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

on

  • 7,636 views

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

Statistics

Views

Total Views
7,636
Views on SlideShare
6,696
Embed Views
940

Actions

Likes
1
Downloads
145
Comments
0

10 Embeds 940

http://skillsmatter.com 558
http://www.jornaljava.com 268
http://primefaces-tutorial.blogspot.com 64
http://busk.com 37
http://smash 6
http://static.slidesharecdn.com 2
http://192.168.56.101 2
http://feeds.feedburner.com 1
https://skillsmatter.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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

  • 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
  • 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>com.prime.view.itemView</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> package com.prime.view; 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>com.prime.view.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.prime.service.ItemServiceImpl</managed-bean-class> <managed-bean-scope>application</managed-bean-scope> </managed-bean> package com.prime.view; 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) http://www.site.com/itemView.jsf?itemId=10 <managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class>com.prime.view.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>
  • GET Support with JSF 2.0 Introducing ViewParameters Validation/conversion support Post assignment listener (init view) http://www.site.com/itemView.jsf?itemId=10 <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=”http://primefaces.prime.com.tr/ui” <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=”#{bean.save}”/> 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>primefaces.skin</param-name> <param-value>none</param-value> </context-param> See: http://vimeo.com/14235640
  • 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 http://www.primefaces.org/support.html
  • 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 www.prime.com.tr/training.html
  • Finale http://www.primefaces.org cagatay.civici@prime.com.tr optimus.prime in PrimeFaces Forum