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的数据填充。 代码请看其它附件。
相关推荐
使用flex写的四种图表,用于web前台显示,加入了保存图表图片的功能。
2、使用swfObject向页面中插入Flash文件。 3、使用Flash中的ExternalInterface.call方法和fscommand方法对JS进行调用与传送数据。 4、使用Flash中的ExternalInterface.addCallback方法创建接口,使JS能够调用AS中的...
使用.js方式将flash嵌入web页面,内含示例及源码!
SWFObject_2.0_使用方法
SWFObject.js的简单应用,用于在网页嵌入swf文件,很easy
一直想为 SWFObject 这个JS的类库写一个推荐帖,因为他轻便,同时功能强大,为我们的开发带来了很大的便捷。
swfObject图片批量上传,很美观的界面,选好图片带预览效果,通过falsh进行上传,里面放了操作文档,和效果图,基本上前台和后台代码都在里面。 一开始下载的是asp.net版本,应本人是学java,在网上找到了些资料,...
为什么你应该使用SWFObject 2.0? • 3 . 为什么SWFObject 2.0使用JavaScript? • 4 . 我们应该使用静态发表还是动态发表的方法? • 5 . 怎样用SWFObject 2.0的静态发表方法来嵌入Flash内容 o 5-1 . 第一步:...
这是一个flv在线预览的demo,FLV网页播放资源包,自己是在网上找到的,供需要的人学习使用~
• 1 . 什么是SWFObject 2.0?... 为什么你应该使用SWFObject 2.0? • 3 . 为什么SWFObject 2.0使用JavaScript? • 4 . 我们应该使用静态发表还是动态发表的方法? 。。。。。。。。。。。。。。。。。。
swfobject_modified.js
swfobject.js 是网页调用flash是使用到的一个js插件 网页要调用swf文件是要使用此文件
swfobject 2.2,提取至Apache flex sdk4.14.1中
SWFObject,新的swf嵌入方法,支持标准HTML语法
插入flash代码 ,可以直接设置flash的参数
swfobject2的第一个Update.修正了IE内存泄漏等错误。
NULL 博文链接:https://mft.iteye.com/blog/2036387