集成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