首页 > 编程语言 >RUBY-FLEX实践—利用swfobject在RUBY工程中加载SWF

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

时间:2023-05-26 11:34:22浏览次数:39  
标签:FLEX 工程 Flex swfobject 创建 Rails swf params RUBY


开发环境:

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工程,创建成功后将生成对应的目录及文件

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

 

三、复制文件

将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

 

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

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

 

 

标签:FLEX,工程,Flex,swfobject,创建,Rails,swf,params,RUBY
From: https://blog.51cto.com/u_16129500/6354535

相关文章

  • FLEX4 序列号失效
    愚人节这天,FLASHBUILDER也和大家开了个玩笑,一大早起来,序列号被封了。上网搜了一下,果然天无绝人之路 但是我换了序列号仍然无法使用 再看以下这位高手的:方法1:暂时把系统时间改到2008,启动后再调回现在的时间。方法2:解压后存入Flex的安装文件夹plugins/com.adobe.flexide.amt_4.0.......
  • FLEX4实践—DropDownList与ComboBox
    FLEX4相对FLEX3的组件变化列表中列出以这么一项:mx.controls.ComboBox->spark.components.DropDownList 官方解释如下:   ComboBox控件是DropDownListBase控件的子类。与DropDownListBase控件类似,当用户从ComboBox控件的下拉列表中选择某项时,数据项将显示在......
  • FLEX4实践—动态生成DataGrid及应用客户化itemRenderer
    应用场景:1)从后台取到的数据为数组类型,但数据的列名及列个数均是动态的2)抽取到的数据中有些是DATE类型的,如果直接显示在DataGrid中默认格式很难让用户接受,希望对特殊类型的数据(如日期)进行格式转换处理 下面的例子将模拟这一场景:数据准备:gridColumns1搭配gridProvider1,gridColumns2......
  • FLEX实践—模拟Application与Module间的事件监听
         一直找到如何在Application中发出一个事件,让Module捕获该事件并做出相应的动作。但是一直没找到,于是模拟了一个这样的情景。 WatchTest.mxml<?xmlversion="1.0"encoding="utf-8"?><mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"......
  • FLEX实践—动态切换应用皮肤
        在同一个Application中动态切换主题,这里采用的是动态引用不同的CSS文件。     具体步骤如下:    1)创建CSS文件   skyTheme.css/*CSSfile*/.backgroudSkin{backgroundColor:#89caec;fontWeight:bold;fontSize:12;}.applicationBar{......
  • Flex实践——Parallel Practice
        前几次在学习Flex中的一些基本控件的使用,还顺便学了一小点ActionScript的应用,今天要学些What?来看看一些组合效果的应用吧,下面的实践将简单介绍把渐变和移动两种效果同时运用在一个组件上。    ( 引:Flex提供将超过一种的多种效果组合起来的能力。你可以使用<mx:P......
  • Flex实践—So beautiful webpage.....
        前不久听说应该开始学习Flex,因为我的骨子里还是懒的,所以一直不想装这种专业软件,其实装软件配环境对我来说一直是比写代码还痛苦的事,今天下午终于赖不住无聊,下了个FlexBuilder3,装了一下,找了个注册码,开始感受它的神奇。。。。    让我惊讶的是Flex设计出来的页面效......
  • Flex实践——States Practice
      上一次用组合效果完成了一些变化,这一次,来学习一下如何实现当单击一个按钮时改变页面状态(包括布局,内容,颜色等)引:你可以在AdobeFlex中使用视图状态和变换来创建更为丰富、更为互动性的用户经历。举个例子,你可以使用视图状态去创建用户界面,它可以根据用户所执行的任务来改变它的......
  • Flex实践—Simple Copy Panel
       上一次介绍了ActionScript函数的简单应用,这一次,来讲点简单的copy功能的实现吧。。。   下面的例子将完成对输入内容的拷贝和剪切。。。。    首先,和第一次介绍的步骤一样,新建一个FlexApplication   然后,拖控件,给必要的控件填写ID名以下的例子中用到的需要命名......
  • Ruby教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介Ruby,一种简单快捷的面向对象(面向对象程序设计)脚本语言,在20世纪90年代由日本人松本行弘(YukihiroMatsumoto)开发,遵守GPL协议和RubyLicense。它的灵感与特性来自于Perl、Smalltalk、Eiffel、Ada以及Lisp语言。由Ruby语言本身还发展出了JRuby(Java平台)、IronRuby(.NET......