80
RichFaces RichFaces

Rich faces

Embed Size (px)

DESCRIPTION

Richfaces presentation for the JavaEE course (winter&summer 2010-2011).Author Radoslav IvanovPresenter Mihail StoynovPresented on 16.04.2011.

Citation preview

Page 1: Rich faces

RichFacesRichFaces

Page 2: Rich faces

ContentsContents

• Introduction to RichFacesIntroduction to RichFaces

• Ajax Action ComponentsAjax Action Components

• RichFaces UI ComponentsRichFaces UI Components

• Skins and ThemingSkins and Theming

Page 3: Rich faces

Installation (JBoss Tools)Installation (JBoss Tools)

• Get a clean copy of Eclipse for JavaEE Get a clean copy of Eclipse for JavaEE developers (helios)(32bit only)+tomcat7+pptdevelopers (helios)(32bit only)+tomcat7+ppt

• ExtractExtract

• Go to Eclipse->Help->Install new softwareGo to Eclipse->Help->Install new software

• Location: Location: http://download.jboss.org/jbosstools/updates/stable/helios/

• Click ONLY ON “Jboss Tools Richfaces”Click ONLY ON “Jboss Tools Richfaces”

• Next -> Next -> Next ... Reboot EclipseNext -> Next -> Next ... Reboot Eclipse

• Extract tomcat somewhere close to eclipseExtract tomcat somewhere close to eclipse

• Create workspace close to eclipseCreate workspace close to eclipse

Page 4: Rich faces

Creating an eclipse projectCreating an eclipse project

• Create a new project -> JSF projectCreate a new project -> JSF project

• JSF Environment: JSF 1.2 + FaceletsJSF Environment: JSF 1.2 + Facelets

• Template: FaceletsKickStartWithRILibrsTemplate: FaceletsKickStartWithRILibrs

• NextNext

• Servlet version: 2.5Servlet version: 2.5

• Runtime -> New -> Tomcat7 -> Browse...Runtime -> New -> Tomcat7 -> Browse...

• Next ...Next... FinishNext ...Next... Finish

• NOTE: NOTE: DELETEDELETE .../WEB-INF/lib/el-api.jar .../WEB-INF/lib/el-api.jar

• Go to project -> Run as -> Run on ServerGo to project -> Run as -> Run on Server

Page 5: Rich faces

Adding RichfacesAdding Richfaces

• MyProject -> right click -> Configure -> Add MyProject -> right click -> Configure -> Add custom capabilities -> Richfaces 3.3.3custom capabilities -> Richfaces 3.3.3

• Notification about which files have been Notification about which files have been changed. changed.

• Next.. Next... FinishNext.. Next... Finish

Page 6: Rich faces

Introduction to Introduction to RichFacesRichFaces

Page 7: Rich faces

What is RichFacesWhat is RichFaces

• A framework designed to add Ajax A framework designed to add Ajax functionality in JSF solutionsfunctionality in JSF solutions

• 100+ AJAX enabled JSF components in two 100+ AJAX enabled JSF components in two librarieslibraries

• a4j: page centric AJAX controls a4j: page centric AJAX controls

• rich: self contained, ready to use componentsrich: self contained, ready to use components

• Component Development Kit (CDK)Component Development Kit (CDK)

• Skinnability mechanismSkinnability mechanism

• Dynamic resources handlingDynamic resources handling

Page 8: Rich faces

RichFaces HistoryRichFaces History

• 2005: started by Alexander Smirnov2005: started by Alexander Smirnov

• 2005-2007: Developed by Exadel2005-2007: Developed by Exadel

• Ajax4jsf - open source, freeAjax4jsf - open source, free

• RichFaces - commercialRichFaces - commercial

• 2007: Both are part of JBoss2007: Both are part of JBoss

• Open sourceOpen source

• Ajax4jsf included in RichFacesAjax4jsf included in RichFaces

• Exadel team continues to develop the Exadel team continues to develop the frameworkframework

Page 9: Rich faces

VersionsVersions

• Just released – RichFaces 4Just released – RichFaces 4

• Final release end of March 2011Final release end of March 2011

• Previous stable version – RichFaces 3.3.3Previous stable version – RichFaces 3.3.3

Version JSF 1.1 JSF 1.2 JSF 2.0

RichFaces 3.1.x ●

RichFaces 3.3.3* ● ●

RichFaces 4 ●

* Note: RichFaces 3.3.3 has basic JSF 2.0 support

Page 10: Rich faces

ExampleExample

<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax"<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax"prefix="a4j"%>prefix="a4j"%><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%><html><html> <head><head> <title>Repeater </title><title>Repeater </title> </head></head> <body><body> <f:view><f:view> <h:form><h:form> <h:inputText size="50" value="#{bean.text}" ><h:inputText size="50" value="#{bean.text}" > <a4j:support event="onkeyup" reRender="rep"/><a4j:support event="onkeyup" reRender="rep"/> </h:inputText></h:inputText> <h:outputText value="#{bean.text}" id="<h:outputText value="#{bean.text}" id="reprep"/>"/> </h:form></h:form> </f:view></f:view> </body></body></html></html>

