Flex集成Rails

Adobe发布了Rails与Flex集成方案:
rubyonrails-ria-sdk-by-adobe

其中对Flex和Rails集成给出了几个例子，这里来与大家分享下最简单的xml交互方式
这种方式对后台服务端语言实际上没有限制，是最independent的

首先建立一个TopicsController:

class TopicsController < ApplicationController

  def list
    @topics = Topic.find(:all)
    render : xml => @topics.to_xml
  end

  def create
    @topic = Topic.new(params[:topic])
    @topic.save
    render : xml => @topic.to_xml
  end

  def update
    @topic = Topic.find(params[:id])
    @topic.update_attributes(params[:topic])
    render : xml => @topic.to_xml
  end

  def delete
    @topic = Topic.find(params[:id])
    @topic.destroy
    render : xml => @topic.to_xml
  end

end

这里我们的每个action都返回对象或对象数组的xml格式
比较郁闷的是每个方法最后都必须render一个:xml，否则ActionScript会报Error #2032 Stream Error，但是不影响操作结果

然后创建一个test.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="listTopics.send()">
 <mx:Script>
  <![CDATA[
   private function clearForm():void
   {
    title.text = ""
    content.text = "";
   }
   private function sendTopicUpdate():void
         {       
          var topic:Object = new Object();
             topic['id'] = topic_list.selectedItem.id;
             topic['topic[' + 'title' +']'] = title.text;
             topic['topic[' + 'content' +']'] = content.text;
             
             updateTopic.send(topic);
          }
  ]]>
 </mx:Script>
 <mx:HTTPService id="listTopics" url="http://localhost:3000/topics/list" method="POST"/>
 <mx:HTTPService id="updateTopic" url="http://localhost:3000/topics/update" method="POST" result="listTopics.send()"/>
 <mx:HTTPService id="deleteTopic" url="http://localhost:3000/topics/delete" method="POST" result="listTopics.send()"/>
 <mx:HTTPService id="createTopic" url="http://localhost:3000/topics/create" method="POST" result="listTopics.send()" contentType="application/xml">
        <mx:request xmlns="">
            <topic>
                <title>{title.text}</title>
                <content>{content.text}</content>
            </topic>
        </mx:request>
 </mx:HTTPService>
 
 <mx:VDividedBox x="0" y="0" height="100%" width="100%">
  <mx:Panel width="100%" height="222" layout="absolute" title="Create/Update Topics">
   <mx:Form x="10" y="10" width="930" height="100">
    <mx:FormItem label="Title">
     <mx:TextInput width="220" id="title" text="{topic_list.selectedItem.title}"/>
    </mx:FormItem>
    <mx:FormItem label="Content">
     <mx:TextInput width="220" id="content" text="{topic_list.selectedItem.content}"/>
    </mx:FormItem>
   </mx:Form>
   <mx:ControlBar horizontalAlign="right">
    <mx:Button label="Clear" click="clearForm()"/>
    <mx:Button label="Update" click="sendTopicUpdate(); clearForm()"/>
    <mx:Button label="Create" click="createTopic.send(); clearForm()"/>
   </mx:ControlBar>
  </mx:Panel>
  <mx:Panel width="100%" height="100" layout="absolute" title="Topics">
   <mx:DataGrid x="0" y="0" width="100%" height="100%" id="topic_list" dataProvider="{listTopics.lastResult.topics.topic}">
    <mx:columns>
     <mx:DataGridColumn headerText="ID" dataField="id"/>
     <mx:DataGridColumn headerText="Title" dataField="title"/>
     <mx:DataGridColumn headerText="Content" dataField="content"/>
    </mx:columns>
   </mx:DataGrid>
   <mx:ControlBar horizontalAlign="right">
    <mx:Button label="Delete" click="deleteTopic.send({id:topic_list.selectedItem.id})"/>
   </mx:ControlBar>
  </mx:Panel>
 </mx:VDividedBox>
 
</mx:Application>

<mx:HTTPService/>标签指定我们要访问的url即可，其中可以设置result钩子方法
result钩子方法让CUD操作后更新Topics列表
Clear、Update、Create和Delete这四个Button的click事件分别指定做清除表单、UCD操作
而creationComplete="listTopics.send()"以及上面的result钩子方法则做R操作

评论

1 楼 cjyzpcl 2007-08-07  

这个我也做过一个DEMO，实际上后台通过Rails的Web Service实现比较好。Flex本身设置好权限后就可以生成Flash了，实在是很方便的工具，如果免费就完美了。同理，laszlo也可以和Rails整合。