PrimeFaces
Next Generation Component Suite




         Cagatay Civici
Cagatay Civici
• JSF Expert Group Member (JSR-314)
• PrimeFaces Founder and Lead
• Apache MyFaces PMC Member
• Atmosphere ...
Prime Technology
• Agile and Java EE Consulting
• JSF, Spring, Seam, JPA
• Trainings (e.g. PrimeFaces, JSF 2.0)
• Outsourc...
What is this about?
• PrimeFaces Component Suite
• RIA
• Ajax Push
• TouchFaces
• iPhone/Android/Palm
• GPS Navigation
• M...
PrimeFaces
• Next Generation Component Suite




• Designed with JSF 2.0 in mind
History
• 1+ year old
• November 2008 - Start
• January 2009 - First Release 0.8.0
• 10 releases so far
• February 2010 - ...
1.0.0 and 2.0.0
Design Principles
• A good UI component should hide
  complexity but must keep flexibility
• Page author must be in full co...
UI Components
• 70+ Rich set of components
• Ajax powered or Client side
• YUI, jQuery and PrimeFaces widgets
• Unobstrusi...
Extreme UI with PrimeFaces
Simple Setup
   JSF 1.2                 JSF 2.0
• ResourceServlet   • ResourceServlet (Opt)
• p:resources       • Taglib
•...
ResourceServlet
• Streaming and Caching (js, css, images)
• Auto-Registered in Servlet 3.0 Environment

 <servlet>
  <serv...
p:resources for JSF 1.2

• Renders <link />, <script />
• No hacks to head
• Not required in JSF 2.0 -> <h:head />

  <hea...
Ready!
 <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime...
Unobstrusive UI
                      JSF Markup
<p:schedule id=”calendar ” value=”#{bean.value}” editable=”true”/>




  ...
Output
Easy Ajax
• Ajax without complexity
• Partial Page Rendering
• Flexible with Callbacks (e.g. onstart,
  oncomplete)
• Ajax...
PPR - Hello World
public class GreetingBean {
  private String name;
  //...
}



<h:form>
   <h:inputText value=”#{greeti...
p:ajax
• f:ajax extension
 <h:inputText value=”#{greetingBean.name}”>
    <p:ajax event=”blur” update=”name” />
 </h:input...
Defining Ids
• Server id                   update=”text”

• Client id                 update=”form:text”

• Comma separated...
Keywords
• @this         update=”@parent”
• @parent
• @form
• @all
• @none
Partial Processing
• Decide what to process
• process attribute
• Ajax requests
• Non-ajax requests

          process=”@t...
Partial Processing - Case 1

<h:form>
   <h:inputText id=”iamrequired” required=”true” />

  <h:selectOneMenu id=”cities”>...
Partial Processing - Case 2
<h:form>
 <h:inputText id=”iamrequired” required=”true” />

  <h:outputText id=”selected” />

...
Partial Processing - Case 3
<h:form>
  <h:inputText id=”iamrequired” required=”true” />

   <h:commandButton action=”navig...
Process vs Update
                      Restore View

                     Apply Request

Process               Validation...
Notifying Users
• Declarative
   <p:ajaxStatus>
  ! ! <f:facet name="start">
  ! ! ! <p:graphicImage value="fancyanimation...
Global vs Non-Global
• To trigger p:ajaxStatus or not
   <p:ajaxStatus>
  ! ! <f:facet name="start">
  ! ! ! <p:graphicIma...
Component specific
           callbacks
   • onstart
   • onsuccess
   • oncomplete
   • onerror

<p:commandButton onstart=...
Callback Arguments
<p:commandButton value=”Submit” action=”#{bean.save}”
 oncomplete=”handleComplete(xhr, status, args)” /...