Page 11: Rich faces

What do You Need to Start?What do You Need to Start?

• JavaJava

• JavaServer FacesJavaServer Faces

• Java application server or servlet containerJava application server or servlet container

• Browser (on client side)Browser (on client side)

• RichFaces frameworkRichFaces framework

Page 12: Rich faces

What do you get?What do you get?

• Many ready to use componentsMany ready to use components

Page 13: Rich faces

Installing RichFacesInstalling RichFaces

• Download latest version from Download latest version from www.jboss.org/jbossrichfaces/

• Add RichFaces jar files to WEB-INF/lib folderAdd RichFaces jar files to WEB-INF/lib folder

• Update web.xml file with the RichFaces FilterUpdate web.xml file with the RichFaces Filter<filter><filter> <display-name>RichFaces Filter</display-name><display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name><filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class><filter-class>org.ajax4jsf.Filter</filter-class> </filter></filter><filter-mapping><filter-mapping> <filter-name>richfaces</filter-name><filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name><servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher><dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher><dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher><dispatcher>INCLUDE</dispatcher></filter-mapping></filter-mapping>

Page 14: Rich faces

Page SetupPage Setup

• Add RichFaces namespaces and taglibs in Add RichFaces namespaces and taglibs in your XHTML and JSP pages.your XHTML and JSP pages.

• FaceletsFacelets

• JSPJSP

xmlns:a4j="http://richfaces.org/a4j"xmlns:a4j="http://richfaces.org/a4j"xmlns:rich="http://richfaces.org/rich"xmlns:rich="http://richfaces.org/rich"

<%@ taglib uri="http://richfaces.org/a4j"<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> prefix="a4j"%><%@ taglib uri="http://richfaces.org/rich"<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> prefix="rich"%>

Page 15: Rich faces

Ajax Action ComponentsAjax Action Components

Page 16: Rich faces

Sending Ajax RequestSending Ajax Request

• a4j:supporta4j:support – add AJAX support to any – add AJAX support to any parent componentparent component

• a4j:commandButtona4j:commandButton, , a4j:commandLinka4j:commandLink

• a4j:polla4j:poll – periodically send AJAX request – periodically send AJAX request

Page 17: Rich faces

Frequently Used Attributes

• actionaction – action to be invoked if component is activated

• eventevent – contains the JavaScript event

• reRenderreRender – coma separated list of components to be re-rendered

• ajaxSingleajaxSingle – set it to true in order to process only value of the current component

Page 18: Rich faces

a4j:support

• Allow adding Ajax capability to any existing JSF component

• Should be attached to direct child of the component

• Key attributes

• event

• reRender

<h:inputText id="myinput" value="#{userBean.name}"><h:inputText id="myinput" value="#{userBean.name}"> <a4j:support event="onkeyup" reRender="outtext" /><a4j:support event="onkeyup" reRender="outtext" /></h:inputText></h:inputText><h:outputText id="outtext" value="#{userBean.name}" /><h:outputText id="outtext" value="#{userBean.name}" />

Page 19: Rich faces

a4j:commandButton and a4j:commandLink

• Visualize as button or a link

• Produces an Ajax request

• Update specified elements<<a4j:commandButton a4j:commandButton value="value="CalculateCalculate"" action="#{userBean.action="#{userBean.calculatecalculate}"}" reRender="reRender="outout" />" /><h:outputText id="<h:outputText id="outout" " value="#{userBean.value="#{userBean.resultresult}"/>}"/>

<<a4j:commandLinka4j:commandLink reRender="out"> reRender="out">    <h:outputText value="Say Hello" />     <h:outputText value="Say Hello" /> </a4j:commandLink> </a4j:commandLink>

Page 20: Rich faces

a4j:polla4j:poll

• Periodically sends AJAX request to serverPeriodically sends AJAX request to server

• Poll server dataPoll server data

• Update the pageUpdate the page

• intervalinterval – number of milliseconds between – number of milliseconds between requestsrequests

• enabledenabled – whether the component should – whether the component should send requests or notsend requests or not

• Component should be placed inside a form Component should be placed inside a form

Page 21: Rich faces

a4j:poll – Example a4j:poll – Example

• Using <a4j:poll>

<a4j:poll id="poll" interval="100"<a4j:poll id="poll" interval="100" enabled="#{clockBean.enabled}"enabled="#{clockBean.enabled}" reRender="clock" />reRender="clock" /><h:panelGrid columns="3"><h:panelGrid columns="3"> <a4j:commandButton value="Start Clock"<a4j:commandButton value="Start Clock" action="#{clockBean.startClock}"action="#{clockBean.startClock}" reRender="poll" />reRender="poll" /> <a4j:commandButton value="Stop Clock"<a4j:commandButton value="Stop Clock" action="#{clockBean.stopClock}"action="#{clockBean.stopClock}" reRender="poll" />reRender="poll" /> <h:outputText id="clock" <h:outputText id="clock" value="#{clockBean.now}" />value="#{clockBean.now}" /></h:panelGrid></h:panelGrid>

Page 22: Rich faces

RichFaces UI ComponentsRichFaces UI Components

