Build Cool Apps with JSF and RichFaces

What You Need for Building
Cool Enterprise Applications
with JSF

Max Katz
Exadel
Oct. 4, 2011

>max@exadel.com
Max Katz >@maxkatz
>mkblog.exadel.com
Senior Systems Engineer
JSF, RichFaces, Java EE consulting,
and training
Developer Relations for Tiggr Mobile
Apps Builder (http://gotiggr.com)

Exadel is a global software
engineering company

Founded in 1998, headquarters in
San Francisco Bay Area

7 Development offices in Europe
[Munich, Moscow, Ekaterinburg, Minsk, Homeyl, Kharkov, Donetsk]

400+ employees

The Plan Is Simple

1) Ajax features in JSF 2

2) The new RichFaces 4 – or
what you need to build cool
enterprise applications with
JSF

JavaServer Faces™ (JSF) is
the standard component-
based user interface (UI)
framework for the
Java EE (5 & 6) platform
JSF 1.2 Java EE 5
JSF 2 Java EE 6

JSF 2 is a major upgrade
over JSF 1.x

Many features, ideas taken
from projects such as Seam,
RichFaces, and others

JSF 2 new features
● Facelets ● New scopes
● Composite ◦ Flash, View,
components custom
● Implicit ● Configuration

navigation via annotations
● GET ● Bean Validation
support
support
◦ h:link, h:button
● Basic Ajax
● Resource loading

JSF 2 <f:ajax>
● Very basic Ajax functionality
● Greatly
inspired by RichFaces 3
<a4j:support> tag
● Ajax in JSF in 3 easy steps:
1. Sending an Ajax request
2.Partial view processing
3.Partial view rendering

<h:form>
<h:form>
<h:input value="#{bean.word}"/>
<h:commandButton>
<h:commandButton>
<f:ajax event="click" 1
<f:ajax event="click"
execute="@form" 2
execute="@form"
listener="#{bean.ajaxListener}"
render="out1 out2"/> 3
render="out1 out2"/>
</h:commandButton>
</h:commandButton>
</h:form>
</h:form>

<h:form>
<h:form>
<h:selectOneMenu value="#{bean.selected}">
<h:selectOneMenu value="#{bean.selected}">
<f:selectItems value="#{bean.items}"/>
<f:selectItems value="#{bean.items}"/>
<f:ajax event="change" 1
<f:ajax event="change"
execute="@form"
execute="@form" 2
render="@form"/> 3
render="@form"/>
</h:commandButton>
</h:commandButton>
</h:form>
</h:form>

Attribute Value
Important
Event on which to fire the
<f:ajax> event
Ajax request
attributes @all
@this (default)
@form
execute
@none
id's
EL
@all
@this
@form
render
@none (default)
id's
EL

That's good, but that's all you get.

Where do you get rich components
and more?

A rich component framework is
still(?) needed to build real-world
Ajax applications.

RichFaces 4 is a lightweight,
open source framework for
JSF 2

RichFaces 4 – rich JSF framework
UI components
a4j:* tag library (core)
rich:* tag library (UI)
Components' JavaScript API
Skins
Client-side validation (Bean Validation
based)
CDK – Component Development Kit

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

JavaScript is now entirely
based on the popular jQuery
library

RichFaces 4 is a lot faster, consistent,
and optimized

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

New client-side validation
based on Bean Validation
(JSR 303)

Quickly and easily validate
input on the client

New, and easy to use CDK
(Component Development Kit),
allows quickly to build your
own custom rich components

Pick your server:
Tomcat 6/7, Resin, JBoss AS 6/7,
GlassFish 3.x, WebLogic
[any server where JSF 2 application can be deployed]

Deploy and run in the cloud:
Google App Engine Amazon
EC2, CloudBees, OpenShift

Pick JSF implementations
you like:
Mojarra or MyFaces

Pick your favorite tooling:
JBoss Tools, IntelliJ,
NetBeans

Easy to start. Zero-configuration,
just drop RichFaces into the
application

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

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