Ajax Remoting
public class GreetingBean {
  private String name;
  //...
  public void toUpperCase() {
      name = name.t...
PPR Summary
                  No Need For
• Simple
                  Ajax Servlet Filter
• Easy to Use
                   ...
Component Suite Demo
TouchFaces
• Mobile UI Kit
• WebKit Browsers
• IPhone, Android, Palm
• Native IPhone UI
• Integrated Ajax
• Regular JSF
• ...
TouchFaces UI
• <i:application />
• <i:view />
• <i:tableView />
• <i:rowGroup />
• <i:rowItem />
• <i:switch />
TouchFaces in Action



Translate             Chat - Ajax Push       PathFinder - GPS          TwitFaces




            W...
TouchFaces Demo
Ajax Push/Comet
• Built on top of Atmosphere
• <p:push />
• CometContext.publish(...)
Atmosphere Framework
• Portable Comet Framework
• Write Once, Deploy Anywhere
• Rest support
• Servlet 3.0 support
• JSF I...
Ajax Push/Comet
Chat App in a Minute
    public class ChatController {

      private String message;

      public void send(ActionEvent ...
Pushing as JSON
Player player = new Player();
 player.setName(“Messi”);
 player.setAge(22);

CometContext.publish(player);...
Extensions: FacesTrace
• Trace/Debug tool
• Lifecycle visualizer
• Performance Tracker
• Visual component tree
FacesTrace Demo
Integrate With
• Spring
• Spring Webflow
• Seam
• CDI
• Portlets
• See svn/examples
Documentation
• User’s Guide - 350 pages
• Wiki
• Screencasts
• API & TLD Docs
• Third party articles/blogs
Community Support
• http://primefaces.prime.com.tr/forum
Enterprise Support
• 2/4 hour average response time
• Priority forum access
• Ticket based portal
• IM support over skype
...
Community
• Strong community feedback
• 500 posts per week in forum
• Join us!
Coming Soon
TreeTable                 ContextMenu




            ProgressBar




            and more.......
Finale
• cagatay.civici@prime.com.tr
• Twitter: @cagataycivici, @primefaces
• Facebook Group: 206606616332
• Blog: http://...
Questions
Upcoming SlideShare
Loading in …5
×

Primefaces Nextgen Lju

7,544 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,544
On SlideShare
0
From Embeds
0
Number of Embeds
1,255
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Primefaces Nextgen Lju

  1. 1. PrimeFaces Next Generation Component Suite Cagatay Civici
  2. 2. Cagatay Civici • JSF Expert Group Member (JSR-314) • PrimeFaces Founder and Lead • Apache MyFaces PMC Member • Atmosphere Ajax Push/Comet Committer • Regular Speaker, Author, Technical Reviewer • Co-founder of Prime Technology
  3. 3. Prime Technology • Agile and Java EE Consulting • JSF, Spring, Seam, JPA • Trainings (e.g. PrimeFaces, JSF 2.0) • Outsource Development • Istanbul/Turkey based
  4. 4. What is this about? • PrimeFaces Component Suite • RIA • Ajax Push • TouchFaces • iPhone/Android/Palm • GPS Navigation • Mock OS X with JSF • Interested?
  5. 5. PrimeFaces • Next Generation Component Suite • Designed with JSF 2.0 in mind
  6. 6. History • 1+ year old • November 2008 - Start • January 2009 - First Release 0.8.0 • 10 releases so far • February 2010 - 1.0.0 and 2.0.0
  7. 7. 1.0.0 and 2.0.0
  8. 8. Design Principles • A good UI component should hide complexity but must keep flexibility • Page author must be in full control • Do not overuse JSF extensions • Avoid extensions that can cause race conditions • Avoid bringing overhead, keep it clean!
  9. 9. UI Components • 70+ Rich set of components • Ajax powered or Client side • YUI, jQuery and PrimeFaces widgets • Unobstrusive Javascript • Customizable and Easy to Use • Compatible with “others” • Skinning
  10. 10. Extreme UI with PrimeFaces
  11. 11. Simple Setup JSF 1.2 JSF 2.0 • ResourceServlet • ResourceServlet (Opt) • p:resources • Taglib • Taglib • Ready! • Ready!
  12. 12. ResourceServlet • Streaming and Caching (js, css, images) • Auto-Registered in Servlet 3.0 Environment <servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class>org.primefaces.resource.ResourceServlet</servlet> </servlet> <servlet-mapping> <servlet-name>Resource Servlet</servlet-name> <url-pattern>/primefaces_resource/*</url-pattern> </servlet-mapping>
  13. 13. p:resources for JSF 1.2 • Renders <link />, <script /> • No hacks to head • Not required in JSF 2.0 -> <h:head /> <head> <p:resources /> </head>
  14. 14. Ready! <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> ! </h:head> <h:body> ! <p:editor /> <h:body> </html>
  15. 15. Unobstrusive UI JSF Markup <p:schedule id=”calendar ” value=”#{bean.value}” editable=”true”/> HTML Markup <div id=”calendar”></div> <script type=”text/javascript”> new PrimeFaces.widget.Schedule(‘calendar’, {editable:true}); </script>
  16. 16. Output
  17. 17. Easy Ajax • Ajax without complexity • Partial Page Rendering • Flexible with Callbacks (e.g. onstart, oncomplete) • Ajax components (e.g. autoComplete) • Lightweight, No overhead
  18. 18. PPR - Hello World public class GreetingBean { private String name; //... } <h:form> <h:inputText value=”#{greetingBean.name}” /> <h:outputText id=”name” value=”Hi: #{greetingBean.name}” /> <p:commandButton value=”Ajax Submit” update=”name”/> </h:form>
  19. 19. p:ajax • f:ajax extension <h:inputText value=”#{greetingBean.name}”> <p:ajax event=”blur” update=”name” /> </h:inputText> <h:outputText id=”name” value=”Hi: #{greetingBean.name}” />
  20. 20. Defining Ids • Server id update=”text” • Client id update=”form:text” • Comma separated update=”text,panel” • White space separated update=”text panel” • Mix update=”form:text grid” • Keywords update=”@form”
  21. 21. Keywords • @this update=”@parent” • @parent • @form • @all • @none
  22. 22. Partial Processing • Decide what to process • process attribute • Ajax requests • Non-ajax requests process=”@this”
  23. 23. Partial Processing - Case 1 <h:form> <h:inputText id=”iamrequired” required=”true” /> <h:selectOneMenu id=”cities”> <p:ajax update=”cities” process=”@this” /> </h:selectOneMenu> <h:selectOneMenu id=”suburbs” /> </h:form>
  24. 24. Partial Processing - Case 2 <h:form> <h:inputText id=”iamrequired” required=”true” /> <h:outputText id=”selected” /> <p:dataTable id=”table”> <p:column> <p:commandLink update=”selected” process=”table” /> </p:column> </p:dataTable> </h:form>
  25. 25. Partial Processing - Case 3 <h:form> <h:inputText id=”iamrequired” required=”true” /> <h:commandButton action=”navigate” immediate=”true” /> </h:form> • Making immediate obsolete <h:form> <h:inputText id=”iamrequired” required=”true” /> <p:commandButton action=”navigate” process=”@this” /> </h:form>
  26. 26. Process vs Update Restore View Apply Request Process Validations Update Model Invoke App Update Render
  27. 27. Notifying Users • Declarative <p:ajaxStatus> ! ! <f:facet name="start"> ! ! ! <p:graphicImage value="fancyanimation.gif" /> ! ! </f:facet>! ! ! ! <f:facet name="complete"> ! ! ! <h:outputText value="Request Completed" /> ! ! </f:facet> </p:ajaxStatus> • Programmatic <p:ajaxStatus onstart=”alert(‘Started’)” oncomplete=”alert(‘done’)” />
  28. 28. Global vs Non-Global • To trigger p:ajaxStatus or not <p:ajaxStatus> ! ! <f:facet name="start"> ! ! ! <p:graphicImage value="fancyanimation.gif" /> ! ! </f:facet>! ! ! ! <f:facet name="complete"> ! ! ! <h:outputText value="Request Completed" /> ! ! </f:facet> </p:ajaxStatus> • Global (Default) <p:commandButton value=”Submit” / • Silent <p:commandButton value=”Submit” global=”false” /
  29. 29. Component specific callbacks • onstart • onsuccess • oncomplete • onerror <p:commandButton onstart=”return confirm(‘Sure’)” oncomplete=”alert(‘Done’);” />
  30. 30. Callback Arguments <p:commandButton value=”Submit” action=”#{bean.save}” oncomplete=”handleComplete(xhr, status, args)” /> public void save() { RequestContext context = RequestContext.getCurrentInstance(); context.addCallbackParam(“item”, item); } • From backing bean to ajax callbacks with JSON <script type=”text/javascript”> function handleComplete(xhr, status, args) { alert(args.item.name); } </script>
  31. 31. Ajax Remoting public class GreetingBean { private String name; //... public void toUpperCase() { name = name.toUpperCase(); } } • p:remoteCommand <p:remoteCommand name=”upperCase” actionListener=#{greetingBean.toUppterCase} /> <script type=”text/javascript”> upperCase(); </script>
  32. 32. PPR Summary No Need For • Simple Ajax Servlet Filter • Easy to Use Html Parser • Flexible • Responsive Ajax ViewHandler • Lightweight Ajax StateManager • Keep it clean Ajax Regions Ajax*
  33. 33. Component Suite Demo
  34. 34. TouchFaces • Mobile UI Kit • WebKit Browsers • IPhone, Android, Palm • Native IPhone UI • Integrated Ajax • Regular JSF • Powered by jqTouch
  35. 35. TouchFaces UI • <i:application /> • <i:view /> • <i:tableView /> • <i:rowGroup /> • <i:rowItem /> • <i:switch />
  36. 36. TouchFaces in Action Translate Chat - Ajax Push PathFinder - GPS TwitFaces Weather Notes News
  37. 37. TouchFaces Demo
  38. 38. Ajax Push/Comet • Built on top of Atmosphere • <p:push /> • CometContext.publish(...)
  39. 39. Atmosphere Framework • Portable Comet Framework • Write Once, Deploy Anywhere • Rest support • Servlet 3.0 support • JSF Integration: PrimeFaces
  40. 40. Ajax Push/Comet
  41. 41. Chat App in a Minute public class ChatController { private String message; public void send(ActionEvent event) { CometContext.publish(“chat”, message); } //getters setters } <h:form> <h:inputText value=”#{chatController.message}” /> <p:commandButton value=”Send” actionListener=”#{chatController.send}” /> </h:form> <p:outputPanel id=”display” /> <p:push channel=”chat” onpublish=”handlePublish” /> <script type=”text/javascript”> function handlePublish(pushed) { ! $('#display').append(pushed.data); } </script>
  42. 42. Pushing as JSON Player player = new Player(); player.setName(“Messi”); player.setAge(22); CometContext.publish(player); function handlePublish(pushed) { //pushed.data.name; //pushed.data.age; }
  43. 43. Extensions: FacesTrace • Trace/Debug tool • Lifecycle visualizer • Performance Tracker • Visual component tree
  44. 44. FacesTrace Demo
  45. 45. Integrate With • Spring • Spring Webflow • Seam • CDI • Portlets • See svn/examples
  46. 46. Documentation • User’s Guide - 350 pages • Wiki • Screencasts • API & TLD Docs • Third party articles/blogs
  47. 47. Community Support • http://primefaces.prime.com.tr/forum
  48. 48. Enterprise Support • 2/4 hour average response time • Priority forum access • Ticket based portal • IM support over skype • JSF specific help • Special Case Support
  49. 49. Community • Strong community feedback • 500 posts per week in forum • Join us!
  50. 50. Coming Soon TreeTable ContextMenu ProgressBar and more.......
  51. 51. Finale • cagatay.civici@prime.com.tr • Twitter: @cagataycivici, @primefaces • Facebook Group: 206606616332 • Blog: http://cagataycivici.wordpress.com • HomePage: http://www.primefaces.org • Atmosphere: http://atmosphere.dev.java.net
  52. 52. Questions

×