Using JSF and Flex Components Together
Recommended Links
JBoss RichFaces
Enter the JBoss Matrix
RedHat
Blog: In Relation To...
Whitepaper: Ajax on Demand
This section sponsored by:
Using Fiji
There are three basic steps to get started.
- Download project template
- Download JAR file and add them to project template
- Open the project in your favorite IDE
Download Project template
Download and unzip the project template. <link>
Download Fiji JAR files
- Go to http://exadel.com/web/portal/fiji and click on Download to download Fiji distribution
- Unzip the downloaded file
- In the next step you are going to copy JAR files from lib folder to fiji/web/WEB-INF/lib directory
1. If running Tomcat 5.5, copy all files
2. If you are running Tomcat 6, copy all files except:
¦ el-api.1.0.jar
¦ el-impl-1.0.jar
Import Project
Import the project into your favorite IDE. Here is how to do it in JBoss Tools (same steps for JBoss Developer Studio).
- Select File/Import
- Select Other
- Select JSF Project
- Point to the web.xml file location in the project
- Click Next
- Keep all setting as they are (I'm assuming you have a server defined)
- Click Finish
To tell you the truth, installing Fiji is very simple. It's basically a RichFaces project (has to be RichFaces version 3.2.2 or higher) plus the JAR files for Fiji:
- fiji-api-1.x.x.jar
- fiji-ui-1.x.x.jar
- flamingo-service-jsf-1.6.x.jar - to use HttpService via <fiji:endpoint> component. Covered later in article.
Besides using HttpService, if you would like to use DataServices (AMF format), you need two additional JAR files:
- amf-serializer-1.6.x.jar
That's it. Nothing else is needed, not even changes to web.xml.
Using Bar Chart
Let's start with a simple example using bar chart. The first step is to create the data for the chart. Because we can easily bind charts to JSF managed beans, that's where we are going to create our data.
The Java bean looks like this:
public class BarChartBean {
public BarChartBean() {
}
private Integer[] data;
public Integer[] getData() {
return data;
}
@PostConstruct
public void init () {
data = new Integer[5];
data[0] = 5;
data[1] = 2;
data[2] = -3;
data[3] = 10;
data[4] = 9;
}
}
To make it a JSF managed bean we need to register it in a JSF configuration file:
<managed-bean>
<managed-bean-name>barChartBean</managed-bean-name>
<managed-bean-class>fiji.BarChartBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
So far this is just basic JSF. Let's now create the page.
Open start.xhtml. Look at the top, the page already contains a namespace for the Fiji tag library. Insert the following between <body> tags:
<h:form>
<fiji:barChart id="barChart" value="#{barChartBean.data}"
title="Bar chart" width="500" height="300">
<fiji:chartData type="name" value="Just some numbers" />
</fiji:barChart>
</h:form>
<fiji:barChart> is just like a standard JSF component. The value attribute is bound to chart data inside the managed bean. <fiji:chartData type=”name”..> sets the chart name.
Save everything and run the page. You should get the following:
- Login or register to post comments
- 55117 reads
- Printer-friendly version
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
Comments
themathmagician 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
maxkatz replied on Tue, 2009/02/03 - 12:53pm
maxkatz replied on Tue, 2009/02/03 - 12:54pm
jgreene 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.
maxkatz replied on Mon, 2009/03/09 - 12:39pm
in response to: jgreene