开发环境:
OS:WindowsXP
Ruby:Ruby1.9.1
Rails:Rails2.3.5
IDE:Rubymine2.0.1
Flash Builder:Flash Builder4
背景:
在 RUBY-FLEX实践—利用swfobject在RUBY工程中加载SWF 中介绍了如何在RAILS界面中引用SWF,本例将介绍如何将参数从Rails页面传递到Flex应用。
本例分析的参数类型包括String,Array,Hash
(注:FLEX中解析JSON数据需要引用以下lib下载as2corelib)
一、修改前一个实例中的flex.html
修改后代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Flex On Rails</title>
<mce:script type="text/javascript" src="/javascripts/swfobject.js" mce_src="javascripts/swfobject.js"></mce:script>
<mce:script type="text/javascript"><!--
For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
var swfVersionStr = "10.0.0";
<!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
var xiSwfUrlStr = "/swf/playerProductInstall.swf";
var flashvars = {};
flashvars.name = "crystal";
flashvars.message="hello";
flashvars.bookInventory= ["apple","pear","grape"];
flashvars.hash = "[{'title':'history','price':19}]";
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "RailsProject";
attributes.name = "RailsProject";
attributes.align = "middle";
swfobject.embedSWF(
"/swf/RailsProject.swf", "flashContent",
"100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
// --></mce:script>
</head>
<body>
<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
10.0.0 or greater is installed.
</p>
<mce:script type="text/javascript"><!--
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a href="http://www.adobe.com/go/getflashplayer" mce_href="http://www.adobe.com/go/getflashplayer"><img src=""
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif" mce_src=""
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt='Get Adobe Flash player' /></a>" );
// --></mce:script>
</div>
</body>
</html>
二、修改Flex应用RailsProject.mxml
修改后代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<!--[CDATA[
import com.adobe.serialization.json.JSON;
import mx.controls.Alert;
[Bindable]
var gdProvider:Array;
private function init():void{
//传递HASH数组,接收到的类型为String,传递时数据为[{'title':'history','price':19}],JSON.decode处理时需要先将'''转换成'"'
//问题1: 从RUBY端直接传递[{"title":"history","price":19}]则mx.core.Application.application.parameters.hash只能获得'[{'
//因此传递时只传''',在FLEX端做replace处理
//问题2: String.replace(''',"/"")只能替换第一个'''为'"',因此需要用string.split("'").join("/"")实现所有'''替换为"""
var str:String = mx.core.Application.application.parameters.hash.toString().split("'").join("/"");
//将解析后数据转换成Array,供表格显示
gd.dataProvider = JSON.decode(str) as Array;
}
private function getStringParams():void{
//传递字符串
var name:String = mx.core.Application.application.parameters.name;
var message:String = mx.core.Application.application.parameters.message;
strText.text = name+", "+message;
}
private function getArrayParams():void{
//传递数组,接收到的类型为String,分隔符为',';传递时数据为 flashvars.bookInventory=["1","2","3"]
var array:Array = (mx.core.Application.application.parameters.bookInventory).toString().split(',');
for(var i:Number=0;i<array.length;i++)
arrText.text+=array[i]+",";
}
]]-->
</fx:Script>
<s:Panel x="380" y="118" width="461" height="303" title="Welcome to study flex on rails!">
<s:Label x="10" y="10" text="Hash data" width="223" height="16"/>
<s:Button x="339" y="239" label="Get String param" click="getStringParams()"/>
<mx:DataGrid x="-1" y="30" id="gd" width="100%" height="133"/>
<s:Button x="339" y="200" label="Get Array param" click="getArrayParams()"/>
<s:TextInput x="71" y="200" id="arrText" width="244"/>
<s:Label x="3" y="206" text="Array Data" />
<s:TextInput x="71" y="238" id="strText" width="244"/>
<s:Label x="3" y="244" text="String Data" />
</s:Panel>
</s:Application>
演示效果: