Using JSF and Flex Components Together
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.
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.)
Of course, there is hope. We can use a Flash player to display rich and interactive charts.
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.
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.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)