開發環境：
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"<br /> "http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><head><br /> <title>Flex On Rails</title><br /> <mce:script type="text/javascript" src="/javascripts/swfobject.js" mce_src="javascripts/swfobject.js"></mce:script><br /> <mce:script type="text/javascript"><!--<br /> For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --><br /> var swfVersionStr = "10.0.0";<br /> <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. --><br /> var xiSwfUrlStr = "/swf/playerProductInstall.swf";<br /> var flashvars = {};<br /> flashvars.name = "crystal";<br /> flashvars.message="hello";<br /> flashvars.bookInventory= ["apple","pear","grape"];<br /> flashvars.hash = "[{'title':'history','price':19}]";<br /> var params = {};<br /> params.quality = "high";<br /> params.bgcolor = "#ffffff";<br /> params.allowscriptaccess = "sameDomain";<br /> params.allowfullscreen = "true";<br /> var attributes = {};<br /> attributes.id = "RailsProject";<br /> attributes.name = "RailsProject";<br /> attributes.align = "middle";<br /> swfobject.embedSWF(<br /> "/swf/RailsProject.swf", "flashContent",<br /> "100%", "100%",<br /> swfVersionStr, xiSwfUrlStr,<br /> flashvars, params, attributes);<br /><!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. --><br />swfobject.createCSS("#flashContent", "display:block;text-align:left;");</p><p>// --></mce:script><br /></head><br /><body><br /> <div id="flashContent"><br /> <p><br /> To view this page ensure that Adobe Flash Player version<br />10.0.0 or greater is installed.<br /></p><br /><mce:script type="text/javascript"><!--<br />var pageHost = ((document.location.protocol == "https:") ? "https://" :"http://");<br />document.write("<a href="http://www.adobe.com/go/getflashplayer" mce_href="http://www.adobe.com/go/getflashplayer"><img src=""<br />+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif" mce_src=""<br />+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt='Get Adobe Flash player' /></a>" );</p><p>// --></mce:script><br /> </div><br /></body><br /></html>
二、修改Flex應用RailsProject.mxml
修改後代碼如下：
<?xml version="1.0" encoding="utf-8"?><br /><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"<br /> xmlns:s="library://ns.adobe.com/flex/spark"<br /> xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"<br /> creationComplete="init()"><br /><fx:Declarations><br /><!-- Place non-visual elements (e.g., services, value objects) here --><br /></fx:Declarations><br /><fx:Script><br /><!--[CDATA[<br />import com.adobe.serialization.json.JSON;<br />import mx.controls.Alert;</p><p>[Bindable]<br />var gdProvider:Array;<br />private function init():void{<br />//傳遞HASH數組,接收到的類型為String,傳遞時資料為[{'title':'history','price':19}],JSON.decode處理時需要先將'''轉換成'"'<br />//問題1: 從RUBY端直接傳遞[{"title":"history","price":19}]則mx.core.Application.application.parameters.hash只能獲得'[{'<br />//因此傳遞時只傳''',在FLEX端做replace處理<br />//問題2: String.replace(''',"/"")只能替換第一個'''為'"',因此需要用string.split("'").join("/"")實現所有'''替換為"""<br />var str:String = mx.core.Application.application.parameters.hash.toString().split("'").join("/"");</p><p>//將解析後資料轉換成Array,供表格顯示<br />gd.dataProvider = JSON.decode(str) as Array;<br />}</p><p>private function getStringParams():void{<br />//傳遞字串<br />var name:String = mx.core.Application.application.parameters.name;<br />var message:String = mx.core.Application.application.parameters.message;<br />strText.text = name+", "+message;<br />}<br />private function getArrayParams():void{<br />//傳遞數組,接收到的類型為String,分隔字元為',';傳遞時資料為 flashvars.bookInventory=["1","2","3"]<br />var array:Array = (mx.core.Application.application.parameters.bookInventory).toString().split(',');<br />for(var i:Number=0;i<array.length;i++)<br />arrText.text+=array[i]+",";<br />}<br />]]--><br /></fx:Script><br /><s:Panel x="380" y="118" width="461" height="303" title="Welcome to study flex on rails!"><br /><s:Label x="10" y="10" text="Hash data" width="223" height="16"/><br /><s:Button x="339" y="239" label="Get String param" click="getStringParams()"/><br /><mx:DataGrid x="-1" y="30" id="gd" width="100%" height="133"/><br /><s:Button x="339" y="200" label="Get Array param" click="getArrayParams()"/><br /><s:TextInput x="71" y="200" id="arrText" width="244"/><br /><s:Label x="3" y="206" text="Array Data" /><br /><s:TextInput x="71" y="238" id="strText" width="244"/><br /><s:Label x="3" y="244" text="String Data" /><br /></s:Panel><br /></s:Application><br />
示範效果：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
