Exadel Fiji Developer Guide

Using this feature any Flex module could get the data from JSF Managed Beans or just call any object method which return this data without having to know about JSF.

In order to implement interoperability between Flex and JSF the <fiji:endPoint> component provides access to the properties or methods of any object via a URL: for Flex module the it is just a URL which it uses to send the request to the server.

An example showing basics of httpService usage can be found on Fiji demo site.

Fiji DataService feature allows to call remote procedure and get the result using AMF format and standard RemoteObject from JSF back-end.

AMF is a binary format based loosely on the Simple Object Access Protocol (SOAP). It is used primarily to exchange data between an Adobe Flash application and a server.

The "binary" attribute of the <fiji:endPoint> component set to "true" indicates that Fiji will use the AMF protocol. The RemoteObject object uses this protocol to send a request from a Flex module. It the "binary" attribute is set to "false" the request is processed as a flow of sting values, i.e. HTTPSevice is used.

Fiji components Flex API - is one of the major features which allows to manage the component from the callback function defined on the component itself either as from any other page elements.

Invoking Ajax request could be easily done using Rich Faces Ajax action components together with fiji components. Events of Flex components could be used to send simple ajax request and update parts of the page.

Fiji allows to pass parameter to a flash object represented via <fiji:swf> component using standard <f:param> tag.

Value can be simply a constant like <f:param name="someParam" value="paramValue"> or it can be JSF value binding to some bean property.

One of the most important features of the Fiji Framework is the SWF Wrapping.

The SWF Wrapping provides the possibility to easily embed any flash object into a page and also integrate it in the JSF environment.

The <fiji:endPoint> component is used as a child tag of <fiji:swf> that implements bridge mechanism to enable the interaction between client-server architecture used in Flex and JSF.

To create the simplest variant on a page use the following syntax:

...
<fiji:endpoint  value="#{bean.data}" />
...

In order to implement interoperability between Flex and JSF the <fiji:endPoint> provides access to the properties of the object via a URL: for Flex module it is just a URL which it uses to send the request to the server(HTTP service).

This is how the <fiji:endPoint> can be used on a page

...
<fiji:swf>
<fiji:endPoint name="foopath" value="#{bean.data}" />
</fiji:swf>
...

The <fiji:endPoint> has a number of attributes that help it to build the designed functionality.

The "value" and "service" are used to preform binding to a managed bean. The difference between these two attributes is that in "value" you need to bind to a bean property and in case with "service" the attribute is bound to a appropriate method.

In the listing it's shown how the "service" attribute is bound to a method.

...
<fiji:endPoint name="foopath" service="#{report.takeReport}" />
...

In the listing it's shown how the "value" attribute is a bean property.

...
<fiji:endPoint name="foopath" value="#{report.property}" />
...

If you bind some method to the "service" the <fiji:endPoint> will serialize the bean structure with a default encoder into an XML file.

If a bean looks like this

...
user {
String name;
int age;
Order[] orders
}
order {
int id;
int value;
} 
...

the XML file will be the following.

...
<user>
  <name>Smith</name>
  <age>22</age>
    <order>
       <id>12</id>
      ....
    </order>
</user> 
  ...

In this regards if a Flex module requires a certain structure you can use the "encoder" i.e. you need to serialize the bean in a different way.

To perform this you do the following:

...
<fiji:endPoint name="foopath" encoder="com.exadel.demo.MyEncoder" service="#{report.takeReport}" /> 
...

There is a method in MyEncoder that gets an object from takeReport and returns a serialized structure (XML, comma-separated strings, binary structure). Thus the <fiji:endPoint> is addressed with a HTTP request and as a response it returns an XML file.

The "decoder" attribute takes the parameters that Flex sends with an HTTP service and creates an object needed to execute the myEncoder method.

The decoder can be used like this

...
<fiji:endPoint name="foopath" encoder="com.exadel.demo.MyEncoder" decoder="com.exadel.demo.MyDecoder" service="#{report.saveReport}" />
...

You don't need to define a class that implements the myEncoder() and myDecoder() methods.

Here you can see an example of <fiji:endpoint> usage details and examples with full code listings.

The <fiji:swf> is a tag that implements the functionality of Universal Wrapper.

To create the simplest variant on a page use the following syntax:

...
<fiji:swf src="my.swf" />
...

The <fiji:swf> is implementation of Universal Wrapper Component and is designed to embed any swf file that a developer wants to represent on a page. A path to the swf file is specified with "src" attribute.

...     
<fiji:swf src="bar.swf" />
...
  

...      
<fiji:swf src="foo/bar.swf">
<f:param name="a" value="3" />
        <f: param name="b" value="4" />
</fiji:swf>
...
        

