Date post: | 11-May-2015 |
Category: |
Education |
Upload: | bg-java-ee-course |
View: | 10,075 times |
Download: | 3 times |
RichFacesRichFaces
ContentsContents
• Introduction to RichFacesIntroduction to RichFaces
• Ajax Action ComponentsAjax Action Components
• RichFaces UI ComponentsRichFaces UI Components
• Skins and ThemingSkins and Theming
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
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
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
Introduction to Introduction to RichFacesRichFaces
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
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
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
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>
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
What do you get?What do you get?
• Many ready to use componentsMany ready to use components
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 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"%>
Ajax Action ComponentsAjax Action Components
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
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
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}" />
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>
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
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>
RichFaces UI ComponentsRichFaces UI Components
RichFaces UI componentsRichFaces UI components
• MenusMenus
• CalendarCalendar
• TreesTrees
• SelectsSelects
• Data IterationData Iteration
• Ajax ValidatorsAjax Validators
MenusMenus
Menus
• Menus available in RichFaces
• <rich:contextMenu>
• <rich:dropDownMenu>
• Related components
• <rich:menuItem>
• <rich:menuSeparator>
• <rich:menuGroup>
Drop Down Menu
• Classic menu
• Support icons
• Submenus
• <rich:dropDownMenu><rich:dropDownMenu>
• Can contain
• Menu items
• Menu groups
• Menu separators
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>... ...
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
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
• 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>... ...
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
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
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> ... ...
CalendarCalendar
CalendarCalendar
• Allows date and time selection
• <rich:calendar><rich:calendar>
• Visualization
• Popup
• Inline
• Customization
• Locales
• Positioning
• Date pattern
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)
• 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> ......
TreesTrees
TreesTrees
• Tree structure
• Customizable
• Build in Ajax processing
• Drag and drop capability
• Related components
• Tree
• Tree node
• Tree adaptor
• Recursive tree adaptor
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
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
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
• 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>
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>
SelectsSelects
SelectsSelects
• Implement user select functionalityImplement user select functionality
• ComponentsComponents
• List shuttleList shuttle
• Ordering listOrdering list
• Pick listPick list
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
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
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
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>......
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
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
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>......
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
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
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> ......
Data IterationData Iteration
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
• …
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
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> ......
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> ......
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> ......
Ajax ValidatorsAjax Validators
Ajax Validators
• Validate user input
• Enhanse JSF validation with Ajax support
• Possibility to use Hibernate validators
• Components
• Ajax validator
• Bean validator
• Graph validator
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
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" /> ......
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 */ ......
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.
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> ......
Skins and themingSkins and theming
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>
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>
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
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
Skins ExampleSkins Example
classic
wine
ruby
japanCherry
emeraldTown
RichFaces DemoRichFaces Demo
http://livedemo.exadel.com/richfaces-demo
Summary
• Introduction to RichFaces
• Ajax Action Components
• RichFaces UI Components
• Skins and Theming
QuestionsQuestions??
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.
•
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