页面中嵌入FLEX应用-传参

项目需要在页面的某div中动态展现图表数据，最终选用FLEX进行数据展现。

 

为了实现这一目标，着手之初考虑了下大致需要如下步骤：

1、页面触发事件将数据查询条件参数动态传递给flex应用（swf）；

     Page(with param) -> Flex

2、flex应用获取到查询条件，向后台服务（如：Servlet）发请求，获取数据源（如：xml）；

     Flex(with param) -> Servlet

     Servlet(xml) -> Flex

3、flex展现数据。

     Flex Display xml data.

 

为了实现参数传递，费了些周折。最后集中在两个技术点上：

其一，页面向Flex传参，静态方式可使用flashvars进行：

 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="400"> <param name="movie" value="example.swf"> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="example.swf" width="400" height="400"> <!--<![endif]--> <param name="flashvars" value="param1=testtest" /> <p>Alternative Content</p> <!--[if !IE]>--> </object> <!--<![endif]--> </object>

 

那么其中的url的值如何动态赋值呢？我们希望动态的获取参数，并且将这些参数传递给swf，并且将swf展示在某div中。那么便可使swfobject来协助实现：

swfobject的使用方法非常简单：

1、下载 http://code.google.com/p/swfobject/

2、页面中引用：<script type="text/javascript" src="/script/swfobject.js"></script>

3、页面中编写事件响应js代码：

function outputFlash(){ var so = new SWFObject("demo.swf", "demo", "100%", "70%", "7", "#ffffff"); var param1 = "testtest"; so.addVariable("param1", param1); so.write("some_div"); }

这段代码，主要是实例化一个swfobject对象，将swf的名称及需要传递的参数告诉该对象，最后将结果swf输出至页面中的某div中即可。

 

其中的参数用法可详见另外一篇博文：http://www.awflasher.com/flash/articles/swfobj.htm

 

4、页面中自然需要定义id为some_div的div，如：

<div id="some_div"></div>

5、页面中做一个事件触发，比如按钮之类触发outputFlash() js函数即可。

 

那么当用户触发该函数后，将会在some_div中看到swf已经内嵌进页面当中。当然，这里只是提前透露了结果，后半部分：flex获取参数并向后台发送请求的实现，请接着往下看：

 

 

---

 

 

其二，Flex获取页面传参，可通过如下方式获得：

var param1:String = Application.application.parameters.param1;

 

获取参数并向后台服务发请求的示例代码：

 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="doRequest()"> <mx:Script><!--[CDATA[ private function httpEncoding(param:String):String{ return encodeURIComponent(param); } private function doRequest():void{ var param1:String = Application.application.parameters.param1; var params:URLVariables = new URLVariables(); params.param1 = httpEncoding(param1); srv.send(params); } ]]--></mx:Script> <mx:HTTPService id="srv" url="xxxServelt" result="resultHandler(event)" resultFormat="e4x" /> ... </mx:Application>

 

示例代码中略去了处理xml的逻辑代码。大可以选择丰富的Chart控件，进行数据展示。