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
| 101740 views |
  • submit to reddit

Let's try another example, this time using column chart. I'm sure most of you still remember the Summer Olympics, so we'll take the medal count and display it in the chart.

Using the column chart

You can reuse the same page or create a new page if you would like. If you create a new page, make sure to include the namespace for Fiji.

We are going to take the top three countries (USA, China, and Russia) and display their gold, silver and bronze medal count. As before, let's start with data for the chart.
The Java bean looks like this:

public class MedalsBean {
private Map<String, Integer[]> medalsData = new LinkedHashMap<String,Integer[]>();
private ArrayList<String> colors = new ArrayList<String>();
private ArrayList<String> names = new ArrayList<String>();

private Integer[] medalsChina = new Integer[]{51, 21, 28};
private Integer[] medalsUSA = new Integer[]{36, 38, 36};
private Integer[] medalsRussia = new Integer[]{23, 21, 28};

@PostConstruct
private void init() {
medalsData.put("China", medalsChina);
medalsData.put("USA", medalsUSA);
medalsData.put("Russia", medalsRussia);

names.add("Gold");
names.add("Silver");
names.add("Bronze");

colors.add("#DAA520");
colors.add("#C0C0C0");
colors.add("#B87333");
}

public Map<String, Integer[]> getMedalsData() {
return medalsData;
}
public ArrayList<String> getColors() {
return colors;
}
public ArrayList<String> getNames() {
return names;
}
public Integer[] getMedalsChina() {
return medalsChina;
}
public Integer[] getMedalsUSA() {
return medalsUSA;
}
public Integer[] getMedalsRussia() {
return medalsRussia;
}
}

Because we now display three bars per country (one for each medal), we use a Map object and inside it put an array of integers representing the medal count.

To make it a JSF managed bean, we need to register is in a JSF configuration file:

<managed-bean>
<managed-bean-name>medalsBean</managed-bean-name>
<managed-bean-class>fiji.MedalsBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Now we are ready to build the page. The page is not much different than in the first example:

<h:form>
<fiji:columnChart id="goldMedals" value="#{medalsBean.medalsData}"
legendPosition="top"
barColors="#{medalsBean.colors}"
width="250" height="300">
<fiji:chartData type="name" value="#{medalsBean.names}" />
</fiji:columnChart>
</h:form>

Running the page will produce the following:

fiji3fiji3

While the integration with JSF is neat (we can easily use JSF managed beans as a data model for Flex components), we can even take it a step further. It's possible to click on a Flex chart, send an AJAX request and do a partial page update. Let's see how it's done.

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.