...      
<fiji:swf src="bar.swf">
<f: param name="e" value="#{user.name}" />
</fiji:swf>
...
        

Here is an example of how the Universal Wrapper can be used.

The example shows how an swf file is embedded to that JSF page and how the parameters are passed to the swf file.

...      
<fiji:swf src="/ampie/ampie.swf" bgcolor="#FFFFFF" width="520" height="400">
<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>
 ...
  

The swf file is embedded using the "src" attribute, while the parameters that are passed to the "ampie.swf" file via a standard JSF tag <f:param>. The "name" attribute defines a certain parameter of a Flash object and the "value" contains the valued to be passed.

This is how it looks on a page.

Figure 5.1. Specifying a set of colors for the bars.

Here you can see an example of <fiji:swf> usage details and examples with full code listings.

The <fiji:barchart> allows to build highly interactive and skinnable bar chart on the page, client side functionality is represented with a Flex module.

Figure 5.2.  <fiji:barchart>

To create the simplest variant on a page use the following syntax:

...
<fiji:barChart  value="#{bean.data}" />
...

The simplest bar chart using the <fiji:barChart> component can be created the following way:

...
<fiji:barChart  value="#{bean.monthMap}" width="300" height="300">
<fiji:chartData type="name" value="#{bean.names}" />
</fiji:barChart>
...

The data for the component to render is taken from the model object bound to the component.

...
private  ArrayList<String> names = new ArrayList<String>();
    private	 Map<Integer, Object> monthMap = new LinkedHashMap<Integer,Object>();
    public ArrayList<String> getNames(){
        names.add("Motherboards");
        names.add("Hard drives");
        names.add("Monitors");
        return names;
    }
    private Integer[] data1 = new Integer[]{800, 900, 900};
    private Integer[] data2 = new Integer[]{812, 920, 1300};
    public Map<Integer, Object> getMonthMap() {
    		monthMap.put(1, data1);
    		monthMap.put(2, data2);
    		return monthMap;
    	}
    ...

As you can see from the code listing above the "value" attribute is used for data binding, while the names for the bars are passed to the "value" attribute of the <fiji:dataChart> nested auxiliary component.

As a result you will see this diagram.

Figure 5.3. The simples bar chart

There are a number of ways to pass data to the <fiji:barChart> component.

The <fiji:barChart> has a number of helpful and useful attributes. We will cover the some attributes usage aspects here.

The "title" and "subtitle" render a title and a subtitle for the chart respectively.

Figure 5.4. The <fiji:barChart> with a title and a subtitle

To provide more information about the figures that a bar represents it is advisable to use "toolTipvalue" and "barCaption" attributes where some predefined substitutions that Fiji framework provides are available. Tooltip and bar caption can be set as follows:

These predefined substitutions available for all chart components:

...    
<fiji:barChart id="barChartID5" value="#{bean.monthMap}" application="BarChart" bgcolor="#FFFFFF" width="350" height="300"
      title="Demo chart" subtitle="Subtitle with more detailed information" toolTipValue="{y} {name} were sold in {x} " barCaption="{y} {name}">
<fiji:chartData type="name" value="#{bean.names}" />
</fiji:barChart>
...

Figure 5.5. The <fiji:barChart> with a tooltip and a bar caption

It looks more vividly if the bars of a different series have various colors. Recoloring can be performed using the "barColors" attribute. You can define colors in the bean file like this:

...    
 public List<String> getColors() {
    	List<String> colors = new ArrayList<String>();
    	colors.add("#5db2c2");
    	colors.add("#b0343c");
    	colors.add("#dd9f2c");
    	return colors;
}
...

And specify binging to the property that stores the colors in "barColors"

...    
<fiji:barChart  value="#{bean.monthMap}" barColors="#{bean.colors}">
<fiji:chartData type="name" value="#{bean.names}" />
</fiji:barChart>
...

This is what you will get as a result

Figure 5.6. The <fiji:barChart> with colored bars

There are a number of custom event handlers that can be used with the component, more details of their usage you can find here.

Here you can see an example of <fiji:barChart> usage details and examples with full code listings.

The <fiji:stackedBarChart> allows to build highly interactive and skinnable stacked bar chart on the page, client side functionality is represented with a Flex module.

Figure 5.7.  <fiji:stackedBarChart>

Use the following syntax to create the simplest variant of the component on a page :

...
<fiji:stackedBarChart  value="#{bean.data}">
</fiji:stackedBarChart>
...

The simplest way to add the <fiji:stackedBarChart> component is the following:

...
<fiji:stackedBarChart value="#{bean.monthMap}"  width="300" height="300">
        <fiji:chartData type="name" value="#{bean.beanNames}"></fiji:chartData>
</fiji:stackedBarChart>
...

