Flex3 on Rails ( 6 )

第四篇 Flex3 on Rails2 进阶(续)

接Flex3 on Rails ( 5 )

开始Flex 用户登录界面的设计：
步骤和上一篇的用户注册界面设计相似，在src\com\components\下新建LoginBox.mxml,其内容如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" label="Login">
  <mx:Metadata>
    [Event(name="login", type="com.blogs.events.LoginEvent")]
  </mx:Metadata>
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      import mx.rpc.events.ResultEvent;
      import com.blogs.events.LoginEvent;
      private function login():void {
        svcAccountLogin.send( {login: loginTI.text, password: passwordTI.text} );
      }
      private function handleAccountLoginResult(event:ResultEvent):void {
          var result:Object = event.result;
          if (result == "badlogin") {
             Alert.show("The username or password is wrong.","Login Error");
          } else {
           dispatchEvent(new LoginEvent(XML(result)));
        }
      }
    ]]>
  </mx:Script>
  <mx:HTTPService id="svcAccountLogin" url="/sessions/create"  resultFormat="e4x"
    method="POST" result="handleAccountLoginResult(event)" >
    <!--
     <mx:request>
      <user>
         <login>{loginTI.text}</login>
         <password>{passwordTI.text}</password>
      </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="Password">
      <mx:TextInput id="passwordTI" displayAsPassword="true"/>
    </mx:FormItem>
    <mx:FormItem>
      <mx:Button id="loginButton" label="Login" click="login()"/>
    </mx:FormItem>
  </mx:Form>
</mx:VBox>

 

说明：
1、svcAccountLogin.send( {login: loginTI.text, password: passwordTI.text} ); 这里之所以能这样用是因为在<mx:HTTPService>中将属性contentType="application/xml"去掉了，从而Flex会采用默认的contentType="application/x-www-form-urlencoded"，两者的区别就在于：
采用了contentType="application/xml"，那么必须用
<mx:HTTPService  ............>
     <mx:request>
      <user>
         <login>{loginTI.text}</login>
         <password>{passwordTI.text}</password>
      </user>
    </mx:request>
  </mx:HTTPService>

从而传参数样式为：{"user"=>{"password"=>"111111", "login"=>"lzq"}
如果去掉contentType="application/xml"，采用默认的contentType="application/x-www-form-urlencoded"，那么就可以使用：
svcAccountLogin.send( {login: loginTI.text, password: passwordTI.text} );
从而传参数样式为：{"password"=>"111111", "login"=>"lzq"}
而Rails的SessionsController的create里面调用

self.current_user = User.authenticate(params[:login], params[:password])，就是要求传参数样式为：{"password"=>"111111", "login"=>"lzq"}，不过这时Rails还要求传参数
authenticity_token，而svcAccountLogin.send( {login: loginTI.text, password: passwordTI.text} ); 无法传authenticity_token，
所以你还要在SessionsController里添加protect_from_forgery :except =>:create，
当然你也可以用contentType="application/xml"，然后将其改为self.current_user = User.authenticate(params[:user][:login], params[:user][:password])，这样就不用传参数authenticity_token，也就不需要protect_from_forgery :except =>:create

 

2、在src\com\blogs\events下创建LoginEvent.as文件，内容如下：

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

 

3、修改SessionsController的create action，改为如下内容：

def create
   self.current_user = User.authenticate(params[:login], params[:password])
   if logged_in?
      render :xml => self.current_user.to_xml
   else
     render :text => "badlogin"
   end
end

 

Ok，用户登录界面完毕，下一篇将接着介绍主界面，将用户注册和登录界面整合在一起^_^