Page 23: Rich faces

RichFaces UI componentsRichFaces UI components

• MenusMenus

• CalendarCalendar

• TreesTrees

• SelectsSelects

• Data IterationData Iteration

• Ajax ValidatorsAjax Validators

Page 24: Rich faces

MenusMenus

Page 25: Rich faces

Menus

• Menus available in RichFaces

• <rich:contextMenu>

• <rich:dropDownMenu>

• Related components

• <rich:menuItem>

• <rich:menuSeparator>

• <rich:menuGroup>

Page 26: Rich faces

Drop Down Menu

• Classic menu

• Support icons

• Submenus

• <rich:dropDownMenu><rich:dropDownMenu>

• Can contain

• Menu items

• Menu groups

• Menu separators

Page 27: Rich faces

Drop Down Menu – Key Attributes

• eventevent – event that triggers menu appearance

• directiondirection – direction of appearance

• joinPointjoinPoint – corner of the label for the pop-up to be connected with

• submitModesubmitMode – server, ajax, none

• valuevalue – text for the menu label

• Facet can be used instead......<f:facet name="label"><f:facet name="label">    <h:graphicImage value="/images/img1.png"/>    <h:graphicImage value="/images/img1.png"/></f:facet></f:facet>... ...

Page 28: Rich faces

Menu Item

• Defines a single item in a menu

• <rich:menuItem><rich:menuItem>

• Key attributes

• valuevalue – text for the label

• iconicon – icon of the menu item

• actionaction – action to be invoked

• submitModesubmitMode – server, ajax, none

Page 29: Rich faces

Menu Group & Menu Separator

• <rich:menuGroup><rich:menuGroup>

• Label for secondary levels on the menu

• valuevalue – text for the label

• iconicon – icon of the group

• <rich:menuSeparator><rich:menuSeparator>

• Horizontal separator

• Can be placed between groups and items

Page 30: Rich faces

• Using menu components:

Menu Components – Example

......<rich:dropDownMenu value="File" direction="bottom-right" jointPoint="bl"><rich:dropDownMenu value="File" direction="bottom-right" jointPoint="bl">    <rich:menuItem submitMode="ajax" value="New" action="#{ddmenu.doNew}"/>    <rich:menuItem submitMode="ajax" value="New" action="#{ddmenu.doNew}"/>    <rich:menuItem   submitMode="ajax"  value="Open" action="#{ddmenu.doOpen}"/>    <rich:menuItem   submitMode="ajax"  value="Open" action="#{ddmenu.doOpen}"/>       <rich:menuGroup value="Save As..."> <rich:menuGroup value="Save As...">        <rich:menuItem   submitMode="ajax" value="Text File"         <rich:menuItem   submitMode="ajax" value="Text File"   action="#{ddmenu.doSaveText}"/> action="#{ddmenu.doSaveText}"/>               <rich:menuItem   submitMode="ajax" value="PDF File"   <rich:menuItem   submitMode="ajax" value="PDF File"   action="#{ddmenu.doSavePDF}"/>action="#{ddmenu.doSavePDF}"/>    </rich:menuGroup>    </rich:menuGroup>    <rich:menuItem  submitMode="ajax" value="Close" action="#{ddmenu.doClose}"/>    <rich:menuItem  submitMode="ajax" value="Close" action="#{ddmenu.doClose}"/>        <rich:menuSeparator id="menuSeparator11"/><rich:menuSeparator id="menuSeparator11"/>    <rich:menuItem  submitMode="ajax" value="Exit"  action="#{ddmenu.doExit}"/>    <rich:menuItem  submitMode="ajax" value="Exit"  action="#{ddmenu.doExit}"/></rich:dropDownMenu></rich:dropDownMenu>... ...

Page 31: Rich faces

Context Menu

• Multilevel context menu

• <rich:contextMenu><rich:contextMenu>

• Can be applied to anyelement on the page

• Can contain

• Menu items

• Menu groups

• Menu separators

Page 32: Rich faces

Context Menu – Key Context Menu – Key AttributesAttributes

• eventevent – event that triggers menu appearance

• Default value is "oncontextmenu"

• disableDefaultMenudisableDefaultMenu – forbids defaults handling e.g. standard browser menu

• attached attached – weather to attach to parent or specific component

• attachToattachTo – id of the component to attach to

• Lower priority than attached attribute

• submitModesubmitMode – server, ajax, none

Page 33: Rich faces

Context Menu - ExampleContext Menu - Example

• Using <rich:contectMenu>:

......<h:panelGrid columns="1" columnClasses="cent"><h:panelGrid columns="1" columnClasses="cent"> <h:panelGroup id="picture"> <h:panelGroup id="picture"> <h:graphicImage value="/richfaces/jQuery/images/pic1.jpg" id="pic"/> <h:graphicImage value="/richfaces/jQuery/images/pic1.jpg" id="pic"/>  <rich:contextMenu event="oncontextmenu"   <rich:contextMenu event="oncontextmenu"  attachTo="pic" submitMode="none">attachTo="pic" submitMode="none">     <rich:menuItem value="Zoom In" onclick="enlarge('pic');"      <rich:menuItem value="Zoom In" onclick="enlarge('pic');"  id="zin</rich:menuItem>id="zin</rich:menuItem>      <rich:menuItem value="Zoom Out" onclick="decrease('pic');"       <rich:menuItem value="Zoom Out" onclick="decrease('pic');"  id="zout"></rich:menuItem>id="zout"></rich:menuItem>    </rich:contextMenu>    </rich:contextMenu> </h:panelGroup></h:panelGroup></h:panelGrid> </h:panelGrid> ... ...

