Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ajax Applications with RichFaces and JSF 2 <ul><li>Max Katz </li></ul><ul><li>Senior Systems Engineer </li></ul><ul><li>Ex...
<ul><li>Max Katz </li></ul><ul><li>Senior Systems Engineer at Exadel </li></ul><ul><li>RIA strategy, development, training...
Author of  Practical RichFaces (Apress) Co-author of RichFaces Dzone RefCard
<ul><li>Exadel </li></ul><ul><li>Products and services </li></ul><ul><li>Founded in 1998, headquarters in San Francisco Ba...
<ul><li>Exadel Products </li></ul><ul><li>Open Source with JBoss </li></ul><ul><ul><li>RichFaces </li></ul></ul><ul><ul><l...
<ul><li>Exadel Services </li></ul><ul><li>Rich Enteprise Applications development </li></ul><ul><li>Custom rich components...
<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><u...
<ul><li>RichFaces is a JSF framework: </li></ul><ul><li>JSF-Ajax components (100+) </li></ul><ul><li>Skins and themes </li...
<ul><li>100+ Ajax and rich components </li></ul><ul><li>Two tag libraries: </li></ul><ul><li>a4j: - framework-level AJAX s...
<ul><li>RichFaces components demo </li></ul>
<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...
<ul><li>CDK (Component Development Kit) </li></ul><ul><li>Facility for creating, generating, and testing custom rich JSF c...
<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 serv...
<ul><li>JBoss Tools/JBoss Developer Studio </li></ul>
 
<ul><li>a4j:support – attach Ajax request to any JSF component </li></ul><h:selectOneMenu value=&quot;#{bean.fruit}&quot;>...
<ul><li>a4j:jsFunction – Ajax request from any JS function </li></ul><table> ... <td onmouseover= &quot;update('yellow')&q...
<ul><li>a4j:outputPanel – auto-rendered area </li></ul><h:selectOneMenu value=&quot;#{bean.fruit}&quot;> <a4j:support even...
<ul><li>a4j:queue– controlling traffic to server </li></ul><a4j:queue requestDelay=&quot;1000&quot;/> <a4j:commandButton v...
<ul><li>Hibernate Validator support </li></ul><h:inputText id=&quot;email&quot;    value=&quot;#{bean.email}&quot;>   <ric...
<ul><li>JavaScript interactions during Ajax call </li></ul><h:selectOneMenu value=&quot;#{bean.drink}&quot;> <f:selectItem...
<ul><li>Rich components JavaScript API </li></ul><rich:listShuttle id=&quot;list&quot; sourceValue=&quot;#{bean.source}&qu...
<ul><li>Rich data components </li></ul><ul><li>Various data iteration components </li></ul><ul><li>Dynamic columns </li></...
<ul><li>JSF  2 </li></ul>
<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><f:ajax> </li></ul><ul><li>Inspired by <a4j:support> from RichFaces </li></ul><h:inputText value=&quot;#{bean.text...
4
JSF 1.2 JSF 2 RichFaces 3.3.2 RichFaces 3.3.3 (Mar 2010) RichFaces 4 (Summer 2010)
<ul><li>How RichFaces 4 extends the capabilities of JSF 2?  </li></ul>
<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>...
<ul><li>f:ajax + RichFaces = a4j:ajax </li></ul><ul><li>Plus: </li></ul><ul><li>render  – can be bound to an EL and resolv...
<h:inputText value=&quot;#{bean.text}&quot; > <a4j:support event=&quot;onkeyup&quot;    action=&quot;#{bean.countAction}&q...
<ul><li>a4j:outputPanel  - auto-rendered areas </li></ul><ul><li>a4j:queue  - controlling traffic </li></ul><ul><li>a4j:st...
<ul><li>80+ rich components </li></ul>
<ul><li>Skins </li></ul><ul><li>Control entire application look and feel skin </li></ul><ul><li>Create and edit skins </li...
<ul><li>CDK (Component Development Kit) </li></ul><ul><li>Simple to use </li></ul><ul><li>Need “real” JSF components </li>...
<ul><li>Key changes in RichFaces 4 </li></ul><ul><li>Consistency and consolidation </li></ul><ul><li>Performance tuning an...
<ul><li>Ways to communicate </li></ul><ul><li>Twitter </li></ul><ul><li>http://twitter.com/richfaces </li></ul><ul><li>Pro...
<ul><li>RichFaces web site </li></ul>
<ul><li>Other JSF projects  </li></ul>
<ul><li>Fiji:  JSF-JavaFX integration </li></ul><fiji:javaFx archive=&quot;/javafx/chart.jar&quot;  applicationClass=&quot...
<ul><li>Fiji:  JSF-Flex integration </li></ul><fiji:lineChart value=&quot;#{bean.data}&quot;/>
<ul><li>FacesFX  – JavaFX as JSF VDL (View Description Language) </li></ul><ul><li>JavaFX script is a very powerful UI lan...
JavaFX nodes  for JSF component Value-expression
 
<ul><li>jsf4birt </li></ul><ul><li>Wrap any BIRT or Actuate report as JSF component </li></ul><rich:panel header=&quot;BIR...
<ul><li>BIRT report as JSF component </li></ul>
<ul><li>Flamingo </li></ul><ul><li>Integrates Java EE, Seam, Spring back end with rich UI front ends JavaFX, Flex, Swing <...
<ul><li>JavaFX plug-in for Eclipse </li></ul><ul><li>Eclipse plug-in for developing JavaFX applications </li></ul><ul><li>...
<ul><li>Exadel offers enterprise  RichFaces  support, and development services </li></ul><ul><li>Custom on-site 1-2 days  ...
<ul><li>Best way to get started:  </li></ul><ul><li>Components showcase, source code and more:  http://livedemo.exadel.com...
<ul><li>Blog </li></ul><ul><li>http://mkblog.exadel.com </li></ul><ul><li>Twitter </li></ul><ul><li>http://twitter.com/max...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Oracle Scene Spring 2015
Next
Download to read offline and view in fullscreen.

3

Share

Download to read offline

Ajax Applications with RichFaces and JSF 2

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

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>
  • codeLearner

    Oct. 28, 2014
  • afst

    Jul. 22, 2014
  • mhamedamazigh2

    Nov. 23, 2012

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

Views

Total views

11,257

On Slideshare

0

From embeds

0

Number of embeds

427

Actions

Downloads

274

Shares

0

Comments

0

Likes

3

×