Flex3 on Rails ( 3 )

第三篇 Flex3 on Rails2 进阶

摘要：通过Flex3与Rails的通信来实现Rails的CRUD （ Create, Read, Update, Delete ）

实现方案：由Flex3的DataGrid实现Rails的index列表及删除操作；通过Flex3的PopUpManager（弹出窗口） 实现Rails的编辑和添加操作。

工具：Flex Bulider 3

步骤：

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

二、Flex Bulider 3创建工程（略）

三、列表mxml文件（Blogs.mxml）：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="vertical"backgroundGradientColors="[#000000, #CCCCCC]"

creationComplete="svcPostsList.send()">
  <mx:Script>
   <![CDATA[
    import mx.events.ListEvent;
    import mx.rpc.events.ResultEvent; 
    private function deletePost(post:XML):void {   //删除函数
    svcPostsDestroy.url = "/posts/" + post.id + ".xml";
    svcPostsDestroy.send({_method: "DELETE"});
    }   
    private function listPosts():void {  //列表函数
    svcPostsList.send();
    }
    import mx.managers.PopUpManager;   
    private function editPost(post:XML):void {   //弹出编辑、新建记录的窗口    
      var c:EditPopUp = new EditPopUp(); // 新建子窗体对象，对应EditPopUp.mxml文件
      PopUpManager.addPopUp(c, this, true); // 将子窗体加入PopUpManager中
      if (post != null) c.id = "edit"; // 向子窗体传递参数，区分new和edit操作
      else c.id = "new";
      c.data =  post;          //向子窗体（edit）传递被编辑的记录
      c.callbackFunction = this.refresh;  // 子窗体中可以调用的父窗体函数（这里是子窗体关闭时，刷新父窗体）
      PopUpManager.centerPopUp(c); // 子窗体弹出，居中
    } 
    public function refresh():void { 
       this.listPosts(); 
    }
   ]]>
 </mx:Script>

 <mx:HTTPService id="svcPostsList" url="/posts.xml" resultFormat="e4x" method="POST"/>
 <mx:HTTPService id="svcPostsDestroy" resultFormat="e4x" method="POST" result="listPosts()"/>

 <mx:XMLListCollection id="postsXLC " source="{XMLList(svcPostsList.lastResult.post)}"/>

 <mx:Panel title="Flex on Rails" width="100%" height="100%" fontFamily="Courier New" fontSize="18">
 
  <mx:DataGrid  id="postList" dataProvider="{postsXLC}"   width="675"  fontFamily="Verdana" fontSize="14"  height="100%">
    <mx:columns>
      <mx:DataGridColumn headerText="序号" dataField="id"  width="75"/>
      <mx:DataGridColumn headerText="标题" dataField="title"  width="150"  ></mx:DataGridColumn>
      <mx:DataGridColumn headerText="主体" dataField="body"  width="450" ></mx:DataGridColumn>
    </mx:columns>
  </mx:DataGrid>
   
  <mx:ControlBar width="100%" horizontalAlign="center">
    <mx:Button label="添加" width="100" height="30"   click="editPost(null)" fontFamily="Arial" fontSize="13" cornerRadius="5"/>
    <mx:Button label="编辑" width="100" height="30"  enabled="{postList. selectedItem != null}" click="editPost(XML(postList.selectedItem))" fontFamily="Arial" fontSize="13" cornerRadius="5"/>

    <mx:Button label="删除" width="100" height="30" enabled="{postList. selectedItem != null}" click="deletePost(XML(postList. selectedItem))" fontFamily="Arial" fontSize="13" cornerRadius="5"/>
  </mx:ControlBar>

</mx:Panel> </mx:Application>

说明：

1、函数部分应该不难理解^_^

2、关键是3个按钮，其中“添加”始终可见，而"编辑"、"删除"按钮需要选择DataGrid的某一行才可见即enabled="{postList.selectedItem != null}"

3、还有就是"编辑"、"添加"两个按钮用了同一个弹出框EditPopUp ，为了区分，在传参数时有所不同，对于“添加”，传参数为null，即editPost(null)； 对于"编辑"当然要将当前数据传过去，即"editPost( XML(postList.selectedItem) )"；

4、为了实现弹出窗口，你还需要相应地写 EditPopUp.mxml 文件，

内容见续篇： Flex3 on Rails ( 4 )