Ruby-Flex practices-using swfobject to load SWF in Ruby Projects

Source: Internet
Author: User

Development Environment:

RUBY: ruby1.9.1

Rails: rails2.3.5

IDE: rubymine2.0.1

Flex builder: Flex builder4

 

Development ideas:

1) create a flex project in flex Builder

2) create a rails project in rubymine

3) Copy swfobject. js compiled under the flex project bin-Debug to the specified location of the Ruby project.

4) reference the HTML content compiled by the flex project to embed SWF into the rails page

 

I. Create a flex Project

Create the flex application railsproject. mxml. The Code is as follows:

<? 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/> <FX: declarations> <br/> <! -- Place non-visual elements (e.g ., services, value objects) Here --> <br/> </FX: declarations> <br/> <s: panel x = "368" Y = "79" width = "446" Height = "318"> <br/> <s: textarea x = "128" Y = "31" text = "Welcome to study flex on rails! "Height =" 75 "/> <br/> </S: Panel> <br/> </S: Application>

 

2. Create a rails Project

Create a rails project. After successful creation, the corresponding directory and file will be generated.

 

3. Copy files

Copy bin-Debug/swfobject. js to the ruby Project Public/javascripts.

Create the SWF directory under public and copy all SWF files under the flex project bin-Debug to the public/SWF directory of the rails project.

(Note: if the copy is incomplete, SwF cannot be loaded at runtime, and the server reports an error message: files such as/SWF/rpc_4.0.14159.swf cannot be found)

 

4. Add rhtml

Create an HTML file under public to implement SWF embedding.

Create flex.html

The Code is as follows: (the embedded code refers to railsproject.html under bin-debugof the flexproject, where useful code is copied)

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" <br/> "http://www.w3.org/TR/html4/loose.dtd"> <br/> <HTML> <br/> <pead> <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 = "playerproductinstall.swf"; <br/> var flashvars ={}; <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 = "railspr Oject "; <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/> </pead> <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 ty Pe = "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 "> + pagehost +" alias "mce_src =" & quot; <br/> + pagehost + & quot; 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/> </ptml>

 

5. Modify index.html

Add links on the rails interface to facilitate running

The modification code is as follows:

<Li> <br/> <p> join the Community </p> <br/> <ul class = "Links"> <br/> <li> <a href = "http://www.rubyonrails.org/" mce_href = "http://www.rubyonrails.org/"> Ruby on Rails </a> </LI> <br/> <li> <a href = "http://weblog.rubyonrails.org/" mce_href =" http://weblog.rubyonrails.org/"> official weblog </a> </LI> <br/> <li> <a href =" http://wiki.rubyonrails.org/"mce_href =" http://wiki.rubyonrails.org/"> wiki </> </LI> <br/> <li> <a href = "flex.html" mce_href = "flex.html"> flex on Rails </a> </LI> <br/> </ul> <br/> </LI>

 

Vi. Running services

Run the server and click http: // localhost: 3000.

 

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.