集成Flex的JSF扩展框架Exadel Fiji简介
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
?
?
?