Erin's Blog

Mediator ViewComponents 與 pureMVC 架構的中介 監聽並反應 View Component 發出的 Event 可以發送與接收 Notification 儘量少操作 Proxy 公開方法，多用 sendNotification... Mediator design pattern 要多認識這個 Mediator 設計模式的話，請自行看連結說明啊! 簡單來講，假使有一個 View 裡面有好幾個 MovieClip 組成，而這些 MovieClip 會互相影響對方...這個情況在 Flash 中，通常都會變成下圖： MovieClip 直接控制其他 MovieClip 搞到整個關係很複雜...換一個元件簡直是災難。 加入 Mediator 後，示意圖就會變成： 這樣，所有的 MovieClip 都透過 Mediator 來跟其他 MovieClip 溝通，當某一個 MovieClip 替換成別的元件，這時候也只需要修改 Mediator 中的引用即可，是不是變得很乾淨？如果同一組 MovieClip 有另外一個操作模式，也只需要替換掉 Mediator 即可！天下太平啊~~~ 而 PureMVC 中就是利用 Mediator class 為與前端 ViewComponent 的中介，這樣可以切開 ViewComponent 與 PureMVC framework 的關係，不管你前端介面使用 Flash or Flex 製作都跟程式核心無關。 所以 ViewComponent 製作時只需要兩個原則，一把所有的請求都以 Event 送出由 Mediator 處理，二提供公開方法， Mediator 只需要監聽 View 的 Event，將收到的資訊透過公開方法喂進 ViewComponent 即可。 如在 ViewComponent 中： public function setList( result:Object ):void{ list.dataProvider = result as ArrayCollection; } //然後在按下取得資料的按鈕 Click action 寫上： dispatchEvent( new Event( "GET_LIST" )); 新建 Mediator 的時候一樣有幾個重點方...

