RUBY-FLEX实践—利用swfobject实现Rails与Flex传递参数

开发环境：

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"> var swfVersionStr = "10.0.0";  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);  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"></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>  </fx:Declarations> <fx:Script>  </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>

演示效果：