Let's see what cool
components, and features
you get with RichFaces...

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>
<h:commandButton>
<f:ajax execute="@form" render="output"/>
<f:ajax execute="@form" render="output"/>
</h:commandButton>
</h:commandButton>

<h:commandButton>
<h:commandButton>
<a4j:ajax execute="@form" render="output"/>
<a4j:ajax execute="@form" render="output"/>
</h:commandButton>
</h:commandButton>

<a4j:ajax> attributes
Feature/Attribute Description

JavaScript to execute before Ajax
onbegin
request
JavaScript to execute after response
onbeforedomupdate
comes back but before DOM update

oncomplete JavaScript to execute after DOM update

Allows to skip JSF phases when
bypassUpdates
validating

limitRender Turns off all auto-rendered panels

status Status to display during Ajax request

Ajax queue Advanced RichFaces client queue

Components to send Ajax
request
● <a4j:ajax>
● <a4j:commandButton>
● <a4j:commandLink>
● <a4j:jsFunction>
● <a4j:poll>
● <a4j:push>

<a4j:commandButton/Link> –
button and link with built-in Ajax
behavior
<a4j:commandButton value="Save"
<a4j:commandButton value="Save"
action="#{bean.action}"
render="output" />
render="output" />

<a4j:commandLink value="Save"
<a4j:commandLink value="Save"
render="output" />
render="output" />

When using standard JSF button:
<h:form>
<h:form>
<h:inputText>
<h:inputText>
<h:selectOneMenu>
Need to set
<h:selectOneMenu>
<h:commandButton>
<h:commandButton> execute=”@form”
<f:ajax execute="@form"/>
<f:ajax execute="@form"/> (or execute=”id1 id2”)
</h:commandButton>
</h:commandButton>
<h:form>
<h:form>

When using RichFaces button:
<h:form>
<h:form> RichFaces default
<h:inputText>
<h:inputText>
<h:selectOneMenu>
value for
<h:selectOneMenu>
<a4j:commandButton/>
<a4j:commandButton/>
button/link
<h:form>
<h:form> execute=”@form”

<a4j:jsFunction> – fire Ajax request
from any JavaScript function, HTML
event
<table>
<table>
...
...
<td onmouseover="update('yellow')"/>
<td onmouseover="update('yellow')"/>
...
...
</table>
</table>

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

If you had to pick just one Ajax
control, you would want
<a4j:jsFunction>
<h:commandButton action="#{bean.change}">
<h:commandButton action="#{bean.change}">
<a4j:ajax render="id"/>
<a4j:ajax render="id"/>
</h:commandButton>
</h:commandButton>

Is the same as:

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

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

<a4j:poll> – periodically send an
Ajax request

<a4j:poll interval="1000"
<a4j:poll interval="1000"
action="#{bean.count}"
action="#{bean.count}"
render="output"
render="output"
enabled="#{bean.pollEnabled}" />
enabled="#{bean.pollEnabled}" />

<h:panelGrid id="output">
<h:panelGrid id="output">
...
...
</h:panelGrid>
</h:panelGrid>

<a4j:push>
● Server-side events are pushed to
client using Comet or WebSockets.
● Implemented using Atmosphere
● Providesexcellent integration with
EE containers, and advanced
messaging services

<a4j:push address="topic@chat"
<a4j:push address="topic@chat"
ondataavailable="alert(event.rf.data)" />
ondataavailable="alert(event.rf.data)" />

Advanced rendering features
● <a4j:outputPanel>
● limitRender attribute
● render=”{bean.renderList}”

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

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

<rich:dataTable>
<rich:dataTable>
...
...
</rich:dataTable>
</rich:dataTable>
</a4j:outputPanel>
</a4j:outputPanel>

Turning off auto rendered panels
<a4j:commandButton value="Edit" action="#{bean.edit}"
<a4j:commandButton value="Edit" action="#{bean.edit}"
render="edit" limitRender="true">
render="edit" limitRender="true">

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

render=”#{bean.renderList}”
JSF RichFaces
1) Ajax request sent 1) Ajax request sent
2) Component id's to be 2) Component id's to
rendered resolved be rendered
3) Component id's are resolved
rendered into the page 3) Component id's
4) 2nd Ajax request is sent. are rendered
In this request the
components (resolved in
step 2 are sent with
request) will be rendered

