Java Web使用swfobject调用flex图表

Java Web使用swfobject调用flex图表

在js中使用open flash Chart的swfobject.js来调用flex生成的swf文件，动态地把数据传入swf文件接口，生成相应的flash。SWFObject是一个用于在HTML中方面插入Adobe Flash媒体资源（*.swf文件）的独立、敏捷的JavaScript模块，我们可以事先写好HTML的其他部分，最后再回过头来添加Flash内容，这样可以确保在客户端没有Flash的情况下，用户不会一无所获，也能确保flash能正常显示，不会出现有时能显示，有时不能显示的情况。Swfobject能够解决HTML与flash参数传递的问题，每次数据有更新，flash内容也能更着更新。
 下面简单介绍js与flash交互的过程：
1. 下载swfobject.js,在vm文件中包含该js文件；
2. 你的 HTML 中写一个用来放 Flash 的div
比如: (给一个你想取的id 比如 swfcontent, 然后在这个div里放上你的替换内容.) 

	<div id="myContent">
	<h1>Alternative content</h1>
	<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p></div>

这个div?放替换内容, 用来在 Flash 无法显示时显示，一般是这么设置的，如果显示不了，会显示一个下载新版本的flash播放器链接。

3. 在HTML中写下面的一段js代码：
		<script type="text/javascript">			
		YYchart("BarChart.swf", "myContent","callApp1","objectIDAndName", 600,600)	//柱状图数据格式												   
		function callApp1() {	
					var aryDailyVoucher= [ 
					{date: "type1", close: 41.71},  
					{date: "type2", close: 42.21},  
					   {date: "type3", close: 42.11},  
					 {date: "type4", close: 42.71},  
					  {date: "type5", close: 42.99}];
				var obj2= [  
				{yField:"close",displayName:""}  //纵坐标是close字段，横坐标是date字段
				] ;   	      							swfobject.getObjectById("objectIDAndName").dataSourceFunc(aryDailyVoucher,obj2,"date"); 				
	}
	</script>
	
YYchart公用函数是这样的：
	
	Function YYchart(swfSrc,innerIDName,funcName,objectIDAndName,widthVar,heightVar)
	{
		varWidth="100%";
		varHeight="250";
		if(widthVar){
			varWidth=widthVar
		}
		if(heightVar){
			varHeight=heightVar
		}
		var flashvars = {funcName: funcName}; 
		var params = {menu: "false",wmode: "opaque"};
		var attributes = {id: objectIDAndName,name: objectIDAndName}; 
		swfobject.embedSWF(swfSrc, innerIDName, varWidth, varHeight, "9.0.15","expressInstall.swf", flashvars, params, attributes); 
	}

最终是使用swfobject.embedSWF把数据传入flash然后显示flash。

	swfobject.embedSWF(swfUrl,id,width,height,version,expressInstallSwfurl, flashvars,params, attributes)，各个参数具体功能如下： 
	swfUrl（String，必须的）指定SWF的URL。 
	id（String，必须的）指定将会被Flash内容替换的HTML元素（包含你的替换内容）的id。 
	width（String，必须的）指定SWF的宽。 
	height（String，必须的）指定SWF的高。 
	version（String，必须的）指定你发布的SWF对应的Flash Player版本（格式为：major.minor.release）。 
	expressInstallSwfurl（String，可选的）指定express install SWF的URL并激活Adobe express install。 
	flashvars（String，可选的）用name:value对指定你的flashvars。 
	params（String，可选的）用name:value对指定你的嵌套object元素的params。 
	attributes（String，可选的）用name:value对指定object的属性。 
	注 意 ：在不破坏参数顺序的情况下，你可以忽略可选参数。如果你不想使用一个可选参数，但是会使用后面的一个可选参数，你可以简单的传入false作为参数的 值。对flashvars、params和 attributes这些JavaScript对象来说，你也可以相应的传入一个空对象{}。
	这里参数
	var flashvars = {funcName: funcName}; 的funcName就是上面的callApp1，callApp1函数里面通过swfobject.getObjectById("objectIDAndName")获得swf对象，通过该对象可调用flex函数dataSourceFunc(aryDailyVoucher,obj2,"date")，这样就能把数据传入flex做渲染。
	var params = {menu: "false",wmode: "opaque"};这里可以设置一些flash显示的一些参数，比如wmode: "opaque"就是设定flash展示的时候可以显示在div层的下面。
	var attributes = {id: objectIDAndName,name: objectIDAndName};这里是设置flash显示的时候的div id和div name属性。

4. flex中生成BarChart.swf的代码是这样的：

4.1首先在BarChart.mxml中写上柱状图的类似html标签的控件，

		  <mx:Panel title="ColumnChart and BarChart Controls Example"
				  height="100%"
				  width="100%"
				  layout="horizontal">
			<mx:ColumnChart id="column"
							height="100%"
							width="100%"
							paddingLeft="5"
							paddingRight="5"
							showDataTips="true">

			</mx:ColumnChart>  

			<mx:Legend dataProvider="{column}"/>
		</mx:Panel>
		
mx:Panel是一个面板，在这个面板中放置一个mx:ColumnChart柱状图， mx:Legend是设置数据提示的显示。

4.2 在创建后整个mx:Application后需要使用creationComplete="initApp()"，表示创建后需要就调用该函数，在initApp()函数中：

	internal function initApp():void
		{	
	ExternalInterface.addCallback("dataSourceFunc",dataSourceChange);
	ExternalInterface.call(Application.application.parameters.funcName);
	}

ExternalInterface.addCallback将 ActionScript 方法注册为可从容器调用，成功调用 addCallBack() 后，容器中的 JavaScript 或 ActiveX 代码可以调用在 Flash Player 中注册的函数。也就是js调用dataSourceFunc函数，相应的flex就会调用dataSourceChange这个函数去填充flash内容，dataSourceFunc就是上面的js函数中的swfobject.getObjectById("objectIDAndName").dataSourceFunc(aryDailyVoucher,obj2,"date"); 	dataSourceChange就是下面会说到的flex中的函数。EternalInterface.call(Application.application.parameters.funcName)
Flex调用js函数，Application.application.parameters.funcName的值就是上面flashvars = {funcName: funcName}的funcName的函数名，也就是HTML页面的initApp()函数。

4.3 flex中的dataSourceChange函数是这样的，

 public function dataSourceChange(dataArr:Object, yFieldArr:Object, xField:Object):void
这个函数的几个参数对应swfobject.getObjectById("objectIDAndName").dataSourceFunc(aryDailyVoucher,obj2,"date")的这几个参数，这样flex就能条用js的这个函数，把数据传入到flex中，在flex的这个函数就能对这些数据进行处理，最后完成flash的数据填充。
代码请看其它附件。

 

原文：http://www.javaarch.net/jiagoushi/612.htm