標籤雲

Android (59) ActionScript (52) PHP (14) JavaScript (11) 設計模式 (10) CSS與Html (8) Flex (7) Material Design (6) frameworks (5) 工具 (5) 串流影音 (4) 通用 (4) DB (3) FlashRemoting (3) Java (3) SQL (3) Mac 操作 (2) OpenGL ES (2) PureMVC (2) React Native (2) jQuery (2) AOSP (1) Gradle (1) XML (1) 軟體設定 (1)

搜尋此網誌

顯示具有 frameworks 標籤的文章。 顯示所有文章
顯示具有 frameworks 標籤的文章。 顯示所有文章

2011/02/10

PureMVC 入門筆記-2

接著來看看 Notification

Notification

Package:org.puremvc.as3.patterns.observer
實作 INotification,與 Flash 的 Event 機制不同的是
Event 機制遵循的是 責任鍊(Chain of Responsibility) 模式,事件會跟著 displayObject 的 parent 一直上浮
而 Notification 則是遵照發布/訂閱模式,訂閱者只接收感興趣的消息,與接收者之間並無 parent/child 關係
而 Notification 並不是用來取代 Event 機制的,它們需要相互合作使用

主要 public 方法有:
//建構子
Notification(name:String, body:Object = null, type:String = null)

getBody():Object
getName():String
getType():String

setBody(body:Object):void
setType(type:String):void

toString():String

由於 Proxy, Mediator, Command 都繼承自 Notifier 並實作 INotifier
所以有一些共通的屬性方法
//連到 Facade 實體的參照
facade : IFacade
initializeNotifier(key:String):void
sendNotification(notificationName:String, body:Object = null, type:String = null):void
這些就不一一列在下面了
而要注意的是 Mediator/View 之間的關係不可避免的是緊耦合,Proxy/Data 也是一樣。但這樣可以讓他們與其他程式碼變成松耦合

Proxy

Package:org.puremvc.as3.patterns.proxy
繼承 Notifier,實作 INotifier, IProxy
Proxy 的角色是被 Model 註冊的數據持有者,並用來實現 Domain Logic,其中 data 可以透過 getter 轉型為它真正的型別

Protected 屬性:
data : Object
proxyName : String

主要 public 方法有:
//建構子
Proxy(proxyName:String = null, data:Object = null)

setData(data:Object):void
getData():Object
getProxyName():String

Mediator

Package:org.puremvc.as3.patterns.mediator
繼承 Notifier,實作 INotifier, IMediator
Mediator 的工作是負責讓 view component 與系統其他部分進行溝通,其中 viewComponent 可以透過 getter 轉型為它真正的型別

Protected 屬性:
mediatorName : String
//用來存放視覺組件的變數
viewComponent : Object

主要 public 方法有:
//建構子
Mediator(mediatorName:String = null, viewComponent:Object = null)

//在這邊列出要 Mediator 感興趣的 INotification 的名稱,這裡有列的,handleNotification()才會收到
listNotificationInterests():Array
//Mediator需要監聽 Flash 裡的 Event (來自 view Component),也要監聽 Notification,其差別就在於使用 listNotificationInterests() 跟 handleNotification() 這兩個方法來管理 Notification
handleNotification(notification:INotification):void
//handleNotification 範例 CODE
override public function handleNotification(notification:INotification):void{
 //建議使用 switch/case 來處理 Notification
 switch(notification.getName()){
  //這裡處理的 Notification 如果太多(超過四五個),應把 Mediator 拆開
  case LoginProxy.LOGIN_FAILED:
   //..省略...
   break;
  case LoginProxy.LOGIN_SUCCESS:
   //..省略...
   break;
 }
}

//viewComponent 的取得與設定
setViewComponent(viewComponent:Object):void
getViewComponent():Object

getMediatorName():String

至於 Command,則分成 SimpleCommand 跟 MacroCommand 兩種
差別在於 MacroCommand 可以執行其他 ICommand
Command 的功能在於協調 Proxy、處理異常等等

SimpleCommand

