Ajax Applications with RichFaces and JSF 2

10,733 views

Published on

RichFaces presentation given during TheServerSide Java Symposium in Las Vegas (2010)

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,733
On SlideShare
0
From Embeds
0
Number of Embeds
427
Actions
Shares
0
Downloads
273
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Ajax Applications with RichFaces and JSF 2

  1. 1. Ajax Applications with RichFaces and JSF 2 <ul><li>Max Katz </li></ul><ul><li>Senior Systems Engineer </li></ul><ul><li>Exadel </li></ul><ul><li>[email_address] </li></ul>
  2. 2. <ul><li>Max Katz </li></ul><ul><li>Senior Systems Engineer at Exadel </li></ul><ul><li>RIA strategy, development, training and consulting </li></ul><ul><li>Products: </li></ul><ul><ul><li>Exadel JavaFX plug-in for Eclipse </li></ul></ul><ul><ul><li>Exadel FacesFX (JavaFX as JSF VDL) </li></ul></ul><ul><ul><li>Exadel Fiji (JSF with JavaFX and Flex) </li></ul></ul><ul><ul><li>jsf4birt (JSF-BIRT integration) </li></ul></ul>
  3. 3. Author of Practical RichFaces (Apress) Co-author of RichFaces Dzone RefCard
  4. 4. <ul><li>Exadel </li></ul><ul><li>Products and services </li></ul><ul><li>Founded in 1998, headquarters in San Francisco Bay Area </li></ul><ul><li>300+ employees </li></ul><ul><li>Offices in: </li></ul><ul><ul><li>Concord, California - 1998 </li></ul></ul><ul><ul><li>Russia, Moscow - 1999 </li></ul></ul><ul><ul><li>Belarus, Minsk - 2002 </li></ul></ul><ul><ul><li>Belarus, Vitebsk - 2005 </li></ul></ul><ul><ul><li>Ukraine, Donetsk and Kharkov - 2006 </li></ul></ul>
  5. 5. <ul><li>Exadel Products </li></ul><ul><li>Open Source with JBoss </li></ul><ul><ul><li>RichFaces </li></ul></ul><ul><ul><li>JBoss Tools/JBoss Developer Studio </li></ul></ul><ul><li>Exadel </li></ul><ul><ul><li>JavaFX plug-in for Eclipse </li></ul></ul><ul><ul><li>FacesFX </li></ul></ul><ul><ul><li>Fiji (JSF – JavaFX/Flex integration) </li></ul></ul><ul><ul><li>jsf4birt (JSF – BIRT/Actuate integration) </li></ul></ul><ul><ul><li>Mobile ecommerce </li></ul></ul>
  6. 6. <ul><li>Exadel Services </li></ul><ul><li>Rich Enteprise Applications development </li></ul><ul><li>Custom rich components </li></ul><ul><li>Eclipse development </li></ul><ul><li>Cloud services </li></ul><ul><li>Mobile development </li></ul><ul><li>Training </li></ul>
  7. 7. <ul><li>The Plan: </li></ul><ul><li>Tell you about RichFaces 3 and 4 </li></ul><ul><li>Show you some examples </li></ul><ul><li>Tell you about other interesting JSF projects </li></ul>
  8. 8. <ul><li>RichFaces is a JSF framework: </li></ul><ul><li>JSF-Ajax components (100+) </li></ul><ul><li>Skins and themes </li></ul><ul><li>CDK (Component Development Kit) </li></ul>
  9. 9. <ul><li>100+ Ajax and rich components </li></ul><ul><li>Two tag libraries: </li></ul><ul><li>a4j: - framework-level AJAX support </li></ul><ul><li>rich: - component-level AJAX support (self contained rich components) </li></ul>
  10. 10. <ul><li>RichFaces components demo </li></ul>
  11. 11. <ul><li>Skins </li></ul><ul><li>Control look and feel via skin </li></ul><ul><li>Change skins on the fly </li></ul><ul><li>Custom skins </li></ul>
  12. 12. <ul><li>CDK (Component Development Kit) </li></ul><ul><li>Facility for creating, generating, and testing custom rich JSF components </li></ul>
  13. 13. <ul><li>What else you should know: </li></ul><ul><li>JSF 1.1, 1.2, 2 (Mojarra, MyFaces) </li></ul><ul><li>Runs in any servlet container, application server </li></ul><ul><li>Seam, Spring </li></ul><ul><li>Portal: JBoss, Liferay, WebLogic </li></ul><ul><li>Very active community, forum </li></ul><ul><li>2 books, Dzone Refcard </li></ul><ul><li>Works with 3 rd party component libraries </li></ul>
  14. 14. <ul><li>JBoss Tools/JBoss Developer Studio </li></ul>
  15. 16. <ul><li>a4j:support – attach Ajax request to any JSF component </li></ul><h:selectOneMenu value=&quot;#{bean.fruit}&quot;> <a4j:support event=&quot;onchange&quot; action=&quot;#{bean.change}&quot; reRender=&quot;info, details&quot;/> </<h:selectOneMenu> <h:panelGrid id=&quot;info&quot; > ... </h:panelGrid> <h:panelGrid id=&quot;details&quot; > ... </h:panelGrid> Can also be an EL-expression: reRender=&quot;{bean.areas}&quot;
  16. 17. <ul><li>a4j:jsFunction – Ajax request from any JS function </li></ul><table> ... <td onmouseover= &quot;update('yellow')&quot; /> ... </table> <a4j:jsFunction name=&quot;update&quot; action=&quot;#{bean.change}&quot; reRender=&quot;panel&quot;> <a4j:actionparam value=&quot;param1&quot; assignTo=&quot;#{bean.color}&quot;/> </a4j:jsFunction>
  17. 18. <ul><li>a4j:outputPanel – auto-rendered area </li></ul><h:selectOneMenu value=&quot;#{bean.fruit}&quot;> <a4j:support event=&quot;onchange&quot; action=&quot;#{bean.change}&quot;/> </<h:selectOneMenu> <a4j:outputPanel ajaxRendered=&quot;true&quot;> <h:panelGrid> ... </h:panelGrid> <h:panelGrid> ... </h:panelGrid> </a4j:outputPanel> Always Ajax rendered area
  18. 19. <ul><li>a4j:queue– controlling traffic to server </li></ul><a4j:queue requestDelay=&quot;1000&quot;/> <a4j:commandButton value=&quot;Save&quot; action=&quot;#{bean.change}&quot; reRender=&quot;details&quot;/> <h:panelGrid id=&quot;details&quot;> ... </h:panelGrid>
  19. 20. <ul><li>Hibernate Validator support </li></ul><h:inputText id=&quot;email&quot; value=&quot;#{bean.email}&quot;> <rich:ajaxValidator event=&quot;onblur&quot;/> </h:inputText> <rich:message for=&quot;email&quot;/> public class Bean { @Email private String email; // setter and getter }
  20. 21. <ul><li>JavaScript interactions during Ajax call </li></ul><h:selectOneMenu value=&quot;#{bean.drink}&quot;> <f:selectItem itemValue=&quot;Espresso&quot;/> <f:selectItem itemValue=&quot;Cappuccino&quot;/> <f:selectItem itemValue=&quot;Tea&quot;/> <a4j:support event=&quot;onchange&quot; reRender=&quot;drink&quot; onsubmit=&quot;alert('Getting new drink...')&quot; onbeforedomupdate=&quot;alert('About to update DOM')&quot; oncomplete=&quot;alert('Browser DOM updated.')&quot; /> </h:selectOneMenu>
  21. 22. <ul><li>Rich components JavaScript API </li></ul><rich:listShuttle id=&quot;list&quot; sourceValue=&quot;#{bean.source}&quot; targetValue=&quot;#{bean.target}&quot; var=&quot;items&quot;> ... </rich:listShuttle> <input type=&quot;button&quot; onclick=&quot;#{rich:component('list')}.copyAll();&quot; value=&quot;Copy All Items&quot;/>
  22. 23. <ul><li>Rich data components </li></ul><ul><li>Various data iteration components </li></ul><ul><li>Dynamic columns </li></ul><ul><li>Column and row span </li></ul><ul><li>Specific row(s) update via Ajax </li></ul>Update via Ajax
  23. 24. <ul><li>JSF 2 </li></ul>
  24. 25. <ul><li>JSF 2 – major upgrade! </li></ul><ul><li>Standard UI technology in Java EE 6 </li></ul><ul><li>Facelets </li></ul><ul><li>Ajax </li></ul><ul><li>Composite components </li></ul><ul><li>GET requests </li></ul><ul><li>Annotations </li></ul><ul><li>And more... </li></ul>
  25. 26. <ul><li><f:ajax> </li></ul><ul><li>Inspired by <a4j:support> from RichFaces </li></ul><h:inputText value=&quot;#{bean.text}&quot; > <f:ajax event=&quot;keyup&quot; execute=&quot;@form&quot; listener=&quot;#{bean.countListener}&quot; render=&quot;id2 id2&quot; /> </h:inputText>
  26. 27. 4
  27. 28. JSF 1.2 JSF 2 RichFaces 3.3.2 RichFaces 3.3.3 (Mar 2010) RichFaces 4 (Summer 2010)
  28. 29. <ul><li>How RichFaces 4 extends the capabilities of JSF 2? </li></ul>
  29. 30. <ul><li>With RichFaces 4 you get: </li></ul><ul><li>Two tag libraries: </li></ul><ul><ul><li>a4j:* </li></ul></ul><ul><ul><li>rich:* </li></ul></ul><ul><li>Skins </li></ul><ul><li>CDK (Component Development Kit) </li></ul><ul><li>Plus advanced features, customization </li></ul>
  30. 31. <ul><li>f:ajax + RichFaces = a4j:ajax </li></ul><ul><li>Plus: </li></ul><ul><li>render – can be bound to an EL and resolved during request </li></ul><ul><li>limitToRender – doesn't update </li></ul><ul><li>bypassUpdates – skip Update Model and Invoke Application phases for validation </li></ul>
  31. 32. <h:inputText value=&quot;#{bean.text}&quot; > <a4j:support event=&quot;onkeyup&quot; action=&quot;#{bean.countAction}&quot; reRender=&quot;id1, id2&quot;/> </h:inputText> <h:inputText value=&quot;#{bean.text}&quot; > <f:ajax event=&quot;keyup&quot; execute=&quot;@form&quot; listener=&quot;#{bean.countListener}&quot; render=&quot;id2 id2&quot; /> </h:inputText> <h:inputText value=&quot;#{bean.text}&quot; > <a4j:ajax event=&quot;keyup&quot; listener=&quot;#{bean.countListener}&quot; render=&quot;id2, id2&quot; /> </h:inputText> RichFaces 3.x JSF 2 RichFaces 4
  32. 33. <ul><li>a4j:outputPanel - auto-rendered areas </li></ul><ul><li>a4j:queue - controlling traffic </li></ul><ul><li>a4j:status - status indicator for Ajax request </li></ul><ul><li>a4j:poll - periodically sends Ajax request </li></ul><ul><li>a4j:jsFunction - sends Ajax request from any JavaScript function </li></ul><ul><li>a4:region - advanced features to mark what to process on the server </li></ul>
  33. 34. <ul><li>80+ rich components </li></ul>
  34. 35. <ul><li>Skins </li></ul><ul><li>Control entire application look and feel skin </li></ul><ul><li>Create and edit skins </li></ul><ul><li>Overwrite CSS generated by skin </li></ul>
  35. 36. <ul><li>CDK (Component Development Kit) </li></ul><ul><li>Simple to use </li></ul><ul><li>Need “real” JSF components </li></ul>
  36. 37. <ul><li>Key changes in RichFaces 4 </li></ul><ul><li>Consistency and consolidation </li></ul><ul><li>Performance tuning and review </li></ul><ul><li>New custom behaviors </li></ul><ul><li>Dynamic resource extensions </li></ul><ul><li>Semantic HTML markup </li></ul><ul><li>Updated skinning </li></ul><ul><li>Component libraries interoperability </li></ul><ul><li>New, simpler to use CDK </li></ul><ul><li>Updated documentation </li></ul><ul><li>Module build system for easy contribution </li></ul><ul><li>More frequent releases </li></ul>
  37. 38. <ul><li>Ways to communicate </li></ul><ul><li>Twitter </li></ul><ul><li>http://twitter.com/richfaces </li></ul><ul><li>Project updates, blogs, announcement </li></ul><ul><li>IRC </li></ul><ul><li>#richfaces @ irc.freenode.net </li></ul><ul><li>Nearly always up for questions, comments </li></ul><ul><li>Meetings </li></ul><ul><li>Weekly Meeting for design, features, planning, etc... </li></ul><ul><li>http://www.jboss.org/richfaces </li></ul>
  38. 39. <ul><li>RichFaces web site </li></ul>
  39. 40. <ul><li>Other JSF projects </li></ul>
  40. 41. <ul><li>Fiji: JSF-JavaFX integration </li></ul><fiji:javaFx archive=&quot;/javafx/chart.jar&quot; applicationClass=&quot;com.exadel.fiji.Chart&quot;/>
  41. 42. <ul><li>Fiji: JSF-Flex integration </li></ul><fiji:lineChart value=&quot;#{bean.data}&quot;/>
  42. 43. <ul><li>FacesFX – JavaFX as JSF VDL (View Description Language) </li></ul><ul><li>JavaFX script is a very powerful UI language </li></ul>
  43. 44. JavaFX nodes for JSF component Value-expression
  44. 46. <ul><li>jsf4birt </li></ul><ul><li>Wrap any BIRT or Actuate report as JSF component </li></ul><rich:panel header=&quot;BIRT Report as JSF component&quot; style=&quot;width:790px&quot;> <birt:birtWrapper id=&quot;report&quot; reportDesign=&quot;/Reports/new_report.rptdesign&quot;> <f:param name=&quot;Text&quot; value=&quot;#{bean.text}&quot;/> <f:param name=&quot;X&quot; value=&quot;#{bean.x}&quot; /> </birt:birtWrapper> </rich:panel>
  45. 47. <ul><li>BIRT report as JSF component </li></ul>
  46. 48. <ul><li>Flamingo </li></ul><ul><li>Integrates Java EE, Seam, Spring back end with rich UI front ends JavaFX, Flex, Swing </li></ul><ul><li>Flamingo Mobile </li></ul><ul><li>Integrates Java EE, Seam, Spring back end with mobile (iPhone, Android, BlackBerry) </li></ul>
  47. 49. <ul><li>JavaFX plug-in for Eclipse </li></ul><ul><li>Eclipse plug-in for developing JavaFX applications </li></ul><ul><li>Open source, free </li></ul>
  48. 50. <ul><li>Exadel offers enterprise RichFaces support, and development services </li></ul><ul><li>Custom on-site 1-2 days RichFaces training </li></ul>
  49. 51. <ul><li>Best way to get started: </li></ul><ul><li>Components showcase, source code and more: http://livedemo.exadel.com/richfaces-demo/welcome.jsf </li></ul><ul><li>Getting started article (JavaLobby.com): http://tiny.cc/richfacesstart </li></ul><ul><li>4-part webinar series: http://tiny.cc/richfaceswebinar </li></ul><ul><li>Photo Album application (with Seam): http://livedemo.exadel.com/photoalbum </li></ul><ul><li>Visit the forum: http://jboss.org/richfaces </li></ul>
  50. 52. <ul><li>Blog </li></ul><ul><li>http://mkblog.exadel.com </li></ul><ul><li>Twitter </li></ul><ul><li>http://twitter.com/maxkatz </li></ul>

×