JSF Central - An Introduction to OpenFaces
JSF Central

 
 Home 
 
 Products 
 
 Articles & Books 
 
 Resources 
An Introduction to OpenFaces
 
An Introduction to OpenFaces
by Dmitry Pikhulya
25 Oct 2010 00:15 EDT

OpenFaces is an open source JSF library that provides extended versions of the standard components, a number of unique components, including mature DataTable, TreeTable, and scheduling components, and a client-side validation framework. The first article in this three part series gives a general overview of the library, and helps the reader begin using it.


It's no secret that the standard UI components bundled with JavaServer Faces (JSF) are by far not enough for any kind of serious web development. There are a lot of JSF libraries out there, each one having its own advantages and disadvantages. Fortunately JSF lets you use several component libraries at once, and the new JSF 2.0 standard makes this option even more attractive. Here, I'll introduce you to the OpenFaces library, which extends the standard JSF components with advanced features. It also has some highly customizable components that are not like any of the standard components, and it features some powerful components such as DataTable, TreeTable, and scheduling components.

This article will guide you through the steps that will help you add OpenFaces to your application, and give you an overview of the range of components provided by OpenFaces. You’ll learn how to seamlessly migrate the standard JSF components to the corresponding OpenFaces JSF versions to get the extra benefits of the extended API.

About OpenFaces

OpenFaces is a relatively new open source JSF library that was released on March 4th of this year. Despite that fact, it has a long history as a commercial library named QuipuKit that has evolved over the years into a mature product. The latest major version of QuipuKit was released as the OpenFaces open source project.

Getting Started

Now let's start by dropping OpenFaces into your application. We assume that you already have a working JSF application; here is what you need to do to be able to use OpenFaces goodness in it…

At this point you might be wondering: "Wait, I'm already using RichFaces -- won't adding OpenFaces cause problems?" But don't worry about that; OpenFaces has been tested with RichFaces, and combining these two libraries is a quite normal scenario. So let's get down to business.

  1. Go to the OpenFaces downloads page http://openfaces.org/downloads/ and download the latest library zip package. At the time of the writing of this article, you can download one of these two versions: • OpenFaces-2.0.zip, if you're using JavaServer Faces (JSF) version 1.2 • OpenFaces-3.0.EA2.zip, if you're using JSF 2.0
  2. Add openfaces.jar and its runtime dependency jars (located in the "lib" directory inside the zip package) as run-time libraries of your application. Be careful not to add any dependent jars if you already have the libraries in your project (e.g. you might need to skip commons-collections.jar or jdom.jar for this reason).
  3. If you’re using OpenFaces 2.0 in a JSF 1.2 based application, there's one additional final step to get OpenFaces working. (This is not required for OpenFaces 3.0.) Add the OpenFaces resource filter to your web.xml as follows:

<!-- FILTER FOR PROCESSING INTERNAL OPENFACES RESOURCES --> <filter> <filter-name>ResourceFilter</filter-name> <filter-class>org.openfaces.util.ResourceFilter</filter-class> </filter> <filter-mapping> <filter-name>ResourceFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

And we're done! Now let's try adding some OpenFaces components to see if everything works properly. We're using the Facelets syntax for declaring the page, so you might need to amend the examples if you're using JSP. First, let’s add a namespace named "o" with a URL of "http://openfaces.org/", and then we'll add OpenFaces FoldingPanel component with a Calendar component inside, like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:o="http://openfaces.org/"> <h:head> <title>OpenFaces Test</title> </h:head> <h:body> <h:form> <o:foldingPanel caption="Hello, OpenFaces!" expanded="false"> <o:calendar/> </o:foldingPanel> </h:form> </h:body> </html>

This example uses the JSF 2.0 syntax with <h:head> and <h:body> tags; if you're using JSF 1.2, you'll have to replace them with <head> and <body> respectively.

This will display an initial "Hello OpenFaces" screen, shown in figure 1:

  Figure 1. Initial 'Hello OpenFaces' screen
