【pureMVC】教學範例(三)

最後一篇要來介紹 Proxy 的內容了，通常在一般的 Proxy 會與遠端做連接

並處理一些邏輯，在針對做後的結果發出 Notification，以下的範例我並沒有用遠端的方法

來和後台要資源，以簡化這個 pureMVC 的範例

LoginProxy.as

package org.model

{

    import org.puremvc.as3.interfaces.IProxy;

    import org.puremvc.as3.patterns.proxy.Proxy;

    //繼承 Proxy, 並實作 IProxy 介面

    public class LoginFormProxy extends Proxy implements IProxy

    {

        public static const NAME:String = "LoginFormProxy";

        public static const LOGIN_SUCCESS:String = "login_success";

        public static const LOGIN_FAIL:String = "login_fail";

        public function LoginFormProxy()

        {

            super(NAME, null);

        }

       

        public function login(account:String):void

        {

            if(account == "tester1"){

                //發出登入成功事件

                sendNotification( LOGIN_SUCCESS, "welcome " + account);

            }else{

                //發出登入失敗事件

                sendNotification( LOGIN_FAIL, "login fail");

            }

        }

       

    }

}

【pureMVC】教學範例(二)

在第一篇我們已經將 UI 的元件分割出來後，就可以分別依照各個 Component 來建立 Mediator

以下先來看登入元件 "LoginForm.mxml" 的 Mediator -- LoginFormMediator.as

package org.view

{

    import org.view.component.LoginForm;

    import org.ApplicationFacade;

    import org.puremvc.as3.interfaces.IMediator;

    import org.puremvc.as3.interfaces.INotification;

    import org.puremvc.as3.patterns.mediator.Mediator;

    import flash.events.Event;

    import mx.controls.Alert;

    //須繼承 Mediator 並實作  IMediator 介面

    public class LoginFormMediator extends Mediator implements IMediator 

    {

        public static const NAME:String = "LoginFormMediator";

       

        public function LoginFormMediator(viewComponent:Object=null)

        {

            super(NAME, viewComponent);

            //註冊 LoginForm 的登入事件  "login", 當處發時呼叫  onLogin() 方法

【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";

        //登入失敗 事件

【pureMVC】基礎簡介

pureMVC 是以 MVC 架構為基礎的 Framwork，它並不侷限於應用在 Flex 的開發上

在手機、PHP、微軟基礎的架構下都可以使用它

pureMVC 除了 MVC 的基礎之外還額外新增了 Façade，以下說明這四項分類的要點


一、Façade

● Façade 是 pureMVC 的核心，他以單例模式的方法建構了一個唯一的Façade實例

● 一個 Façade 需要繼承 org.puremvc.as3.patterns.facade.Facade 

● Façade 都會定義整個應用程式會用到的所有事件(Notification)  例如以下：

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

● 通常都會覆寫(override) initializeController() function，這裡是用來關聯每個 Notification 所對應到的              
   Command  例如以下

   //註冊  USER_LOGIN Notification
   this.registerCommand(USER_LOGIN, LoginCommand);