Flex3 on Rails ( 7 )

第四篇 Flex3 on Rails2 进阶(续)

接Flex3 on Rails ( 5 )  Flex3 on Rails ( 6)

开始Flex 主界面Blogs.mxml的设计：采用Flex的ViewStack组件将注册界面AccountCreateBox.mxml和登录界面LoginBox.mxml加入其中，同时创建注册和登录成功后跳转的界面MainBox.xml.

 

首先，在src目录下新建Blogs.mxml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:pom="com.blogs.components.*" layout="vertical"
  backgroundGradientColors="[#ffffff, #c0c0c0]" horizontalAlign="center" verticalAlign="top"
  paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" width="100%" height="100%">
  <mx:Script>
  <![CDATA[
    import com.blogs.events.AccountCreateEvent;
    import com.blogs.events.LoginEvent;
    private function handleAccountCreate(e:AccountCreateEvent):void {
      showMain();
    }
    private function handleLogin(e:LoginEvent):void {
      showMain();
    }
    private function showMain():void {
      mainStack.selectedChild = mainBox;
    }
  ]]>
  </mx:Script>

 <mx:ViewStack id="mainStack" width="100%" height="100%">
  <mx:VBox id="splashBox" horizontalAlign="center"
    verticalAlign="middle" width="100%" height="100%">
  <mx:Spacer height="10"/>
  <mx:Accordion width="400" height="300">
    <pom:AccountCreateBox
accountCreate="handleAccountCreate(event)"/>
   <pom:LoginBox login="handleLogin(event)"/>
  </mx:Accordion>
</mx:VBox>
<pom:MainBox id="mainBox"/>
</mx:ViewStack>

</mx:Application>

 

说明：

1、xmlns:pom="com.blogs.components.*" 导入custom components，然后通过<mx:Accordion>使用。

 import com.blogs.events.AccountCreateEvent; 导入事件
 import com.blogs.events.LoginEvent;

2、src\com\blogs\components\MainBox.mxml内容：

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" backgroundColor="#FFFFFF">
<mx:Label text="Welcome！"/>
</mx:VBox>

登录或注册成功后跳转到这个界面，只显示 Welcome！

3、登录或注册错误都会通过相应的事件处理函数弹出Alert对话框，详情参考

if (result == "badlogin") { Alert.show("The username or password is wrong.","Login Error"); }

if (result == "error") { Alert.show("Your account was not created.", "Error"); }

 

Ok,通过本文和Flex3 on Rails ( 5 )  Flex3 on Rails ( 6) 结合，就完成了Flex用户注册、登录界面与Rails restful_authentication通信实现认证功能。下面是效果图

主界面（默认为注册页面）

 

登录界面：

 

出错界面：

 

成功后跳转界面：