j Richfaces PDF

Embed Size (px)

Citation preview

  • 8/4/2019 j Richfaces PDF

    1/22

    An introduction to RichFacesAdd desktop-like features to your browser applications

    Skill Level: Intermediate

    Joe Sam Shirah ([email protected])Developer and PrincipalconceptGO

    25 Mar 2008

    Today's clients want and have begun to expect desktop features in browser-basedapplications. RichFaces is one of a new breed of user interface component suitesavailable for Java Server Faces (JSF). Among other benefits, RichFaces providesbuilt-in JavaScript and Ajax capabilities to meet those expectations. Joe Sam Shirahadds some new tools to your kit based on experiences with a recent field project,including general setup for using RichFaces with Facelets, and several specific

    component examples.

    Recently a client engaged my company for what I considered to be a dream project.They had no on-staff developers and asked us to design and develop their firstproduction application involving a server with a browser client. The application wouldrun over their local-area network (LAN) and over the Internet, using a virtual privatenetwork (VPN). It's not unusual for me to take a project from an idea throughimplementation and training, but this was a rare opportunity to specify virtuallyeverything involved in the project. One major, if unstated, aspect of the project wasthat everyone was accustomed to desktop applications. They would probably notparticularly notice the inclusion of similar features in the browser user interface, but I

    had no doubt there would be many complaints if those features were missing. Theprimary page for the initial phase of the project, for example, would collect selectioncriteria for dynamic queries. Several input sections called for client-side operations,and at least one needed Ajax functionality. In the end I selected the RichFacescomponent suite, which is built on and merged with Ajax4jsf (see Resources).

    Choices, choicesThis article's intent is not to promote a specific product or

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 1 of 22

    mailto:[email protected]://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlmailto:[email protected]
  • 8/4/2019 j Richfaces PDF

    2/22

    component suite. Rather, it's to give you enough information to getstarted with RichFaces and some background to use for comparisonwhen you develop your own RIA or rich Web client. I encourage youto check out the possibilities, using this and other articles forpointers, and to come to your own conclusions.

    A good place to start your research is the JSF AJAX Component

    Library Feature Matrix (see Resources). Be sure to review anycomments at the bottom of that page, because the matrix is updatedinfrequently and this area changes rapidly. My own short list quicklyreduced to RichFaces, Woodstock, and IceFaces (see Resources).

    In addition to Rich Internet Application (RIA) capabilities and Ajax, my needsincluded:

    Open source, LGPL or Apache-style license, if possible

    Works with JSF and Facelets

    Works in conjunction with JSF Reference Implementation (RI)components

    Flexible but consistent look-and-feel or theme

    Large enough set of components to cover most application requirements

    Reasonably easy to work with, without show stoppers

    Dynamic creation ability, with available API

    Active development and community

    To this point, RichFaces has met these criteria, and the components have beenvaluable in creating effective and functional applications. As always, your criteria andmileage may vary.

    This article explores several useful RichFaces components and includes code for ademonstration application (see Download). Before we begin to look over RichFaces,however, there are some necessary infrastructure elements to cover.

    From the beginning

    Although in the initial phase the client's application could run using just a servletcontainer, future work would require additional support and would likely includeprojects for other corporate subsidiaries. To keep things as standard as possible, Ichose the open source Glassfish Application Server V2, which supports JEE 5, andused Java SE 6 as the underlying runtime. For the Web framework, JSF andFacelets were my choice. As a bonus, JSF support is included in Java EE 5; forGlassfish V2, WebSphere Application Server Community Edition V2, and others, the

    developerWorks ibm.com/developerWorks

    An introduction to RichFacesPage 2 of 22 Copyright IBM Corporation 1994, 2007. All rights reserved.

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    3/22

    JSF version supported is 1.2. Facelets (or similar) support is a goal for JSF 2.0, andthe primary Facelets developer is on the JSF Expert Group.

    This article assumes readers have a basic knowledge of these areas. The examplecode download includes everything you need for Tomcat 6.0.16 and Glassfish, and

    has been tested on both. The online version (see Resources) runs on Glassfish V2.If you need more background on these technologies, see Resources for appropriatelinks.

    Not small faces

    Facelets, despite its name, is not a smaller version of JSF; instead, at its core,Facelets provides an alternative to JSP as a JSF ViewHandler, and that's whatwe'll use it for here. When I first researched JSF, I ran across Hans Bergsten'sarticle "Improving JSF by Dumping JSP" (see Resources). Shortly thereafter, I

    discovered Facelets and have never looked back. Facelets supports all of the JSFUI components and builds its own component tree, reflecting the view for a JSFapplication. Although both JSP and JSF technologies have been improved to worktogether better, Facelets just works, completely eliminating the issues noted inBergsten's article.

    I prefer keeping things as clean and straightforward as possible. In the exampleproject, you'll see that virtually all of the code (as opposed to markup) is composedof Expression Language (EL) expressions for getters, setters, and method bindings.Although more complex projects may call for more complex expressions, in generalFacelets makes it easy to keep Java code separate from your Web page markup.

    The primary differences you'll notice here from "normal" JSF development using JSPare:

    You'll need jsf-facelets.jar.

    Some notations in web.xml and faces-config.xml.

    Web pages are XHTML documents.

    XML namespaces are used rather than JSP taglibs.

    As far as formatting goes, other than the initial portions (see Listing 1), everything in

    the Web page should look familiar. I view that aspect as an understated Faceletsfeature. For this article's project, and many others where the primary use of Faceletsis for handling the view, that's really all you need to know. Facelets also includes anumber of other useful features, such as easy templating and elements to make lifeeasier for Web page designers. For readers interested in learning more aboutFacelets, I recommend starting with "Inside Facelets Part 1: An Introduction" (seeResources).

    ibm.com/developerWorks developerWorks

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 3 of 22

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    4/22

    Listing 1. Initial portion of a Facelets XHTML document

    The demonstration components

    RichFaces can seem overwhelming; the average component has over 20 specificattributes, plus general attributes that can be overridden. However, most attributeshave reasonable defaults, and in typical usage, the components are not difficult toset up. There are several flashy components that handle various effects like GoogleMaps and Virtual Earth. You may want to use them to excite your user base, buthere I am going to focus on components that will be useful across manyapplications. That's exciting enough for me.

    The primary components demonstrated in this article are:

    Calendar a pop-up component that allows date selections. Figure 1shows an example. < and > roll the month; > roll the year.Clicking Today at the bottom selects today's date. Clean clears the dateselection. The column of numbers to the left shows the week of the year.Figure 1. RichFaces Calendar component

    developerWorks ibm.com/developerWorks

    An introduction to RichFacesPage 4 of 22 Copyright IBM Corporation 1994, 2007. All rights reserved.

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    5/22

    List Shuttle a selection and ordering component that can move itemsbetween available and selected areas, and up and down in the selectedarea. Figure 2 shows an example:Figure 2. RichFaces List Shuttle component

    Suggestion Box an input component that provides clickablesuggestions to complete an entry. Figure 3 shows an example:Figure 3. RichFaces Suggestion Box component

    Tab Panel an output component that creates tabbed pages. Figure 4shows an example:

    Figure 4. RichFaces Tab Panel component

    We'll also use a Panel Bar for instructions. Figure 5 shows an example:

    ibm.com/developerWorks developerWorks

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 5 of 22

    http://fig3/http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://fig3/
  • 8/4/2019 j Richfaces PDF

    6/22

    Figure 5. RichFaces Panel Bar component

    And we'll use Simple Toggle Panels for results. Figure 6 shows an example:

    Figure 6. RichFaces Simple Toggle Panel component

    As I mentioned earlier, RichFaces is built on Ajax4jsf. Thanks to that foundation, anycomponent can be Ajax-enabled in several different ways. The example applicationuses Ajax capabilities for the Suggestion Box and Simple Toggle Panel components.

    developerWorks ibm.com/developerWorks

    An introduction to RichFacesPage 6 of 22 Copyright IBM Corporation 1994, 2007. All rights reserved.

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    7/22

    My brave face

    The dWRFDemo1 example application is minimal; its only real purpose is todemonstrate setup and usage of the selected components. For that reason, all it

    does is collect and display input data. I'll leave to your imagination how to use thedata and components in a production application. Aside from necessary JARs,images, a properties file used as a resource bundle, and a Cascading Style Sheets(CSS) file, the application consists of two XHTML pages and two Java classes. Thissimplicity also allows the code to be IDE agnostic. In fact, I purposely created it with

    just a Java editor, Wordpad for the files, javac, and the jar command.

    The URL for the input page displayed in Figure 7, assuming default setup for Tomcator Glassfish, is http://localhost:8080/dWRichFacesDemo1. The input page allowsyou to select a date using the Calendar component. The Order By List Shuttlecomponent lets you move and reorder the available items. The City Suggestion Box

    lets you key in a city name. City is Ajax-enabled; if you press the space bar, allavailable cities are shown. If you key city names beginning with an A or a J, lists ofthe appropriate cities are shown. The available cities on the list narrow as you keymore characters. You can click on the Panel Bar items on the left for very basiccomponent instructions.

    Figure 7. dWRFDemo1 input page

    ibm.com/developerWorks developerWorks

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 7 of 22

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    8/22

    Once you've made your entries, click the Submit button. The application is sominimal that no editing is performed. Because manual input is disabled for theCalendar component, you can't even enter an invalid date. The Submit button

    causes the results page to display, as shown in Figure 8:

    Figure 8. dWRFDemo1 Result page

    developerWorks ibm.com/developerWorks

    An introduction to RichFacesPage 8 of 22 Copyright IBM Corporation 1994, 2007. All rights reserved.

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    9/22

    On the results page, click on the Result tab, then click the appropriate SimpleToggle Panel item to see the input value. Click the Edit button to return to the inputpage.

    Set me up

    The very first things necessary for an application are the JSF, Facelets, andRichFaces enablers that is, the JARs that implement the capabilities. TheseJARs, with the versions noted in the lists below, are included in the lib directory ofthe downloadable WAR (see Download). The list assumes your Web containersupports current EL and servlet API versions. If you have issues running thedemonstration, check JSF, Facelets, and RichFaces requirements (see Resources.)You should also review the Download note.

    JSF 1.2 (as included in Glassfish V2)

    jsf-api.jar

    jsf-impl.jar

    Facelets 1.1.14

    ibm.com/developerWorks developerWorks

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 9 of 22

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    10/22

    jsf-facelets.jar

    RichFaces

    richfaces-api-3.1.4.GA.jar

    richfaces-impl-3.1.4.GA.jar

    richfaces-ui-3.1.4.GA.jar

    Although they are not noted as explicit requirements, RichFaces assumesthe following JARs are also available:

    commons-beanutils-1.7.0.jar

    commons-collections-3.2.jar

    commons-digester-1.8.jar

    commons-logging-1.0.4.jar jhighlight-1.0.jar

    Next are web.xml entries, shown in Listing 2, needed to enable JSF:

    Listing 2. Minimum JSF entries required in web.xml

    Faces Servletjavax.faces.webapp.FacesServlet1

    Faces Servlet*.jsf

    Listing 3 shows another web.xml entry needed for Facelets. The entry overrides the.jsp default suffix. Normally, Facelets requires another overriding entry for the viewhandler in faces-config.xml, but the RichFaces setup, as you'll see below, includesthe override in web.xml.

    Listing 3. web.xml entry for Facelets suffix

    javax.faces.DEFAULT_SUFFIX.xhtml

    Listing 4 shows the elements needed in web.xml to enable RichFaces:

    Listing 4. web.xml entries to enable RichFaces

    developerWorks ibm.com/developerWorks

    An introduction to RichFacesPage 10 of 22 Copyright IBM Corporation 1994, 2007. All rights reserved.

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    11/22

    org.richfaces.SKINclassic

    org.ajax4jsf.VIEW_HANDLERScom.sun.facelets.FaceletViewHandler

    RichFaces Filterrichfacesorg.ajax4jsf.Filter

    richfacesFaces ServletREQUESTFORWARDINCLUDE

    I'll explain the elements in Listing 4 in the order that makes things operable, ratherthan the order in which they appear in web.xml:

    and RichFaces uses a filter to process code received on Ajax requests. Theseelements define the filter class (org.ajax4jsf.Filter) and map it tothe JSF Faces Servlet defined in Listing 2.

    andorg.ajax4jsf.VIEW_HANDLERS

    RichFaces needs to know that Facelets will be used in the application.These elements perform that task and also effectively replace the normalFacelets entry in faces-config.xml. Notice that the Facelets view handlerclass is com.sun.facelets.FaceletViewHandler.

    andorg.richfaces.SKINRichFaces has several built-in color schemes or skins. These elementsdefine the skin you want to use in your application. The classic skin is amoderate blue.

    The good news about the entries in Listings 2, 3, and 4 is that they are virtually thesame in all of your applications and essentially boilerplate code. While we're at it,let's dispense with one more piece that you'll see in every application: Listing 5 is amodification of Listing 1 to include the RichFaces namespace in application XHTMLpages:

    Listing 5. Initial portion of a Facelets/RichFaces XHTML document

    ibm.com/developerWorks developerWorks

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 11 of 22

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    12/22

    Ready to rock

    We are now ready to use RichFaces components. I'll begin with a Panel Bar andPanel Bar Items (see Figure 5). You probably won't use these very often, but theyare easy to work with and provide a good first use case for RichFaces syntax.

    The idea here is that a Panel Bar is a container for Panel Bar Items. A Panel BarItem has a label and can contain any other component. Panel Bar Items stack on topof one another; the actual content is shown when the bar for the item is clicked. Onlyone item's content is shown at a time. In this case, as you can see from Listing 6,we're just using text. Notice that all components have a rich: prefix, which refers tothe namespace entry included in Listing 5.

    Listing 6. RichFaces Panel Bar component

    Where's ?In JSF 1.2, you can define a properties-based resource bundle infaces-config.xml, so there's no longer a need for on every page. The definition is similar to entries for managedbeans, but specific to resource bundles. Example:

    dWRFDemo1dWRFD1

    developerWorks ibm.com/developerWorks

    An introduction to RichFacesPage 12 of 22 Copyright IBM Corporation 1994, 2007. All rights reserved.

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    13/22

    The basic element doesn't require much more than alabel, which is pulled here from a resource bundle using an EL expression.

    The actual content for the demonstration Panel Bar Items is just an element, again with text from the resource bundle. I use a

    font style element for consistent readability, but also to show that RichFaces allowsCSS flexibility.

    Notice that no programmer involvement with the generated JavaScript is necessary.In just a few steps you can create a nice-looking, multipanel, clickable component;this is one of RichFaces' great strengths. Even components as simple as this oneallow active/inactive styles, events, and more.

    Let's make a date

    The Calendar component (see Figure 1) should be familiar; date selection wasprobably one of the earliest JavaScript enhancements to Web pages. TheRichFaces Calendar has over 80 available attributes but, as you can see fromListing 7, you can generally make do with fewer:

    Listing 7. RichFaces Calendar component

    #{dWRFD1.calendar}:

    The datePattern attribute wants a standard date pattern as defined byjava.text.SimpleDateFormat. The example again uses the resource bundlefor the value, which defines the datePattern key as yyyy-MM-dd . The valueand timeZone attributes are loaded using methods from a managed bean, which isdefined as shown in Listing 8:

    Listing 8. Managed bean definition for dWRFD1Handler

    dWRFD1Handlercom.dW.dWRFD1Handlersession

    The com.dW.dWRFD1Handler class is basic, consisting mostly of an initializer,getters, and setters, and it should not require much further discussion. ThegetSelectedDate() and setSelectedDate() methods expect ajava.util.Date. The getTimeZone() method just returns

    ibm.com/developerWorks developerWorks

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 13 of 22

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    14/22

    java.util.TimeZone.getDefault(); whether that is appropriate in productiondepends on your application requirements.

    If you also want to allow the user to key in date values, set theenableManualInput attribute to true. If you just want to show the Calendar, set

    the popup attribute to false. Obviously many other settings are available, but that'sabout all you need for basic Calendar functionality.

    One way or another

    The List Shuttle component (see Figure 2) is ideal for selecting and ordering itemsfrom an initial group. Listing 9 demonstrates that it is also easier to use than youmight initially think:

    Listing 9. RichFaces List Shuttle component

    #{dWRFD1.orderBy}:

  • 8/4/2019 j Richfaces PDF

    15/22

    {lOrderBySource = orderBySource;

    }

    public void setOrderByTarget( List orderByTarget ){

    lOrderByTarget = orderByTarget;}

    The var attribute declares a variable that will be used to iterate over the list, apattern often used by JSF components. You actually can have multiple columns ifthe objects in your lists support multiple fields. In that case, the notation changesfrom value="#{items}" to value="#{items.getterMethodName}", whichshould be no big surprise. Here we have a list of String classes and so only onecolumn. After the user has made the desired choices, on submittal your handlerreceives the ordered target list containing the choices.

    Tell me to my faceIf you frequent forums and mailing lists, sooner or later you will see a question thatasks how to handle downloading thousands or millions of entries to a drop-down list.The Suggestion Box component (see Figure 3) offers a way to show valid selectionswithout attempting that unworkable extreme. In fact, that concern was a majorreason I began investigating RichFaces and similar suites, because several entryitems in the application, such as cities, had too many possibilities for a drop-downlist to make sense. The Suggestion Box functionality is similar to the familiarauto-complete components available in many desktop applications. It should beapparent that Ajax submittals would probably have to be involved for that sort of

    capability to have any chance of working efficiently in a Web application.

    Listing 11 shows three distinct component parts needed for effective functionality:the label and input text (notice that these are standard JSF RI components),, and . The usesgetCity() and setCity() methods for its values in conjunction with themanaged bean. The field's input is either keyed or selected from the SuggestionBox.

    Listing 11. RichFaces Suggestion Box component

    #{dWRFD1.city}:

    ibm.com/developerWorks developerWorks

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 15 of 22

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    16/22

    denotes an area that is sent on an Ajax submit. You need to beaware that, in general, if no region is included, RichFaces assumes a default region

    from to . That's essentially the entire page. When I first used, everything worked, but stepping through debug showedthat all the other fields were submitted as well, with validation, conversion, andpassing through the whole JSF life cycle. To put it mildly, that's not a good situationfor something that responds to every key press. An excerpt from the RichFacesDeveloper Guide (see Resources) discussing another form of Ajax submittal appliesin general, and should drive the point home:

    Note, that "ajaxSingle"="true" reduces the upcoming traffic, but doesnot prevent decoding other input components on the server side.Some JSF components, such as do recognize

    the missing data in the request map value as a null value and try topass the validation process with a failed result. Thus, use to limit a part of the component tree that will beprocessed on the server side when it is required.

    As for the renderRegionOnly attribute, the RichFaces Developer Guide describesit this way:

    Flag to disable rendering in AJAX responses content outside ofactive region. If this attribute set to "true", no one of the componentsoutside of region will be included to AJAX response. If set to "false",search for components to include in response will be performed on

    all tree. Default "false".

    In this case, the only element we want to go back to the server is thesuggestionAction method request along with its Object argument (the currentkeyed input String). On return, only the Suggestion Box content should beupdated and rendered.

    The minimum attributes required for the Suggestion Box itself aresuggestionAction, var, and at least one column to display results. ThesuggestionAction method is suggest() in another managed bean based onthe second Java class in the demo code, com.dW.City. The method signature is:

    public List suggest(Object anObject).

    In the demo code, a list of cities beginning with A and J is created on initialization. Ifthe user presses the space bar in the City text field, the entire list is returned. If A ispressed, a sublist containing the cities starting with A is returned; J cities arehandled in the same way. Results are narrowed with each keystroke. In your owncode, you can do anything you want that is appropriate to the input. In the real

    developerWorks ibm.com/developerWorks

    An introduction to RichFacesPage 16 of 22 Copyright IBM Corporation 1994, 2007. All rights reserved.

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    17/22

    application, the results come from a limited database set, which is probably mosttypical. If you are familiar with the data, you can probably take steps in the method tooptimize results. I have cases, for example, where certain keystrokes can beignored, so the method just returns, eliminating a trip to the database.

    The var attribute defines an iteration variable used in outputting the column content.It's the same concept used and discussed for the List Shuttle component's varattribute.

    The eventsQueue attribute is not required, but I recommend you treat it as such.You only need to add the attribute and supply a name. It performs two importantservices:

    The method calls (events) are queued, guaranteeing order; the nextmethod request in the queue is not sent until the previous one returns.

    If multiple events of the same type are in the queue, only the latest issent. Suggestion Box, for example, sends a request on every keystroke. Ifseveral keystroke requests are in the queue when a previous requestreturns, only the last will go to the server. Keep in mind that although therequest is sent on each keystroke, the argument sent is the entire contentof the input text component.

    The purpose of the ignoreDupResponses attribute should be self-evident.

    selectedClass is a CSS class to be applied to the component. RichFaces usesthe skins concept. This is carried through to the selection bar on components. Myown application had several RI drop-down lists that used the system color for the

    bar. The Suggestion Box used the classic skin color, which made things appearinconsistent. The SelCtl class tells the Suggestion Box to use the system highlightcolors instead.

    Keeping tabs

    The Tab Panel component (see Figure 4) is straightforward to use. The typicalRichFaces attributes are available, but the primary one you will use is switchType.The default is server, and you'll probably most often want client. ajax is alsoavailable. As you can see from Listing 12, a typical RichFaces "sandwich" of

    elements and stacked "sandwiches" of elementsare used to make a set of tabbed pages:

    Listing 12. RichFaces Tab Panel component

    ibm.com/developerWorks developerWorks

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 17 of 22

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    18/22

    #{dWRFD1.resultText}

    A label attribute is used for each tab's display name. In the demo code, as usual,the label value is pulled from the resource bundle. Similarly to Panel Bar Items, atab can contain any kind of component. For the demo, I used resource bundle textfor the Info tab content, and Simple Toggle Panels for the Result tab content.

    Whenever I see your smiling face

    I suspect you are thinking, "Not much to that last one," and you're right. Once youunderstand the basics of RichFaces, simple usage for most components is just that:simple. For that reason, I'm going to leave most of the Simple Toggle Panel (see

    Figure 6 and Listing 13) as an exercise for you.

    Listing 13. RichFaces Simple Toggle Panel component

    #{dWRFD1Handler.selectedDate}

    #{dWRFD1Handler.orderByTarget}

    #{dWRFD1Handler.city}

    Simple Toggle Panel consists of a bar and a content display, which can be anycomponent. The content is shown or hidden by clicking on the bar, acting very muchlike a Panel Bar with only one item. Notice that the switchType attribute makes areappearance. The opened attribute determines whether the content is shown on

    first display. For the demo, I've put several Simple Toggle Panels in a JSF RI, which is placed in a Tab, which is placed in a Tab Panel.

    Wrap it up

    RichFaces provides a large number of JSF components for building RIA and

    developerWorks ibm.com/developerWorks

    An introduction to RichFacesPage 18 of 22 Copyright IBM Corporation 1994, 2007. All rights reserved.

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    19/22

    Ajax-enabled Web applications. This article has demonstrated only a few, but youshould have gotten a feel for how things work under RichFaces, and seen severalcomponents that could be useful in many applications. An online demo of all of thecomponents available in the suite, documentation, and other resources are availablefrom the "Most Important Links" section on the RichFaces home page (see

    Resources.)

    If you choose to use RichFaces, I encourage you to dig deeply into the a4j:components and processing discussed in the documentation to understand how toapply the concepts to the other RichFaces components. My clients sometimes getfrustrated when I say this is Yet Another Area where Slower Is Faster, but theresearch time invested will pay multiple dividends in your development process andrun-time performance.

    RichFaces 3.2, with additional components, is scheduled for release at the end ofMarch 2008. Regardless of which RIA component set you use, this kind of stiffcompetition should help increase the stability and productivity of them all.

    ibm.com/developerWorks developerWorks

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 19 of 22

    http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtml
  • 8/4/2019 j Richfaces PDF

    20/22

    Downloads

    Description Name Size Download method

    Demonstration WAR for this article1 j-RichFacesDemo1.zip5.5MB HTTP

    Information about download methods

    Note

    1. Because the source and WAR files differ by only two items the Java files I've included theJava sources in the WAR file. As a result, there is only one file download. For instruction onusing the WAR files, see the readme.txt file included with the download.

    developerWorks ibm.com/developerWorks

    An introduction to RichFacesPage 20 of 22 Copyright IBM Corporation 1994, 2007. All rights reserved.

    http://download.boulder.ibm.com/ibmdl/pub/software/dw/java/j-RichFacesDemo1.ziphttp://www.ibm.com/developerworks/library/whichmethod.htmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/developerworks/library/whichmethod.htmlhttp://download.boulder.ibm.com/ibmdl/pub/software/dw/java/j-RichFacesDemo1.zip
  • 8/4/2019 j Richfaces PDF

    21/22

    Resources

    Learn

    Demo application: Interact with an online demo of this article's sample

    application. RichFaces: The RichFaces site especially the "Most Important Links" section

    has links to information, documentation, the online demo, and downloads.

    RichFaces Developer Guide (RedHat, 2007): Find further information aboutRichFaces

    JSF technology: Find out more about JSF and how to apply it in yourapplications.

    "Improving JSF by Dumping JSP" (Hans Bergsten, OnJava.com, June 2004):This article focuses on the problematic use of JSP technology for creating JSF

    views.

    "Inside Facelets Part 1: An Introduction" (Jacob Hookom, JSF Central, August2005): The Facelets project's founder explains Facelets features.

    "Facelets fits JSF like a glove" and "Advanced Facelets programming" (RichardHightower, developerWorks, February/May 2006): Read this popular one-twopunch on Facelets.

    Facelets: The Facelets site has links to information and downloads.

    Facelets Wiki: Find the Facelets FAQ, articles, and examples.

    The JSF AJAX Component Library Feature Matrix: Compare JSF componentlibraries.

    Project Woodstock: Another project developing Web UI components.

    ICEfaces.org: A project focused on Ajax for Java EE.

    The Rich Faces Cookbook: Find and contribute community solutions tocommon RichFaces issues.

    Apache Tomcat: Information on the Tomcat servlet container.

    Glassfish: Information on the Glasshfish application server.

    WebSphere Application Server Community Edition, V2: A free, lightweight JavaEE 5 application server.

    developerWorks: Hundreds of articles about every aspect of Java programming.

    Browse the technology bookstore for books on these and other technical topics.

    Get products and technologies

    ibm.com/developerWorks developerWorks

    An introduction to RichFaces Copyright IBM Corporation 1994, 2007. All rights reserved. Page 21 of 22

    http://www.conceptgo.com/community.htmlhttp://labs.jboss.com/jbossrichfaces/http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/index.htmlhttp://java.sun.com/javaee/javaserverfaces/http://www.onjava.com/pub/a/onjava/2004/06/09/jsf.htmlhttp://www.onjava.com/pub/a/onjava/2004/06/09/jsf.htmlhttp://www.jsfcentral.com/articles/facelets_1.htmlhttp://www.jsfcentral.com/articles/facelets_1.htmlhttp://www.ibm.com/developerworks/java/library/j-facelets/http://www.ibm.com/developerworks/java/library/j-facelets/http://www.ibm.com/developerworks/web/library/j-facelets2.htmlhttp://www.ibm.com/developerworks/web/library/j-facelets2.htmlhttps://facelets.dev.java.net/http://wiki.java.net/bin/view/Projects/Faceletshttp://www.jsfmatrix.net/https://woodstock.dev.java.net/index.htmlhttp://www.icefaces.org/http://labs.jboss.com/wiki/RichFacesCookbookhttp://tomcat.apache.org/https://glassfish.dev.java.net/http://www.ibm.com/developerworks/websphere/zones/was/wasce.htmlhttp://www.ibm.com/developerworks/java/http://www.ibm.com/developerworks/apps/SendTo?bookstore=safarihttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/developerworks/apps/SendTo?bookstore=safarihttp://www.ibm.com/developerworks/java/http://www.ibm.com/developerworks/websphere/zones/was/wasce.htmlhttps://glassfish.dev.java.net/http://tomcat.apache.org/http://labs.jboss.com/wiki/RichFacesCookbookhttp://www.icefaces.org/https://woodstock.dev.java.net/index.htmlhttp://www.jsfmatrix.net/http://wiki.java.net/bin/view/Projects/Faceletshttps://facelets.dev.java.net/http://www.ibm.com/developerworks/web/library/j-facelets2.htmlhttp://www.ibm.com/developerworks/java/library/j-facelets/http://www.jsfcentral.com/articles/facelets_1.htmlhttp://www.onjava.com/pub/a/onjava/2004/06/09/jsf.htmlhttp://java.sun.com/javaee/javaserverfaces/http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/index.htmlhttp://labs.jboss.com/jbossrichfaces/http://www.conceptgo.com/community.html
  • 8/4/2019 j Richfaces PDF

    22/22

    RichFaces: Download RichFaces.

    GlassFish Mojarra: Get the JSF RI source code and binaries.

    Facelets: Download Facelets.

    Discuss

    Check out developerWorks blogs and get involved in the developerWorkscommunity.

    You can ask Joe Sam questions about RichFaces or any other topic at the JavaFilter forum.

    About the author

    Joe Sam Shirah

    Joe Sam Shirah is a principal and developer at conceptGO. While trying to keepclients happy, he has authored several tutorials for developerWorks and the SunDeveloper site and is a winner of the Java Community Award. He is also themoderator of the developerWorks Java filter forum and has managed jGuru's JDBC,I18N, and Java400 FAQs.

    Trademarks

    Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in theUnited States, other countries, or both.

    developerWorks ibm.com/developerWorks

    An introduction to RichFacesPage 22 of 22 Copyright IBM Corporation 1994, 2007. All rights reserved.

    http://labs.jboss.com/jbossrichfaces/downloads/https://javaserverfaces.dev.java.net/download.htmlhttps://facelets.dev.java.net/servlets/ProjectDocumentList?folderID=3635&expandFolder=3635&folderID=0http://www.ibm.com/developerworks/blogs/http://www.ibm.com/developerworks/communityhttp://www.ibm.com/developerworks/communityhttp://www.ibm.com/developerworks/forums/forum.jspa?forumID=177http://www.ibm.com/developerworks/forums/forum.jspa?forumID=177http://www.conceptgo.com/http://www.ibm.com/developerworks/forums/dw_forum.jsp?forum=177&cat=10http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/developerworks/forums/dw_forum.jsp?forum=177&cat=10http://www.conceptgo.com/http://www.ibm.com/developerworks/forums/forum.jspa?forumID=177http://www.ibm.com/developerworks/forums/forum.jspa?forumID=177http://www.ibm.com/developerworks/communityhttp://www.ibm.com/developerworks/communityhttp://www.ibm.com/developerworks/blogs/https://facelets.dev.java.net/servlets/ProjectDocumentList?folderID=3635&expandFolder=3635&folderID=0https://javaserverfaces.dev.java.net/download.htmlhttp://labs.jboss.com/jbossrichfaces/downloads/