PrimeFaces. Next Generation Component Suite. Cagatay Civici

Size: px

Start display at page:

Download "PrimeFaces. Next Generation Component Suite. Cagatay Civici"

Jemimah Pearson
9 years ago
Views:

2 PrimeFaces Next Generation Component Suite Cagatay Civici

3 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

4 Prime Technology Agile and Java EE Consulting JSF, Spring, Seam, JPA Trainings (e.g. PrimeFaces, JSF 2.0) Outsource Development Istanbul/Turkey based 4

5 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

6 PrimeFaces Next Generation Component Suite Designed with JSF 2.0 in mind 6

7 History 1+ year old November Start January First Release releases so far February and

8 1.0.0 and

9 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

10 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

11 Extreme UI with PrimeFaces 11

12 Simple Setup JSF 1.2 JSF 2.0 ResourceServlet <p:resources /> Taglib Ready! ResourceServlet (Optional) Taglib Ready! 12

13 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

14 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

15 Ready! <html xmlns=" xmlns:h=" xmlns:p=" <h:head> </h:head> <h:body> <p:editor /> <h:body> </html> 15

16 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

17 Output 17

18 Easy Ajax Ajax without complexity Partial Page Rendering Flexible with Callbacks (e.g. onstart, oncomplete) Ajax components (e.g. autocomplete) Lightweight, No overhead 18

19 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

20 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

21 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 21

22 22

23 Partial Processing Decide what to process process attribute Ajax requests Non-ajax requests 23

24 Partial Processing - Case 1 <h:form> <h:inputtext id= iamrequired required= true /> <h:selectonemenu id= cities > <p:ajax update= cities /> </h:selectonemenu> <h:selectonemenu id= suburbs /> </h:form> 24

25 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

26 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 /> </h:form> 26

27 Process vs Update Restore View Apply Request Process Validations Model Update Invoke App Update Render Response 27

28 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

29 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

30 Component specific callbacks onstart onsuccess oncomplete onerror <p:commandbutton onstart= return confirm( Sure ) oncomplete= alert( Done ); /> 30

31 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

32 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

33 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

34 Component Suite Demo 34

35 TouchFaces Mobile UI Kit WebKit Browsers IPhone, Android, Palm Native IPhone UI Integrated Ajax Regular JSF Powered by jqtouch 35

36 TouchFaces UI <i:application /> <i:view /> <i:tableview /> <i:rowgroup /> <i:rowitem /> <i:switch /> 36

37 TouchFaces in Action Translate Chat - Ajax Push PathFinder - GPS TwitFaces Weather Notes News 37

38 TouchFaces Demo 38

39 Ajax Push/Comet Built on top of Atmosphere <p:push /> CometContext.publish(...) 39

40 Atmosphere Framework Portable Comet Framework Write Once, Deploy Anywhere Rest support Servlet 3.0 support JSF Integration: PrimeFaces 40

41 Ajax Push/Comet 41

42 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

43 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

44 Extensions: FacesTrace Trace/Debug tool Lifecycle visualizer Performance Tracker Visual component tree 44

45 FacesTrace Demo 45

46 Integrate With Spring Spring Webflow Seam CDI Portlets See svn/examples 46

47 Documentation User s Guide pages Wiki Screencasts API & TLD Docs Third party articles/blogs 47

48 Community Support 48

49 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

50 Community Strong community feedback 500 posts per week in forum Join us! 50

51 Coming Soon TreeTable ContextMenu ProgressBar and more... 51

52 Facebook Group: Blog: HomePage: Atmosphere: 52

53 Questions 53

ADF. Joe Huang Joe Huang Senior Principal Product Manager, Mobile Development Platform, Oracle Application Development Tools

ADF. Joe Huang Joe Huang Senior Principal Product Manager, Mobile Development Platform, Oracle Application Development Tools Developing for Mobile Devices with Oracle ADF Joe Huang Joe Huang Senior Principal Product Manager, Mobile Development Platform, Oracle Application Development Tools Agenda Overview ADF Mobile Browser