Ajax Applications with RichFaces and JSF 2
Upcoming SlideShare
Loading in...5
×
 

Ajax Applications with RichFaces and JSF 2

on

  • 12,507 views

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

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

Statistics

Views

Total Views
12,507
Views on SlideShare
12,100
Embed Views
407

Actions

Likes
2
Downloads
262
Comments
0

16 Embeds 407

http://mkblog.exadel.com 208
http://www.slideshare.net 82
http://www.jboss.org 72
http://redhat.sys-con.com 11
http://java.sys-con.com 7
http://www.jsfsummit.com 5
https://java.sys-con.com 5
http://maxkatz.sys-con.com 5
http://planet.jboss.org 3
http://www.linkedin.com 2
http://static.slidesharecdn.com 2
http://www.nofluffjuststuff.com 1
https://net.viada.de 1
http://ajax.sys-con.com 1
http://jboss.org 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ajax Applications with RichFaces and JSF 2 Ajax Applications with RichFaces and JSF 2 Presentation Transcript

  • Ajax Applications with RichFaces and JSF 2
    • Max Katz
    • Senior Systems Engineer
    • Exadel
    • [email_address]
    • Max Katz
    • Senior 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)
  • Author of Practical RichFaces (Apress) Co-author of RichFaces Dzone RefCard
    • Exadel
    • Products 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
    • Exadel Products
    • Open 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
    • Exadel Services
    • Rich Enteprise Applications development
    • Custom rich components
    • Eclipse development
    • Cloud services
    • Mobile development
    • Training
    • The Plan:
    • Tell you about RichFaces 3 and 4
    • Show you some examples
    • Tell you about other interesting JSF projects
    • RichFaces is a JSF framework:
    • JSF-Ajax components (100+)
    • Skins and themes
    • CDK (Component Development Kit)
    • 100+ Ajax and rich components
    • Two tag libraries:
    • a4j: - framework-level AJAX support
    • rich: - component-level AJAX support (self contained rich components)
    • RichFaces components demo
    • Skins
    • Control look and feel via skin
    • Change skins on the fly
    • Custom skins
    • CDK (Component Development Kit)
    • Facility for creating, generating, and testing custom rich JSF components
    • 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 3 rd party component libraries
    • JBoss Tools/JBoss Developer Studio
  •  
    • a4j:support – attach Ajax request to any JSF component
    <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;
    • a4j:jsFunction – Ajax request from any JS function
    <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>
    • a4j:outputPanel – auto-rendered area
    <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
    • a4j:queue– controlling traffic to server
    <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>
    • Hibernate Validator support
    <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 }
    • JavaScript interactions during Ajax call
    <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>
    • Rich components JavaScript API
    <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;/>
    • Rich data components
    • Various data iteration components
    • Dynamic columns
    • Column and row span
    • Specific row(s) update via Ajax
    Update via Ajax
    • JSF 2
    • JSF 2 – major upgrade!
    • Standard UI technology in Java EE 6
    • Facelets
    • Ajax
    • Composite components
    • GET requests
    • Annotations
    • And more...
    • <f:ajax>
    • Inspired by <a4j:support> from RichFaces
    <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>
  • 4
  • JSF 1.2 JSF 2 RichFaces 3.3.2 RichFaces 3.3.3 (Mar 2010) RichFaces 4 (Summer 2010)
    • How RichFaces 4 extends the capabilities of JSF 2?
    • With RichFaces 4 you get:
    • Two tag libraries:
      • a4j:*
      • rich:*
    • Skins
    • CDK (Component Development Kit)
    • Plus advanced features, customization
    • f:ajax + RichFaces = a4j:ajax
    • Plus:
    • 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
  • <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
    • 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
    • 80+ rich components
    • Skins
    • Control entire application look and feel skin
    • Create and edit skins
    • Overwrite CSS generated by skin
    • CDK (Component Development Kit)
    • Simple to use
    • Need “real” JSF components
    • 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
    • Ways to communicate
    • Twitter
    • http://twitter.com/richfaces
    • Project updates, blogs, announcement
    • IRC
    • #richfaces @ irc.freenode.net
    • Nearly always up for questions, comments
    • Meetings
    • Weekly Meeting for design, features, planning, etc...
    • http://www.jboss.org/richfaces
    • RichFaces web site
    • Other JSF projects
    • Fiji: JSF-JavaFX integration
    <fiji:javaFx archive=&quot;/javafx/chart.jar&quot; applicationClass=&quot;com.exadel.fiji.Chart&quot;/>
    • Fiji: JSF-Flex integration
    <fiji:lineChart value=&quot;#{bean.data}&quot;/>
    • FacesFX – JavaFX as JSF VDL (View Description Language)
    • JavaFX script is a very powerful UI language
  • JavaFX nodes for JSF component Value-expression
  •  
    • jsf4birt
    • Wrap any BIRT or Actuate report as JSF component
    <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>
    • BIRT report as JSF component
    • Flamingo
    • Integrates Java EE, Seam, Spring back end with rich UI front ends JavaFX, Flex, Swing
    • Flamingo Mobile
    • Integrates Java EE, Seam, Spring back end with mobile (iPhone, Android, BlackBerry)
    • JavaFX plug-in for Eclipse
    • Eclipse plug-in for developing JavaFX applications
    • Open source, free
    • Exadel offers enterprise RichFaces support, and development services
    • Custom on-site 1-2 days RichFaces training
    • Best way to get started:
    • Components showcase, source code and more: http://livedemo.exadel.com/richfaces-demo/welcome.jsf
    • Getting started article (JavaLobby.com): http://tiny.cc/richfacesstart
    • 4-part webinar series: http://tiny.cc/richfaceswebinar
    • Photo Album application (with Seam): http://livedemo.exadel.com/photoalbum
    • Visit the forum: http://jboss.org/richfaces
    • Blog
    • http://mkblog.exadel.com
    • Twitter
    • http://twitter.com/maxkatz