Dec 12, 2008

[Flex] pureMVC Standard 練習筆記

參考資料 : pureMVC 官方網站

也許對於"純"程式設計師來說 pureMVC 才是比較正統的 MVC design pattern 的作法...跟它相處了兩天還是沒辦法對它產生愛啊... 也許它的可攜性比較高...但是我實在看不到它可愛在哪裡...也許它太正統了;也許是因為它都不使用 Flex framework吧...(可能需要慢慢體會...)

先了解它的主要架構就是一對一對的:

• Model vs. Proxy
• View vs. Mediator
• Controller vs. Command

以下是同上篇 [Flex] Cairngorm 練習筆記 一樣的工作改為 pureMVC 寫法
Menu tree:


list.xml :

<?xml version="1.0" encoding="utf-8"?>
<data>
<list name="AAAA" data="0"/>
<list name="BBBB" data="1"/>
<list name="CCCC" data="2"/>
<list name="DDDD" data="3"/>
</data>


0. ListVO
package com.mvc.model.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;
}
}


1. 從 ListProxy 開始寫
pureMVC 的 Proxy 主要的工作大概就是:
  • 匯集對應 Models 提供方法、屬性給別人使用 ( 建議:給自己或 Command 修改就好 )

  • 要努力跟 Mediator 絕交,不要認識最好

  • 封裝區域邏輯 ( 反正就是弄好資料才給別人 )

  • 只發不收 Notification

package com.mvc.model
{
import mx.rpc.IResponder;
import mx.rpc.http.HTTPService;
import mx.collections.ArrayCollection;
import com.mvc.model.vo.listVO;

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

public class ListProxy extends Proxy implements IResponder
{
public static const NAME:String = "listProxy";
public static const LIST_CHANGED:String ="list_changed";

public function ListProxy()
{
super(NAME, new ArrayCollection);
update();
}
public function update():void{
var httpService:HTTPService = new HTTPService();
httpService.url="data/list.xml";
httpService.resultFormat = "e4x";
var call:Object = httpService.send();
call.addResponder(this);
}
//隱藏的 getter 給自己看的,順便轉換資料型態
private function get list() : ArrayCollection {
return data as ArrayCollection;
}
/**
* Implemented mx.rpc.IResponder
* 外面的別用這兩個方法
*/
public function result( event:Object ):void{
var xml:XML = XML(event.result);
var list:ArrayCollection = new ArrayCollection;
for each (var subxml:XML in xml.list){
list.addItem( new listVO ( subxml.@name, subxml.@data));
}
setData(list);
//改完就要發 Notification
sendNotification( LIST_CHANGED, data );
}
public function fault( obj:Object ):void{
trace("XML 載入錯誤");
}
}
}


2. ListMediator:對應 List Component 在主要的 mxml 上
Mediator 主要的工作有:
  • 監聽並反應 viewComponent 發送的 Events

  • 可收發與處理 Notifications

  • 避免直接修改 Proxy ,要嘛就是用 Command

  • 其他?...( 跟它還不夠熟 )

package com.mvc.view
{
import com.mvc.model.ListProxy;

import mx.collections.ArrayCollection;
import mx.controls.List;

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

public class ListMediator extends Mediator
{
public function ListMediator(mediatorName:String=null, viewComponent:Object=null)
{
super(mediatorName, viewComponent);
}
override public function listNotificationInterests():Array
{
//要處理啥訊息都在這邊列好
return [
ListProxy.LIST_CHANGED
];
}

override public function handleNotification(notification:INotification):void
{
//上面有列這邊才收的到喔!
switch(notification.getName()){
case ListProxy.LIST_CHANGED:
list.dataProvider = notification.getBody() as ArrayCollection;
}
}
//給自己看的,重點還是轉換物件型態
private function get list():List {
return viewComponent as List;
}

}
}


3. ApplicationFacade:MVC 的總代理,它當然是只有一個
所有的 Proxies , Mediators 跟 Commands 註冊、取用與毀滅都在這邊,不過為了"儘量"跟別人沒關係,它這邊除了 Commond 的註冊外,其餘都是寫在 StartupCommand 內。以下幾乎是 ApplocationFacade 的標準寫法。

