【Egret Engine】整合PureMVC

Egret 可以在專案中結合各式各樣的第三方javascript lib,目前先介紹對該lib有提供TSD的部份

PureMVC 算是Flash Developer都還蠻熟悉的一個MVC Framework

官方文件也有做了一個教學,如何使用第三方javascript lib,基於按照官方的教學,讓我摸索了一段時間,我這邊做個步驟整理以便以後若遇到問題時,可再次按圖操作

這個記錄我使用EgretVS新建出來的GUI專案來說明

新增專案完成後,在專案目前增加如下檔案

puremvc的TSD及JS檔案請至 github 下載

puremvc.json這個檔案,請自行增加,內容如下,source節點請依個人喜好填入

   1: {

   2:     "name": "puremvc",

   3:     "source":"src/puremvc/",

   4:     "file_list": [

   5:         "puremvc-typescript-standard-1.0.js",

   6:         "puremvc-typescript-standard-1.0.d.ts"

   7:     ]

   8: }

接著要修改egretProperties.json,把puremvc這個新增的module加入

完成後執行一下build engine

build完後,在libs目錄下即會出現 puremvc的參照

在src下新增一個Facade

程式如下:

   1: module leon456 {

   2:     export class ApplicationFacade extends puremvc.Facade implements puremvc.IFacade {

   3:         public constructor() {

   4:             super();

   5:             console.log('ApplicationFacade');

   6:         }

   7:  

   8:  

   9:         public static getInstance(): ApplicationFacade {

  10:             if (this.instance == null) this.instance = new ApplicationFacade();

  11:             return <ApplicationFacade><any> (this.instance);

  12:         }

  13:     }

  14: } 

並在 Main.ts最下方增一行,叫一下Facade初始化(singleton)

再執行一下build engine,及build

執行一下程式  Ctrl+F5

若未發現任何報錯,即己加載PureMVC至Egret專案成功

其它關於PureMVC該如何拼湊結構,可參考 github上 2048Egret 這個專案來學習,接下來只記錄在使用PureMVC時在typescript會發生的一些注意事項及跟使用actionscript3版本時不太一樣的地方

• 需要經檔案執行egret build跟egret build engine,每次新增完class,需要去執行這二個動作,執行完後會去修改bin-debug/game_file_list.js這樣在執行程式時才會找到的參照
  
• 在Mediator中,慣例會增加一個取得對應view的function 如下 ,需要在function前加上 get關鍵字,這樣才可以取得該view的參照
  
  
  

     1: module live {

     2:     export class BettingAreaMediator extends puremvc.Mediator implements puremvc.IMediator{

     3:         public static NAME: string = "BettingAreaMediator";

     4:         public constructor(viewComponent: any) {

     5:             super(BettingAreaMediator.NAME, viewComponent);

     6:             console.log("BettingAreaMediator", "constructor");

     7:  

     8:             console.log("BettingAreaMediator", "bankerBetButton = ", this.view);

     9: 

    10: 

    11:             this.view.bankerBetButton.addEventListener(egret.TouchEvent.TOUCH_TAP, this.addBet, this.view);

    12:             this.view.playerBetButton.addEventListener(egret.TouchEvent.TOUCH_TAP, this.addBet, this.view);

    13:         }

    14:  

    15:  

    16:         public listNotificationInterests(): Array<;any> {

    17:             return [];

    18:         }

    19:  

    20:         public handleNotification(notification: puremvc.INotification): void {

    21:         }

    22:  

    23:         public get view(): live.BettingArea {   //前面要加 get 關鍵字

    24:             return <live.BettingArea><any> (this.viewComponent);

    25:         }

    26:  

    27:         private addBet(e: egret.TouchEvent): void {

    28:             console.log("BettingAreaMediator","addBet");

    29:         }

    30:  

    31:        

    32:         private clearBet(e: egret.TouchEvent): void {

    33:         }

    34:  

    35:         private confirmBet(e: egret.TouchEvent): void {

    36:         }

    37:     }

    38: } 

    

    目前先這樣,後續有發現需要注意處,請做增加