Using JSF and Flex Components Together
So far I have shown you how to use charting components that ship with Fiji. Obviously you might want to use other, existing Flex components or maybe even build your own. To use any other Flex components, we use the universal wrapper or <fiji:swf> component.
We will use one of the charts provided by amCharts.com.
Note: We can use their charts for free. The only limitation is that a small URL will appear pointing to their Web site. I don't think it's such a limitation for such nice charts.
The SWF file for the chart as well as chart data are included in the template under web/ampie directory. You can also download them from here:
SWF file – ampie.swf <link>
Settings file – ampie_settings.xml <link>
Data file – ampie_data.xml <link>
The page looks like this:
<fiji:swf src="/ampie/ampie.swf" bgcolor="#FFFFFF" width="420" height="300">
<f:param name="path" value="/ampie" />
<f:param
name="settings_file"
value="#{facesContext.externalContext.requestContextPath}/ampie/ampie_settings.xml" />
<f:param
name="data_file"
value="#{facesContext.externalContext.requestContextPath}/ampie/ampie_data.xml" />
<f:param name="preloader_color" value="#999999" />
</fiji:swf>
Using the src attribute of <fiji:swf>, we point to a Flash component. The Flash component can also be loaded as a resource by using src=“resource:///file.swf”. This particular Flash component (ampie.swf) requires some data. The data is being passed using the standard JSF attribute, <f:param>. When a Flash object is rendered on a page, it has a special flashVars attribute that provides arguments to the Flash module. In our case, the <f:param> tags with their information are rendered as flashVar arguments to the Flash component. This is how the charts gets its data.
Running the page will produce the following:
In case you need to update the data for the chart, one possible way is to rerender the Flash component using the standard RichFaces approach.
(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
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
Devika Nara replied on Fri, 2010/02/19 - 12:07am
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?