Merapi能實現AIR與Java溝通，讓AIR可以透過Java去存取USB、Bluetooth、GPS..等AIR不支援的IO設備，或是直接執行本機檔案、開啟目錄等...。或許有人會質疑，既然都要透過Java了，那不如用Java開發就好，何必使用AIR？其實就以UI開發來講，Flash是非常方便的工具，尤其是Flex的mxml，基本上就是為了UI所設計的語言，強大的排版能力、多樣的特效及CSS的概念等都是使用AIR開發的好處。
附上教學影片及網站給大家參考：
官網：http://www.merapiproject.net/
教學：http://playground.deju.nu/2009/04/getting-started-with-merapi/
Flash Builder試用快到期了，趁這一、二天再把Flash Builder的特性再看一次，推薦兩個不錯的中文網站：
RIA Meeting 視頻中心：提供Adobe TV跟官網影片中文翻譯，也有gotoAndLearn的教學影片
Airia Flash Builder4教學專題：Airia 論壇的Flash Builder專區，有詳細的圖文介紹
接觸MVC Framework半年多了，把之前的筆記做個整理，希望能對想學Framework的朋友有幫助
一、Cairngorm：
Cairngorm是官方的MVC框架，有完整文件及教學， 事件驅動及能使用Flex特有的data binding跟state，不過資料管理過度集中，存取的資料只給ModelLocator管，在較大一點的專案會變很亂。
範例教學：http://waterxbread.blogspot.com/2009/03/micro-architecture-cairngorm.html
二、PureMVC：
PureMVC為獨立的事件驅動架構， 支援多語言（C#、Java、PHP…），雖然相容性高，但並未使用到Flex的好處，在大型專案裡類別會多到赫人（不過修改功能很容易）。 使用Code-Behind寫法（Mediator），UI跟程式分開，在Module溝通上也有許多好用的Utils
PureMVC範例教學 Part1：http://waterxbread.blogspot.com/2009/03/micro-architecture-puremvc-part1.html
PureMVC範例教學 Part2：http://waterxbread.blogspot.com/2009/03/micro-architecture-puremvc-part2.html
PureMVC Util，使用Pipes實現Module溝通：http://waterxbread.blogspot.com/2009/03/puremvc-pipes-util-module.html
PureMVC Util，使用Fabrication與Module溝通：：
http://waterxbread.blogspot.com/2009/04/puremvcfabricationmodule.html
三、Mate：
Mate 一樣為事件驅動架構， 使用標籤語法，跟Cairngorm一樣能使用data binding，並簡化了端溝通（RemoteObjectInvoker、HTTPServiceInvoker...），撰寫上比較簡單，且依賴注入的特性，可不破壞原架構加入功能
Mate範例教學 Part1：http://waterxbread.blogspot.com/2009/06/mate-framework-part1.html
Mate範例教學 Part2：http://waterxbread.blogspot.com/2009/06/mate-framework-part2.html
Adobe發出的新聞，HTC（宏達電） Hero手機將是第一個使用Flash的Android手機，雖然目前只支援Flash Player 9，但會密切注意FP10的發展
展示影片：http://www.adobe.com/devnet/devices/articles/htchero.html
又把小牛拿出來了，PV3D內附的反射效果，繼承自BasicView，可直接放置在舞台上，使用相當簡單
有三個值可設定，surfaceHeight為ReflectionView內的Camera高度，viewportReflection是真正操作的反射Viewport，元件為Sprite，一樣可加Filter或其它設定，而setReflectionColor則可設定反射的ColorTransform
surfaceHeight = 0; viewportReflection.filters = [new BlurFilter()]; setReflectionColor(.7, .7, .7);
要特別注意的是，一定要用SingleRender來Render場景，雖然是繼承BasicView，但反射的渲染只寫在SingleRender，StartRendering及onRenderTick只會渲染基本Viewport，不會有反射效果
Skyfire是免費的手機瀏覽器，可讓手機實現桌面的瀏覽經驗，支援Flash10、Silverlight2、Javascript跟Ajax，讓手機可觀看youTube及Papervision3D。
在InsideRIA有介紹Flash執行效果，就結論來看似乎不錯，也能觀看著名的Big & small，唯一的要求只是一顆強而有力的處理器 :-)
軟體名： Skyfire 1.0
支援OS：Windows Mobile 5、Windows Mobile 6、S60
InsideRIA上的介紹：http://www.insideria.com/2009/06/ux-discussion-skyfire-mobile-b.html
SmartFoxServer是相當強大的多人伺服器，以Flash Socket為基礎，可實現多人應用程式及MMO Game，由於是Java base開發，在Windows、Linux及MacOS都可運行，且client端支援AS1、AS2、AS3語法，專業版還能跨防火牆，功能相當強大。
當然，這不是免費軟體，試用版有20人的連線限制，無限制的專業版要2000歐元（約台幣九萬多），但若只是小遊戲，20人其實也夠了。
官方首頁：http://www.smartfoxserver.com/
Spring Camera是PV3D之後才加入的Camera，有點像跟拍的效果，在3D視角的A-RPG遊戲很常見。筆者跟據pv3d.org的範例做個練習，原文及教學可參考這篇：http://pv3d.org/?s=spring+camera&submit=GO
Adobe Labs在6/10所放出的Plug-in，能用在Flex Builder 3及Flash Builder（Gumbo）。
Blueprint主要是用來查詢語法範例，能直接在Flex內顯示結果，在只是忘掉API用法時非常好用，只要在要查詢的文字上按下Alt + B即可（也可使用搜尋框），這個Plug-in剛好彌補了Flex Help的不足，讓Flex更好用。
官網有完整教學，筆者就不再多述：
Blueprint：http://labs.adobe.com/technologies/blueprint/
教學：http://labs.adobe.com/wiki/index.php/Blueprint:Using_Blueprint
part1介紹過Mate架構跟流程，這次寫一個簡單範例來說明Mate的寫法
範例為使用DataGrid操作來自DataManager的資料。按此觀看範例
Main.mxml
同上次的架構，程式的進入點是Main.mxml，裡面只要宣告EventMap、ModelMap跟要使用的UI
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:maps="idv.gd.hellomate.maps.*"
xmlns:view="idv.gd.hellomate.views.*"
width="600" height="350">
<mx:Style source="assets/style.css"/>
<maps:MainEventMap/>
<maps:ModelMap/>
<view:DataList/>
</mx:Application>
DataList.mxml
DataList.mxml 為列表的UI，負責顯示、新增及刪除，在Mate架構中，UI的Domain Logic直接寫在mxml，或許會有點亂，但這種寫法也方便Mate做Data Binding
<!-- 部分程式碼 -->
<!-- mate特有的Dispatcher，即使元件不在顯示列表或不可見，仍可送訊息給Mate -->
<mate:Dispatcher id="deleteAllDispatcher"
generator="{ListEvent}"
type="{ListEvent.REMOVE_ALL}">
<!-- 可直接接收來自EventMap的回應 -->
<mate:ResponseHandler type="deleteItemResponse" response="Alert.show('ok')"/>
</mate:Dispatcher>
<!-- 能監聽自己內部跟Mate事件 -->
<mate:Listener type="{NavigationEvent.ADD_STATE}" receive="stateChangeHandler(event)"/>
<mate:Listener type="{NavigationEvent.LIST_STATE}" receive="stateChangeHandler(event)"/>
<mx:DataGrid id="myDG"
x="10" y="10"
width="560" height="215"
dataProvider="{currentListAC}">
<mx:columns>
<mx:DataGridColumn headerText="標題" dataField="title"/>
<mx:DataGridColumn headerText="訊息" dataField="message"/>
</mx:columns>
</mx:DataGrid>
事件可由Mate的Dispatcher送出，也可使用原本的EventDispatcher，但事件的bubbles一定要為true，而<listener>的標籤可以聽到來自Mate的事件，但自己Bubbles上來的事件也會聽到，在設計時要注意
三種在Mate中傳事件的寫法：
一、使用<Dispatcher>：<mate:Dispatcher id="deleteAllDispatcher" generator="{ListEvent}" type="{ListEvent.REMOVE_ALL}">，用調用時呼叫 deleteAllDispatcher.generateEvent();
二、使用原生的EventDispatcher：this.dispatchEvent(new NavigationEvent(NavigationEvent.ADD_STATE));，由於事件bubble為true，EventMap可聽到事件
三、使用程式碼的Mate Dispatcher： var mateDispatcher:Dispatcher = new Dispatcher(); mateDispatcher.dispatchEvent(listEvent);
ListEvent.as
自定事件，寫法同一般Flash事件寫法，但為避免混淆，Mate建議在事件的常數後加上Class名，好讓事件不會重覆
public class ListEvent extends Event
{
//常數後加上Class名，避免名稱重覆
public static const DELETE:String = "deleteListEvent";
public static const REMOVE_ALL:String = "removeAllListEvent";
public static const ADD:String = "addListEvent";
public var item:ItemInfo;
//bubbles要為true，給EventMap聽
public function ListEvent(type:String, bubbles:Boolean = true, cancelables:Boolean = false, item:ItemInfo = null)
{
super(type, bubbles, cancelables);
this.item = item;
}
override public function clone():Event
{
return new ListEvent(type, bubbles, cancelable, item);
}
}
DataManager.mxml
為管理列表資料的Manager
public class DataManager
{
public var listArrayCollection:ArrayCollection;
public function DataManager()
{
listArrayCollection = new ArrayCollection();
listArrayCollection.addItem(new ItemInfo("first item", "hello mate"));
listArrayCollection.addItem(new ItemInfo("second item", "test"));
}
public function deleteItem(item:ItemInfo):void
{
if (listArrayCollection)
listArrayCollection.removeItemAt(listArrayCollection.getItemIndex(item));
}
public function deleteAllItem():void
{
if (listArrayCollection)
listArrayCollection.removeAll();
}
public function addItem(item:ItemInfo):void
{
if (listArrayCollection)
listArrayCollection.addItem(item);
}
}
DataManager封裝了資料操作，這裡只外露一個listArrayCollection給外部View使用，也可把ModelManager做為資料物件跟View挷定，但要記得要給class設[Bindable]，或自定Binding事件
MainEventMap.mxml
為Mate事件的中心，用以管理事件及專案的Business Logic
<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import idv.gd.hellomate.events.*;
import idv.gd.hellomate.business.DataManager;
]]>
</mx:Script>
<!-- 監聽Mate事件，可呼叫Manager執行方法（Manager只會被生成一次）-->
<EventHandlers type="{ListEvent.DELETE}">
<MethodInvoker generator="{DataManager}" method="deleteItem" arguments="{event.item}"/>
</EventHandlers>
<EventHandlers type="{ListEvent.REMOVE_ALL}">
<MethodInvoker generator="{DataManager}" method="deleteAllItem"/>
<!-- 回應訊息給呼叫者 -->
<ResponseAnnouncer type="deleteItemResponse"/>
</EventHandlers>
<EventHandlers type="{ListEvent.ADD}">
<MethodInvoker generator="{DataManager}" method="addItem" arguments="{event.item}"/>
<!-- 發送Navigation事件 -->
<EventAnnouncer generator="{NavigationEvent}" type="{NavigationEvent.LIST_STATE}" />
</EventHandlers>
其中<EventHandlers>的標籤為註冊Event要觸發的事件，這裡能調用ModelManager的方法，並可直接回傳內容（<ResponseAnnouncer>）或是呼叫事件（<EventAnnouncer>）
ModelMap.mxml
<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import idv.gd.hellomate.views.DataList;
import idv.gd.hellomate.business.DataManager;
]]>
</mx:Script>
<!-- 注入資料，DataList生成時自動注入 -->
<Injectors target="{DataList}" debug="true">
<PropertyInjector targetKey="currentListAC" source="{DataManager}" sourceKey="listArrayCollection"/>
</Injectors>
</EventMap>
ModelMap.mxml底層其實是EventMap，這裡分出來只是為了釐清架構。其中<Injectors>是很特殊的標籤，會在目標元件生成時自動把資料注入，且若是Bindable物件，之後就可靠物件自己更新，在寫法上很方便。
總結
這次只寫個簡單範例練習，由於Mate可用Data Binding，在寫法上會比PureMVC好寫很多，但實際上使用還是要看專案的複雜度，沒有人說那個MVC Framework是最好的，端看開發人員習慣那種架構。
這次的練習不夠完整，如果寫法或概念有錯還請指正，謝謝
推薦一個有趣的Flash網站：http://video.foxjapan.com/narikiru/，這個網站可以讓你成為電影封面主角，雖然現在只有二部，期待他日後的更新
推薦一個不錯的Unity教學網站Unity Tutorials，裡面有七篇寫給Flash開發者的教學影片，有興趣的朋友可以看看
Mate是給Flex開發的Framework，跟Cairngorm一樣只能在Flex下運作，比較特別的是Mata以mxml標籤撰寫，特有的EventMap跟Injector可在不破壞原架構的情況下注入行為，屬於非侵入式的框架。
一、架構
官網並沒有特別解釋要分成那幾類，這是按照官網範例的分類法，給大家參考
business：放置資料管理的ModelManager
events：放置自定事件
maps：放置EventMap跟ModelMap，Mate的主要核心
views：放置要顯示的UI Component
vos：放置Value Object
最外層為程式的進入點（Main.mxml）
二、流程
官網有完整的流程圖，這裡只挑幾個筆者覺得常用到的來講
先看一下mate的雙向流程圖
如上圖，View透過事件驅動EventMap，在Mate裡所有的事件Bubble要設為true，讓上層元件可聽到事件，EventMap就是用來集中管理事件的地方，透過EventMap可呼叫要存取的網路服務或Manager，且可使用ResponseAnnouncer回傳訊息給呼叫者，不必再特別調用事件，當然想調用事件也可以，使用Mate的EventAnnouncer，可通知給對事件給感興趣的View。
使用Mate Adapter
除了使用EventAnnouncer及ResponseAnnouncer回應訊息外，還可透過ModelManager自動更新給View，這裡就要用到Flex的強項：DataBinding，我們可在程式初始時挷定View跟ModelManager的Bindable資料（例如ArrayCollection），在透過EventMap改變ModelManager時，由於是DataBinding，我們可不用送事件給View，Binding會自動送PropertyChange事件，一些Flex元件（像DataGrid）會自己更新，簡化了原本MVC煩雜的訊息溝通，這也是使用Mate的好處。
第一部分先簡單介紹架構與流程，下一篇會使用範例來說明，如果大家對Mate的流程感興趣，可參考Kenshin's Flex Blog的Mate教學
Mate官網：http://mate.asfusion.com/
這應該Adobe今天最熱門的新聞
Flash Builder是Flex Builder 4（Gumbo）的正式名稱，以後Flex指的是Flex SDK，Flash Builder才是開發介面（IDE），這次的改名也是為了符合Adobe的Platform，開發工具是Flash、Flash Builder，語言才是Flex SDK跟Actionscript
今天趁熱就裝起來了，介面有許多的改變，左上的樹狀列表變成跟Java一樣，有package跟libery，libery可反查類別及方法，相當方便，中間多了data/service跟network monitor，Component也多了Flash Component及Flash Container，似乎還有許多的功能，繼續測試中
Flash Builder4：https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4
Catalyst 下載：http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashcatalyst
發表文章
所有留言