Advanced execute features
● <a4j:region>
● bypassUpdates attribute

<a4j:region> – defining execute
region declaratively

<h:form>
<h:form>
<a4j:region>
<a4j:region>
<h:inputText />
<h:inputText />
<h:inputText />
<h:inputText />
<h:selectOneMenu />
<h:selectOneMenu />
<a4j:commandButton />
<a4j:commandButton />
<a4j:region>
<a4j:region>
</h:form>
</h:form>

Skipping
phases
when
validating
1.Restore View
2.Apply Request Values
3.Process Validation
4.Update Model
5.Invoke Application
6.Render Response

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

Even more advanced features
and tags
● JavaScript callbacks
● Queue
● <a4j:status>
● <a4j:param>
● <a4j:log>

Easily use JavaScript callbacks
during Ajax request
<a4j:commandLink value="Link"
<a4j:commandLink value="Link"
onbegin="ajaxOnBegin()"
onbegin="ajaxOnBegin()"
onbeforedomupdate="ajaxOnBeforeDomUpdate()"
onbeforedomupdate="ajaxOnBeforeDomUpdate()"
oncomplete="ajaxOnComplete()">
oncomplete="ajaxOnComplete()">
</a4j:commandLink>
</a4j:commandLink>

JSF 2 queue
● JSF2 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

<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:queue />
...
...
<a4j:commandButton id="buttonA" value="Button A"/>
<a4j:commandButton id="buttonA" value="Button A"/>
<a4j:commandButton id="buttonB" value="Button B"/>

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

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

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

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

<a4j:attachdQueue requestDelay="2000"/>
<a4j:attachdQueue requestDelay="2000"/>


<a4j:queue> – ignoring “stale”
responses
<a4j:queue requestDelay="2000
<a4j:queue requestDelay="2000
ingoreDupResponses="true"/>
ingoreDupResponses="true"/>

<h:inputText value="#{bean.state}">
<h:inputText value="#{bean.state}">
<a4j:ajax event="keyup" listener="#{bean.load}"
<a4j:ajax event="keyup" listener="#{bean.load}"
render="states"/>
render="states"/>
</h:inputText>
</h:inputText>

<a4j:status> – Ajax request
status

<a4j:status name="ajaxStatus">
<a4j:status name="ajaxStatus">
<f:facet name="start">
<f:facet name="start">
<h:graphicImage value="ajaxStatus.jpg"/>
<h:graphicImage value="ajaxStatus.jpg"/>
</f:facet>
</f:facet>
</a4j:status>
</a4j:status>

<h:form>
<h:form>
<a4j:commandButton status="ajaxStatus"/>
<a4j:commandButton status="ajaxStatus"/>
</h:form>
</h:form>

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

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

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

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

<a4j:param name="width"
<a4j:param name="width"
value="(jQuery(window).width()/2)"
value="(jQuery(window).width()/2)"
assignTo="#{bean.screenWidth}"
assignTo="#{bean.screenWidth}"
noEscape="true" />
noEscape="true" />

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

RichFaces UI components
● Output, panels
● Input
● Menu
● Data iteration
● Tree
● Drag and drop
● Client side validation
● Miscellaneous

rich:tab

rich:accordion

rich:progressBar

More rich output, panels
● rich:panel
● rich:togglePanel
● rich:popupPanel
● rich:collapsiblePanel
● rich:toolTip

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

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

rich:calendar

rich:inplaceInput

rich:inputNumberSlider

rich:autocomplete

More rich input
● rich:inputNumberSpinner
● rich:inplaceSelect
● rich:select
● rich:fileUpload

rich:panelMenu

rich:toolBar

rich:dropDownMenu

rich:dataTable

rich:dataTable with
rich:collapsibleSubTable

rich:dataScroller

RichFaces data iteration components
support partial updates
render="@column"
render="@header"

render="@body"

render="@footer"

render="cellId"
To render from outside the table:
render="tableId@header"
render="tableId@body"
render="tableId@footer"

