Rich faces

download Rich faces

of 80

  • date post

  • Category


  • view

  • download


Embed Size (px)


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

Transcript of Rich faces

  • RichFaces

  • Contents

    Introduction to RichFacesAjax Action ComponentsRichFaces UI ComponentsSkins and Theming
  • Installation (JBoss Tools)

    Get a clean copy of Eclipse for JavaEE developers (helios)(32bit only)+tomcat7+pptExtractGo to Eclipse->Help->Install new softwareLocation:
    jbosstools/updates/stable/helios/Click ONLY ON Jboss Tools RichfacesNext -> Next -> Next ... Reboot EclipseExtract tomcat somewhere close to eclipseCreate workspace close to eclipse
  • Creating an eclipse project

    Create a new project -> JSF projectJSF Environment: JSF 1.2 + FaceletsTemplate: FaceletsKickStartWithRILibrsNextServlet version: 2.5Runtime -> New -> Tomcat7 -> Browse...Next ...Next... FinishNOTE: DELETE .../WEB-INF/lib/el-api.jarGo to project -> Run as -> Run on Server
  • Adding Richfaces

    MyProject -> right click -> Configure -> Add custom capabilities -> Richfaces 3.3.3Notification about which files have been changed. Next.. Next... Finish
  • Introduction to RichFaces

  • What is RichFaces

    A framework designed to add Ajax functionality in JSF solutions100+ AJAX enabled JSF components in two librariesa4j: page centric AJAX controls rich: self contained, ready to use componentsComponent Development Kit (CDK)Skinnability mechanismDynamic resources handling

    RichFaces is a JSF component library that consists of two main parts: AJAX enabled JSF components and the CDK

    (Component Development Kit). RichFaces UI components are divided into two tag libraries a4j: and rich:. Both tag libraries offer out-of-the-box AJAX enabled JSF components. The CDK is a facility for creating, generating and testing your own rich JSF components.





  • RichFaces History

    2005: started by Alexander Smirnov2005-2007: Developed by ExadelAjax4jsf - open source, freeRichFaces - commercial2007: Both are part of JBossOpen sourceAjax4jsf included in RichFacesExadel team continues to develop the framework
  • Versions

    Just released RichFaces 4Final release end of March 2011Previous stable version RichFaces 3.3.3

    * Note: RichFaces 3.3.3 has basic JSF 2.0 support

    VersionJSF 1.1JSF 1.2JSF 2.0RichFaces 3.1.xRichFaces 3.3.3*RichFaces 4
  • Example


    package demo;

    public class Bean {

    private String text;

    public Bean() {}

    public void setText(String text) {

    this.text = text;


    public String getText() {

    return text;







  • What do You Need to Start?

    JavaJavaServer FacesJava application server or servlet containerBrowser (on client side)RichFaces framework
  • What do you get?

    Many ready to use components
  • Installing RichFaces

    Download latest version from RichFaces jar files to WEB-INF/lib folderUpdate web.xml file with the RichFaces Filter

    RichFaces Filter




    Faces Servlet




  • Page Setup

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



  • Ajax Action Components

  • Sending Ajax Request

    a4j:support add AJAX support to any parent componenta4j:commandButton, a4j:commandLinka4j:poll periodically send AJAX request
  • Frequently Used Attributes

    action action to be invoked if component is activated event contains the JavaScript eventreRender coma separated list of components to be re-renderedajaxSingle set it to true in order to process only value of the current component
  • a4j:support

    Allow adding Ajax capability to any existing JSF componentShould be attached to direct child of the component Key attributeseventreRender
  • a4j:commandButton and a4j:commandLink

    Visualize as button or a linkProduces an Ajax requestUpdate specified elements

  • a4j:poll

    Periodically sends AJAX request to serverPoll server dataUpdate the pageinterval number of milliseconds between requestsenabled whether the component should send requests or notComponent should be placed inside a form

    a4j:poll is one of the way how you can organize the periodical polling of server data and updating the page. a4j:poll is a standard RichFaces Ajax component. Thus, you can use the same approach as for a4j:commandButton for example. I.e. you can use action attribute to invoke the action method and reRender attribute to update area(s) on the client when Ajax Response returns back. RichFaces uses the standard form based request, so the form around the a4j:poll component is required.

    interval attribute defines the interval in ms between the previous response and the next request. Hence, the total period between two requests generated by a4j:poll is a sum of interval and server response time.

    timeout attribute defines the time in ms for how long the the client will wait for the server response. if Ajax Response does not come during this period, the connection is aborted and the next request is sent. By default, the timeout is not set.

    enabled attribute defines should the a4j:poll send request or not. You can use EL to point to the bean property that will be the flag. Re-render the a4j:poll component itself to apply the current value. See the example how to accomplish this task.

    a4j:poll sends requests in parallel with user activities. The intersections between a4j:poll Ajax requests and other Ajax requests are possible. This might causes unpredictable glitches. Especially, it is true for the earlier version of JSF implementations when the parallel requests to the server was not expected. To avoid the problem, try to follow very simple rules:

    Have a separate form for a4j:poll. Note, that other fields will be included in request and processed on the server if the form contains not only a4j:poll;

    Surround a4j:poll with a4j:region. This allow to limit the part of the component tree that will be processed for each Ajax request;

    Try to avoid updating the same server data that might be updated by the Ajax requests produced by the user activities. If you need this, be sure your code allows to access the data from parallel thread without conflicts;

    Try to avoid re-rendering the area(s) with input field and other form controls. This causes the losing of input focus because the old elements are removed before the update with the upcomming ones

    Try to re-render as little area(s) on the client as possible. Try do not have intersections between the areas re-rendered by a4j:poll and areas re-rendered by other Ajax components;

    Use the eventsQueue with the same name as the name for other Ajax components. This allows to queue the Ajax request and avoid updating the server side data and re-rendering the page area(s) in parallel;

    Set the reasonable interval. Note that each Ajax request restores the session and a component tree as well as processes the whole JSF lifecycle. Too often requests just degrade the overall performance of an application

  • a4j:poll Example

  • RichFaces UI Components

  • RichFaces UI components

    MenusCalendarTreesSelectsData IterationAjax Validators
  • Menus

  • Menus

    Menus available in RichFaces Related components
  • Drop Down Menu

    Classic menuSupport icons SubmenusCan contain Menu itemsMenu groups Menu separators

    RichFaces Drop Down menu is a component that allows to organize the hierarchical menu similar to one that almost every desktop application has.

  • Drop Down Menu Key Attributes

    event event that triggers menu appearance direction direction of appearancejoinPoint corner of the label for the pop-up to be connected withsubmitMode server, ajax, nonevalue text for the menu labelFacet can be used instead



    The drop down menu has a label that always appears on the page and invisible panel that appears with a particular client side event (onmouseover, onclick etc). The event is defined with an 'event' attribute.

    Drop Down Menu can contains a set of Menu Items, Menu Groups and Menu Separators. Group plays a role of label for secondary levels on the menu. Separator is represented with horizontal lines between the items or groups. An item is an active element that might produce Ajax or non-Ajax requests. The submittion mode is defined with 'submitMode' attribute that has three possible options - "server", "ajax" or "none". Mode "none" does not produce any request, but allows you to provide your own functionality inside the menu item with an inline content.

    The "submitMode" attribute can be set to three possible parameters:

    Server (default) - Regular form submission request is used.Ajax - Ajax submission is used for switching.None


    Defines the event on the representation element that triggers the menu's appearance.


    Defines direction of the popup list to appear. Possible values are "top-right", "top-right", "top-left", "bottom-right", "bottom-left", "auto". Default value is "auto".


    Sets the corner of the label for the pop-up to be connected with. Possible values are "tr", "tl", "bl", "br", "bottom-left", "auto". Default value is "auto". "tr" stands for top-right.


    Sets the submission mode for all menu items of the menu except ones where this attribute redefined. Possible values are "ajax","server","none". Default value is "sever".


    Defines representation text for Label used for menu calls

  • Menu Item