JSP调用Flex程序

 1.在javascript中调用flex中的方法时用document.getElementById("flexObject").flexfunction("param");
flexObject是其html模板中的id或者name,即相对应的flex的实例化对象.要在flex中用ExternalInterface.addCallback("flexHelloWorld",flexHelloWorld);先注册在javascript中的映射

    import flash.external.*;
    import mx.collections.ArrayCollection;

   ExternalInterface.addCallback("myFlexChart",myFunc);//flex启动的时候初始化，实现函数的映射

    public function myFunc    (str:String,dimension:Number,title:String):String {
          panel.title=title;
           this.currentState="";
          return str;
          } 

    具体的pie.mxml文件如下：

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();" xmlns:ns1="*"> <mx:states> <mx:State name="loading"> <mx:RemoveChild target="{panel}"/> <mx:AddChild position="lastChild"> <mx:ProgressBar id="pb" horizontalCenter="0" verticalCenter="-20.5" color="#ff0080"/> </mx:AddChild> </mx:State> </mx:states> <mx:Style source="main.css"/> <mx:Metadata> [Event("regionChange")] </mx:Metadata> <mx:Script> <!--[CDATA[ //调用外部的接口 import flash.external.*; import mx.collections.ArrayCollection; public function myFunc (str:String,dimension:Number,title:String):String { panel.title=title; StringToArray(str,dimension,title); this.currentState=""; return str; } [Bindable] public var par:String=""; [Bindable] public var par1:String=""; [Bindable] public var par2:String=""; public var par3:String=""; public function StringToArray(str:String,dimension:Number,title:String):void{ var arrList:Array=new Array(); var arrString:Array=new Array(); arrString=str.split(";"); column1.displayName=arrString[1]; par=arrString[0]; par1=arrString[1]; par2=arrString[2]; if(dimension>=2){column2.displayName=arrString[2];} //if(dimension==3){column3.displayName=arrString[2];} //时间;已受众客户;反馈客户数;2009年02月;168524;12222 if(dimension<=3){ for(var i:int=3;i<arrString.length;i=i+dimension+1 ){ if(dimension==1)arrList.push({name:arrString[i],revenue:arrString[i+1]}); if(dimension==2)arrList.push({name:arrString[i],revenue:arrString[i+1],revenue1:arrString[i+2]}); // if(dimension==3)arrList.push({name:arrString[i],revenue:arrString[i+1],revenue1:arrString[i+4],revenue2:arrString[i+6]}); } var region:ArrayCollection=new ArrayCollection(); region.source=arrList; var map:Array=new Array(); //map.addItemAt(region,0); map.push({region:region}); _month=map[0]; this.chart.dataProvider=_month.region; panel.title=title } } import mx.events.FlexEvent; import mx.controls.dataGridClasses.DataGridColumn; import mx.controls.Button; import mx.controls.Label; import mx.controls.ToolTip; import mx.charts.HitData; import mx.controls.sliderClasses.SliderThumb; import mx.core.UIComponent; import mx.collections.ArrayCollection; import mx.rpc.events.*; private var chartToolTip:String; private var gridToolTip:String; private var selectedIndex:String; [Bindable] private var togToolTip:String = ""; [Bindable] private var chartDGToolTip:String = ""; [Bindable] public var pcToolTip:String = ""; import flash.events.KeyboardEvent; import mx.events.DataGridEvent; private function init():void { ExternalInterface.addCallback("myFlexChart",myFunc); //记录格式： X坐标名称；Y1坐标名词；Y2坐标名称；X数据1；X对应的Y1数据；X对应的Y2数据；X数据2；X对应的Y1数据；X对应的Y2数据 //str为数据串,Dimension为一个X坐标对应的Y的记录个数（最大为3条），以；分开，title为标题 this.currentState="loading"; if(Accessibility.active) { this.tabIndex=120; toggle.selectedIndex = 1; var chartButton:Button = Button(toggle.getChildAt(0)); var gridButton:Button = Button(toggle.getChildAt(1)); gridButton.toolTip = "View regional breakdown in grid" ; chartButton.toolTip = "View regional breakdown in chart"; var index:int = toggle.selectedIndex; if(index == 0) { togToolTip = chartButton.toolTip + " is selected. To view in grid " + "hit the right arrow and then space bar."; } else { togToolTip = gridButton.toolTip + " is selected. To view in chart hit the left arrow and then space bar."; } chartButton.addEventListener(FlexEvent.BUTTON_DOWN, toggleUpdate); gridButton.addEventListener(FlexEvent.BUTTON_DOWN, toggleUpdate); toggle.addEventListener(KeyboardEvent.KEY_DOWN, toggleUpdate); //Added for changing the value of the togglebutton toolTip when the views are changed toggle.addEventListener(FlexEvent.VALUE_COMMIT, toggleUpdate); } } [Bindable] private var monthData:Array; private function resultHandler(event:ResultEvent):void { monthData = event.result.list.month.source as Array; _month = monthData[0]; this.chart.dataProvider=_month.region; } private function toggleUpdate(e:Event):void { var index:int = toggle.selectedIndex; var chartButton:Button = Button(toggle.getChildAt(0)); var gridButton:Button = Button(toggle.getChildAt(1)); if(index == 0) { togToolTip = chartButton.toolTip + " is selected. To view in grid " + "hit the right arrow and then space bar."; } else { togToolTip = gridButton.toolTip + " is selected. To view in chart hit the left arrow and then space bar."; } } private function gridKeyDownHander(event:KeyboardEvent):void { var colIdx:int = event.keyCode - 49; if ((colIdx < grid.columns.length) && (colIdx >= 0)) { var dataGridEvent:DataGridEvent = new DataGridEvent(DataGridEvent.HEADER_RELEASE, false, true); dataGridEvent.columnIndex = colIdx; grid.dispatchEvent(dataGridEvent); } } public function get month():Object { return _month; } [Bindable()] private var _month:Object; private function getSliceLabel(item:Object, arg2:String, arg3:Number, arg4:Number):String { return item==null?"":item.name; } private var _selectedRegion:Object; public function get selectedRegion():Object { return _selectedRegion; } public function set selectedRegion(item:Object):void { _selectedRegion = item; var index:int = -1; for (var i:int=0; i < _month.region.length && index == -1; i++) { if (_month.region[i].name == item.name) index = i; } var explodeData:Array = []; explodeData[index] = 0.15; chart.series[0].perWedgeExplodeRadius = explodeData; } private function regionChange(item:Object):void { selectedRegion = item; dispatchEvent(new Event("regionChange")); } private function dataGridCurrencyFormat(item:Object, column:Object):String { return cf.format(item[column.dataField]); } //页面显示数据 private function formatDataTip(hitData:HitData):String { var name:String = hitData.item.name; var revenue:Number = hitData.item.revenue; return "<b>地区: "+name+"</b><br>份额: "+revenue; } private function gridComp():void { if(Accessibility.active) { grid.addEventListener(KeyboardEvent.KEY_DOWN, gridKeyDownHander); } } private function chartComp():void { if(Accessibility.active) { chart.accessibilityProperties.forceSimple = true; //Trying to make chart accessible var accessProps:AccessibilityProperties = new AccessibilityProperties(); accessProps.name = "Chart data is available in grid view"; accessProps.description = "Chart data is available in grid view"; accessProps.forceSimple = true; chart.accessibilityProperties = accessProps; Accessibility.updateProperties(); pcToolTip = "Chart data is available in grid view"; } } ]]--> </mx:Script> <mx:HTTPService id="srv" url="results.xml" useProxy="false" result="resultHandler(event)"/> <mx:SeriesInterpolate id="interpolate" elementOffset="10" duration="2000"/> <mx:CurrencyFormatter id="cf"/> <mx:Panel id="panel" textAlign="center" width="100%" height="100%" fontSize="15" fontFamily="Arial" fontWeight="bold"> <mx:ViewStack id="vs" width="100%" height="100%"> <mx:VBox id="gridBox" width="100%" height="100%" icon="@Embed('icon_chart.png')" toolTip="View in Chart" hideEffect="Fade" showEffect="Fade"> <mx:HBox width="100%" height="100%" icon="@Embed('icon_chart.png')" showEffect="Fade"> <mx:ColumnChart id="chart" dataProvider="{_month.region}" width="80%" height="100%" toolTip="{pcToolTip}" showDataTips="true" fontSize="15"> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{_month.region}" categoryField="name"/> </mx:horizontalAxis> <mx:verticalAxis> <mx:LinearAxis /> </mx:verticalAxis> <mx:series> <mx:Array> <mx:ColumnSeries id="column1" displayName="s1" yField="revenue" showDataEffect="{interpolate}"> <mx:fill> <mx:LinearGradient> <mx:entries> <mx:Array> <mx:GradientEntry color="#C6D5DD" ratio="0" alpha="100"/> <mx:GradientEntry color="#336699" ratio="0.1" alpha="100"/> <mx:GradientEntry color="#24496D" ratio="0.9" alpha="100"/> <mx:GradientEntry color="#000000" ratio="1" alpha="100"/> </mx:Array> </mx:entries> </mx:LinearGradient> </mx:fill> </mx:ColumnSeries> <mx:ColumnSeries id="column2" displayName="s2" yField="revenue1" showDataEffect="{interpolate}"> </mx:ColumnSeries> </mx:Array> </mx:series> <mx:backgroundElements> <mx:Array> <mx:GridLines direction="both"> <mx:verticalStroke> <mx:Stroke weight="1" color="#CCCCCC"/> </mx:verticalStroke> </mx:GridLines> </mx:Array> </mx:backgroundElements> </mx:ColumnChart> <mx:Legend id="legend" width="20%" height="100%" dataProvider="{chart}" fontSize="15"/> </mx:HBox> </mx:VBox> <mx:VBox id="chartBox" width="100%" height="100%" icon="@Embed('icon_grid.png')" toolTip="View in Grid" hideEffect="Fade" showEffect="Fade"> <mx:DataGrid dataProvider="{_month.region}" width="100%" height="100%" id="grid" creationComplete="gridComp();" toolTip="{chartDGToolTip}"> <mx:columns> <mx:Array id="arry1"> <mx:DataGridColumn id="DataGridColumn" headerText="{par}" dataField="name" /> <mx:DataGridColumn id="DataGridColumn1" headerText="{par1}" dataField="revenue" /> <mx:DataGridColumn id="DataGridColumn2" headerText="{par2}" dataField="revenue1" /> </mx:Array> </mx:columns> </mx:DataGrid> </mx:VBox> </mx:ViewStack> <mx:ControlBar> <mx:ToggleButtonBar dataProvider="{vs}" id="toggle" toolTip="{togToolTip}"/> </mx:ControlBar> </mx:Panel> </mx:Application>

 

 