Page 34: Rich faces

CalendarCalendar

Page 35: Rich faces

CalendarCalendar

• Allows date and time selection

• <rich:calendar><rich:calendar>

• Visualization

• Popup

• Inline

• Customization

• Locales

• Positioning

• Date pattern

Page 36: Rich faces

Calendar – Key AttributesCalendar – Key Attributes

• popuppopup – specify popup or inline mode

• localelocale – locale used for visualization

• Default – locale of the current page

• datePatterndatePattern – defines date pattern

• Default is MMM d, yyyy

• showInputshowInput –to render or not input field

• valuevalue – stores selected date

• enableManualInputenableManualInput – allows manual entry in – allows manual entry in the input field (false by default)the input field (false by default)

Page 37: Rich faces

• Using <rich:calendar>:

Calendar – ExampleCalendar – Example

...... <rich:calendar <rich:calendar value="#{calendarBean.selectedDate}" value="#{calendarBean.selectedDate}" id="calendar"id="calendar" locale="#{calendarBean.locale}" locale="#{calendarBean.locale}" popup="#{calendarBean.popup}"popup="#{calendarBean.popup}" datePattern="#{calendarBean.pattern}"datePattern="#{calendarBean.pattern}" showApplyButton="#{calendarBean.showApply}" showApplyButton="#{calendarBean.showApply}" cellWidth="24px" cellHeight="22px" style="width:200px"cellWidth="24px" cellHeight="22px" style="width:200px" disabled="#{calendarBean.disabled}">disabled="#{calendarBean.disabled}"></rich:calendar> </rich:calendar> ......

Page 38: Rich faces

TreesTrees

Page 39: Rich faces

TreesTrees

• Tree structure

• Customizable

• Build in Ajax processing

• Drag and drop capability

• Related components

• Tree

• Tree node

• Tree adaptor

• Recursive tree adaptor

Page 40: Rich faces

TreeTree

• <rich:tree><rich:tree>

• Renders a tree controlRenders a tree control

• Using its immediate <rich:treeNode> childrenUsing its immediate <rich:treeNode> children

• From a tree like data modelFrom a tree like data model

• org.richfaces.model.TreeNodeorg.richfaces.model.TreeNode

• javax.swing.tree.TreeNodejavax.swing.tree.TreeNode

• Custom implementationsCustom implementations

Page 41: Rich faces

Tree – Key AttributesTree – Key Attributes

• valuevalue – contains the nodes structure – contains the nodes structure

• varvar – name used for accessing data defined with – name used for accessing data defined with valuevalue

• nodeFacenodeFace – node face facet name – node face facet name

• Used for node representation in <rich:treeNode> Used for node representation in <rich:treeNode>

• switchTypeswitchType – tree switch type – tree switch type

• ajaxajax – ajax request is send for collapse/expand – ajax request is send for collapse/expand operationsoperations

• clientclient – all node are rendered in advance – all node are rendered in advance

• Expand/collapse do not require server callExpand/collapse do not require server call

• serverserver – full page content will be reloaded – full page content will be reloaded

Page 42: Rich faces

Tree NodeTree Node

• <rich:treeNode><rich:treeNode> – defines a template for – defines a template for nodes rendering within a <rich:tree>nodes rendering within a <rich:tree>

• Possibility for different images for each nodePossibility for different images for each node• specified with specified with iconicon , , iconCollapsediconCollapsed , ,

iconExpandediconExpanded , , iconLeaficonLeaf attributes attributes

• typetype attribute – a node type attribute – a node type• Defines the rendering and behaviourDefines the rendering and behaviour

• Its value is matched with the value of Its value is matched with the value of nodeFacenodeFace

• renderedrendered attribute – if false the component is attribute – if false the component is not renderednot rendered

Page 43: Rich faces

• Using trees:

Trees – Example Trees – Example

<rich:tree value="#{library.data}" var="item" <rich:tree value="#{library.data}" var="item" nodeFace="#{item.type}" switchType="client">nodeFace="#{item.type}" switchType="client"> <rich:treeNode type="artist" <rich:treeNode type="artist" iconLeaf="/images/tree/singer.gif" iconLeaf="/images/tree/singer.gif" icon="/images/tree/singer.gif">icon="/images/tree/singer.gif"> <h:outputText value="#{item.name}" /><h:outputText value="#{item.name}" /> </rich:treeNode></rich:treeNode> <rich:treeNode type="album" <rich:treeNode type="album" iconLeaf="/images/tree/disc.gif" iconLeaf="/images/tree/disc.gif" icon="/images/tree/disc.gif">icon="/images/tree/disc.gif"> <h:outputText value="#{item.title}" /><h:outputText value="#{item.title}" /> </rich:treeNode></rich:treeNode> <rich:treeNode type="song" <rich:treeNode type="song" iconLeaf="/images/tree/song.gif" iconLeaf="/images/tree/song.gif" icon="/images/tree/song.gif">icon="/images/tree/song.gif"> <h:outputText value="#{item.title}" /><h:outputText value="#{item.title}" /> </rich:treeNode></rich:treeNode></rich:tree></rich:tree>

