【pureMVC】教學範例(一)

這裡以一個簡單的登入範例來呈現 pureMVC 的教學介紹

     首先在左圖的 Flex UI 中，紅色部分輸入名稱後
按下 Login 的 Button，在底下的 TextArea 會 show 出結果

     以這樣的案例來思考，整個流程會觸發哪些事件

這在 pureMVC 的應用開發中是很重要的一點


再來就是，在 UI 中有哪些元件會觸發哪些事情，哪些元件需要"關心"哪些事情

因此，對於 UI 的設計也很重要，能否將 UI 切割出合適元件，使得各個元件能簡單明瞭的知道

他們所關心或所發出的事件，而不至於造成混亂。故必須盡量讓每個元件各司其職

先預覽一下整個範例的目錄架構

首先來看看範例的組成，第一點最重要的是 Facade，以下為 ApplicationFacade.as

package org

{

    import org.controller.AppCommand;

    import org.controller.LoginCommand;

    import org.puremvc.as3.patterns.facade.Facade;

   

    public class ApplicationFacade extends Facade //須繼承 Facade

    {

        //以下為本範例的所有事件 (Notification) !!

        public static const START_UP:String="start_up";  //AP初始化 事件

        public static const USER_LOGIN:String="login"; //使用者登入 事件

        //登入成功 事件

        public static const LOGIN_SUCCESS:String = "login_success";

        //登入失敗 事件

        public static const LOGIN_FAIL:String = "login_fail"; 

       

        public function ApplicationFacade(){

            super();

        }

       

        //Facade 採用了單例模式,所以整個AP只會有一個 ApplicationFacade 實體

        public static function getInstance():ApplicationFacade

        {

            if(null == instance){

                instance = new ApplicationFacade();

            }

            return instance as ApplicationFacade;

        }

       

        //關聯了每個事件  (Notification) 所對應到的 Command

        override protected function initializeController():void{

            super.initializeController();

            //註冊  START_UP Notification

            this.registerCommand(START_UP, AppCommand);

            //註冊  USER_LOGIN Notification

            this.registerCommand(USER_LOGIN, LoginCommand);

        }

       

        public function startup(app:Login):void{

            //發出  START_UP 事件,以初始化整個 pureMVC 的機制

            this.sendNotification(START_UP, app);  

        }

    }

}

接下來看看 UI 的設計劃分 -- Login.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                xmlns:view="org.view.component.*"

                creationComplete="application1_creationCompleteHandler(event)"

                >

    <mx:Script>

        <![CDATA[

            import org.ApplicationFacade;

            import mx.events.FlexEvent;  

            import mx.controls.Alert;

            protected var facade:ApplicationFacade =

                ApplicationFacade.getInstance(); //取得 Facade 實例

            protected function

                application1_creationCompleteHandler(event:FlexEvent):void

            {

               //啟動 pureMVC 機制

                ApplicationFacade.getInstance().startup(this); 

            }

        ]]>

    </mx:Script>

   

    <!-- 輸入帳號登入的 UI component

          故此元件會發出  login 的事件  -->

    <view:LoginForm id="Loginform" />

       

    <!-- 呈現出結果的 UI component

           此元件需接收到login_success 和 login_fail事件

          以便呈現結果, 故此元件"關心"這兩個事件-->

    <view:TextArea id="ShowArea" />

</mx:Application>

以上的 MXML 檔中分別分出了兩個 component "LoginForm" 和 "TextArea"，以下分別來看其內容

LoginForm.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>

        <![CDATA[

            import flash.events.Event;

            //使用者登入 事件(Notification)

            public static const LOGIN:String = "login";

        ]]>

    </mx:Script>

    <mx:Panel>

        <mx:TextInput id="account_text" />

        <!-- 當使用者按下Login 按鈕之後會觸發一個 "login" 的事件-->

        <mx:Button id="login_btn" label="Login" click="dispatchEvent( new Event(LOGIN, true));"/>

    </mx:Panel>

</mx:Canvas>

TextArea.mxml 的部份

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TextArea id="showAns"/>

</mx:Canvas>

下一篇 【pureMVC】教學範例(二) 介紹 Mediator 及 Command