2. 在jsp中首先生成一个flash的对象

<script language="javascript"> CreateFlash("chart_pie", "../../chart/pie/chart_pie.swf",720,380,""); </script>  

flash.js的代码如下：

function CreateFlash(idad, swfurl, wad, had, vs){ var str = "<object classid=/"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000/" codebase=/"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0/" width=/"" + wad + "/" height=/"" + had + "/" id=/"" + idad + "/" align=/"middle/">"; str += "<param name=/"allowScriptAccess/" value=/"always/">"; str += "<param name=/"quality/" value=/"high/">"; str += "<param name=/"movie/" value=/"" + swfurl + "/">"; str += "<param name=/"flashvars/" value=/"" + vs + "/">"; str += "<embed src="/" mce_src="/""" + swfurl + "/" flashvars=/"" + vs + "/" quality=/"high/" width=/"100%/" height=/"100%/" name=/"" + idad + "/" align=/"middle/" allowScriptAccess=/"always/" type=/"application/x-shockwave-flash/" pluginspage=/"http://www.macromedia.com/go/getflashplayer/">"; str += "</object>"; document.write(str); }

 

 

3.生成了flex对象后就可以直接调用其外接接口的方法：

  var x = test.myFlexChart('思明;45;集美;74;翔安;44;湖里;12;湖里1;12;湖里2;12;湖里3;12','');

 

 

 4.如果系统使用了ajax，在页面初始化的时候容易产生找不到flex函数接口的情况，解决的办法为先加载flex对象，当页面加载完了后再调用flex的方法。

<script type="text/javascript"> setTimeout("test1()",1500); function test1(){ getAreaCustomer(); getHotResult(); getMonthEffect(); getFrontTopInfo(); } </script>