Page 44: Rich faces

Tree Node – Example Tree Node – Example

• typetype and and renderedrendered attributes usage: attributes usage:<<rich:tree value="#{library.data}" var="item" nodeFace="#{item.type}"> <rich:treeNode type="album" <rich:treeNode type="album" iconLeaf="/images/tree/album.gif" iconLeaf="/images/tree/album.gif" icon="/images/tree/album.gif" icon="/images/tree/album.gif" rendered="#{item.exist}" >rendered="#{item.exist}" > <h:outputText value="#{item.name}" /> </rich:treeNode> <rich:treeNode type="album" type="album" iconLeaf="/images/tree/album_absen.gif" icon="/images/tree/album_absen.gif"  rendered="#{not item.exist}" rendered="#{not item.exist}" > <h:outputText value="#{item.title}" /> </rich:treeNode> <rich:treeNode type="song" type="song" iconLeaf="/images/tree/song.gif" ...</rich:tree>

Page 45: Rich faces

SelectsSelects

Page 46: Rich faces

SelectsSelects

• Implement user select functionalityImplement user select functionality

• ComponentsComponents

• List shuttleList shuttle

• Ordering listOrdering list

• Pick listPick list

Page 47: Rich faces

List ShuttleList Shuttle

• <rich:listShuttle><rich:listShuttle>

• Move items from one list into anotherMove items from one list into another

• Can contain several columnsCan contain several columns

• Allow multiple selectionAllow multiple selection

• Support reorderingSupport reordering

• Consist of:Consist of:

• Two item listsTwo item lists

• Optional caption elementOptional caption element

• Optional ordering control setOptional ordering control set

• Move controls setMove controls set

Page 48: Rich faces

List Shuttle – AttributesList Shuttle – Attributes

• sourceValuesourceValue – list of items for the source list – list of items for the source list

• targetValuetargetValue – list of items for the target list – list of items for the target list

• varvar – shared between both lists to define lists – shared between both lists to define lists on the page (variable name to access values)on the page (variable name to access values)

• sourceRequiredsourceRequired, , targetRequiredtargetRequired – if it is – if it is required to have items in the source or targetrequired to have items in the source or target

• sourceSelectionsourceSelection, , targetSelectiontargetSelection – store – store items selected in the listsitems selected in the lists

• converterconverter – converts component data to a – converts component data to a value that will be displayed value that will be displayed

Page 49: Rich faces

List Shuttle – Attributes (2)List Shuttle – Attributes (2)

• Define caption labels Define caption labels • sourceCaptionLabelsourceCaptionLabel

• targetCaptionLabeltargetCaptionLabel

• Define control labelsDefine control labels• topControlLabeltopControlLabel

• bottomControlLabelbottomControlLabel

• upControlLabelupControlLabel

• downControlLabeldownControlLabel

• Define size Define size • listsHeightlistsHeight

• sourceListWidthsourceListWidth

• targetListWidthtargetListWidth

Page 50: Rich faces

List Shuttle – ExampleList Shuttle – Example

• Using list shuttle:......<rich:listShuttle <rich:listShuttle sourceValuesourceValue="#{toolBar.freeItems}"="#{toolBar.freeItems}" targetValuetargetValue="#{toolBar.items}" ="#{toolBar.items}" varvar="items" ="items" listsHeightlistsHeight="150"="150" sourceListWidthsourceListWidth="130" targetListWidth="130" ="130" targetListWidth="130" sourceCaptionLabelsourceCaptionLabel="Available Items"="Available Items" targetCaptionLabeltargetCaptionLabel="Currently Active Items"="Currently Active Items" converterconverter="listShuttleconverter"> ="listShuttleconverter"> <rich:column width="18"> <rich:column width="18"> <h:graphicImage value="#{<h:graphicImage value="#{items.iconURIitems.iconURI}">}"> </h:graphicImage></h:graphicImage> </rich:column></rich:column> <rich:column><rich:column> <h:outputText value="#{<h:outputText value="#{items.labelitems.label}"></h:outputText>}"></h:outputText> </rich:column></rich:column></rich:listShuttle></rich:listShuttle>......

Page 51: Rich faces

Ordering ListOrdering List

• <rich:orderingList><rich:orderingList>

• Component for ordering items in a listComponent for ordering items in a list

• Reordering possibilityReordering possibility

• Sorting possibilitySorting possibility

• Consist of:Consist of:

• Item listItem list

• Ordering control setOrdering control set

Page 52: Rich faces

Ordering List – Key AttributesOrdering List – Key Attributes

• valuevalue – list that will be shown

• varvar – variable name to access values