package com.mvc
{
import org.puremvc.as3.patterns.facade.Facade;
import org.puremvc.as3.interfaces.IFacade;
import com.mvc.control.StartupCommand;

public class ApplicationFacade extends Facade implements IFacade
{
public static const STARTUP:String = "startup";
public function ApplicationFacade()
{
super();
}
public static function getInstance() : ApplicationFacade
{
if ( instance == null ) instance = new ApplicationFacade( );
return instance as ApplicationFacade;
}

override protected function initializeController( ) : void
{
super.initializeController();
registerCommand( STARTUP , StartupCommand );
}

public function startup( app:TestPureMVC ) : void
{
sendNotification( STARTUP, app );
}
}
}

反正就是先註冊了一個 StartupCommand 然後馬上 Notification 它~~

4. StartupCommand
該初始化的都在這邊完成~~
package com.mvc.control
{
import com.mvc.model.ListProxy;
import com.mvc.view.ListMediator;

import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.command.SimpleCommand;

public class StartupCommand extends SimpleCommand
{
public function StartupCommand()
{
super();
}
override public function execute(notification:INotification):void{
//這邊只控制畫面上的list component...- - 它的 id = list
var list:Object = notification.getBody().list;
facade.registerMediator( new ListMediator(null, list) );
facade.registerProxy( new ListProxy());
}
}
}


5. TestPureMVC.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="220" height="200" layout="absolute"
applicationComplete="facade.startup( this )" >
<mx:Script>
<![CDATA[
import com.mvc.ApplicationFacade;
private var facade:ApplicationFacade = ApplicationFacade.getInstance();
]]>
</mx:Script>
<!-- ListMediator 的控制對象-->
<mx:List id="list" />
</mx:Application>


到目前的理解,pureMVC 事件傳遞機制是採用 Observer vs. Notification。如果有註冊成組的 Command 與 Notification ,Notification 被發送時也會執行 Command,然後 viewComponent 採用 as3 的 Event 機制發送 Event 給 Mediator 監聽...反正就是多用 Notification & Command吧...

to be continue....?

Dec 9, 2008

[AS3] ASDoc 快速上手

資料出處 :Using ASDoc

常聽到有人問如何輸出 ActionScript API 文件,在這邊簡單的與大家分享建立 ASDoc 的其中兩個方法:

1. 使用 Flex SDK
請先下載 Flex SDK 解壓後會在 bin 內找到 ASDoc
運行環境:Mac OSX 10.5
打開 應用程式 / 工具程式 / 終端機
直接將 ASDoc( Unix ) "拉"到 終端機視窗內...沒錯!OSX 就是這樣有人性啊!不得不讚嘆...回到正題,接著鍵入:(asdoc後面)
如果你的 as sources 是在 /Users/yourName/myProject/src 下
想要整包輸出就是指定 : -doc-sources

Last login: Tue Dec 9 14:58:35 on xxxx
Your-macbook-pro:~ yourName$ /Users/yourName/flex_sdk/bin/asdoc -doc-sources /Users/yourName/myProject/src -main-title "XX API Documentation" -window-title "XX API Documentation" -output /Users/yourName/myProject/doc


運行環境:Windows XP pro
如果嫌麻煩就設好 FlexSDK\bin 的環境變數,不懂如何設定的話請愛用 google 搜尋。
打開 開始列 / 程式集 / 附屬應用程式 / 命令提示字元
如果你已經設好環境變數的話可以直接鍵入:如果沒有就乖乖的用 cd 到 FlexSDK\bin下
asdoc -doc-sources D:\yourFlexProjectPath\src -main-title "XX API Documentation" -window-title "XX API Documentation" -output D:\yourFlexProjectPath\doc

按下 Enter 如果沒有意外的就幾秒後就可以在 doc/內找到輸出好的 html 囉!
PS. 我發現 ASDoc 檢查的比 Flex Compiler 還嚴謹,所以要平安無事的輸出好就得小心 Flex 檢查出來的黃色三角警告。

2. Flex Builder3
如果使用 Flex Builder3就沒有運行環境的差別嚕!
打開下拉是功能表 Run / External tools 或者是直接點選快速鍵列上相同的功能:


打開後點選 Program 按滑鼠右鍵 New 一個新的 tool


輸出的格式會以運行的系統語系為主,如果你需要輸出 UTF-8 的話請點選 Command 修改


