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.