PrimeFaces Next Generation Component Suite Cagatay Civici
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
Prime Technology Agile and Java EE Consulting JSF, Spring, Seam, JPA Trainings (e.g. PrimeFaces, JSF 2.0) Outsource Development Istanbul/Turkey based 4
What is this talk all about? PrimeFaces Component Suite RIA Ajax Push TouchFaces iphone/android/palm GPS Navigation Mock OS X with JSF Interested? 5
PrimeFaces Next Generation Component Suite Designed with JSF 2.0 in mind 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
1.0.0 and 2.0.0 8
PrimeFaces 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
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
Extreme UI with PrimeFaces 11
Simple Setup JSF 1.2 JSF 2.0 ResourceServlet <p:resources /> Taglib Ready! ResourceServlet (Optional) Taglib Ready! 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
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
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
Unobstrusive UI JSF Markup <p:schedule id= calendar value= #{bean.value} editable= true /> <div id= calendar ></div> HTML Markup <script type= text/javascript > new PrimeFaces.widget.Schedule( calendar, {editable:true}); </script> 16
Output 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
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
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
Defining Ids Server id Client id Comma separated White space separated Mix Keywords update= text update= form:text update= text, panel update= text panel update= form:text grid update= @form 21
Keywords @this @parent @form @all @none update= @parent 22
Partial Processing Decide what to process process attribute Ajax requests Non-ajax requests process= @this 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
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
Partial Processing - Case 3 Making immediate obsolete <h:form> <h:inputtext id= iamrequired required= true /> <h:commandbutton action= navigate immediate= true /> </h:form> <h:form> <h:inputtext id= iamrequired required= true /> <p:commandbutton action= navigate process= @this /> </h:form> 26
Process vs Update Restore View Apply Request Process Validations Model Update Invoke App Update Render Response 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
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) Silent <p:commandbutton value= Submit /> <p:commandbutton value= Submit global= false /> 29
Component specific callbacks onstart onsuccess oncomplete onerror <p:commandbutton onstart= return confirm( Sure ) oncomplete= alert( Done ); /> 30
Callback Arguments From backing bean to ajax callbacks with JSON <p:commandbutton value= Submit action= #{bean.save} oncomplete= handlecomplete(xhr, status, args) /> public void save() { RequestContext context = RequestContext.getCurrentInstance(); context.addcallbackparam( item, item); } <script type= text/javascript > function handlecomplete(xhr, status, args) { alert(args.item.name); } </script> 31
Ajax Remoting p:remotecommand public class GreetingBean { private String name; //... public void touppercase() { name = name.touppercase(); } } <p:remotecommand name= uppercase actionlistener=#{greetingbean.toupptercase} /> <script type= text/javascript > uppercase(); </script> 32
PPR Summary Simple Easy to Use Flexible Responsive Lightweight Keep it clean No Need For Ajax Servlet Filter HTML Parser Ajax ViewHandler Ajax StateManager Ajax Regions Ajax * 33
Component Suite Demo 34
TouchFaces Mobile UI Kit WebKit Browsers IPhone, Android, Palm Native IPhone UI Integrated Ajax Regular JSF Powered by jqtouch 35
TouchFaces UI <i:application /> <i:view /> <i:tableview /> <i:rowgroup /> <i:rowitem /> <i:switch /> 36
TouchFaces in Action Translate Chat - Ajax Push PathFinder - GPS TwitFaces Weather Notes News 37
TouchFaces Demo 38
Ajax Push/Comet Built on top of Atmosphere <p:push /> CometContext.publish(...) 39
Atmosphere Framework Portable Comet Framework Write Once, Deploy Anywhere Rest support Servlet 3.0 support JSF Integration: PrimeFaces 40
Ajax Push/Comet 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
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
Extensions: FacesTrace Trace/Debug tool Lifecycle visualizer Performance Tracker Visual component tree 44
FacesTrace Demo 45
Integrate With Spring Spring Webflow Seam CDI Portlets See svn/examples 46
Documentation User s Guide - 350 pages Wiki Screencasts API & TLD Docs Third party articles/blogs 47
Community Support http://primefaces.prime.com.tr/forum 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
Community Strong community feedback 500 posts per week in forum Join us! 50
Coming Soon TreeTable ContextMenu ProgressBar and more... 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
Questions 53