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