Skip to Content

Web Content List

Return to Full Page

JSF Central
Advertise      Write for us     Submit a link     About

 
  Home 
 
  News 
 
  FAQ 
 
  Products 
 
  Articles & Books 
 
  Resources 
  test2
 
test2
Dmitry
November 21, 2012 at 03.37:00



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 -->
&lt;filter&gt;
    &lt;filter-name&gt;ResourceFilter&lt;/filter-name&gt;
    &lt;filter-class&gt;org.openfaces.util.ResourceFilter&lt;/filter-class&gt;
&lt;/filter&gt;
<!-- MAPPING FOR OPENFACES RESOURCE FILTER -->
&lt;filter-mapping&gt;
    &lt;filter-name&gt;ResourceFilter&lt;/filter-name&gt;
    &lt;url-pattern&gt;/*&lt;/url-pattern&gt;
&lt;/filter-mapping&gt;
										

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

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

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

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. 1. 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:

 

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




The Editor's Desk
Podcasts
Inside Facelets
In the Trenches

Site version 2.00   Report web site problems

Copyright (C) 2003-2011 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 Sun Microsystems, Inc. All other trademarks are the sole property of their respective owners.