Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: mkblog.exadel.com and Twitter: @maxkatz. Max is a DZone MVB and is not an employee of DZone and has posted 80 posts at DZone. You can read more from them at their website. View Full User Profile

Using JSF and Flex Components Together

09.16.2008
| 101756 views |
  • submit to reddit

Exadel Fiji extends JavaServer Faces (JSF) by allowing the use of Flex components within a JSF page. Fiji stands for “Flex and JSF Integration.” When using Fiji components, developers use Flex with the same component-based approach to building user interfaces that they are familiar with from JSF. This means that Flex components are bound to standard JSF managed beans.

Fiji is a framework that provides the following:

  • A library of ready-to-use Flex charting components for JSF
  • A universal wrapper that allows the use of any Flex component within a JSF page
  • Most importantly, with Fiji, you can bind Flex components to the same JSF-managed beans properties or methods (or Seam components or Spring beans) used by the rest of your JSF application.

The current version ships with the following ready-to-use charts:

  • Column chart
  • Stacked column chart
  • Bar chart
  • Stacked bar chart
  • Line chart

For example, here is a screen shot of a Flex component inside a JSF page

You can see all Fiji components in action at http://livedemo.exadel.com/fiji-demo

Now that I have given you a short introduction to Fiji, you are probably wondering what problem Fiji is trying to solve. Let's see.


Why Fiji?

Let's start with the basics. JavaServer Faces (JSF) is a standard (Java EE) framework for building Web user interfaces out of components. Today, we are interested in building Rich Internet Applications, so RichFaces was created takes JSF a step further by allowing the easier building of AJAX-based applications in JSF. (In case you don't know, RichFaces offers a large number of ready-to-use AJAX components.)

While JSF has been constantly growing, one area where it's still lacking is in displaying rich and interactive charts, graphs, and other similar visuals. Even with AJAX, any serious charting is extremely difficult, not to mention the testing that would be required for different browsers. It really comes down to two things. First, the technologies used behind JSF such as HTML, JavaScript, and CSS are not meant for displaying rich and interactive visual data (possible, but very difficult). Second, people have much higher expectations from a browser. The browser alone was never meant to display such visual data. It was primarily meant to display text and static images. So, in the end, it's not really JSF’s fault, we are simply asking the underlying technologies (HTML, JavaScript, CSS, the browser) to do too much.

Of course, there is hope. We can use a Flash player to display rich and interactive charts.

Adobe Flash


With Flex, complex rich applications can be compiled and then run inside a Flash player. A Flash player is a virtual machine that installs as a plug-in into any browser. Because the application (built with Flex) is running inside a virtual machine, it provides a far more superior environment for rich and interactive charts and graphs than the browser alone (which just interprets HTML, JavaScript, etc.).

The obvious next question is: So, why not use Flex and JSF components together right now? While it's possible to use Flex and JSF components inside the same page, the two technologies are not aware of each other. This means that JSF components are bound to JSF managed beans (or Seam components or Spring beans) while Flex is bound to completely different objects. This kind of integration is equivalent to inserting an image into a JSF page – in other words, not much integration.
Back to Fiji

This is a good place to revisit Fiji. Fiji is the perfect fit for helping with the above problem. Not only does Fiji provide ready-to-use chart components and a universal wrapper to use any Flex component, but, with Fiji, you can bind Flex components to standard JSF managed beans. As a JSF developer, you just use the standard and the familiar JSF component-centric approach, while now also being able to use Flex components.

So, where does it make sense to use Fiji. One scenario is if you have an existing JSF application and you would like to insert richer content based on Flash while still using your existing model (JSF managed beans, Seam components or Spring beans). This content can be charts, graphs or any other rich content.

Another situation where Fiji would make sense is where you have an existing JSF application, but want to use a Flash-based user interface (instead of HTML/JavaScript). By using Fiji, you can still use the existing model part of your application.

However, to be honest, it wouldn't make sense to use Fiji if you have an existing Flash-only application and are using a service like GraniteDS, BlazeDS, or Exadel Flamingo.

Now, I think we are ready for examples.

Published at DZone with permission of Max Katz, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Agata Przybyszewska replied on Mon, 2009/02/02 - 8:19pm

I have tried to follow the tutorial, and make Fiji work with Seam and Flex.

I have tried several approaches:
1) Followed the tutorial  here:
 Result - server crash from the helloworld on page 3 :-(

2) I tried to follow the tutorials advice that fiji is just a rich faces project - just copied the 2 files fiji-api.jar and fiji-ui.jar into the lib
folder of my HelloWorld Seam project, and added the following facelet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
          xmlns:a4j="http://richfaces.org/a4j"
      xmlns:fiji="http://exadel.com/fiji">

        <rich:panel>
                <f:facet name="header">
                        Fiji
                </f:facet>
                Ready for Fiji...

                <fiji:swf src="hello.swf" width="400" height="400"