Deciding what rows/cell to update in
run-time
render="tableId:rows(bean.rowsSet)"

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

New collapsible sub table component

<rich:dataTable> supports column
and row spanning

<rich:extendedDataTable> provides
lazy loading, column resizing, reorder
and more

More rich data iteration
● a4j:repeat
● rich:extendedDataTable
● rich:collapsibleSubTable
● rich:list

◦ list | ordered | definition
● rich:dataGrid
● rich:column

◦ Column and row spanning
◦ Filtering, sorting

Many RichFaces components
provide client-side JavaScript API
<rich:popupPanel> JavaScript API
Method name Description
Return the top co-ordinate for the position of
getTop()
the pop-up panel.
Return the left co-ordinate for the position of
getLeft()
the pop-up panel.
Move the pop-up panel to the co-ordinates
moveTo(top,left)
specified with the top and left parameters.
Resize the pop-up panel to the size specified
resize(width,height)
with the width and height parameters.
show() Show the pop-up panel.
hide() Hide the pop-up panel.

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

<input type="button"
<input type="button"
onclick="#{rich:component('popup')}.show();"
onclick="#{rich:component('popup')}.show();"
value="Open" />
value="Open" />

<rich:popupPanel id="popup">
<h:outputLink value="#"
<h:outputLink value="#"
onclick="#{rich:component('popup')}.hide();
onclick="#{rich:component('popup')}.hide();
return false;">
return false;">
<h:outputText value="Close"/>
<h:outputText value="Close"/>
</h:outputLink>
</h:outputLink>
</rich:popupPanel>
</rich:popupPanel>

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

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

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

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

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

RichFaces client functions
Function Description

rich:client(id) Returns component client id
rich:element(id) Returns DOM element
Returns RichFaces client component
rich:component(id)
instance to call JS API method
rich:isUserInRole(role) Returns if the user has specified role
Returns component instance for given
rich:findComponent(id)
short id

Standard Java EE security with
#{rich:isUserInRole(role)} function
<rich:panel header="Admin panel"
<rich:panel header="Admin panel"
rendered="#{rich:isUserInRole('admin')}">
rendered="#{rich:isUserInRole('admin')}">
Very sensitive information
Very sensitive information
</rich:panel>
</rich:panel>

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

● Calls facesContext.getExternalContext.getUserInRole(role)
● What's good is that security roles can be defined anywhere

Client-side validation based
on Bean Validation
(JSR 303)

New in RichFaces 4

Bean Validation (JSR 303)
JSF 2 has support for Bean Validation
(validation done on server)
Bean:
public class Bean {
public class Bean {
@Pattern(regexp="...")
private String email;
}}

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

Client-Validation Based on Bean
Validation
Validation is performed on the client. If no client
implementation available, validation automatically falls
back to standard, server validation
Bean:
public class Bean {
public class Bean {
}}

JSF page:
<rich:validator />
<rich:validator />
</h:inputText>
</h:inputText>

Object validation with
<rich:graphValidator>
@Size(min=5,max=15)
@Size(min=5,max=15)
private String password1;
@Size(min=5,max=15)
@Size(min=5,max=15)

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

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

Rich miscellaneous
● <rich:componentControl>
● <rich:hashParam>
● <rich:jQuery>

<rich:componentControl>
● Allows to call JS API on a component
in declarative fashion
<h:outputLink id="openLink" value="#">
<h:outputLink id="openLink" value="#">
operation="show"
operation="show"
target="popup" />
target="popup" />
</h:outputLink>
</h:outputLink>

...
...
</rich:popupPanel>
</rich:popupPanel>

<rich:hashParam> - creates
JavaScript hash, can be passed to
another client function.

<h:commandButton value="Show popup">
<h:commandButton value="Show popup">
<rich:componentControl target="pp" operation="show">
<rich:componentControl target="pp" operation="show">
<rich:hashParam>
<rich:hashParam>
<f:param name="width" value="500" />
<f:param name="width" value="500" />
<f:param name="height" value="300" />
<f:param name="height" value="300" />
<f:param name="minWidth" value="300" />
<f:param name="minWidth" value="300" />
<f:param name="minHeight" value="150" />
<f:param name="minHeight" value="150" />
</rich:hashParam>
</rich:hashParam>
</rich:componentControl>
</rich:componentControl>
</h:commandButton
</h:commandButton

