Exadel

RichFaces 4 Webinar Series

Webinar #3: New and Advanced Features

June 15, 2011

Max KatzCharley Cowenshttp://exadel.com/web/portal/webinars

Exadel

RichFaces 4 Webinar Series

http://exadel.com/web/portal/webinars

RichFaces 4 – Everything You Need to KnowPresented on April 20, 2011

RichFaces 3 to RichFaces 4 — A Class in Moving UpPresented on May 11, 2011

Exadel

Max Katz

● Senior Systems Engineer

● JSF, RichFaces, Java EE consulting, and training

● Manages exadel.org – Exadel's open source projects and community

● Community manager for gotiggr.com – tool for creating and sharing interactive web and mobile HTML prototypes

Exadel

Author of Practical RichFaces

(Apress)

4

Lead-author of Practical RichFaces, 2/e

(Apress, July 2011)

Summer 2011

Exadel

Exadel

Exadel is a global software engineering company.● Founded in 1998,

headquarters in San Francisco Bay Area

● 7 development offices in Europe

● 350+ employees

Exadel

What Exadel DoesServices● Professional services, rich enterprise

application development, Eclipse development, custom rich component development, mobile development, training

Products

● Open source with JBoss: RichFaces, JBoss Tools/JBoss Developer Studio; exadel.org: Flamingo, Fiji, jsf4birt, JavaFX Plug-in for Eclipse; gotiggr.com– interactive Web and mobile HTML prototypes

Exadel

The Plan Is Simple

1) Super quick introduction to RichFaces 4 (promise)

2) Show you some of the new and advanced features in RichFaces 4

Exadel

RichFaces 4 is a lightweight, open source framework for

JSF 2

Official RichFaces logo

Exadel

RichFaces 4 – Rich JSF Framework

● UI components

◦ a4j:* tag library (core)

◦ rich:* tag library (UI)

◦ Components' JavaScript API

● Client-side validation (Bean Validation based)

● Skins

● CDK – Component Development Kit

Exadel

RichFaces 4

100% built on top of JSF2, just extends functionality in

JSF 2

Exadel

RichFaces 4

JavaScript functionality 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),

allows you to quickly build your own custom rich

components

Exadel

RichFaces 4

Runs on: Tomcat 6/7, Resin, JBoss AS 6/7, GlassFish 3.x,

WebLogic

(runs on any server where JSF 2 application

can be deployed)

Exadel

RichFaces 4

Runs on: Google App Engine (GAE), Amazon EC2,

CloudBees

Exadel

RichFaces 4

JSF implementations: Mojarra or Myfaces

Exadel

RichFaces 4

Zero-configuration, just drop RichFaces libraries into the

application

Exadel

RichFaces 4

Any browser

Exadel

RichFaces 4

Tooling support through JBoss Tools, IntelliJ,

NetBeans

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

RichFaces Core

Exadel

<table> ... <td onmouseover="update('yellow')"/> ...</table>

<h:form> <a4j:jsFunction name="update" action="#{bean.change}" render="..."> <a4j:param value="param1" assignTo="#{bean.color}"/> </a4j:jsFunction></h:form>

<a4j:jsFunction> – fire Ajax request from any JavaScript function, HTML event

Exadel

<h:commandButton action="#{bean.change}"> <a4j:ajax render="id"/></h:commandButton>

If you had to pick just one Ajax control, you would want <a4j:jsFunction>

<h:commandButton onclick="sendAjax();"/>

<a4j:jsFunction name="sendAjax" action="#{bean.change}" render="id"/>

Is the same as:

Exadel

<a4j:outputPanel> – auto rendered panel<a4j:commandButton value="Save" action="#{bean.save}"><a4j:commandButton value="Edit" action="#{bean.edit}">

<a4j:outputPanel ajaxRendered="true"> <h:panelGrid> ... </h:panelGrid></a4j:outputPanel>

<a4j:outputPanel ajaxRendered="true"> <rich:dataTable> ... </rich:dataTable></a4j:outputPanel>

Exadel

Turning off auto rendered panels

<a4j:commandButton value="Save" action="#{bean.save}"><a4j:commandButton value="Edit" action="#{bean.edit}" render="edit" limitRender="true">

<a4j:outputPanel ajaxRendered="true"> <h:panelGrid> ... </h:panelGrid></a4j:outputPanel><h:panelGrid id="edit"> <rich:dataTable> ... </rich:dataTable></h:panelGrid>

Exadel

render=”#{bean.renderList}”

1) Ajax request sent

2) Component IDs to be rendered resolved

