Flex3 on Rails ( 2 )

第二篇 基础( Flex Bulider 3 )

在 第一篇 基础   介绍了 使用Flex3 SDK来创建一个简单的Rails和Flex3结合的例子，今天对于同一个例子我们使用 Flex Bulider 3，它的功能十分强大。

 

Flex Bulider 3的安装参考 第一篇 基础

 

 

一、创建一个rails工程blogs ( 略)

二、 创建flex相关文件（ 在app目录下，新建文件夹flex ），步骤：

①、打开 Flex Bulider 3，新建一个FlexProject，“File-->New--> FlexProject ”

工程名字随便，就Blogs(第一个字母大写)吧，工程所在目录，应该填入( 把”Use default location“ 取消 ) flex 文件夹所在的目录如E:\blogs\app\flex

②、点击“Next”，在Output Folder框输入swf文件保存的地址，如E:\blogs\public\bin,

③、点击“Next”，在Output Folder URL框输入swf文件访问的地址，http://localhost:3000/bin,

④、点击“Finish”，开始编辑Blogs.mxml文件，内容为：

<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="index.send()" layout="vertical">
  <mx:HTTPService resultFormat="e4x" url="http://localhost:3000/posts.xml" id="index"></mx:HTTPService>
    <mx:DataGrid dataProvider="{index.lastResult.post}" height="100%" width="100%">
      <mx:columns>
        <mx:DataGridColumn headerText="Title" dataField="title"></mx:DataGridColumn>
        <mx:DataGridColumn headerText="Body" dataField="body"></mx:DataGridColumn>
      </mx:columns>
    </mx:DataGrid>
</mx:Application>

 

注意上面红色部分的代码

⑤、保存后，在左边导航栏中右击工程，选择Build Project

⑥、如果编译成功，就OK了，现在你可以顺便看看E:\blogs\public\bin和 E:\blogs\app\flex目录下都有哪些东西

三、启动rails，打开浏览器输入http://localhost:3000/bin/Blogs.swf

      你还会发现在E:\blogs\public\bin下有一个Blogs.html文件，它帮你把swf文件嵌入到了html文件里，

      你也可以直接访问http://localhost:3000/bin/Blogs.html

OK，如果没问题，今天就到这^_^

参考资料：

http://www.themidnightcoders.com/products/weborb-for-rails/quick-start-guide.html