The data the component renders to a chart is taken from the managed bean. Please read the given below code listing focusing particularly on how the data is passed to the component.

...
private	 Map<String, Object> monthMap = new LinkedHashMap<String,Object>();	
private Integer[] September = new Integer[]{800, 900, 900};
private Integer[] October = new Integer[]{812, 920, 1300};
public Map<String, Object> getMonthMap() {
monthMap.put("September", September);
monthMap.put("October", October);
return monthMap;
}
    ...

Hence, as you can see from the code listing the "value" attribute is used for data binding, while the names for the bars are passed to the "value" attribute of the <fiji:dataChart> nested auxiliary component.

As a result you will see this diagram.

Figure 5.8. The simples diagram

There are a number of ways to pass data to the <fiji:stackedBarChart> component.

The <fiji:stackedBarChart> has a number of other helpful and useful attributes. We will cover some attributes usage aspects here .

The "title" and "subtitle" render a title and subtitle for the chart respectively.

...     
  <fiji:stackedBarChart value="#{bean.monthMap}"  title="Demo chart" 
    subtitle="Subtitle with more detailed information">
    <fiji:chartData type="name" value="#{bean.beanNames}"></fiji:chartData>
  </fiji:stackedBarChart>
  ...

Figure 5.9. The <fiji:stackedBarChart> with a title and a subtitle

To provide more information about the figures that a bar represents it is advisable to use "toolTipvalue" attribute where some predefined substitutions are available.

...     
  <fiji:stackedBarChart value="#{bean.monthMap}" 
width="300" height="300" 
    title="Demo chart" subtitle="Subtitle with more detailed information" 
    toolTipValue="In {x} were sold {y} {name}">
    <fiji:chartData type="name" value="#{bean.beanNames}"></fiji:chartData>
  </fiji:stackedBarChart>
  ...

Figure 5.10. The <fiji:stackedBarChart> with a tooltip customized

Likewise you can use the "barCaption" attribute to specify the caption on each bar.

...     
<fiji:stackedBarChart  value="#{bean.monthMap}" width="300" height="300" 
title="Demo chart" subtitle="Subtitle with more detailed information" 
toolTipValue=" {y} {name} were sold in  {x}     "
barCaption="{y} {name} ">
      <fiji:chartData type="name" value="#{bean.beanNames}"></fiji:chartData>
</fiji:stackedBarChart>
  ...

The given below figure shows the <fiji:stackedBarChart> with a tooltip and a caption displayed dynamically with the information for each bar, furthermore as it was mentioned the data is passed by means of substitutions.

Figure 5.11. The <fiji:stackedBarChart> with a tooltip and a caption on a bar

These predefined substitutions available for all chart components:

It looks more vividly if the bars of a different series have various colors. Recoloring can be performed using "barColors" attribute. You can define colors in the bean file and specify binging to the property that stores the colors.

Figure 5.12. Specifying a set of colors for the bars.

In this example the "barColors" attribute is bound to the following collection of colors in the bean file.

...     
 public List<String> getColors() {
List<String> colors = new ArrayList<String>();
colors.add("#5db2c2");
colors.add("#b0343c");
colors.add("#dd9f2c");
return colors;
    }
...

There are a number of custom event handlers that can be used with the component, more details of their usage you can find here.

Here you can see an example of <fiji:stackedBarChart> usage details and examples with full code listings.

The <fiji:lineChart> allows to build highly interactive and skinnable line chart on the page, client side functionality is represented with a Flex module.

Figure 5.13.  <fiji:lineChart>

Use the following syntax to create the simplest variant of the component on a page :

...
<fiji:lineChart  value="#{bean.data}" />
...

The simplest way to add the <fiji:lineChart> component is the following:

...
<fiji:lineChart   value="#{bean.monthMap}"  >
      		<fiji:chartData type="name" value="#{bean.names}" ></fiji:chartData>
</fiji:lineChart >
...

The data the component renders to a chart is taken from the managed bean. Please read the given below code listing focusing particularly on how the data is passed to the component.

...
private	 Map<String, Object> monthMap = new LinkedHashMap<String,Object>();
    public ArrayList<String> getNames(){
        names.add("Series one");
        names.add("Series two");
        names.add("Series three");
        return names;
    }
     private Integer[] data1 = new Integer[]{800, 900, 900};
    private Integer[] data2 = new Integer[]{812, 920, 1300 };
    private Integer[] data3 = new Integer[]{700, 600, 750 };
    public Map<String, Object> getMonthMap() {
    		monthMap.put("September", data1);
    		monthMap.put("October", data2);
    		monthMap.put("November", data3);
    		return monthMap;
    	}
    ...

Hence, as you can see from the code listing the "value" attribute is used for data binding, while the names for the bars are passed to the value attribute of the <fiji:dataChart> nested auxiliary component.

