Date post: | 22-May-2015 |
Category: |
Technology |
Upload: | max-katz |
View: | 9,395 times |
Download: | 6 times |
Exadel
#{Ajax Applications with JSF 2 and New RichFaces 4}
TheServerSide Java SymposiumMarch 18th, 2011
Max KatzExadel
Exadel
About Me
● Senior Systems Engineer at Exadel
◦ JSF, RichFaces, Java EE
◦ exadel.org – open source projects and community
◦ Tiggr (http://gotiggr.com) – interactive Web and mobile HTML prototypes
Exadel
Author of Practical RichFaces
(Apress)
4
Lead-author of Practical RichFaces, 2/e
(Apress, June 2011)
New!
Exadel
New!
Exadel
exadel.org – open source projects and community
● Exadel Flamingo
● Exadel Fiji
● Exadel jsf4birt
● Exadel JavaFX Plug-in for Eclipse
Exadel
Tiggr
Creating interactive Web and mobile HTML prototypes
[http://gotiggr.com]
Exadel
Exadel
Web Preview [desktop][gotiggr.com/preview/6669]
Web Preview [mobile][gotiggr.com/preview/5673]
Exadel
mkblog.exadel.com
@maxkatz
Exadel
Exadel
● Products and services company
● Founded in 1998, headquarters in San Francisco Bay Area (Concord)
● 350+ employees
Exadel
Exadel Locations – Europe
Exadel
Products
● Open Source with JBoss
◦ RichFaces
◦ JBoss Tools/JBoss Developer Studio
● exadel.org
◦ Flamingo
◦ Fiji (JSF – JavaFX/Flex integration)
◦ jsf4birt (JSF – BIRT/Actuate integration)
◦ JavaFX Plug-in for Eclipse
● Tiggr – interactive Web and mobile HTML prototypes
Exadel
Services
● Rich enterprise application development
● Eclipse development
● Custom rich component development
● Mobile development
● Training
● Most projects are done in Eastern Europe
Exadel
The Plan
● Ajax features in JSF 2
● The new RichFaces 4
Exadel
JavaServer Faces™ (JSF) is the standard component-based user interface (UI)
framework for the Java EE (5 & 6) platform
JSF 1.2 Java EE 6
JSF 2 Java EE 6
Exadel
JSF 2
● JSF 2 is a major upgrade over JSF 1.x
● Many features, ideas taken from projects such as Seam and RichFaces, and others
Exadel
● Facelets
● Composite components
● Implicit navigation
● GET support
◦ h:link, h:button
● Resource loading
JSF 2 new features
● New scopes
◦ Flash, View, custom
● Configuration via annotations
● Bean Validation support
● Basic Ajax
Exadel
JSF 2 <f:ajax>
● Very basic Ajax functionality
● Greatly inspired by RichFaces 3 <a4j:support> tag
● Ajax in JSF in 3 easy steps:
1. Firing an Ajax request
2.Partial view processing
3.Partial view rendering
Exadel
<h:form> <h:input value="#{bean.word}"/> <h:commandButton> <f:ajax event="click" execute="@form" listener="#{bean.ajaxListener}" render="out1 out2"/> </h:commandButton> <h:input value="#{bean.text}" id="out1"/> <h:input value="#{bean.phrase}" id="out2"/></h:form>
1
2
3
Exadel
<h:form> <h:input value="#{bean.word}"/> <h:selectOneMenu value="#{bean.selected}"> <f:selectItems value="#{bean.items}"/> <f:ajax event="change" execute="@form" listener="#{bean.ajaxListener}" render="@form"/> </h:commandButton> <h:input value="#{bean.text}" id="out1"/> <h:input value="#{bean.phrase}" id="out2"/></h:form>
1
2
3
Exadel
Attribute Value
eventEvent on which to fire the Ajax request
execute
@all@this (default)@form@noneId'sEL
render
@all@this@form@none (default)Id's EL
Important <f:ajax> attributes
Exadel
That's good, but where do you get rich components and
more?
A rich component framework is still(?) needed to build
real-world Ajax applications.
Exadel
RichFaces 4 – rich JSF framework
● JSF 2 based
● Components
◦ a4j:* tag library (core)
◦ rich:* tag library (UI)
● Skins
● Client-side validation (Bean Validation/JSR 303 based)
● CDK – Component Development Kit
Exadel
RichFaces versions
Version JSF 1.1 JSF 1.2 JSF 2
RichFaces 3.1.x •RichFaces 3.3.3* • •RichFaces 4 •* Note: RichFaces 3.3.3 has basic JSF 2 support
Exadel
Deploy on any server which supports JSF 2
Any browser
Exadel
RichFaces history
2005: started by Alexander Smirnov
2005-2007: Developed by Exadel Ajax4jsf - open source, free RichFaces - commercial
2007: JBoss takes over
Exadel team continues to develop the framework, project is known as RichFaces
Exadel
Just tell me when RichFaces 4 is going to be released?
Exadel
Good, now tell me what's really new and improved in
RichFaces 4?
Exadel
RichFaces 4
JavaScript in RichFaces is now entirely based on the
popular jQuery library.
Exadel
RichFaces 4
● All components are reviewed for consistency, usability
● Redesigned following semantic HTML principles
● Server-side and client-side performance optimization
● Strict code clean-up and review
Exadel
RichFaces 4
● New client-side validation based on Bean Validation (JSR 303)
Exadel
RichFaces 4
● New and easy to use CDK (Component Development Kit)
● Quickly build your own custom rich components
Exadel
Cloud deployment
● Google App Engine (GAE)
● Amazon EC2
● Special Maven-based plug-in available
Exadel
RichFaces <a4j:ajax>
● 100% based on standard <f:ajax>
● Just replace f: with a4j: and get exactly the same functionality
● But, you get extra features...<h:commandButton> <f:ajax execute="@form" render="output"/></h:commandButton>
<h:commandButton> <a4j:ajax execute="@form" render="output"/></h:commandButton>
Exadel
Attribute Description
onbegin JavaScript to execute before Ajax request
onbeforedomupdateJavaScript to execute after response comes back but before DOM update
oncomplete JavaScript to execute after DOM update
bypassUpdatesSkips Update Model and Invoke Application phases, useful for form validation
limitRenderSkips all a4j:outputPanel ajaxRender=”true” areas. Only renders what is set in current render
status Status to display during Ajax request
<a4j:ajax> attributes
Exadel
That's not all, there are more RichFaces goodies...
Exadel
RichFaces 4 core – firing an Ajax request
● a4j:ajax
● a4j:commandButton
● a4j:commandLink
● a4j:jsFunction
● a4j:poll
● a4j:push
Exadel
<a4j:commandButton> – Ajax button
/* standard button with f:ajax */<h:commandButton value="Save" action="#{bean.action}"> <f:ajax execute="@form" render="output"/></h:commandButton>
/* RichFaces button */<a4j:commandButton value="Save" execute="@form" render="output" action="#{bean.action}" />
Exadel
<table> ... <td onmouseover="update('yellow')"/> ...</table><h:form> <a4j:jsFunction name="update" action="#{bean.change}" reRender="panel"> <a4j:param value="param1" assignTo="#{bean.color}"/> </a4j:jsFunction><h:form>
<a4j:jsFunction> – fire Ajax request from any JavaScript function
Exadel
<a4j:poll> – periodically send an Ajax request
<a4j:poll interval="1000" action="#{bean.count}"
render="output" enabled="#{bean.pollEnabled}" />
<h:panelGrid id="output">...</h:panelGrid>
Exadel
<a4j:push>
● Server-side events are pushed to client using Comet or WebSockets.
● Implemented using Atmosphere
● Provides excellent integration with EE containers, and advanced messaging services
<a4j:push address="topic@chat" ondataavailable="alert(event.rf.data)" />
Exadel
RichFace 4 core – advanced features and rendering● a4j:outputPanel
● limitRender attribute
● render=”{bean.renderList}”
● a4j:param
Exadel
<a4j:outputPanel> – auto rendered panel
<h:selectOneMenu value="#{bean.fruit}"> <a4j:ajax listener="#{bean.change}"/></<h:selectOneMenu><a4j:outputPanel ajaxRendered="true"> <h:panelGrid> ... </h:panelGrid> <h:panelGrid> ... </h:panelGrid></a4j:outputPanel>
Rendered on every Ajax request
Exadel
Advanced rendering options: limitRender
<a4j:commandButton render="output"/><a4j:commandButton render="output" limitRender="true"/>
<h:panelGrid id="output">...</h:panelGrid>
<a4j:outputPanel ajaxRendered="true">...</a4j:outputPanel>
Turns off all auto rendered panels,only renders what is set in currentrender
Exadel
render=”#{bean.renderList}”
1) Ajax request sent
2) Component id's to be rendered resolved
3) Component id's are rendered into the page
4) 2nd Ajax request is sent. In this request the components (resolved in step 2 are sent with request) will be rendered
1) Ajax request sent
2) Component id's to be rendered resolved
3) Component id's are rendered
JSF RichFaces
Exadel
<a4j:param>
● Similar to <f:param> but simpler as it also assigns the value to a bean property automatically
<a4j:commandButton value="Save"> <a4j:param name="product" value="1009"/></a4j:commandButton>
public class Bean { private String product; public void setProduct (String product) {...} public String getProduct () {...}}
Exadel
RichFace 4 core – advanced processing● a4j:region
● bypassUpdates attribute
Exadel
<a4j:region> – declaratively define execute region<h:form> <a4j:region> <h:inputText /> <h:inputText /> <a4j:commandButton execute="@region"/> <a4j:region></h:form>
<h:form> <a4j:region> <h:inputText /> <h:inputText /> <a4j:commandButton /> <a4j:region></h:form>
Execute options: ● @all● @this (default)● @form● @none● Id's● EL● @region
Exadel
Skipping phases when validating
<h:inputText id="name" value="#{bean.name}"/> <a4j:ajax event="blur" bypassUpdates="true"/></h:inputText><rich:message for="name"/>
1.Restore View2.Apply Request Values3.Process Validation4.Update Model5.Invoke Application6.Render Response
Exadel
RichFace 4 core – other advanced features● a4j:status
● a4j:log
● a4j:queue
● JavaScript interactions
Exadel
<a4j:status> – Ajax request status
<a4j:status name="ajaxStatus"> <f:facet name="start"> <h:graphicImage value="ajaxStatus.jpg"/> </f:facet></a4j:status>
<h:form> <inputText /> <inputText /> <a4j:commandButton status="ajaxStatus"/></h:form>
Exadel
<a4j:log> – Ajax request information● Levels:
◦ debug, info, warn, error
Exadel
JSF 2 queue
● JSF 2 has very basic queue functionality
● Events are queued and fired one at a time
● Only one request is processed on the server at a time
Exadel
RichFaces queue upgrades
● Delay firing of a request
● Combine requests from one or more controls
● Cancel DOM updates if “similar” request was fired
● Define queue as:
◦ Global (all views have queue)
◦ View-based
◦ Form-based
◦ Named (used by particular components only)
Exadel
RichFaces <a4j:queue>
<a4j:queue requestDelay="2000"/>...<a4j:commandButton value="Button1"/><a4j:commandButton value="Button2"/>
<a4j:queue requestDelay="2000"/>...<a4j:commandButton> <a4j:attachQueue requestDelay="1000"/></a4j:commmandButton><a4j:commandButton />
Delay request by 2 seconds
Overwrite default delay request by 1 second
Exadel
a4j:queue – “combining” events
<a4j:queue requestDelay="2000"/>...<a4j:commandButton> <a4j:attachQueue requestGroupingId="mainGroup"/></a4j:commmandButton><a4j:commandButton> <a4j:attachQueue requestGroupingId="mainGroup"/></a4j:commmandButton>
Exadel
a4j:queue – ignoring “stale” responses
<a4j:queue requestDelay="2000 ingoreDupResponses="true"/>
<h:inputText value="#{bean.state}"> <a4j:ajax event="keyup" listener="#{bean.load}" render="states"/></h:inputText>
<rich:dataTable id="states"> <rich:column/></rich:dataTable>
Exadel
JavaScript interactions
<a4j:commandLink value="Link" onbegin="ajaxOnBegin()" onbeforedomupdate="ajaxOnBeforeDomUpdate()" oncomplete="ajaxOnComplete()"></a4j:commandLink>
<h:commandLink value="Link" <f:ajax onevent="ajaxEvent();"></h:commandLink>
Called three times:1) begin2) success3) complete
Events are separated for easier development
Exadel
RichFaces UI components
● Output, panels
● Input
● Menu
● Data iteration
● Tree
● Drag and drop
● Client side validation
● Miscellaneous
Exadel
rich:tab
rich:accordionrich:accordion
rich:progressBar
Exadel
More rich output, panels
● rich:panel
● rich:togglePanel
● rich:popupPanel
● rich:collapsiblePanel
● rich:toolTip
Exadel
rich:calendar
rich:inplaceInput
rich:inputNumberSlider
rich:autocomplete
Exadel
More rich input
● rich:inputNumberSpinner
● rich:inplaceSelect
● rich:select
● rich:fileUpload
Exadel
rich:panelMenu
rich:toolBar
rich:dropDownMenu
Exadel
rich:dataTable
rich:dataTable withrich:collapsibleSubTable
rich:dataScroller
Exadel
Partial table update
render="@row"
render="@column"render="@header"
render="@footer"
render="@body"
render="cellId"
To render from outside the table:render="tableId@header"render="tableId@body"render="tableId@footer"
Exadel
Partial table updaterender="tableId:#{bean.rowsSet}"
render="tableId:#{bean.rowsSet}:cellId"
Exadel
More rich data iteration
● a4j:repeat
● rich:extendedDataTable
● rich:list
◦ list | ordered | definition
● rich:dataGrid
● rich:column
◦ Column and row spanning
◦ Filtering, sorting
Exadel
rich:tree
Exadel
Drag and drop
Exadel
Client-side validation based on Bean Validation
(JSR 303)
New in RichFaces 4
Exadel
Bean Validation (JSR 303)
● JSF 2 has support for Bean Validation (server-side)
public class Bean { @Email private String email;}
<h:inputText id="email" value="#{bean.email}"> <a4j:ajax event="blur"/></h:inputText><rich:message for="email"/>
Exadel
RichFaces client validation <rich:validator>
public class Bean { @Email private String email;}
<h:inputText id="email" value="#{bean.email}"> <rich:validator event="keyup"/></h:inputText><rich:message for="email"/>
Exadel
RichFaces client validation <rich:graphValidator>
<rich:graphValidator value="#{bean}" id="gv"> ... <h:inputText value="#{bean.password1}"/> <h:inputText value="#{bean.password2}"/> <rich:message for="email" for="gv"/></rich:graphValidator>
@Size(min=5,max=15,message="...")private String password1;@Size(min=5,max=15,message="...")private String password2;
@AssertTrue(message="Password don't match")public boolean isPasswordsEquals() { return password1.equals(password1);}
Exadel
RichFaces client functions
Function Description
rich:client(id) Returns component client id
rich:element(id) Returns DOM element
rich:component(id)Returns RichFaces client component instance to call JS API method
rich:isUserInRole(role) Returns if the user has specified role
rich:findComponent(id)Returns component instance for given short id
Exadel
rich:component(id) function
● Allows to call JS API on a component
<input type="button" onclick="#{rich:component('popup')}.show();"
value="Open" />
<rich:popupPanel id="popup"> <h:outputLink value="#"
onclick="#{rich:component('popup')}.hide(); return false;">
<h:outputText value="Close"/> </h:outputLink></rich:popupPanel>
Exadel
Rich miscellaneous
● rich:componentControl
● rich:hashParam
● rich:jQuery
Exadel
<rich:componentControl>
● Allows to call JS API on a component in declarative fashion
<h:outputLink id="openLink" value="#"><h:outputText value="Open" /><rich:componentControl event="click"
operation="show" target="popup" /></h:outputLink>
<rich:popupPanel id="popup">... </rich:popupPanel>
Exadel
<rich:hashParam>
● Group client side parameters into a hash map to be passed to component client API
<h:commandButton value="Show popup"> <rich:componentControl target="pp" operation="show"> <rich:hashParam> <f:param name="width" value="500" /> <f:param name="height" value="300" /> <f:param name="minWidth" value="300" /> <f:param name="minHeight" value="150" /> </rich:hashParam> </rich:componentControl></h:commandButton
Exadel
<rich:jQuery>
<input type="button" id="changeButton" value="Change title" /><rich:jQuery selector="#changeButton" query="click(function(){
$('#panel #panel_header').text('Capital of Russia');})"/>
<rich:panel header="Moscow" id="panel"> Moscow is the capital, the most populous ...</rich:panel>
Exadel
Skins
Exadel
Skins
● Lightweight extension on top of CSS
● Change look and feel of all rich component with a few minor changes
● Can be applied to standard JSF and HTML tags as well
Exadel
Ready-to-use skins
● classic
● wine
● blueSky
● ruby
● emeraldTown
● deepMarine
● plain
● japanCherry
<context-param> <param-name>org.richfaces.skin</param-name> <param-value>ruby</param-value></context-param>
Exadel
Skin file (just a property file)
#ColorsheaderBackgroundColor=#900000headerGradientColor=#DF5858headerTextColor=#FFFFFFheaderWeightFont=bold
generalBackgroundColor=#f1f1f1generalTextColor=#000000generalSizeFont=11pxgeneralFamilyFont=Arial, Verdana, sans-serif
controlTextColor=#000000controlBackgroundColor=#ffffffadditionalBackgroundColor=#F9E4E4
Exadel
Skins
● Modify existing or create your own
● Change skins in runtime
<context-param> <param-name>org.richfaces.skin</param-name> <param-value>myCoolSkin</param-value></context-param>
<context-param> <param-name>org.richfaces.skin</param-name> <param-value>#{bean.skin}</param-value></context-param>
Exadel
Overwriting skins<style> .rf-p-hr { // your custom style, applied to all panels on // on page } .panelHeader { // custom header style } </style>
<rich:panel id="panel1">... </rich:panel id="panel2"><rich:panel headerClass="panelHeader">... </rich:panel>
Exadel
Skinning standard JSF tags and HTML tags
<h:button style="background-color: '#{richSkin.tableBackgroundColor}'"/>
Apply to each control:
<context-param> <param-name> org.richfaces.enableControlSkinning </param-name> <param-value>true</param-value></context-param>
Apply to all standard controls (JSF and HTML):
Exadel
Skinning standard JSF tags and HTML tags
<context-param> <param-name> org.richfaces.enableControlSkinningClasses </param-name> <param-value>true</param-value></context-param>
<div class="rfs-ctn"> <h:panelGrid columns="1"> <h:outputText /> <h:inputText /> <h:commandButton /> </h:panelGrid></div>
Can be applied to <h:panelGrid>, <rich:panel>, <div> Any standard controls inside the container will be skinned using standard controls skinning classes.
Exadel
Where can I try the new RichFaces 4?
http://richfaces-showcase.appspot.com
Exadel
How can we help with RichFaces
● Web development with RichFaces
● Version 3 to 4 migration
● Performance tune-up
● Custom component
development
● On-site training
Training Days
JSF 1.2, 2 1-2
RichFaces 3, 4 1-2
JSF and RichFaces 2-3
RichFaces 3 to 4 1-2
Exadel
That's it for RichFaces, there is one more thing I want to
show you.
Exadel
Web Preview [desktop][gotiggr.com/preview/6669]
Web Preview [mobile][gotiggr.com/preview/5673]