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.