Package org.puremvc.as3.patterns.command
繼承 Notifier,實作 INotifier, ICommand

繼承自 Notifier 的屬性與方法
//連到 Facade 實體的參照
facade : IFacade
sendNotification(notificationName:String, body:Object = null, type:String = null):void

自己的方法只有一個,就是
execute(notification:INotification):void
這個方法是給我們 override 用的,可以把要處理的事情寫進去

MacroCommand
Package org.puremvc.as3.patterns.command
繼承 Notifier,實作 INotifier, ICommand

除了跟 SimpleCommand 一樣擁有
facade : IFacade
execute(notification:INotification):void
sendNotification(notificationName:String, body:Object = null, type:String = null):void
之外

還有以下方法:
initializeMacroCommand():void
addSubCommand(commandClassRef:Class):void

addSubCommand(commandClassRef:Class) 可以為 Command 增加 SubCommand
( SubCommand 本身可以是 SimpleCommand 也可以是 MacroCommand)
在 execute() 時會遵循 First In/First Out (FIFO) 的順序

要注意的是 execute() 在這裡已經變成一個 final function
所以要改為 override 它的 initializeMacroCommand() 方法
initializeMacroCommand()的 override 應該要像這樣:
override protected function initializeMacroCommand():void{
 addSubCommand(me.myapp.controller.FirstCommand);
 addSubCommand(me.myapp.controller.SecondCommand);
 addSubCommand(me.myapp.controller.ThirdCommand);
}

以上,已經把這四個重要的類別掃過一遍了
再搭配高手們的範例來看應該就會對 PureMVC 有一些認識

PureMVC 入門筆記-1

雖然已經有很多先進寫過關於 PureMVC 的相關文章
但是我還是習慣自己整理一下筆記來釐清觀念

PureMVC 的目的就是實踐 MVC 設計模式,把程式分成Model、View、Controller 三個部份,當然裡面還實作了 GoF 設計模式:可復用物件導向軟體的基礎裡面的其他設計模式(代理模式, 命令模式, 觀察者模式, 外觀模式, 單例模式, 工廠方法模式, 中介者模式...等)

Model (負責轉發請求,對請求進行處理) --> Proxy
View (使用者介面) --> Mediator
Controller(資料管理或實作演算法) --> Command
Facade (實做外觀模式,使用單一類別作為MVC三者溝通之用)

而溝通則使用 Notification (實做觀查者模式),不使用 Flash 的 Event 機制,以便移植到其他語言
Notification 可以被用來觸發 Command 的執行
Facade, Proxy, Mediator, Command 大家都可以 sendNotification
而 Facade 跟 Proxy 不會接收 Notification

以下針對個別部份進行詳細說明:( Standard 版本)
Facade

Package:org.puremvc.as3.patterns.facade
是 IFacade 的單例實作
Facade 的功能有:
初始化 Model, View, Controller 的單例類別並提供所有方法
對主程式註冊 Command 的地方

主要 public 方法有:
getInstance():IFacade

//建立並發送 INotification.
sendNotification(notificationName:String, body:Object = null, type:String = null):void
//取得 Mediator
retrieveMediator(mediatorName:String):IMediator
//取得 Proxy
retrieveProxy(proxyName:String):IProxy

//註冊 Command, Mediator, Proxy
registerCommand(notificationName:String, commandClassRef:Class):void
registerMediator(mediator:IMediator):void
registerProxy(proxy:IProxy):void

//移除 Command, Mediator, Proxy
removeCommand(notificationName:String):void
removeMediator(mediatorName:String):IMediator
removeProxy(proxyName:String):IProxy

//檢查 Command, Mediator, Proxy 是否已註冊
hasCommand(notificationName:String):Boolean
hasMediator(mediatorName:String):Boolean
hasProxy(proxyName:String):Boolean

Protected 屬性及方法有:
instance : IFacade [static]
model : IModel
view : IView
controller : IController
//初始化的方法
initializeFacade():void
initializeModel():void
initializeView():void
initializeController():void