寫在前面...為日本地震海嘯受災戶祈福，為地球祈福...~_~ Proxy 收集資料，提供公開方法给外部使用 封裝資料區域邏輯（反正就是弄好資料才給別人） 只能發送 Notification 絕對不要引用到任何的 mediator，越自閉越好 Proxy 也是一個設計模式： Proxy design pattern ，有興趣的請看 wiki 連結，以最簡單的解釋 Proxy 就是資料的「代理人」要什麼資料就是透過這個代理人取得，請求資料的對象不需要知道代理人是如何得到資料。 隨便畫個示意圖，MVC 中為什麼要分開 Model 用意就是當 Model 更改服務的時候，也只需要修改 Model。上圖中，如果你原本的服務是 PHP 會通過 ProxyA 去與後端溝通，當後端更改成 .NET 的時候，前面都不需要變動，也只需要更改為 ProxyB，在上一篇中有特別建議將 Proxy 取用寫在 Command 也是為了因應這種情況產生，這樣你只需要修改 proxyCommand 相關引用就可以了。 使用 Proxy 的時候通常都會伴隨 ValueObject 來使用，VO 的用意是為了強制資料型態，免得在開發過程中過度使用 Object 來做傳遞結果無法檢查資料型別而出現的 bug。 ValueObject package com.mvc.models.vo { public class listVO { public function listVO(label:String, data:String){ this.label = label; this.data = data; } public var label:String; public var data:String; } } 當然你也可以使用 getter and setter 來定義屬性。 Value Object 好處是，使用 remoting 的時候可以直接與後端輸出物件型別綁定，前端收到後端吐出資料時，完全不需要做轉型，如： package com.mvc.models.vo { [RemoteClass(alias='com.serverside.vo.listVO')] public class listVO { --以下省...

Command 當然就是 Command Design Pattern 的實作 用註冊的方式 mapping Notification 一般來說 Command 的生命週期只有到它的 execute 方法執行後就掛了（揮手帕～） 環保！免洗！能用就儘量用！！ Command Design Pattern 顧名思義當然是「命令」設計模式了。這個模式非常好理解，為什麼叫命令？意思就是你老媽叫你去洗碗、掃地或做其他家事，不都是一個指令一個動作？如同一支電視遙控器，每按一個按鈕都有對應的命令，按了電源鈕 -> 開機，音量放大 -> 音量變大一點，選台 -> 跳台...動作做完就結束，所有命名都是有內容的，如果每一個命令都要乖乖的命名的話，光記內容不就累死了...所以你會發現繼承 Command 後，只需要 override execute():void 方法即可。 PureMVC 送你用的 Command 有兩種，SimpleCommand and MacroCommand。SimpleCommand 當然就是單次使用啦！想要一次執行一堆請愛用 MacroCommand，如果你還需要其他執行模式，可以自己手工建立，或看官網所提供的 Utilities。 StartupCommand： 官方範例中的 StartupCommand 使用 MacroCommand，就是為了分開 MVC 相關初始用 Commands package com.me.myapp.controller { import org.puremvc.as3.interfaces.*; import org.puremvc.as3.patterns.command.*; import com.me.myapp.controller.*; // A MacroCommand executed when the application starts. public class StartupCommand extends MacroCommand { // Initialize the MacroCommand by adding its subcommands. override protected function initializeMacroCommand() : voi...

Notification & Observer 簡單講就是 PureMVC 架構中的 Event 機制 背後就是所謂的「Observer Design Pattern」 Notification 為訊息物件 Facade and Proxy 只能發送 Command and Mediator 可以接收與發送 Observer Design Pattern 「觀察者」這個設計模式被提出來一定有它的過人之處，寫程式講求的就是「別人家的事情管他去死，什麼渾水都要淌的話，怎麼被蟲咬死都不知道」。觀察者做的事情就是有興趣接收的消息，就自己乖乖訂閱，出了啥大事，就是用將訊息發出去，有訂閱的人自然會收到，收到訊息要做什麼反應當然就是自己的事情，最後收膩了還可以取消訂閱。在 PureMVC 中可以發送的 class 都可以用內建的 sendNotification() 發送訊息： sendNotification( NotificationName:String , body:Object , type:String ); //body:Object 萬物皆物件啊，如果你還不知道能送什麼出去我也沒辦法了... 接收端會收到被打包成 notification:Notification 的物件，可以用其 getName(), getBody() and getType() 方法取得訊息的內容。 Command 中能接收到的訊息是通過 facade.registerCommand( NotificationName:String , command:Class ) 達到 mapping，而 Mediator 中要接收 Notification 要在其 listNotificationInterests 方法中列出有興趣 Notifications 清單。 Proxy 不能接收也有它的用意，Model 最大的功能就是提供資料，不需要理會外面的世界到底發生了什麼事情，如果能接收訊息的話，直接拿 Mediator 來用就好了，還需要使用 Proxy 嗎？ to be continued...

PureMVC Gestalt • Model and Proxy • View and Mediator • Controller and Commands • Facade and Core • Observers and Notification Facade 簡化一切，讓你只需要對一個窗口 Standard version 的 Facade 是個單例 Multi-core 版本是由單例的 Facade bus(Array) 控制 Model, View and Controller 三個單例的總代理 Commands, Mediators and Proxy 的註冊、取用與移除都是在這裡 反正就是想要操作其他 class 時，可以先參考 facade 一下... 開始寫 PureMVC 專案後，你會發現它無所不在，甩都甩不掉... 每個專案的 ApplicationFacade 都長得很像（當然命名可以修改，內容不太需要變動）。如果你有自己特有的 Singleton Class 寫法，請自行修改。懶得改的人就直接用它官網上範例的寫法即可，其實乖乖的用也不會變壞到哪去啦！ 以下為標準的 ApplicationFacade 寫法： PS:範例 code 皆使用 Standard 版本 ＋ Flex SDK 3.x or 4.x 來呈現，也許不是完整的寫法，請勿真的照抄後執行 package com.mvc { import org.puremvc.as3.patterns.facade.Facade; import org.puremvc.as3.interfaces.IFacade; import mx.core.Application; import com.mvc.controls.StartupCommand; public class ApplicationFacade extends Facade implements IFacade { public static const STARTUP:String = 'startup'; public function ApplicationFacade() { super(); } public static function getInstance...

為什麼要學 PureMVC ？ 明明網路上一堆免費的 MVC 微型框架，為什麼 Erin 特別愛用 PureMVC？ 嚴格說起來，使用 PureMVC 開發的專案寫出來的 class 檔一定比 一些簡化版 PureMVC base 的 framework 如 Robotlegs 多，也比較難入門，但是為什麼要特別推薦它？ 答案很簡單，越基本的東西反而是最好延伸，留白越多的紙最好畫！也因為如此才令人著迷啊...(咦？） 百分百真情推薦： 大家的職責切分的很乾淨...棒 訊息傳遞機制是好物 由於架構超然於 Flash / Flex 架構上,反而在 team work 分工的時候更方便 擁有多個程式語言的版本，想要入門其他語言是個不錯的選擇 Source code 公開化，要改要加什麼隨便你~~ 出來的時間比較久相關資源多 接下來就來看圖說故事。 PureMVC Diagram, 出處： PureMVC 官網 當初第一眼看到這張圖的時候，真的挺像個變形蟲，不過想要快速了解 framework 的基本運作流程，最容易的方法就是看圖說故事... PureMVC 核心是由四個單例（ singleton design pattern ） 組成： Facade, Model, View and Control，唯一出入口就是 Facade，你會發現圖示中 Model, View and Control 都是雙向指向連接到 Facade，它們互相不清楚其他人的存在。 這四個 Class 你也只需要認識 Facade 即可...=) Facade : 圖示中， Facade 下方有三個圈圈分別是 Mediator, Command and Proxy，意思是所有實作這三種 class instance 都是透過 Façade 來註冊移除或取用其他資源。拿 Flash 來比喻， Facade 很像是 root，所有的 DisplayObject 顯示、操作和移除都可以透過 root 抓取實體後執行，所有實體都可以透過 root 去找到其他實體。在 PureMVC 中， 它最大的作用就是切開 MVC 彼此的依賴，也提供 user 一個統一的操作出入口。 Model, View and Control 你會發現這三個大圈圈旁邊都有一堆同色的 Proxy, Command and M...

最近感覺 PureMVC 又熱了起來，也剛好好久沒有更新文章了， 就順便將去年底做的企業內訓 PureMVC 課程部分整理寫出來， 要講 PureMVC 當然要先從啥是 MVC 講起： Model-View-Control 出處： 維基百科 MVC ，大概節錄一段： （控制器Controller）- 負責轉發請求，對請求進行處理。 （檢視View） - 介面設計人員進行圖形介面設計。 （模型Model） - 程式設計師編寫程式應有的功能（實作算法等等）、數據庫專家進行資料管理和數據庫設計(可以實作具體的功能)。 其實到 Flash 的世界來講，Model and Control 都是由 .as 處理，而 View 便是 .fla+.as ，為了要鬆綁之間的關係，Event 機制就相當重要。其實每個人對 MVC 的最佳解釋都不同，真的要多練習才會有所領悟。 簡單來說： Model = 餐廳廚房 data: 西餐類 action：依照點菜單做餐點 action: 做完餐點就是將餐點放在出菜口按下通知鈴等服務生來 Control ＝ 服務生 action: 聽到大門歡迎鈴就要說「歡迎光臨」 action: 看到客人揮揮手要去收點菜單 action: 聽到廚房通知鈴看是哪桌的餐點去送菜 View = 餐廳外場 view: 田園式的西餐廳裝潢 action: 客人進門會有歡迎鈴 action: 客人揮揮手叫服務生過來服務，是哪個服務生都無所謂，重點只要會收點菜就行了。 action: 客人收到餐點準備開動 當餐廳要改成外炒店，這時候只需要將大廚換成會中餐廚師，其出的菜就是中式快炒。 當餐廳外場由田園式外觀重新裝潢成華麗感夜店風，其進門的客層也會有所不同。 重點就是當你換掉一個地方時，對其它的部份不會造成太大的影響或者根本無所謂，這就是 MVC 所講求的境界... 一般來說，小專案有沒有必要使用 MVC 就是由各位自己判斷了，當你習慣將程式切分開來，發現 debug 不是一件痛苦的事情時，這時候有沒有強制使用 MVC 倒不是重點，因為你已經養成良好的撰寫習慣。但是開始接觸大型專案配合 team work 時，在沒有一個共用的核心框架前提下，這個專案開發到最後一定會是一個多手多腳的怪物，共用核心框架的價值就在這邊展現，這...