Flex3 on Rails ( 5 )

第四篇 Flex3 on Rails2 进阶

摘要：创建Flex的用户注册、登录界面，并与Rails的认证系统（restful_authentication）进行通信，实现相应功能。 

工具：Flex Bulider 3  restful_authentication插件

 

 

 

二、安装restful_authentication插件

 

三、Flex Bulider 3创建工程

四、在Flex工程的src目录下依次创建com\blogs\components、com\blogs\events文件夹，然后开始编辑相关mxml文件：

①、首先是注册界面，在src\com\components\AccountCreateBox.mxml,内容如下

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" label="Create Account">
  <mx:Metadata>
    [Event(name="accountCreate", type="com.blogs.events.AccountCreateEvent")]
  </mx:Metadata>
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      import mx.rpc.events.ResultEvent;
      import com.blogs.events.AccountCreateEvent;
      private function createAccount():void {
        svcAccountCreate.send();
      }
      private function handleAccountCreateResult(event:ResultEvent):void {
          var result:Object = event.result;
          if (result == "error") {
             Alert.show("Your account was not created.", "Error");
          } else {
           dispatchEvent(new AccountCreateEvent(XML(result)));
        }
      }
    ]]>
  </mx:Script>
  <mx:HTTPService id="svcAccountCreate" url="/users/create" contentType="application/xml" resultFormat="e4x"
    method="POST" result="handleAccountCreateResult(event)">
    <mx:request>
      <user>
         <login>{loginTI.text}</login>
         <email>{emailTI.text}</email>
         <password>{passwordTI.text}</password>
         <password_confirmation>{confirmPasswordTI.text}</password_confirmation>
      </user>
    </mx:request>
  </mx:HTTPService>

 

  <mx:Form labelWidth="150">
    <mx:FormItem required="true" label="Username">
      <mx:TextInput id="loginTI"/>
    </mx:FormItem>
    <mx:FormItem required="true" label="Email Address">
      <mx:TextInput id="emailTI"/>
    </mx:FormItem>
    <mx:FormItem required="true" label="Password">
      <mx:TextInput id="passwordTI" displayAsPassword="true"/>
    </mx:FormItem>
    <mx:FormItem required="true" label="Confirm Password">
      <mx:TextInput id="confirmPasswordTI" displayAsPassword="true"/>
    </mx:FormItem>
    <mx:FormItem>
      <mx:Button id="createAccountButton" label="Create Account" click="createAccount()"/>
    </mx:FormItem>
  </mx:Form>
</mx:VBox>

 

说明：

1、  <mx:Metadata>：声明一个事件(event)，其name为accountCreate，其type为com.blogs.events.AccountCreateEvent，当然要创建AccountCreateEvent，它是一个ActionScript Class(as)文件,在Flex 工程左栏导航里选择src\com\blogs下的events右击弹出菜单后台选择“New—>ActionScript Class”，起名为AccountCreateEvent，接着编辑AccountCreateEvent.as文件，内容如下：

package com.blogs.events {
  import flash.events.Event;
  public class AccountCreateEvent extends Event {
    public static const ACCOUNT_CREATE:String = "accountCreate";
    public var user:XML;
    public function AccountCreateEvent(user:XML) {
      super(ACCOUNT_CREATE);
      this.user = user;
    }
  }
}

 

2、根据url="/users/create"，contentType="application/xml"修改Rails app\Controllers\users_controller.rb的create action，改为如下内容：

 def create
    @user = User.new(params[:user])
    @user.save!
    self.current_user = @user
    render :xml => @user.to_xml
    rescue ActiveRecord::RecordInvalid
    render :text => "error"
  end

 

3、对于Flex界面样式采用<mx:Form>、<mx:VBox>

 

Ok、用户注册界面完毕，下一篇将接着介绍用户登录界面^_^