Facade 的範例 ApplicationFacade.as:
package com.me.myapp{
//import
import com.me.myapp.view.*;
import com.me.myapp.model.*;
import com.me.myapp.controller.*;

import org.puremvc.as3.interfaces.*;
import org.puremvc.as3..patterns.facade.*;

// 繼承 Façade, 實作 IFacade
public class ApplicationFacade extends Façade implements IFacade{
 // 為 Notification 定義常數
 public static const STARTUP:String = "startup";
 public static const LOGIN:String = "login";
 // 用以取得單一實體的工廠方法
 public static function getInstance() : ApplicationFacade{
  if ( instance == null ) instance = new ApplicationFacade();
  return instance as ApplicationFacade;
 }
 // 初始化 Controller,註冊 Command (建立 Notification 與 Command 的對應關係)
 override protected function initializeController( ):void{
  super.initializeController();
  registerCommand( STARTUP, StartupCommand );
  registerCommand( LOGIN, LoginCommand );
  registerCommand( LoginProxy.LOGIN_SUCCESS, GetPrefsCommand );
 }
 /** 建立一個 startup 方法把應用程式作為參數傳入
  * 並發出 Notification 將它送到已註冊的 StartupCommand
  */
 public function startup( app:MyApp ):void{
  sendNotification( STARTUP, app );
 }
}
}

整理到這邊好像篇幅差不多了
下一篇繼續來看 Proxy, Mediator, Command, 還有 Notification

2010/06/14

備忘-Gaia Framework 安裝路徑

Gaia Framework 的 mxp 檔案用 Extension Manager 安裝之後
會放在類似如下的路徑:
C:\Documents and Settings\使用者帳號\Local Settings\Application Data\Adobe\Flash CS5\語系\Configuration\

所以如果有語言版本上的問題導致 Gaia 安裝後卻找不到面板
可以把該路徑下的相關檔案拷貝到正確語系的資料夾再重開 Flash 就可以找到了

2010/01/19

Gaia Framework - API 簡易說明

這幾天把 Gaia API 的官方文件稍微翻譯一下
以下大致整理 Gaia Framework API 方法(AS3)

goto(branch:String, flow:String = null):void
呼叫goto方法前往網站的分支(branch),如果該分支不存在會找到最近的
如果傳入的分支層級超過 site.xml 裡的架構,Gaia會記住該 branch 字串並發出 deeplink 事件,可用 getDeeplink() 得出這種 branch 字串。
第二個參數 flow 的值為 Gaia.NORMAL, Gaia.PRELOAD, and Gaia.REVERSE
例:
Gaia.api.goto("index/nav/people/friends");
Gaia.api.goto(Pages.HOME); //前往"index/nav/home",建議使用這種方式,這樣若架構變更也不會有影響

getPage(branch:String):IPageAsset
傳入branch字串,回傳PageAsset,若字串不是有效的id則回傳null可利用它得到PageAsset物件進而利用content屬性對頁面的成員做操控(看來是擴充自 Loader);PageAsset還有一個屬性children:Object可用來存取其下層物件
例:
Gaia.api.getPage("index/nav/home").content.myProp = value;
Gaia.api.getPage("index/nav/home").content.myFunc();
Gaia.api.getPage("index/nav/home").content.MC_Movieclip.x = 10;

getDepthContainer(depth:String):Sprite
回傳 Sprite 或 MovieClip 深度容器。必須傳入dapth常數。(Gaia.TOP, Gaia.MIDDLE, Gaia.BOTTOM, Gaia.PRELOADER)
例:
var top:Sprite = getDepthContainer(Gaia.TOP);
getDeeplink():String 從GaiaSWFAddress類別回傳超出site.xml領域的深層鏈結。
getSiteTitle():String
setSiteTitle(value:String):void
回傳/設定 該網站的 title 屬性值(包含 %PAGE% 標記)。