Figure 1. Initial 'Hello OpenFaces' screen

When you click the + icon, you can see the Calendar embedded into the FoldingPanel being loaded with Ajax as shown in figure 2.

  Figure 2. Expanded 'Hello OpenFaces' screen
Figure 2. Expanded 'Hello OpenFaces' screen

So now that we've got OpenFaces up and running, let's see what you can do with it. OpenFaces gives us a lot of components for various application scenarios and UI designs. In the sections below we'll take a look at different types of components to get an idea of what you can do with OpenFaces.

Extending the Standard Components

The standard components bundled with a JSF implementation are quite basic, and they lack a number of typical features that are often quite useful. For example, the standard <h:selectOneCheckbox> tag doesn't have the tri-state capability that is useful when an "undefined" check-box state is required. Another shortcoming is that it's impossible to customize the look of the check-box with images/openfaces to make fancy designs possible, without compromising the simplicity of the component's API.

In order to address such issues, OpenFaces introduces a number of components that extend the standard JSF components with additional functionality, while retaining a compatible API and functionality. You'll basically just need to replace the standard "h" tag prefix with an "o" prefix to migrate to the extended OpenFaces version. Here, you just use the <o:selectBooleanCheckbox> tag instead of the <h:selectBooleanCheckbox> tag. Here are some of the extended components with a brief description of the added functionality and screenshots.

The CommandButton component (<o:commandButton> tag) introduces Ajax support for action execution and reloading components. It lets you display arbitrary HTML/JSF content, and it supports specifying its type attribute as "button". You can see an example of displaying the HTML-based content with a layout that includes image and text in figure 3.

  Figure 3. CommandButton with combined HTML content
Figure 3. CommandButton with combined HTML content

The CommandLink component (<o:commandLink> tag) introduces Ajax support.

The DataTable component (<o:dataTable> tag) has lots of extensions. We’ll take a closer look at this component and the variety of features that it provides in the next article in this series. You can see what simple DataTable looks like in figure 4.

  Figure 4. A simple DataTable with a column visibility customization feature
Figure 4. A simple DataTable with a column visibility customization feature

The InputText component (<o:inputText> tag), shown in figure 5, introduces prompt text support and additional rollover/focused styles.

  Figure 5. InputText with a prompt text feature
Figure 5. InputText with a prompt text feature

The InputTextarea component (<o:inputTextarea> tag) introduces auto-resizing functionality, prompt text support, and additional rollover/focused styles. See figure 6 for an example.

  Figure 6. InputTextarea with a prompt text feature
Figure 6. InputTextarea with a prompt text feature

SelectBooleanCheckbox (<o:selectBooleanCheckbox> tag) adds tri-state support, image-based appearance customization, etc.

SelectManyCheckbox (<o:selectManyCheckbox> tag), and SelectOneRadio (<o:selectOneRadio> tag ) introduce image-based appearance customization, and additional state-dependent styles. You can see the customized SelectManyCheckbox in figure 7.

  Figure 7. SelectManyCheckbox with appearance customization using images/openfaces
Figure 7. SelectManyCheckbox with appearance customization using images/openfaces

SelectOneMenu (<o:selectOneMenu> tag) adds auto-completion support, many drop-down list customizations, etc. (in early access mode at the time of the writing of this article, available in the nightly builds).

Beyond Just Extensions

The extended versions of the standard components are just a small portion of the OpenFaces library. Besides the possibilities that can be addressed by these components, applications often require more ways to represent and enter information, organize page layouts, interact with the user, etc. OpenFaces has a variety of components to address those needs, and we'll take a look at some of these components here.

One such component is a DropDownField component that simplifies the process of entering values as text, by allowing the user to choose from one or more options in an attached drop-down list. Let's take a closer look at this component to get a general understanding of its functionality and become more familiar with OpenFaces:

<o:dropDownField value="#{DropDownBean.selectedBGColor}" converter="#{DropDownBean.colorConverter}" var="color" suggestionMode="substring" autoComplete="true"> <o:dropDownItems value="#{DropDownBean.colors}"/> <o:column width="12px"> <h:outputText styleClass="colorRect" style="background: #{color.name};"/> </o:column> <o:column> <h:outputText value="#{color.name}"/> </o:column> </o:dropDownField>

As you can see, this component is declared like a mixture of an input component and a table. The "input" part API is very similar to any other input component, and the "table" part, if needed, allows a flexible multi-column display for a component's drop-down part. Of course you can just skip declaring the columns tags if you don't need to customize how drop-down items are rendered.

The DropDownBean.colors expression refers to a collection of color instances. Now, if we start typing in the component's field, the drop-down area will appear to suggest matching records, as seen in figure 8. You can also try this example yourself in the online demo.

  Figure 8. DropDownField in action
Figure 8. DropDownField in action

As you can see, when you type a partial text, you’ll see all suggestions that include this text. This behavior is specified using the suggestionMode attribute with a value of "substring" (see also the detailed information on the alternative options in the documentation). The auto-completion feature, or highlighting of the remaining part of the matching suggestion right in the field, is customized separately with the autoComplete attribute. So, as you can see, much of the component's configuration aspects can be customized. There are more options than can be covered here, so you can refer to the documentation for the detailed information.

Besides DropDownField there are also other input components, such as:

  • SuggestionField, which is very similar to DropDownField but has a different UI
  • Spinner for entering integer or floating point numbers with increase/decrease controls and customizations such as number/currency format, number range, etc.
  • Calendar and DateChooser for two ways of specifying dates
  • TwoListSelection for choosing a list of items from a predefined list

Another notable category of components includes various types of containers, such as:

  • BorderLayoutPanel -- a universal component which lets you place layout areas by the container's edges, creating static layouts and split panes with draggable separators, etc.
  • Window -- a window with customizable caption and content, which can be resized, minimized/maximized, and displayed as a modal dialog.
  • And many others…

One more useful component is a CompositeFilter component, which represents an interactive query builder where the user can customize search or filter conditions. This component can be used as a standalone component or it can be automatically attached as a filter to a DataTable or TreeTable component. You can see the typical view of the CompositeFilter component in figure 9.

  Figure 9. CompositeFilter component
Figure 9. CompositeFilter component

It is also worth noting the OpenFaces scheduling components (DayTable, WeekTable and MonthTable), which are very flexible components that let you display various types of timetables. WeekTable and MonthTable are currently in early access mode and are available in the nightly builds. See an example of the DayTable component in figure 10 below.

  Figure 10. DayTable component
Figure 10. DayTable component

These are only a few of the OpenFaces components. Other components include PopupMenu, Chart, HintLabel, etc. In the next article, we’re going to take a look at some mature components that are worth singling out.

Conclusion

This brief overview is just a glimpse of what's inside OpenFaces, but it should be enough for you to get started and try it for yourself. Once you start using it, you'll probably need more information, and I'd like to introduce the OpenFaces Developer's Guide , which has comprehensive information and instructions on using OpenFaces library and all of its components. You can also see all components in action for yourself in the on-line demo.

I'd also like to invite you to join OpenFaces community, which is the place where you can discuss everything about OpenFaces and find other useful information such as a roadmap and current development news. If you're on Twitter, you may like following OpenFaces to stay up to date with the latest news.

In the next article we’ll consider the DataTable and TreeTable components. You’ll see what these easy to use, and at the same time powerful, components can do, and how to use them.

Resources



RSS feed(all feeds)

The Editor's Desk
Podcasts
Inside Facelets
In the Trenches

Site version 1.83  Report web site problems

Copyright (C) 2003-2014 Virtua, Inc. All Rights Reserved. Java, JavaServer Faces, and all Java-based marks are trademarks or registered trademarks of Oracle Corporation. in the United States and other countries. Virtua, Inc. is independent of Oracle Corporation. All other trademarks are the sole property of their respective owners.