Using jQuery with <rich:jQuery>

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

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

Invoking <rich:jQuery> as a regular
JavaScript function
with mouse over

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

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

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

Ready-to-use skins
● classic
● wine
● blueSky
● ruby
● emeraldTown
● deepMarine
<context-param>
● plain <context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>ruby</param-value>
● japanCherry <param-value>ruby</param-value>
</context-param>
</context-param>

RichFaces Skin file
#Colors
#Colors
headerBackgroundColor=#900000
headerBackgroundColor=#900000
headerGradientColor=#DF5858
headerGradientColor=#DF5858
headerTextColor=#FFFFFF
headerTextColor=#FFFFFF
headerWeightFont=bold
headerWeightFont=bold

generalBackgroundColor=#f1f1f1
generalBackgroundColor=#f1f1f1
generalTextColor=#000000
generalTextColor=#000000
generalSizeFont=11px
generalSizeFont=11px
generalFamilyFont=Arial, Verdana, sans-serif
generalFamilyFont=Arial, Verdana, sans-serif

controlTextColor=#000000
controlTextColor=#000000
controlBackgroundColor=#ffffff
controlBackgroundColor=#ffffff
additionalBackgroundColor=#F9E4E4
additionalBackgroundColor=#F9E4E4

Skins
● Modify existing or create your own
<context-param>
<context-param>
<param-value>myCoolSkin</param-value>
<param-value>myCoolSkin</param-value>
</context-param>
</context-param>

● Change skins in runtime
<context-param>
<context-param>
<param-value>#{bean.skin}</param-value>
<param-value>#{bean.skin}</param-value>
</context-param>
</context-param>

Overwriting Skin CSS
<style>
<style>
.rf-p-hdr {
.rf-p-hdr {
color: …
color: …
font-size: …
font-size: …
font-weight: …
font-weight: …
font-family: …
font-family: …
}}
</style>
</style>
<rich:panel>...</rich:panel>
<rich:panel>...</rich:panel>

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

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

Skinning standard JSF tags and
HTML tags

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

HTML tags automatically

Apply to all standard controls (JSF and HTML):
<context-param>
<context-param>
<param-name>
<param-name>
org.richfaces.enableControlSkinning
org.richfaces.enableControlSkinning
</param-name>
</param-name>
<param-value>true</param-value>
</context-param>
</context-param>

HTML tags only when special CSS
class is applied to parent container
<context-param>
<context-param>
<param-name>
<param-name>
org.richfaces.enableControlSkinningClasses
org.richfaces.enableControlSkinningClasses
</param-name>
</param-name>
</context-param>
</context-param>

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

Where can I try the new
RichFaces 4?
http://richfaces.org/showcase

RichFaces 4.1 (Late 2011)

Mobile support

New components:
Pick list
Ordering list
Rich text editor

How can we help with RichFaces
● Web development
with RichFaces
Training Days
● Version 3 to 4 migration JSF 1.2, 2 1-2
● Performance tune-up RichFaces 3, 4 1-2
JSF and RichFaces 2-3
● Custom component RichFaces 3 to 4 1-2

development
● On-site training

RichFaces
Rich, flexible, robust, and
proven enterprise-level
framework to JSF 2

Tiggr is a Web-based mobile apps builder.
Super fast, and easy to build mobile Web and
native apps
Build your mobile app at http://gotiggr.com

Export or build the app as mobile Web or
generate native app (for Android, iOS)

Thank you!
How to get in touch with me:
>max@exadel.com
>@maxkatz
>mkblog.exadel.com

Build your mobile app in the
cloud: http://gotiggr.com

Build Cool Apps with JSF and RichFaces

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Build Cool Apps with JSF and RichFaces

Similar to Build Cool Apps with JSF and RichFaces (20)

More from Max Katz

More from Max Katz (14)

Recently uploaded

Recently uploaded (20)

Build Cool Apps with JSF and RichFaces