• controlsTypecontrolsType – control rendering

• button or none

• selectionselection – stores the selected items

• captionLabelcaptionLabel – defines the caption

• topControlLabeltopControlLabel, bottomControlLabelbottomControlLabel, upControlLabelupControlLabel, downControlLabeldownControlLabel

Page 53: Rich faces

Ordering List – ExampleOrdering List – Example

• Using ordering list:......<<rich:orderingListrich:orderingList valuevalue="#{library.songsList}" ="#{library.songsList}" varvar="lib" ="lib" listHeightlistHeight="300" listWidth="350" ="300" listWidth="350" converterconverter="orderingListConverter" ="orderingListConverter" selectionselection="#{library.selectedSongsSet}">="#{library.selectedSongsSet}"> <rich:column width="180"><rich:column width="180"> <f:facet name="header"><f:facet name="header"> <h:outputText value="Song Name" /><h:outputText value="Song Name" /> </f:facet> </f:facet> <h:outputText value="#{<h:outputText value="#{lib.titlelib.title}"}" / />> </rich:column></rich:column> <rich:column> <rich:column> <f:facet name="header"><f:facet name="header"> <h:outputText value="Artist Name" /><h:outputText value="Artist Name" /> </f:facet></f:facet> <h:outputText<h:outputText value="#{value="#{lib.album.artist.namelib.album.artist.name}"}" / /><br/>><br/> </rich:column></rich:column></rich:orderingList></rich:orderingList>......

Page 54: Rich faces

Pick ListPick List

• <rich:pickList><rich:pickList>

• Move selected items from one list to anotherMove selected items from one list to another

• Simplified version of list shuttleSimplified version of list shuttle

• Consist of:Consist of:

• Two item listsTwo item lists

• Move controls setMove controls set

Page 55: Rich faces

Pick List – Key AttributesPick List – Key Attributes

• valuevalue – the current value of the component

• <f:selectItem(s)><f:selectItem(s)> – define source items

• switchByClickswitchByClick – move items with one click

• showButtonsLabelshowButtonsLabel – to display labels or not

• listsHeightlistsHeight, sourceListWidthsourceListWidth, targetListWidthtargetListWidth

• Resizing

• copyAllControlLabelcopyAllControlLabel, copyControlLabelcopyControlLabel, removeControlLabelremoveControlLabel, removeAllControlLabelremoveAllControlLabel

• Labels definition

Page 56: Rich faces

Pick List – ExamplePick List – Example

• Using pick list:

......<rich:pickList value="#{pickListBean.result}"><rich:pickList value="#{pickListBean.result}"> <<f:selectItemsf:selectItems value="#{capitalsBean.capitalsOptions}"/> value="#{capitalsBean.capitalsOptions}"/>  <a4j:support event="onlistchanged" reRender="result"/>  <a4j:support event="onlistchanged" reRender="result"/></rich:pickList></rich:pickList>                <rich:panel id="result" bodyClass="pbody"><rich:panel id="result" bodyClass="pbody"> <f:facet name="header"> <f:facet name="header">   <h:outputText value="#{pickListBean.items} Options Choosen"   <h:outputText value="#{pickListBean.items} Options Choosen"//>>  </f:facet>  </f:facet>  <rich:dataList value="#{pickListBean.result}"   <rich:dataList value="#{pickListBean.result}"  var="pickList" rendered="#{pickListBean.items>0}"> var="pickList" rendered="#{pickListBean.items>0}">    <h:outputText value="#{pickList}"/>   <h:outputText value="#{pickList}"/>  </rich:dataList>   </rich:dataList> </rich:panel> </rich:panel> ......

Page 57: Rich faces

Data IterationData Iteration

Page 58: Rich faces

Data Iteration

• Components iterating over collection of data

• Render data in tabular or list form

• Several components with different functionality• <rich:dataGrid><rich:dataGrid>

• <rich:dataList> <rich:dataList>

• <rich:dataOrderedList><rich:dataOrderedList>

• <rich:dataTable> <rich:dataTable>

• <rich:extendedDataTable<rich:extendedDataTable

• …

Page 59: Rich faces

Frequently Used Attributes

• valuevalue – the current value

• varvar – name of the attribute used for accessing data object

• rowsrows – number of rows to display

• columnscolumns – number of columns

• selectionselection – stores the selected items

Page 60: Rich faces

Example – Data List

• Using data list:

......<rich:dataList var="car" <rich:dataList var="car"  rows="10"rows="10" value="#{dataTableScrollerBean.allCars}" >value="#{dataTableScrollerBean.allCars}" > <h:outputText value="#{ <h:outputText value="#{car.makecar.make} #{} #{car.modelcar.model}"/><br/>}"/><br/>  <h:outputText value="Price:" />  <h:outputText value="Price:" />  <h:outputText value="#{  <h:outputText value="#{car.pricecar.price} " />} " />  <h:outputText value="Mileage:"/>  <h:outputText value="Mileage:"/>  <h:outputText value="#{  <h:outputText value="#{car.mileagecar.mileage} " />} " />  <h:outputText value="VIN:" />   <h:outputText value="VIN:" />   <h:outputText value="#{  <h:outputText value="#{car.vincar.vin}" />}" />