As a result you will see this diagram.

Figure 5.14. The simples diagram

There are a number of ways to pass data to the <fiji:lineChart> component.

The <fiji:lineChart> has a number of other helpful and useful attributes. We will cover some attributes usage aspects here .

The "title" and "subtitle" render a title and subtitle for the chart respectively.

...     
  <fiji:lineChart value="#{bean.monthMap}"  title="Demo chart" 
    subtitle="Subtitle with more detailed information">
    <fiji:chartData type="name" value="#{bean.beanNames}"></fiji:chartData>
  </fiji:lineChart>
  ...

Figure 5.15. The <fiji:lineChart> with a title and a subtitle

It looks more vividly if the bars of a different series have various colors. Recoloring can be performed using "barColors" attribute. You can define colors in the bean file and specify binging to the property that stores the colors.

Figure 5.16. Specifying a set of colors for the bars.

In this example the "barColors" attribute is bound to the following collection of colors in the bean file.

...     
private  ArrayList<String> names = new ArrayList<String>();
public List<String> getColors() {
List<String> colors = new ArrayList<String>();
colors.add("#5db2c2");
colors.add("#b0343c");
colors.add("#dd9f2c");
return colors;
    }
...

There are a number of custom event handlers that can be used with the component, more details of their usage you can find here.

Here you can see an example of <fiji:lineChart> usage details and examples with full code listings.

The <fiji:columnChart> allows to build highly interactive and skinnable column chart on the page.

Figure 5.17.  <fiji:columnChart>

Use the following syntax to create the simplest variant of the component on a page :

...
<fiji:columnChart  value="#{bean.data}" />
...

The simplest way to add the <fiji:columnChart> component is the following:

...
<fiji:columnChart id="columnChartID1" value="#{bean.data}">
<fiji:chartData type="name" value="Series one" />
</fiji:columnChart>
...

The data that the component renders to the chart is taken from the managed bean.

...
    public Object[] getData() {
Random rnd = new Random(new Date().getTime());
List<Integer> data = new ArrayList<Integer>();
int dataSize = 3;
for (int i = 0; i < dataSize; i++) {
    data.add(rnd.nextInt(50));
}
return data.toArray();
    }
    ...

Hence, as you can see from the code listing the "value" attribute is used for data binding.

As a result you will see this diagram.

Figure 5.18. The simples diagram

There are a number of ways to pass data to the <fiji:columnChart> component.

The <fiji:columnChart> has a number of helpful and useful attributes. We will cover some attributes usage aspects here .

The "title" and "subtitle" render a title and subtitle for the chart respectively.

Figure 5.19. The <fiji:columnChart> with a title and a subtitle

It looks more vividly if the bars of a different series have various colors. Recoloring can be performed using "barColors" attribute. You can define colors in the bean file and specify binging to the property that stores the colors.

Figure 5.20. Specifying a set of colors for the bars.

In this example the "barColors" attribute is bound to the following collection of colors in the bean file.

...     
    public List<String> getBarColorsStr() {
    	List<String> data = new ArrayList<String>();
    	data.add("#ea9008");
    	data.add("#c44851");
    	return data;
    }  
...

It is certainly also possible to customize basically all visual elements of the component like rulers captions, line marker captions, legend items, etc.

The most common elements of a chart to be customized are line markers.

In order to add some specific names that are displayed as line markers you can pass the data to the "value" attribute of <fiji:chartData> as a map. Where the first key is the name of the line marker.

The provided below code listings show how you can add your specific names for the line markers.

This is the view page part.

...     
    <fiji:columnChart id="columnChartMulti" value="#{columnChartBean.monthMap}" title="Multi-dimensional Column Chart" 
                        barColors="#{columnChartBean.colors}"
                        subtitle="Hardware sales per month" legendWidth="200" width="300" height="300">
        <fiji:chartData type="name" value="#{columnChartBean.names}"></fiji:chartData>
    </fiji:columnChart>
...

The bean file.

...
private	 Map<String, Object> monthMap = new HashMap<String,Object>();
...
public Map<String, Object> getMonthMap() {
monthMap.put("February", getData());
monthMap.put("March", getData());
monthMap.put("January", getData());
return monthMap;
}
...

The background of the chart can be also set via the attribute "backgroundImage" of the component.

The caption for "X" and "Y"rulers can be specified using "captionX" "captionY" respectively.

There are a number of custom event handlers that can be used with the component, more details of their usage you can find here.

Here you can see an example of <fiji:columnChart> usage details and examples with full code listings.

The <fiji:stackedColumnChart> allows to build a highly interactive and skinnable stacked column chart on the page, client side functionality is represented with a Flex module.

Figure 5.21.  <fiji:stackedColumnChart>