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通信实现认证功能。下面是效果图
主界面（默认为注册页面）
登录界面：
出错界面：
成功后跳转界面：