bgcolor="#EFEFEF"
                        application="HelloWorld"/>
        </rich:panel>
  </ui:composition>

The hello.swf file liest in the same folder as the facelet file.
This didn't crash the server. But the result is not what I wanted - no
Flash component.

 Any ideas what I do wrong?

Best,

Agata

Joe Greene replied on Tue, 2009/03/03 - 12:47pm

Max -

You give little guidance on how to update an amChart wrapped inside a fiji:swf component.  Looking at the amCharts docs, it looks like the data wants to be either csv or xml format.  If I want to use an am line chart wrapped in the fiji:swf component, I need to know how to bind the chart data to a bean instead of xml or csv data.  Can this be done?  If not, I think this is important and should be stated.

Max Katz replied on Mon, 2009/03/09 - 12:39pm in response to: Joe Greene

For anyone else looking for an answer, Joe posted it here

Santhosh Kumar replied on Wed, 2010/01/06 - 11:23am

your article on fiji chart was great..

I am using fiji line chart.. i need  a help on line chart..

i need to highlight the  y axis based on input given,,,,

for exampl if y-axis value is 45... i want to show highlihted y-axis region 40-50...

 

 

thanks in advance... 

Dani Holiday replied on Thu, 2010/02/18 - 4:30am

Hi! I saw that in RichFaces i have to read the data from the xml/csv. I bring the data from the database. if so, how can i integrate RichFaces + AMCharts + reading the data from the database and sending it to the bean? thanks!

Devika Nara replied on Fri, 2010/02/19 - 12:07am

is it possible to add the flex components dynamically to JSF page???

Design Geeks replied on Sat, 2010/02/27 - 12:51am

hi,

good example.

I have tried it with Netbeans 6.8 & glassfish 2.0 wirh jsf-richfaces

//jsp code

<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="fiji" uri="http://exadel.com/fiji"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<f:view locale="#{skinBean.currentlang}">
    <html>
        <h:form>

            <fiji:stackedColumnChart   id="stackedColumnChart" value="#{oneSeriesBar.data}"
                                     title="Simple Stacked Column Chart" subtitle="Display Resolution Statistics"
                                     captionX="Years" captionY="Percent" legendCaption="Resolution"
                                     barColors="#{oneSeriesBar.colors}" width="400" height="400"
                                     rulersValuesHighlight="none">
                <fiji:chartData type="name" value="#{oneSeriesBar.names}" />
            </fiji:stackedColumnChart>
        </h:form>
    </body>
</html>
</f:view>

at runtime it gives xml error like Retrieved XML is invalid

 stacktrace

<ROOT XMLNS:FIJI='HTTP://WWW.EXADEL.COM/FIJI'>#b0343c<FIJI:BARCOLORS>#dd9f2c</FIJI:BARCOLORS><FIJI:BARCOLORS>#5db2c2</FIJI:BARCOLORS><FIJI:CAPTIONX>Years</FIJI:CAPTIONX><FIJI:CAPTIONY>Percent</FIJI:CAPTIONY><FIJI:LEGENDCAPTION>Resolution</FIJI:LEGENDCAPTION><FIJI:RULERSVALUESHIGHLIGHT>none</FIJI:RULERSVALUESHIGHLIGHT><FIJI:SUBTITLE>Display Resolution Statistics</FIJI:SUBTITLE><FIJI:TITLE>Simple Stacked Column Chart</FIJI:TITLE><FIJI:CHARTDATA><FIJI:SERIES><FIJI:DATA><FIJI:X>2006<FIJI:Y>17<FIJI:DATA><FIJI:X>2007<FIJI:Y>26<FIJI:DATA><FIJI:X>2008<FIJI:Y>38<FIJI:NAME>Higher<FIJI:SERIES><FIJI:DATA><FIJI:X>2006<FIJI:Y>57<FIJI:DATA><FIJI:X>2007<FIJI:Y>54<FIJI:DATA><FIJI:X>2008<FIJI:Y>48<FIJI:NAME>1024x768<FIJI:SERIES><FIJI:DATA><FIJI:X>2006<FIJI:Y>20<FIJI:DATA><FIJI:X>2007<FIJI:Y>14<FIJI:DATA><FIJI:X>2008<FIJI:Y>8<FIJI:NAME>800x600</ROOT>

any idea?

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.