开发环境:
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>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</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"><!--
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 = "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);
<!-- 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>
五、修改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