資料出處有完整的 ASDoc 格式語法說明,想要輸出漂亮的 API Document 就乖乖的讀一遍吧!=P

Dec 3, 2008

[Flex] Cairngorm 練習筆記

由於工作的關係,開始接觸 Adobe 官方建議的微型 MVC 架構 "Cairngorm",剛開始挫折不斷。看了官方的 CairngormStoreWeb 範例教學說明..嗯...看到想睡;在 google 上搜尋了一堆經驗分享文章也都是片片段段,最後終於讓我發現了一個寫的相當簡單易懂的 Getting Started with Cairngorm 教學系列文章 by David Tucker,強烈推薦想要 Cairngorm 快速入門的人一定要看一下!尤其示意圖更是容易理解。

先到 Adobe open source Cairngorm download page 下載最新的 Cairngorm Binary file,想要了解整個架構的可以下載 Source file

以下是我練習的範例:by Flex Builder 3
目標:畫面上只有一個 list component 資料來源為外部 xml
menu tree :


list.xml :

<?xml version="1.0" encoding="utf-8"?>
<data>
<list name="AAAA" data="0"/>
<list name="BBBB" data="1"/>
<list name="CCCC" data="2"/>
<list name="DDDD" data="3"/>
</data>

1. 從 ModelLocator 開始寫 :
使用 Signleton design pattern 重點是將要使用的資料都收集在這邊,由於練習的範例只有顯示一個 list 所以只提供 一個 "list:ArrayCollection" 屬性,(如果複雜的可由 Model class 提供請參考 CairngormStoreWeb 範例寫法 )
package com.model
{
import com.adobe.cairngorm.model.ModelLocator;
import mx.collections.ArrayCollection;

[Bindable]
public class TestModelLocator implements ModelLocator
{
private static var instance:TestModelLocator = null;
private static var allowInstantiation:Boolean = false;

public var list:ArrayCollection;

public function TestModelLocator(){
if (!allowInstantiation) {
throw new Error("Error: Instantiation failed: Use TestModelLocator.getInstance() instead of new TestModelLocator().");
}
list = new ArrayCollection;
}
public static function getInstance() : TestModelLocator {
if ( instance == null ) {
allowInstantiation = true;
instance = new TestModelLocator();
allowInstantiation = false;
}
return instance;
}
}
}


ModelLocator 的用法大概就是:(理解錯誤的話請糾正喔!)
用來收集一堆 app 用的 Models 並提供單一個實體存取所有的資料。[Bindable] 是直接與顯示資料的 Viewer 綁定 (另類的 Observer 模式 ?),也讓 Cairngorm 架構內的 ViewHelper and ViewLocator patterns 變的可有可無 。David Tucker 在文章最後提了幾個重點很有用,其中兩項:ModelLocator 的資料只給 Command or Responder layer 編輯,清楚的釐清工作分責再來就是 不要使用 ViewHelper and ViewLocator (我實在搞不清楚它們的使用意義 ? )。

2. listVO :
package com.vo
{
import com.adobe.cairngorm.vo.IValueObject;

public class listVO implements IValueObject
{
public function listVO(label:String, data:String){
this.label = label;
this.data = data;
}
public var label:String;
public var data:String;
}
}


3. GetListCommand :
Cairngorm Event 傳遞機制就是:
在 FrontComtroller 註冊 Commond 與對應的 Event
-> CairngormEventDispatcher 監聽 Event,爾後操作過程中 CairngormEventDispatcher dispatch Event
-> 實體化相關 Commond 看是編輯 ModelLocator 或者透過 Data Delegate 對外連線並回傳到對應的 Responder 修改 ModelLocator
-> Viewer 更新顯示