</rich:dataList></rich:dataList> ......

Page 61: Rich faces

Example – Data Grid

• Using Data Grid:......<<rich:dataGridrich:dataGrid  valuevalue="#{dataTableScrollerBean.allCars}" ="#{dataTableScrollerBean.allCars}"  var="car"var="car"  columnscolumns="3" ="3" elementselements="9" ="9" widthwidth="600px">="600px"> <rich:panel bodyClass="pbody"> <rich:panel bodyClass="pbody">   <f:facet name="header">   <f:facet name="header">     <h:outputText value="#{car.make} #{car.model}" />     <h:outputText value="#{car.make} #{car.model}" />    </f:facet>    </f:facet>    <h:panelGrid columns="2">    <h:panelGrid columns="2">     <h:outputText value="Price:" />     <h:outputText value="Price:" />      <h:outputText value="#{      <h:outputText value="#{car.pricecar.price}" />}" />      <h:outputText value="Mileage:" />      <h:outputText value="Mileage:" />      <h:outputText value="#{      <h:outputText value="#{car.mileagecar.mileage}" />}" /> ... ...        </h:panelGrid></h:panelGrid>  </rich:panel>  </rich:panel>  <f:facet name="footer">  <f:facet name="footer">   <rich:datascroller></rich:datascroller>   <rich:datascroller></rich:datascroller>  </f:facet>  </f:facet></rich:dataGrid> </rich:dataGrid> ......

Page 62: Rich faces

Example – Scrollable Data Table

• Using scrollable data table:......<<rich:scrollableDataTablerich:scrollableDataTable  rowKeyVarrowKeyVar="rkv" ="rkv"  frozenColCountfrozenColCount="1" ="1" heightheight="400px" ="400px"             widthwidth="700px" ="700px" idid="carList" ="carList" rowsrows="40" ="40" columnClassescolumnClasses="col"="col"            valuevalue="#{dataTableScrollerBean.allCars}" ="#{dataTableScrollerBean.allCars}" varvar="category" sortMode="single"="category" sortMode="single"            sortOrdersortOrder="#{dataTableScrollerBean.order}"="#{dataTableScrollerBean.order}"            selectionselection="#{dataTableScrollerBean.selection}">="#{dataTableScrollerBean.selection}"> <rich:column id="make"> <rich:column id="make">   <f:facet name="header"><h:outputText value="Make" /></f:facet>   <f:facet name="header"><h:outputText value="Make" /></f:facet>    <h:outputText value="#{category.make}" />    <h:outputText value="#{category.make}" />  </rich:column>  </rich:column>  <rich:column id="model">  <rich:column id="model">   <f:facet name="header"><h:outputText value="Model" /></f:facet>   <f:facet name="header"><h:outputText value="Model" /></f:facet>  <h:outputText value="#{category.model}" />  <h:outputText value="#{category.model}" />  </rich:column>  </rich:column> ......</rich:scrollableDataTable>         </rich:scrollableDataTable>         ......

Page 63: Rich faces

Ajax ValidatorsAjax Validators

Page 64: Rich faces

Ajax Validators

• Validate user input

• Enhanse JSF validation with Ajax support

• Possibility to use Hibernate validators

• Components

• Ajax validator

• Bean validator

• Graph validator

Page 65: Rich faces

Ajax Validator

• <rich:ajaxValidator><rich:ajaxValidator>

• Ajax validation for JSF inputs

• Should be added as child component

• Event that triggers validation should be specified

• Can use both standard or custom validation

• Can use Hibernate Validation

• Skips all JSF processing except validation

Page 66: Rich faces

Ajax Validator – Example

• Using Ajax validator:

......<h:inputText value="#{userBean.name}" <h:inputText value="#{userBean.name}"  id="name" required="true"> id="name" required="true"> <f:validateLength minimum="3" maximum="12"/><f:validateLength minimum="3" maximum="12"/>    <rich:ajaxValidator event="onblur"/><rich:ajaxValidator event="onblur"/></h:inputText></h:inputText><rich:message for="name" /> <rich:message for="name" /> ......

Page 67: Rich faces

Bean Validator

• <rich:beanValidator><rich:beanValidator>

• Validation using Hibernate constraints:......<h:inputText value="#{validationBean.email}" <h:inputText value="#{validationBean.email}"  id="email">id="email"> <rich:beanValidator summary="Invalid email"/><rich:beanValidator summary="Invalid email"/></h:inputText></h:inputText><rich:message for="email" /> <rich:message for="email" /> ......

public class ValidationBean { public class ValidationBean { ......        @Email@Email    @NotEmpty    @NotEmpty    private String email;     private String email;

