Javalobby

Max Katz is a Senior Systems Engineer and Developer Advocate at Exadel. Max is a well-known speaker appearing at many conferences, webinars, and JUG meetings. Max leads Exadel’s RIA and mobile strategy. Part of this role is working as developer advocate for Tiggr Mobile Apps Builder (gotiggr.com), a cloud-based application for building mobile Web and native apps for any device. In addition, Max leads Exadel’s open source projects (exadel.org) such as Fiji, Flamingo, and JavaFX Plug-in for Eclipse. Max has been involved with RichFaces since its inception, publishing numerous articles, providing consulting and training, and authoring the book “Practical RichFaces” (Apress, 2008). Max also co-authored the DZone RichFaces 3 Refcard and the DZone RichFaces 4 Refcard. You can find Max’s writings about RIA and mobile technologies on his blog, mkblog.exadel.com, and you can find his thoughts about these topics and others on Twitter at @maxkatz. Max holds a Bachelor of Science in Computer Science from the University of California, Davis and an MBA from Golden Gate University. Max is a DZone MVB and is not an employee of DZone and has posted 43 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
| 97126 views |
  • submit to reddit

We Recommend These Resources


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.
"Starting from scratch" is seductive but disease ridden
-Pithy Advice for Programmers