RUBY-FLEX实践—利用swfobject在RUBY工程中加载SWF

来源：互联网发布：休闲西装知乎编辑：程序博客网时间：2024/04/30 02:43

开发环境：

Ruby:Ruby1.9.1

Rails:Rails2.3.5

IDE:RubyMine2.0.1

Flex Builder:Flex Builder4

开发思路：

1）在Flex Builder中创建Flex工程

2）在RubyMine中创建Rails工程

3）将Flex工程bin-debug下编译的swfobject.js拷贝至Ruby工程指定位置

4）引用Flex工程编译后的html中的内容实现在Rails页面中嵌入SWF

一、创建FLEX工程

创建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"><fx:Declarations></fx:Declarations><s:Panel x="368" y="79" width="446" height="318"><s:TextArea x="128" y="31" text="Welcome to study flex on rails!" height="75"/></s:Panel></s:Application>

二、创建RAILS工程

创建Rails工程，创建成功后将生成对应的目录及文件

三、复制文件

将bin-debug/swfobject.js复制到Ruby工程public/javascripts下

在public下创建swf目录，将FLEX工程bin-debug下的所有swf文件复制到Rails工程public/swf下

（注：复制不完全，在运行时将无法加载SWF，服务器报错信息：无法找到/swf/rpc_4.0.0.14159.swf 等文件）

四、添加RHTML

在public下新建HTML文件，实现SWF的嵌入应用

创建flex.html

代码如下：（嵌入代码参考FLEX工程bin-debug下的RailsProject.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 = "playerProductInstall.swf"; var flashvars = {}; 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 version10.0.0 or greater is installed.</p><mce:script type="text/javascript"></mce:script> </div></body></html>

五、修改index.html

在RAILS界面上添加链接，方便运行

修改代码如下：

<li> <h3>Join the community</h3> <ul class="links"> <li><a href="http://www.rubyonrails.org/" mce_href="http://www.rubyonrails.org/">Ruby on Rails</a></li> <li><a href="http://weblog.rubyonrails.org/" mce_href="http://weblog.rubyonrails.org/">Official weblog</a></li> <li><a href="http://wiki.rubyonrails.org/" mce_href="http://wiki.rubyonrails.org/">Wiki</a></li> <li><a href="flex.html" mce_href="flex.html">Flex On Rails</a></li> </ul> </li>

六、运行服务

运行服务器，点击 http://localhost:3000