3) Component IDs 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 IDs to be rendered resolved

3) Component IDs are rendered

JSF RichFaces

Exadel

<a4j:queue> – “combining” events from the same component

While a request is executing on the server, all requests from button A or button B will be combined (merged) if the last event in the queue is of the same type.

<a4j:queue />...<a4j:commandButton id="buttonA" value="Button A"/><a4j:commandButton id="buttonB" value="Button B"/>

Exadel

<a4j:queue> – “combining” events from different components

<a4j:queue /><a4j:commandButton id="buttonA" value="Button A"> <a4j:attachdQueue requestGroupingId="ajaxGroup"/></a4j:commandButton><a4j:commandButton id="buttonB" value="Button B"> <a4j:attachdQueue requestGroupingId="ajaxGroup"/></a4j:commandButton>

While a request is executing on the server, all requests from button A or button B will be combined (merged).

Exadel

<a4j:queue> – setting request delay allows “waiting” for requests from same component in order to merge events

<a4j:queue requestDelay="1000"/>

<a4j:commandButton id="buttonA" value="Button A"> <a4j:attachdQueue requestDelay="2000"/></a4j:commandButton>

<a4j:commandButton id="buttonB" value="Button B"/>

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

Invoking JavaScript functions during Ajax request

<a4j:commandLink value="Save" onbegin="ajaxOnBegin()" onbeforedomupdate="ajaxOnBeforeDomUpdate()" oncomplete="ajaxOnComplete()"></a4j:commandLink>

Supported by all action components in RichFaces

Exadel

<a4j:log> – Ajax request/response information, logging

Exadel

<a4j:param> - like <f:param>, but simpler as it also assigns the value to a bean property automatically

<a4j:commandButton value="Save"> <a4j:param value="1009" assignTo="#{bean.product}"/></a4j:commandButton>

public class Bean { private String product; public void setProduct (String product) {...}}

Exadel

Another great feature is that <a4j:param> value can contain any JavaScript expression or JavaScript function, when noEscape="true"

<a4j:param name="width" value="screen.width" assignTo="#{bean.screenWidth}" noEscape="true" />

Exadel

RichFaces UI: Components and Functions

Exadel

<rich:popupPanel> can be modal and non-modal

<rich:popupPanel modal="false"> <f:facet name="header"> Edit User </f:facet> ... ...</rich:popupPanel>

Exadel

Many RichFaces components provide client-side JavaScript API

Method name Description

getTop() Return the top co-ordinate for the position of the pop-up panel.

getLeft() Return the left co-ordinate for the position of the pop-up panel.

moveTo(top,left) Move the pop-up panel to the co-ordinates specified with the top and left parameters.

resize(width,height) Resize the pop-up panel to the size specified with the width and height parameters.

show() Show the pop-up panel.

hide() Hide the pop-up panel.

<rich:popupPanel> JavaScript API

Exadel

Invoking component JavaScript API using #{rich:component(id)} function

<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

Invoking component JavaScript API using <rich:componentControl> component<h:outputLink value="#"> <h:outputText value="Open" /> <rich:componentControl event="click" target="popup" operation="show" /></h:outputLink>

<rich:popupPanel header="RichFaces" id="popup"> <h:outputLink value="#"> <h:outputText value="Close" /> <rich:componentControl event="click" target="popup" operation="hide" /> </h:outputLink></rich:popupPanel>

Exadel

<rich:accordion id="c"> <rich:accordionItem header="New York" name="nyc"> <h:outputText value="You selected New York"/> </rich:accordionItem> <rich:accordionItem header="San Francisco" name="sf"> <h:outputText value="You selected San Francisco"/> </rich:accordionItem> ...</rich:accordion>

Exadel

<input type="button" value="New York City" onclick="#{rich:component('c')}.switchToItem('nyc')"/><input type="button" value="San Francisco" onclick="#{rich:component('c')}.switchToItem('sf')"/><input type="button" value="Los Angeles" onclick="#{rich:component('c')}.switchToItem('la')"/>

<input type="button" value="First" onclick="#{rich:component('c')}.switchToItem('@first')"/><input type="button" value="Next" onclick="#{rich:component('c')}.switchToItem('@next')"/><input type="button" value="Previous" onclick="#{rich:component('c')}.switchToItem('@prev')"/><input type="button" value="Last" onclick="#{rich:component('c')}.switchToItem('@last')"/>

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

Standard Java EE security with #{rich:isUserInRole(role)} function