        /* Corresponding Getters and Setters */ /* Corresponding Getters and Setters */ ......

Page 68: Rich faces

Graph Validator

• <rich:graphValidator><rich:graphValidator>

• Similar to bean validator

• Wraps multiple input components

• Validates all of them

• Option to bind the component to a managed bean

• Using valuevalue attribute

• After the input is validated all bean properties are validated again.

Page 69: Rich faces

Graph Validator - Example

• Using graph validator:

......<rich:graphValidator summary="Invalid values: "><rich:graphValidator summary="Invalid values: "> <h:panelGrid columns="3"> <h:panelGrid columns="3">   <h:outputText value="Name:" />   <h:outputText value="Name:" />   <h:inputText value="#{validationBean.name}" id="name">   <h:inputText value="#{validationBean.name}" id="name">     <f:validateLength minimum="2" />     <f:validateLength minimum="2" />    </h:inputText>    </h:inputText>    <rich:message for="name" />    <rich:message for="name" />    <h:outputText value="Email:" />    <h:outputText value="Email:" />    <h:inputText value="#{validationBean.email}" id="email"/>    <h:inputText value="#{validationBean.email}" id="email"/>    <rich:message for="email" />    <rich:message for="email" />    <h:outputText value="Age:" />    <h:outputText value="Age:" />    <h:inputText value="#{validationBean.age}" id="age" />    <h:inputText value="#{validationBean.age}" id="age" />    <rich:message for="age" />    <rich:message for="age" />  </h:panelGrid>  </h:panelGrid>

</rich:graphValidator></rich:graphValidator> ......

Page 70: Rich faces

Skins and themingSkins and theming

Page 71: Rich faces

SkinsSkins

• Lightweight extension on top of CSSLightweight extension on top of CSS

• Change look and feel of all Rich component Change look and feel of all Rich component with a few minor changeswith a few minor changes

• Can be applied to standard JSF and HTML Can be applied to standard JSF and HTML tags as welltags as well

• Many ready to use skinsMany ready to use skins

<context-param><context-param> <param-name>org.richfaces.skin</param-name><param-name>org.richfaces.skin</param-name> <param-value>ruby</param-value><param-value>ruby</param-value></context-param></context-param>

Page 72: Rich faces

Skins (2)Skins (2)

• Modify existing or create your ownModify existing or create your own

• Change skins in runtimeChange skins in runtime

<context-param><context-param> <param-name>org.richfaces.skin</param-name><param-name>org.richfaces.skin</param-name> <param-value><param-value>myCustomSkinmyCustomSkin</param-value></param-value></context-param></context-param>

<context-param><context-param> <param-name>org.richfaces.skin</param-name><param-name>org.richfaces.skin</param-name> <param-value<param-value>#{bean.skin}>#{bean.skin}</param-value></param-value></context-param></context-param>

Page 73: Rich faces

Skin file (properties file)Skin file (properties file)

#Colors#ColorsheaderBackgroundColor=#900000headerBackgroundColor=#900000headerGradientColor=#DF5858headerGradientColor=#DF5858headerTextColor=#FFFFFFheaderTextColor=#FFFFFFheaderWeightFont=boldheaderWeightFont=boldgeneralBackgroundColor=#f1f1f1generalBackgroundColor=#f1f1f1generalTextColor=#000000generalTextColor=#000000generalSizeFont=11pxgeneralSizeFont=11pxgeneralFamilyFont=Arial, Verdana, sans-serifgeneralFamilyFont=Arial, Verdana, sans-serifcontrolTextColor=#000000controlTextColor=#000000controlBackgroundColor=#ffffffcontrolBackgroundColor=#ffffffadditionalBackgroundColor=#F9E4E4additionalBackgroundColor=#F9E4E4

Page 74: Rich faces

Creating a Custom SkinCreating a Custom Skin

• Define a skin property file

• You can use existing skin as a base

• File name should be in the format

• <skinName>.skin.properties

• Place it in the project's source directory

• Set the skin parameter in web.xml

Page 75: Rich faces

Skins ExampleSkins Example

classic

wine

ruby

japanCherry

emeraldTown

Page 76: Rich faces

RichFaces DemoRichFaces Demo

http://livedemo.exadel.com/richfaces-demo

Page 77: Rich faces

Summary

• Introduction to RichFaces

• Ajax Action Components

• RichFaces UI Components

• Skins and Theming

Page 78: Rich faces

QuestionsQuestions??

Page 79: Rich faces

ExercisesExercises

• Review the Review the usage of of <rich:treeNodesAdaptor> and rich:treeNodesAdaptor> and <rich:recursiveTreeNodesAdaptor> and try to <rich:recursiveTreeNodesAdaptor> and try to understand how they work. Create a simple understand how they work. Create a simple application that uses one of them.application that uses one of them.

Page 80: Rich faces

ReferencesReferences

• RichFaces 4.0 Developer Guide - RichFaces 4.0 Developer Guide - http://www.jboss.org/richfaces/docs/4-http://www.jboss.org/richfaces/docs/4-0_guide 0_guide

• RichFaces 3.3 Developer Guide - RichFaces 3.3 Developer Guide - http://docs.jboss.org/richfaces/latest_3_3_X/http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/ en/devguide/html/

• DZone Refcardz - JBoss RichFaces - DZone Refcardz - JBoss RichFaces - http://refcardz.com/ http://refcardz.com/

• RichFaces Live DemoRichFaces Live Demohttp://livedemo.exadel.com/richfaces-demo http://livedemo.exadel.com/richfaces-demo