Exadel Fiji 是对JSF一个扩展框架,用于对Flex进行完全封装.
该框架通过在JSF页面内集成JSF组件和Flex组件来扩展JSF. 程序员可以采用类似于JSF组件的方式来调用Fiji Felx组件.
例如以下效果:
其JSF代码如下 :
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:fiji="http://exadel.com/fiji">
<h:panelGrid columns="2">
<fiji:barChart id="barChartMulti" value="#{BBeanMulti.commonData}"
title="Multi-series Bar Chart" subtitle="Beijing 2008 Olympic Games"
legendCaption="Medals" legendPosition="top" captionX="Medals Number"
captionY="Countries" barColors="#{BBeanMulti.totalColors}" width="350"
height="350" onitemclick="moveItem(event.x);return false;"
barCaption="none">
<fiji:chartData type="name" value="Total Medals Count" />
<fiji:chartData type="y" value="#{BBeanMulti.dataTotals}" />
</fiji:barChart>
<fiji:barChart id="selectedItemsChart" value="#{BBeanMulti.selectedData}"
title="Multi-series Bar Chart" subtitle="Results for Selected Country"
legendCaption="Medals" legendPosition="top" captionX="Medals Number"
captionY="Countries" barColors="#{BBeanMulti.colors}" width="350"
height="350" rulersValuesHighlight="none">
<fiji:chartData type="name" value="#{BBeanMulti.names}" />
</fiji:barChart>
</h:panelGrid>
<h:form>
<a4j:jsFunction action="#{BBeanMulti.showDetails}"
name="moveItem" ajaxSingle="true" oncomplete="$('selectedItemsChart:component').update();">
<a4j:actionparam name="param1"
assignTo="#{BBeanMulti.currentCountry}"></a4j:actionparam>
</a4j:jsFunction>
</h:form>
</ui:composition>
Bean代码如下 :
package com.exadel.fiji.demo.barChart;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.Map;
public class BeanMulti {
private String currentCountry;
private String currentMedalType;
private Integer currentMedalsCount;
private ArrayList<Medal> currentCountryMedals = new ArrayList<Medal>();
private ArrayList<Medal> currentMedalsByType = new ArrayList<Medal>();
private Map<String, Integer> commonData = new LinkedHashMap<String,Integer>();
private Map<String, Integer[]> selectedData = new LinkedHashMap<String,Integer[]>();
private Map<String, Integer[]> data = new LinkedHashMap<String,Integer[]>();
private ArrayList<String> colors = new ArrayList<String>();
private ArrayList<String> totalColors = new ArrayList<String>();
private ArrayList<String> names = new ArrayList<String>();
private ArrayList<String> countries = new ArrayList<String>();
private Integer[] dataChn = new Integer[]{51, 21, 28};
private Integer[] dataUSA = new Integer[]{36, 38, 36};
private Integer[] dataRus = new Integer[]{23, 21, 28};
private Integer[] dataTotal = new Integer[]{0, 0, 0};
public BeanMulti() {
super();
generateData();
}
private void generateData() {
data.put("Russia", dataRus);
data.put("USA", dataUSA);
data.put("China", dataChn);
for (int i = 0; i < dataRus.length; i++) {
dataTotal[0]+=dataRus[i];
dataTotal[1]+=dataUSA[i];
dataTotal[2]+=dataChn[i];
}
commonData.put("Russia", dataTotal[0]);
commonData.put("USA", dataTotal[1]);
commonData.put("China", dataTotal[2]);
countries.add("Russia");
countries.add("USA");
countries.add("China");
names.add("Gold");
names.add("Silver");
names.add("Bronze");
colors.add("#DAA520");
colors.add("#C0C0C0");
colors.add("#B87333");
totalColors.add("51476B");
}
public Integer[] getMedalCountsByCountry(String currentCountry) {
if ("china".equals(currentCountry.toLowerCase())){
return dataChn;
}else if ("usa".equals(currentCountry.toLowerCase())){
return dataUSA;
}else if ("russia".equals(currentCountry.toLowerCase())){
return dataRus;
}
return null;
}
public void showDetails(){
Integer[] currentMedals = getMedalCountsByCountry(currentCountry);
selectedData.clear();
selectedData.put(currentCountry, currentMedals);
}
//Getters setters and other metods here
}
Exadel Fiji的开发参考请参考,今后再抽时间汉化过来:
http://www.exadel.com/fiji/guide