<rich:panel header="Admin panel" rendered="#{rich:isUserInRole('admin')}"> Very sensitive information</rich:panel>

<rich:panel header="User panel"> General information</rich:panel>

● Calls this method:

facesContext.getExternalContext.getUserInRole(role)

● What's good is that security roles can be defined anywhere

Exadel

RichFaces data iteration components support partial updates

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

Deciding what rows/cell to update in run-time

render="tableId:rows(bean.rowsSet)"

render="tableId:rows(bean.rowsSet):cellId"

Exadel

New collapsible sub table component

Exadel

<rich:dataTable> supports column and row spanning

Exadel

New <rich:list> component, can be easily rendered as ordered, unordered, or definitions

<rich:list id="cities" value="#{bean.cityList}" var="city" type="#{bean.listType}"> <f:facet name="term">

<h:outputText value="#{city.country}" /> </f:facet> <h:outputText value="#{city.name} " /> ...</rich:list>

Exadel

Using jQuery with <rich:jQuery>

<input type="button" id=" value="Update panel"/><rich:jQuery selector="#changeButton" event="click" query="$('#nycInfo .rf-p-hdr').text('New York City'); $('.rf-p-b').css('color', 'blue');" />

Exadel

Using jQuery when page rendered to create zebra-like styling for table

Exadel

<style> .even-row { background-color: #FCFFFE; } .odd-row { background-color: #ECF3FE; }</style>

<rich:dataTable id="gamesTable"> // columns</rich:dataTable>

<rich:jQuery selector="#gamesTable tr:odd" query="addClass('odd-row')" /><rich:jQuery selector="#gamesTable tr:even" query="addClass('even-row')" />

Exadel

Invoking <rich:jQuery> as a regular JavaScript function

<h:graphicImage width="100" value="/images/venice.png" onmouseover="larger(this, {})" onmouseout="normal(this, {})" />

<rich:jQuery name="larger" query="animate({width:'241px'})" /><rich:jQuery name="normal" query="animate({width:'100px'})"/>

with mouse over

Exadel

RichFaces Validation

Exadel

Bean Validation (JSR 303)

JSF 2 has support for Bean Validation (validation done on server)

public class Bean { @Pattern(regexp="...") private String email;}

<h:inputText id="email" value="#{bean.email}"> <a4j:ajax event="blur"/></h:inputText><rich:message for="email"/>

Bean:

JSF page:

Exadel

Client-Validation Based on Bean ValidationValidation is performed on the client. If no client implementation available, validation automatically falls back to standard, server validation

public class Bean { @Pattern(regexp="...") private String email;}

<h:inputText id="email" value="#{bean.email}"> <rich:validator event="blur"/></h:inputText><rich:message for="email"/>

Bean:

JSF page:

Exadel

Cross field validation with <rich:graphValidator>

<rich:graphValidator value="#{bean}" id="crossField"> <h:inputText value="#{bean.password1}"/> <h:inputText value="#{bean.password2}"/> <rich:message for="email" for="crossField"/></rich:graphValidator>

@Size(min=5,max=15)private String password1;@Size(min=5,max=15)private String password2;

@AssertTrue(message="Passwords don't match")public boolean checkPassword() { return password1.equals(password1);}

Exadel

RichFaces Skins

Exadel

Overwriting Skin CSS<style>.rf-p-hdr { // overwrite skin CSS properties or set any other // CSS properties}</style>

<rich:panel id="panel1">... <rich:panel>

Exadel

Overwriting Skin CSS<style>.rf-p-hdr { // overwrite skin CSS properties}.specialHeader { // define custom CSS for specific panel}</style>

<rich:panel id="panel1">... <rich:panel><rich:panel id="panel2" headerClass="specialHeader">... <rich:panel>

Exadel

Skinning Standard JSF Tags and HTML Tags

<h:button style="background-color: '#{richSkin.tableBackgroundColor}'"/>

Apply to each control:

Exadel

Skinning Standard JSF Tags and HTML Tags

<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 only when special CSS class is applied to parent container <context-param> <param-name> org.richfaces.enableControlSkinningClasses </param-name> <param-value>true</param-value></context-param>

<div class="rfs-ctn"> <h:outputText /> <h:inputText /> <h:commandButton /></div>

Exadel

Where can I try the new RichFaces 4?

http://exadel.com/web/portal/richfaces4demo

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

Tiggr (gotiggr.com) is a web application for building and sharing interactive web and

mobile HTML prototypes

Exadel

Exadel

blog.exadel.commkblog.exadel.com

@exadel@maxkatz

max@exadel.com

gotiggr.com