感覺起來有點複雜,但是實際走過一遍後會發現它分工很明確,正因為太清楚...感覺開發到最後 Commond 如果沒有好好規劃的話 Events and Commonds 可能會滿天飛,檔案越多當然就代表 debug 越麻煩啦!
package com.commands
{
import com.adobe.cairngorm.commands.ICommand;
import com.adobe.cairngorm.control.CairngormEvent;
import com.bussiness.ListDelegate;
import com.model.TestModelLocator;

import mx.collections.ArrayCollection;
import mx.rpc.IResponder;

public class GetListCommand implements ICommand, IResponder {
private var modelLocator:TestModelLocator = TestModelLocator.getInstance();
public function GetListCommand() {}

public function execute(event:CairngormEvent):void {
//因為要取用外部資料所以需要 Data delegate來輔助
//Commond 都不用管 Delegate 如何取得資料
var delegate:ListDelegate = new ListDelegate( this );
delegate.getList();
}
public function result( event:Object ):void {
//會在 Delegate Layer 中將 result 處理成 ArrayCollection 型態
modelLocator.list = event.result as ArrayCollection;
}
public function fault( event:Object ):void {
//------
}
}
}


4. ListDelegate :
對外部資料的管道,重點是將 server side 的 data 轉換成 application 使用的 data 型態回覆給 Responder ,使用它的好處是:更換 web services 時只需要換掉 data delegate 與修改 Service.mxml 即可。
package com.bussiness {
import com.adobe.cairngorm.business.ServiceLocator;
import com.vo.listVO;

import mx.collections.ArrayCollection;
import mx.rpc.IResponder;
import mx.rpc.events.ResultEvent;

public class ListDelegate {
private var responder:IResponder;
private var service:Object;
public function ListDelegate( responder:IResponder ) {
//responder = GetListCommand
this.responder = responder;
//service 的名稱要看 service.mxml 中設定的 service id
this.service = ServiceLocator.getInstance().getHTTPService( "GetListService" );
}
public function getList():void {
var call:Object = service.send();
/*可以將 service side data 保留在這層處理與 Commond 切分清楚 */
var responder:mx.rpc.Responder = new mx.rpc.Responder(onResult, onFault);
call.addResponder(responder);
}
private function onResult( event:ResultEvent ):void {
var xml:XML = XML(event.result);
var list:ArrayCollection = new ArrayCollection;
for each (var subxml:XML in xml.list){
list.addItem( new listVO ( subxml.@name, subxml.@data));
}
//處理完後送回給 ListCommand
//如果取用 list.xml 的方法轉成 remoting or webService 的話,也只是需要換掉這個 Class
responder.result( new ResultEvent( ResultEvent.RESULT, false, true, list ) );
}
private function onFault( event:Object ):void {
trace(" 載入 list.xml 失敗~~~");
}
}
}


5. Service.mxml :
使用 mxml 來寫超方便的啦!
<?xml version="1.0" encoding="utf-8"?>
<cairngorm:ServiceLocator
xmlns:mx="http://www.adobe.com/2006/mxml
xmlns:cairngorm="com.adobe.cairngorm.business.*">

<mx:HTTPService
url="data/list.xml"
id="GetListService"
resultFormat="e4x"
/>

</cairngorm:ServiceLocator >


6. PageController :
註冊 Commond 到 FrontController

package com.control
{
import com.adobe.cairngorm.control.FrontController;
import com.commands.GetListCommand;

public class PageController extends FrontController
{
public function PageController()
{
super();
//加入 Command ~~
this.addCommand( "getList", GetListCommand );
}

}
}


7. 完成 CairngormTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" applicationComplete="init()">

<mx:Script>
<![CDATA[
import com.control.PageController;
import com.model.TestModelLocator;
import com.adobe.cairngorm.control.CairngormEvent;
import com.adobe.cairngorm.control.CairngormEventDispatcher;
import com.bussiness.Service;

private var service:Service, controller:PageController;

[Bindable]
private var model:TestModelLocator = TestModelLocator.getInstance();
private function init():void{
//實體化 PageController and Service
controller = new PageController;
service = new Service;
//取 list 資料
CairngormEventDispatcher.getInstance().dispatchEvent(new CairngormEvent("getList"));
}
]]>
</mx:Script>
<mx:List dataProvider="{model.list}" />
</mx:Application>


整個練習完後至少對 Cairngorm 有點概念,當然要熟練的實做還需要一些時間的努力啊!=P

[App] 國道計程收費速算器 2.0

之前的版本跟目前 國道計程官網 所列資料誤差很大,這支 App 也一直有人在使用,所以為了答謝愛用者只好做了一次大更新,因為對 CoronaSDK scrollView widget 有點怨言,所以 iOS 版本採用 Swift3 重寫了一遍,不過 Android 版本還是維...