Using Adobe Flex and JavaFX with JavaServer Faces 2.0

by Re Lai

Learn how to take advantage of new features in JSF 2.0 and integrate Flex and JavaFX into your JSF applications

Published March 2011

The JavaServer Faces (JSF) 2.0 specification builds on the success and lessons from the last six years of usage of the JSF 1.0 specification. It takes inspiration from Seam and other Web frameworks and incorporates popular agile practices, such as convention over configuration and annotation over XML. This results in a much streamlined framework. Highlights include standardized AJAX support, Facelets as the default view technology, and custom composite components, which finally make component authoring straightforward and even enjoyable. A good overview of JSF 2.0 can be found here.

This article explores how these new features can be utilized to facilitate embedding rich client applications. Adobe Flex has been a popular rich Internet application framework. JavaFX, while relatively new, builds on top of the Java platforms and has attracted much attention. There has been constant interest in integrating rich clients into Java Web applications. With JSF 2.0 and its focus on simplified development, integration has become easier than ever.

We start with a sample Flex pie chart application that displays the results of a survey about the popularity of ice cream flavors. A JSF composite component is used to encapsulate the embedding. Next, instead of hard-coding, the survey result is passed to the Flex application from a JSF managed bean. Then, we further enhance the sample by adding server round-trips that submit a user’s choice of the favorite flavor. Finally, we re-implement the chart in JavaFX and show how to embed it into the JSF application.

Running the Sample

The source code for the sample application can be downloaded here.

The application is developed using Flex SKD 4.1, JSF Mojarra Implementation 2.0.2, and JavaFX SDK 1.3.1. NetBeans 6.9.1 is used as the IDE, which already bundles the latter two libraries. The three attached projects are SampleChartFlex, SampleChartFX, and SampleWeb.

To run the Web application inside NetBeans, open these projects using NetBeans, right-click project SampleWeb, and run.

To modify and compile the Flex project, you need to install Flex SKD 4 and modify SampleChartFlex/build.xml to point to the Flex SKD installation location:

Afterward, you can invoke the Build command from NetBeans to build these projects. The ant build files of both the SampleChartFlex and SampleChartFX projects are customized so that the packaged swt or jar files are copied into project SampleWeb automatically during the building of these two projects by NetBeans.

Creating the Sample Flex Application

First, we create a simple pie chart application in Flex to display the popularity of ice cream flavors, as shown in Figure 1. You click a chart item. The message label then displays your choice.

Figure 1 Simple Pie Chart Application

Flex source code (SampleChartFlex.mxml):

The Flex application consists of a pie chart and a message label. The pie chart data is provided by function getChartData(). When a user clicks a chart item, onItemClick processes the event and updates the message label. The source file is compiled into SampleChartFlex.swf using mxmlc. The provided sample project SampleChartFlex has customized its ant build.xml file, which invokes mxmlc when you build the project. 

Embedding the Flex Application

To embed the Flash object into our JSF Web application, we first add SampleChartFlex.swf into folder resources/demochart of the Web content of our JSF application project SampleWeb. We create a composite component to encapsulate the embedding.

Composite components are a new facility in JSF 2.0 that tremendously eases the development of custom components. You no longer need to worry much about encoding, decoding, tag library descriptors (TLDs), and renderers. You simply declare a Facelet composite component file and use it, similar to the acclaimed custom tag support in Grails. The following is our custom component demo:chart.

JSF composite component source code (resources/demo/chart.xhtml):

The open source SWFObject is used to embed the Flash content. The JavaScript file, swfobject.js, can be found under folder templates\swfobject of the Flex 4 SDK installation. Copy it into folder resources\demochart of our Web content. 

Effort was made to mitigate name conflicts: Our local variables are defined in an anonymous function and the div HTML element ID is prefixed with the composite component client ID.

Now that we’ve created the custom component, we can use tag demo:chart just like any other JSF tags. It is transparent that Flex is used in the implementation. Here’s an example.

JSF page source code (index.xhtml):

    
        
    
    
        
            

 Spice Up Your JSF Pages 

        
    

Passing Variables to Flex Applications

More often than not, embedded Flex applications rely on dynamic data. It turns out to be easy to pass variables into Flex applications with the help of flashVars.

This section extends our sample chart by passing the ice cream flavor survey result from a JSF managed bean.

JSF managed bean source code (IceCreamSurvey.java):

package demo.data;

import java.util.HashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;

@ManagedBean
public class IceCreamSurvey {
    public Map getResult() {
        Map result = new HashMap();
        result.put("Vanilla",    Integer.valueOf(60));
        result.put("Chocolate",  Integer.valueOf(30));
        result.put("Strawberry", Integer.valueOf(10));
        return result;
    }
}

We use the JSF 2.0 annotation to designate a managed bean. 

To feed the survey result from the managed bean to Flex, we first modify our JSF composite component chart.xhtml by adding an attribute named data to the interface section to accept the survey result and passing the survey result as flashVars into Flex.

JSF composite component source code snippet (resources/demo/chart.xhtml):