製作動態載入 Theme，Part 2

上一篇介紹，以 Flash IDE 製作的 swf，被當作 Flex 的素材，以 css 的方式定義，並將 css 轉成 swf 讓 Flex 應用程式動態載入，程式可透過 css 取得 Class，動態建立視覺物件。
http://blog.ben.idv.tw/2010/05/flex-flash-theme.html

這篇，少掉 Flex 的架構 (雖然我是用 Flex Builder 的 ActionScript 專案在開發)，以 Flash IDE 製作的 swf 直接被當作動態載入的 Theme 資源，載入後直接由其中取出 Class，動態建立視覺物件。


首先，同樣先準備三個 FLA，結構必須相同，意思是 instance name 必須相同：







第二步驟，準備開發主程式，檔案架構如下圖所示：



與上一篇最大的不同，就在於這次因為沒有定義 css，所以不是採用 css 的方式來載入外部 Theme 資源，而是使用自定的 ThemeLoader 來載入，載入完成後的其它步驟就與上一篇相同。

ThemeDemo.as

package {
import flash.display.Sprite;
import flash.events.Event;

import ui.proxy.MC1Proxy;

import util.ThemeLoader;

[SWF(width="640", height="480")]
public class ThemeDemo extends Sprite
{
static public const Theme1Url:String = "asset/asset1.swf";
static public const Theme2Url:String = "asset/asset2.swf";
static public const Theme3Url:String = "asset/asset3.swf";

private var _mc1:Sprite;
private var _mc1proxy:MC1Proxy;

public function ThemeDemo()
{
ThemeLoader.getInstance().addEventListener(Event.CHANGE, onThemeLoader_change);

ThemeLoader.getInstance().load(ThemeDemo.Theme1Url);
}

private function onThemeLoader_change(e:Event):void{
if(_mc1!=null && _mc1.parent!=null)
_mc1.parent.removeChild(_mc1);

var Cls:Class = ThemeLoader.getInstance().getClass("ui.MC1");
if(Cls!=null){
_mc1 = new Cls() as Sprite;
this.addChild(_mc1);
}

if(_mc1proxy==null)
_mc1proxy = new MC1Proxy(_mc1);
else
_mc1proxy.updateView(_mc1);
}
}
}

MC1Proxy.as

package ui.proxy
{
import flash.display.SimpleButton;
import flash.display.Sprite;
import flash.events.MouseEvent;

import util.ThemeLoader;

public class MC1Proxy extends FlashUIComponentProxy
{
//child
private var _b1:SimpleButton;
private var _b2:SimpleButton;
private var _b3:SimpleButton;
private var _mcInner:Sprite;

//child proxy
private var _mcInnerProxy:MCInnerProxy;

public function MC1Proxy(view:Sprite)
{
super(view);
}

override protected function makeLink():void{
//child
_b1 = view.getChildByName("b1") as SimpleButton;
_b2 = view.getChildByName("b2") as SimpleButton;
_b3 = view.getChildByName("b3") as SimpleButton;
_mcInner = view.getChildByName("mcInner") as Sprite;

//child proxy;
if(_mcInnerProxy==null)
_mcInnerProxy = this.setChildProxy(_mcInner, MCInnerProxy) as MCInnerProxy;
else
_mcInnerProxy.updateView(_mcInner);

//child's event handler
_b1.addEventListener(MouseEvent.CLICK, onB1_click, false, 0, true);
_b2.addEventListener(MouseEvent.CLICK, onB2_click, false, 0, true);
_b3.addEventListener(MouseEvent.CLICK, onB3_click, false, 0, true);
}

private function onB1_click(e:MouseEvent):void{
_mcInnerProxy.msg = "click 1";
ThemeLoader.getInstance().load(ThemeDemo.Theme1Url);
}

private function onB2_click(e:MouseEvent):void{
_mcInnerProxy.msg = "click 2";
ThemeLoader.getInstance().load(ThemeDemo.Theme2Url);
}

private function onB3_click(e:MouseEvent):void{
_mcInnerProxy.msg = "click 3";
ThemeLoader.getInstance().load(ThemeDemo.Theme3Url);
}

}
}

MCInnerProxy.as

package ui.proxy
{
import flash.display.Sprite;
import flash.text.TextField;

public class MCInnerProxy extends FlashUIComponentProxy
{
//child
private var _txt:TextField;

//getter / setter
private var _msg:String = "";
public function get msg():String{return _msg;}
public function set msg(value:String):void{
if(_msg==value)
return;
_msg = value;
this.invalidateDisplayList();
}

public function MCInnerProxy(view:Sprite)
{
super(view);
}

override protected function makeLink():void{
//child
_txt = view.getChildByName("txt") as TextField;
}

override protected function updateDisplayList():void{
_txt.text = msg;
}

}
}

ThemeLoader.as

package util
{
import flash.events.Event;
import flash.events.EventDispatcher;

[Event(name="change", type="flash.events.Event")]
public class ThemeLoader extends EventDispatcher
{
static private var _instance:ThemeLoader;
static public function getInstance():ThemeLoader{
if(_instance==null)
_instance = new ThemeLoader;
return _instance;
}

private var _loader:ClassLoader = new ClassLoader();

public function load(url:String):void{
_loader.addEventListener(ClassLoader.CLASS_LOADED, onLoaded);
_loader.load(url);
}

private function onLoaded(e:Event):void{
this.dispatchEvent(new Event(Event.CHANGE));
}

public function getClass(className:String):Class{
if(_loader==null)
return null;
return _loader.getClass(className);
}
}
}

看 Demo