getValidBranch(branch:String):String 把傳入 branch 字串轉為有效branch字串
getCurrentBranch():String 回傳目前branch。
setDelimiter(value:String):void 設定網站的分隔符號。完成後需呼叫refreshContextMenu()把ContextMenu更新。
getSiteTree():PageAsset 傳回index頁的PageAsset實體。
getMenuArray():Array 回傳site.xm中所有menu="true"的頁面的陣列。(從上到下排列)
getSiteXML():XML 回傳原始site.xml

getContextMenu():ContextMenu
refreshContextMenu():void

getPreloader():IMovieClip 回傳preloader。可以用它來呼叫自訂方法、重新定位等。
setPreloader(asset:MovieClipAsset):Void 用已載入的 MovieClipAsset 覆蓋preloader。不傳參數呼叫時則恢復預設。
getAssetPreloader():IMovieClip
getAssetPreloader():IMovieClip

getDefaultFlow():String
setDefaultFlow(flow:String):Void
回傳/設定網站的預設flow。值為 Gaia.NORMAL, Gaia.PRELOAD, Gaia.REVERSE 或 Gaia.CROSS。

Gaia.api.addAssets(nodes:XMLList, page:IPageAsset):void 在runtime為頁面添加外部動態assets 。

getWidth():int
getHeight ():int
回傳stage原始 寬/高

getSitePosition():Object 以Object型態回傳目前Site View的x, y位置。對於要網站置中時有用。
setLoadTimeout(value:int):void 調整Gaia在載入branch時的容許等待時間,以毫秒為單位,預設值為10000。
setPreloaderDelay(value:int):void preloader呼叫transitionIn()的延遲時間(防止從快取載入時,preloader先跑出來)。預設150毫秒,可傳入的最小值為1。

setGlobalVolume(value:Number, duration:Number = 0; onComplete:Function = null):void 設定整個網站的全域數值。如果有傳入duration參數,它會在指定時間內漸變到該數值。如果有傳入onComplete參數,會在漸變完成後呼叫該function。
getGlobalVolume():Number 回傳目前全域數值。

getAvailableFonts():Array 回傳使用Runtime Font Loading成功註冊的所有字體類別名稱的陣列。
getFontName(className:String):String


SWFAddress Proxy方法

back():Void
forward():Void
getTitle():String
setTitle(title:String):Void
href(url:String, target:String):Void
popup(url:String, name:String, options:String, handler:String):Void
setHistory(b:Boolean):Void 除非你在site.xml的site節點設定history="false",否則預設是開啟。
getHistory():Boolean
setTracker(s:String):Void 設定瀏覽追蹤函數。預設值為'urchinTracker'。
getTracker():String
getBaseURL():String

2009/12/09

用於 Flash 網站前端開發的 GAIA Flash Framework-1

GAIA Framework For Adobe Flash
是一個開放原始碼的 Flash 網站前端開發 framework
支援 AS3 與 AS2
整合 SWFObject, SWFAddress, TweenLite, DeMonster Debugger 等相關的東西
目前最新版是 Version 3.1.9

Adobe TV 裡有一段約一小時的影片是作者 Steven Scaks 對於 GAIA Flash Framework 做的介紹
http://tv.adobe.com/watch/fitc/gaia-framework-for-adobe-flash/
看完之後感覺用這個來做 flash 網站的話應該是會蠻快的
可以專心在製作頁面內容上

想玩玩看的話可以上官方網站 http://www.gaiaflashframework.com/
下載這個 framework 的 mxp 檔,安裝在 Flash CS3 或 CS4
或是先在該站首頁的左側看看那些使用本框架做出來的酷炫網站

官方的文件我稍微看了一下
目前的感覺是這個 framework 的確如作者所說
不會試圖改變開發者原本的習慣
而是提供快速的方法來幫助架構的建置
整個框架似乎還蠻好了解與上手的
而且是開放原始碼所以便於修改及研究
但還是要真正拿來實做一下才會知道好不好用
doc 也要詳細 k 一下才能了解所有的機制跟功能

後續文章會把 study 官方網站的 doc 後做一些整理...
但何時會有後續咧...我也不確定耶