Some folks had asked about drag-and-drop mechanism in as3isolib discussion group. While there’s no such feature built-in in the library, it’s not hard to write it yourself.

So here’s a super simple class that provides that mechanism, called DragManager. I borrowed the idea from Flex’s DragManager. Note that this class is really a simple one and it doesn’t respect “grid” so you’ll have to modify it if you want to use it in a grid-based isometric space. Trust me, it’s not too hard

Click to see the demo

And here’s the class:

package masputih.isometric.utils
{
	import as3isolib.core.IsoDisplayObject;
	import as3isolib.display.IsoView;
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;

	/**
	 * ...
	 * @author Anggie Bratadinata
	 */
	public class DragManager
	{

		private var _proxy:Sprite;
		private var _view:IsoView;
		private var _obj:IsoDisplayObject;

		public function drag(obj:IsoDisplayObject, view:IsoView):void
		{

			_view = view;
			_obj = obj;

			var bmp:Bitmap = new Bitmap(_obj.getRenderData().bitmapData)
			bmp.x = -_obj.length;
			bmp.y = -_obj.height;

			_proxy = new Sprite();
			_proxy.alpha = .5;
			_proxy.addChild(bmp);
			_proxy.addEventListener(Event.ENTER_FRAME, onProxyEnterFrame);
			_view.addChild(_proxy);

			_view.stage.addEventListener(MouseEvent.MOUSE_UP, drop);
		}

		private function onProxyEnterFrame(e:Event):void
		{
			if (_proxy != null)
			{
				_proxy.x = _view.mouseX;
				_proxy.y = _view.mouseY;
			}

		}

		private function drop(e:Event = null):void
		{
			var p:Point = new Point(_proxy.x, _proxy.y);
			p = _view.localToIso(p);

			_obj.moveTo(p.x, p.y, 0);

			//clean up
			_view.removeChild(_proxy);
			_view.stage.removeEventListener(MouseEvent.MOUSE_UP, drop);
			_proxy.removeEventListener(Event.ENTER_FRAME, onProxyEnterFrame);
			_proxy = null

		}

		public function get obj():IsoDisplayObject { return _obj; }

		/**********************************************
		 * SINGLETON CTOR
		 **********************************************/

		private static var _instance:DragManager;
		public function DragManager(enf:SingletonEnforcer)
		{

		}
		public static function getInstance():DragManager{
			if(_instance == null) _instance = new DragManager(new SingletonEnforcer());
			return _instance;
		}

	}

}

class SingletonEnforcer{};

Sample Usage

package
{

	import as3isolib.core.IsoDisplayObject;
	import as3isolib.display.IsoView;
	import as3isolib.display.primitive.IsoBox;
	import as3isolib.display.primitive.IsoRectangle;
	import as3isolib.display.scene.IsoGrid;
	import as3isolib.display.scene.IsoScene;
	import as3isolib.graphics.SolidColorFill;
	import eDpLib.events.ProxyEvent;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import masputih.isometric.utils.DragManager;

	/**
	 * Main class
	 * @author
	 */
	public class DDTest extends Sprite
	{

		public var view:IsoView;
		public var scene:IsoScene;
		public var grid:IsoGrid;

		public function DDTest()
		{
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}

		private function onAddedToStage(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

			view = new IsoView();
			view.setSize(600, 400);
			view.showBorder = true;

			addChild(view);

			scene = new IsoScene();
			view.addScene(scene);

			grid = new IsoGrid();
			grid.cellSize = 400;
			grid.setGridSize(1, 1);

			scene.addChild(grid);

			view.pan(0, 200);

			var obj1:IsoBox = new IsoBox();
			obj1.setSize(20, 20, 20);
			obj1.moveTo(100, 100, 0);
			obj1.fill = new SolidColorFill(0xFFFF80, 1);
			obj1.container.mouseChildren = false;
			obj1.addEventListener(MouseEvent.MOUSE_DOWN, onIsoObjMouseDown);

			var obj2:IsoRectangle = new IsoRectangle();
			obj2.setSize(20, 20,0);
			obj2.moveTo(200, 100, 0);
			obj2.fill = new SolidColorFill(0x0080FF, 1);
			obj2.container.mouseChildren = false;
			obj2.addEventListener(MouseEvent.MOUSE_DOWN, onIsoObjMouseDown);

			var obj3:IsoBox = new IsoBox();
			obj3.setSize(20, 40,30);
			obj3.moveTo(200, 200, 0);
			obj3.fill = new SolidColorFill(0x800040, 1);
			obj3.container.mouseChildren = false;
			obj3.addEventListener(MouseEvent.MOUSE_DOWN, onIsoObjMouseDown);

			scene.addChild(obj1);
			scene.addChild(obj2);
			scene.addChild(obj3);

			stage.addEventListener(Event.ENTER_FRAME, render);
		}

		private function onIsoObjMouseDown(e:ProxyEvent):void
		{
			DragManager.getInstance().drag(IsoDisplayObject(e.target), view);
		}

		private function render(e:Event):void
		{
			view.render(true);
		}

	}

}

Hope you like it!

Here’s a class to paginate an Array with convenient functions like pageUp(), pageDown(), peek(), etc.

package
{

	/**
	 *
	 * @author Anggie Bratadinata
	 */
	public class ArrayPaginator
	{
		private var _target:Array;
		private var _pageSize:int = 0;
		private var _totalPage:int = 0;

		private var _pageIndex:int = 0;
		private var _currentPage:Array;
		private var _targetLength:int;
		private var _pagedArray:Array;

		public function ArrayPaginator()
		{

		}

		/**
		 * Build a paginated array using a copy of the target array and return the first page.
		 * Later modifications to the target array will not be reflected unless this function is revoked.
		 *
		 * @param	target				The array to be paginated
		 * @param	pageSize			The number of items in each page
		 * @param 	forceFullContent	Force all pages to contain equal number of items
		 * @param	pageFiller			Object to fill a page that has less number of items than the intended page size. Ignored if forceFullContent is false.
		 * @return
		 */
		public function paginate(target:Array, pageSize:int = 1, forceFullContent:Boolean = false, pageFiller:* = null):Array
		{

			if (pageSize < 1) {
				throw new ArgumentError("pageSize can't be less than 1");
				return;
			}

			_target = target.concat();
			_targetLength = _target.length;
			_pageSize = pageSize;

			_totalPage = Math.ceil(_targetLength / _pageSize);

			if (forceFullContent)
			{
				var fillCount:int = (_totalPage * _pageSize) - _targetLength;

				if (fillCount > 0)
				{
					for (var j:int = 0; j < fillCount; j++)
					{
						_target.push(pageFiller);
					}

					_targetLength = _target.length;
				}
			}

			_pagedArray = [];

			for (var i:int = 0; i < _targetLength; i = i + _pageSize )
			{
				var sub:Array = _target.slice(i, i + _pageSize);
				_pagedArray.push(sub);
			}

			return firstPage;

		}

		/**
		 * Go to a page and get its content.
		 *
		 * @param	pageNum		Page number from 1 to total page.
		 * @return 	Array Page content
		 */
		public function getPage(pageNum:int):Array
		{
			var idx:int = pageNum - 1;
			var a:Array = _pagedArray[idx];

			if (a != null)
			{
				_pageIndex = idx;
				_currentPage = a;
			}

			return a;
		}

		/**
		 * Go to the next page and get its content.
		 * @return Array
		 */
		public function pageUp():Array
		{
			if (currentPageNum == _totalPage)
			{
				return currentPage;
			}

			return getPage(currentPageNum + 1);
		};

		/**
		 * Go to the previous page and get its content.
		 * @return Array
		 */
		public function pageDown():Array
		{
			if (currentPageNum == 1)
			{
				return currentPage;
			}

			return getPage(currentPageNum - 1);
		};

		/**
		 * Get the content of the last page without moving the page pointer.
		 * @return Array
		 */
		public function peekLast():Array
		{
			return peekPage(_totalPage);
		}

		/**
		 * Get the content of the first page without moving the page pointer.
		 * @return Array
		 */
		public function peekFirst():Array
		{
			return peekPage(1);
		}

		/**
		 * Get the content of the next page without moving the page pointer.
		 * @return Array
		 */
		public function peekUp():Array
		{
			return peekPage(currentPageNum + 1);
		}

		/**
		 * Get the content of the previous page without moving the page pointer.
		 * @return Array
		 */
		public function peekDown():Array
		{
			return peekPage(currentPageNum - 1);
		}

		/**
		 * Get the content of a page without moving the page pointer.
		 * @param 	pageNum  Page number from 1 to total page
		 * @return Array
		 */
		public function peekPage(pageNum:int):Array
		{
			var p:Array = _pagedArray[pageNum - 1];
			return p;
		}

		/**
		 * Get all pages.
		 * @return Array
		 */
		public function get pages():Array
		{
			return _pagedArray;
		}

		/**
		 * Go to the last page and get the content
		 * @return Array The page content
		 */
		public function get lastPage():Array
		{
			return getPage(_totalPage);
		};

		/**
		 * Go to the first page and get the content
		 * @return Array The page content
		 */
		public function get firstPage():Array
		{
			return getPage(1);
		};

		/**
		 * Get the current page number
		 */
		public function get currentPageNum():int
		{
			return _pageIndex + 1;
		}

		/**
		 * Get the total number of pages.
		 */
		public function get totalPage():int
		{
			return _totalPage;
		}

		/**
		 * Get the content of the current page.
		 * @return Array
		 */
		public function get currentPage():Array
		{
			return _currentPage;
		}

		/**
		 * True if the current page is the last page
		 */
		public function get isLast():Boolean
		{
			return (currentPageNum == _totalPage);
		}

		/**
		 * True if the current page is the first page
		 */
		public function get isFirst():Boolean
		{
			return (currentPageNum == 1);
		}
	}

}

Sample Usage

private function onAddedToStage(e:Event):void
{
	removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

	target = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
	paginator = new ArrayPaginator();
	trace("first page " + paginator.paginate(target, 4));
	trace("num of pages " + paginator.totalPage);

	timer = new Timer(3000);
	timer.addEventListener(TimerEvent.TIMER, onTimer);
	timer.start();
}

public var isUp:Boolean = true;

private function onTimer(e:TimerEvent):void
{
	if (paginator.isFirst) {
		isUp = true;
	} else	if(paginator.isLast) {
		isUp = false;
	}

	if (isUp) {
		paginator.pageUp() ;
	}else {
		paginator.pageDown();
	}
	trace('/-------/');
	trace("page " + paginator.currentPageNum + " : " + paginator.currentPage.join(','));
	trace("next page " + paginator.peekUp());
	trace("prev page " + paginator.peekDown());
}

A free flash gallery with randomly distributed pictures. Written in pure AS3. Compiled with Flex SDK.

• Uses an XML to specify image URLs and caption text
• Click on an empty space to randomly redistribute the pictures.
• Click on a picture to see it in its real size. Click on it again to scale it down.
• Pictures are draggable.

The main code is free to use for any purpose. No warranty. Feel free to ask if you have any questions.

Note that this application uses 3rd-party libraries (TweenLite and MonsterDebugger). Please consult their licenses as well.

Click to view the demo

Download

→ Scattered Gallery

GA for Flash adalah library AS3 yang bisa kita gunakan untuk mengumpulkan data untuk Google Analytics. Library ini sangat gampang dipakai. Kita tinggal membuat objek Tracker dan mengeksekusi tracker.trackPageView(/data/yang/ingin/di/kirim/ke/ga).

Berikut ini contoh GA report yang menampilkan hasil tracking mp3 yang dimainkan oleh sebuah aplikasi mp3 player.

Contoh code nya:

private function init(e:Event):void
{
	removeChild(preloader);

	if (ExternalInterface.available) {
		tracker = new GATracker( this, "window.pageTracker", "Bridge", true );
	}

	mp3Player.addEventListener("songComplete", onSongComplete);
}

private function onSongComplete(e:Event):void
{

	var song:Object = mp3Player.song;
	try {
		tracker.trackPageview('/'+song.artist + '/' + song.album + '/' + song.name);
	}catch (e:Error) { };
}

Dalam artikel kali ini saya jelaskan cara bekerja dengan FlashDevelop, Flex SDK, dan Flash CS3/4. Flex SDK saya pakai untuk kompilasi proyek karena jauh lebih cepat daripada compiler bawaan Flash IDE.

Di sini, Flash IDE saya gunakan untuk membuat library berisi objek visual, atau biasa disebut asset library. SWF yg saya buat dengan Flash IDE hanya berisi sedikit kode atau malah nggak ada kode sama sekali. Kode program utama saya buat dengan FlashDevelop dan saya kompilasi dengan Flex compiler.

Ada 2 cara untuk menggabungkan asset library dengan program utama yaitu:

1. Dengan teknik embedding dimana SWF yang berisi aset dikompilasi jadi satu dengan program utama
2. Runtime asset dimana SWF yang berisi aset dibuat terpisah dari program utama dan nanti dimuat pada saat program dijalankan.

Kalo Anda ingin nyoba sendiri, pastikan dulu instalasi FlashDevelop sudah benar & path Flex SDK sudah diset melalui menu Tools->Program Settings->AS3 Context.

Berikut ini direktori project yang saya buat di FlashDevelop.

Embedding

Di dalam direktori /embedded/ saya buat sebuah file .fla yang berisi asset yang akan saya gunakan.

Ada dua MovieClip di dalamnya, masing-masing punya dynamic textfield dengan nama instance labelTxt. Keduanya juga saya beri linkage name sesuai dengan nama symbolnya.

Setelah saya publish file embed-library.fla, FlashDevelop bisa mengenali linkage kedua symbol tersebut.

Kemudian saya buat class BlueSquare dengan labelTxt bertipe flash.text.TextField, sama persis dengan instance yang saya buat di Flash.

Saya letakkan cursor di atas baris public class ... , lalu saya klik kanan simbol Blue di project folder dan klik Insert into document. Hasilnya seperti berikut:

Insert into Document

Kemudian saya buat juga class GreenSquare dengan langkah-langkah sama seperti di atas, tapi yang di–embed adalah simbol Green.

Saya buat instance kedua class tersebut di Main.as.

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

	public class Main extends Sprite{

		public function Main():void{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point

			var blue:BlueSquare = new BlueSquare();
			blue.labelTxt.text = "I'm blue";
			addChild(blue);

			var green:GreenSquare = new GreenSquare();
			green.x = blue.width + 10;
			green.labelTxt.text = "I'm green";
			addChild(green);

		}
	}
}

Hasilnya:

Test Movie di FD

Runtime Asset

Saya buat file xtlibrary.fla di dalam folder /src/ di FD. SWF hasil kompilasi file ini berisi aset yang akan saya muat pada saat runtime.

Di dalam file ini ada dua simbol mirip dengan file embed-library.fla, tapi berwarna merah dan hitam. Masing-masing simbol saya hubungkan dengan class di dalam folder /flashlib/ — sering disebut Bound Class. Karena kedua class ini berhubungan dengan simbol di .fla, maka saya nggak perlu menggunakan tag [Embed ...] seperti contoh sebelumnya.

Berikut ini seting linkage dari kedua simbol tersebut.

Export Setting

Linkage dan Bound Class

Supaya simbol tersebut bisa dikenali oleh SWF utama, saya harus meletakkan keduanya di stage dan memberinya nama instance seperti ini:

Stage Instance

File xtlibrary.fla saya publish ke dalam folder di mana SWF utama dari project ini ( fd.swf ) berada yaitu di folder /bin/. Hasilnya seperti gambar berikut:

Library SWF

Saya tambahkan beberapa baris kode ke dalam Main class untuk memuat file xtlibrary.swf dan mengakses simbol di atas serta membuat objek Black & Red lalu menampilkannya ( mulai baris 36 ).

package
{
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.system.ApplicationDomain;
	import flash.system.LoaderContext;
	import flash.utils.getDefinitionByName;
	import flash.utils.getQualifiedClassName;
	import flashlib.BlackSquare;
	import flashlib.RedSquare;

	public class Main extends Sprite{

		public function Main():void{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point

			var blue:BlueSquare = new BlueSquare();
			blue.labelTxt.text = "I'm blue";
			addChild(blue);

			var green:GreenSquare = new GreenSquare();
			green.x = blue.width + 10;
			green.labelTxt.text = "I'm green";
			addChild(green);

			var ctx:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);

			var ldr:Loader = new Loader();
			ldr.contentLoaderInfo.addEventListener(Event.INIT, onLoadInit);
			ldr.load(new URLRequest("xtlibrary.swf"), ctx);

		}

		private function onLoadInit(e:Event):void {

			var assetLib:MovieClip = LoaderInfo(e.target).content as MovieClip;

			var redClassName:String = getQualifiedClassName(assetLib['red']);
			var redClassRef:* = getDefinitionByName(redClassName);

			var red:RedSquare = new redClassRef() as RedSquare;
			red.labelTxt.text = "I'm red";
			red.y = 100;
			addChild(red);

			var blackClassName:String = getQualifiedClassName(assetLib['black']);
			var blackClassRef:* = getDefinitionByName(blackClassName);

			var black:BlackSquare = new blackClassRef() as BlackSquare;
			black.labelTxt.text = "I'm black";
			black.y = 100;
			black.x = red.width + 10;
			addChild(black);
		}
	}
}

Di dalam kode di atas, saya mengakses instance kedua simbol melalui nama stage instance mereka seperti ini :

assetLib['red']
assetLib['black']

Hasil test movie :

Test Movie dgn library eksternal

Oke, gitu cara saya kerja kalo saya perlu pakai aset yang dibuat dengan Flash.
Semoga bermanfaat. Contoh projectnya bisa diunduh di bawah ini :

Berikut ini contoh kode untuk membuat scrollbar komponen fl.controls.TextArea otomatis bergerak ke bawah kalo ada penambahan teks sehingga baris-baris terbaru selalu kelihatan.

package  {

	import fl.controls.Button;
	import fl.controls.TextArea;
	import fl.controls.TextInput;
	import fl.events.ComponentEvent;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class Main extends MovieClip {

		public var console:TextArea;
		public var input:TextInput

		public function Main() {

			console.text = "A\nB\nC\nD\nE\nF\nG\nH\nI\nJ\nK\n";

			console.addEventListener(Event.RENDER, updateScrollPosition);

			input.addEventListener(ComponentEvent.ENTER, addText);

		}

		private function updateScrollPosition(e:Event):void {
			console.verticalScrollPosition = console.maxVerticalScrollPosition;
		}

		private function addText(e:Event):void {
			if (input.length > 0 ) {
				console.appendText(input.text + "\n");
			}
		}

	}

}

Factory Pattern adalah pattern yang digunakan untuk memisahkan (decouple) proses pembuatan/instansiasi sebuah objek (produk) dari objek lain (klien) yang menggunakannya. Tujuannya supaya perubahan pada product class nggak menyebabkan kita harus mengubah kode pada client. Paling nggak akibat dari perubahan itu bisa diminimalisir. Dan juga supaya si factory bisa digunakan oleh banyak class.

Factory adalah objek yang berfungsi membuat objek lain (produk). Class ini menyembunyikan proses pembuatan produk dari klien sehingga klien nggak perlu tahu proses pembuatannya, bahkan klien juga nggak perlu tahu nama class dari produk yang dia minta.

Mungkin kita sering menulis function seperti ini:

var coffee:AbstractCoffee = createCoffee("xxx");
function createCoffee(type:String):Coffee{
        if(type == "xxx" ) return new XXXCoffee();
        if(type == "yyy" ) return new YYYCoffee();
        if(type == "zzz" ) return new ZZZCoffee();
        return null;
}

Cukup bagus untuk proyek kecil. Tapi coba bayangin kalo kita punya 20 class yang harus bisa bikin kopi dan semuanya harus bisa ditukar-tukar saat run-time plus si produk kemungkinan besar bakal berubah. Repot. Di sini gunanya Factory Pattern.

Factory Pattern memungkinkan instansiasi sebuah produk didelegasikan ke subclass (concrete factory) dari base-class yang bersifat generik (abstrak) . Keuntungannya adalah si klien hanya perlu tau generik classnya, jadi concrete factory bisa ditukar-tukar secara dinamis (polymorfis) tergantung produk apa yang dibutuhkan dan klien nggak perlu tau detil pembuatan produk.

Diagram Dasar Factory

Ada 2 varian factory pattern yaitu :

1. Factory Method
2. Abstract Factory

Factory Method (FM)

Define an interface for creating an object, but let the subclasses decide which class to instantiate. The Factory method lets a class defer instantiation to subclasses. (wikipedia)

Factory Method is similar to Abstract Factory but without the emphasis on families. (sourcemaking.com)

Factory Method

Dalam Factory Method, setiap concrete factory bertugas membuat satu produk. Jadi ada pemetaaan 1–1 antara factory dan produk yang dibuatnya. Klien menggunakan abstract factory untuk membuat objek tapi jenis objek itu ditentukan oleh concrete factory yang dipilih.

Contoh:

public class Main extends Sprite{

	public var factory:AbstractFactory;
	public var product:AbstractProduct;

	public function Main():void{

		factory = new ABCFactory();
		product = factory.createProduct();

		factory = new DEFFactory();
		product = factory.createProduct();

		factory = new XYZFactory();
		product = factory.createProduct();

	}
}

//abstract factory
public class AbstractFactory {

	public function AbstractFactory() {}

	public function createProduct():AbstractProduct {
		throw new IllegalOperationError("Abstract method. Must be implemented in subclass");
		return null;
	}

}

//abstract product
public class AbstractProduct {
	public function AbstractProduct() {}
}

//concrete factories
public class ABCFactory extends AbstractFactory {
	override public function createProduct():AbstractProduct {
		return new ProductABC();
	}
}
public class DEFFactory extends AbstractFactory {
	override public function createProduct():AbstractProduct {
		return new ProductDEF();
	}
}

//concrete products
public class ProductABC extends AbstractProduct{
	public function ProductABC() {
		trace("ProductABC created");
	}
}

public class ProductDEF extends AbstractProduct {
	public function ProductDEF() {
		trace("ProductDEF created");
	}
}

Output:

ProductABC created
ProductDEF created

Dalam contoh di atas, kalo class ProductABC berubah, misalnya konstruktornya harus kita beri parameter “id”, kita nggak perlu utak-atik class Main. Cukup kita modifikasi ABCFactory. Contohnya gini :

public class ProductABC extends AbstractProduct{
	public function ProductABC(id:String) {
		trace("ProductABC created with id " + id);
	}
}

public class ABCFactory extends AbstractFactory {
	override public function createProduct():AbstractProduct {
		var id:String = String(Math.round(Math.random() * 10));
		return new ProductABC(id);
	}
}

ProductABC created with id 8
ProductDEF created

Abstract Factory (AF)

The intent in employing the pattern is to insulate the creation of objects from their usage. This allows for new derived types to be introduced with no change to the code that uses the base class. (wikipedia)

Abstract Factory emphasizes a family of product objects. (sourcemaking.com)

Abstract Factory

Perbedaan utama antara Abstract Factory dengan Factory Method adalah dalam pemetaan antara factory dengan produk. Dalam AF, satu factory bisa membuat banyak produk yang sekelompok.

Biar lebih gampang dipahami, saya buat aplikasi sederhana berikut ini.

Demo : Warung Factory

Click to see the demo

Class Diagram

Factory

package factory {

	import product.AbstractProduct;
	import flash.errors.IllegalOperationError;

	public class AbstractFactory {

		public function AbstractFactory(name:String) {
			trace("Pesan makanan/minuman di " + name);
		}

		public function createProduct(type:String):AbstractProduct {
			throw new IllegalOperationError("Abstract method. Must be implemented in subclass.");
		}

		public function getProducts():Array {
			throw new IllegalOperationError("Abstract method. Must be implemented in subclass.");
		}

	}

}

Berikut ini turunannya, yaitu concrete factory yang akan membuat produk berdasarkan pilihan menu.

//WarungBuTini.as
package factory {
	import product.AbstractProduct;
	import product.NasiRawon;
	import product.KopiSusu;
	import product.SodaGembira;

	public class WarungBuTini extends AbstractFactory{

		public static const NAME:String = "Warung Bu Tini";

		public function WarungBuTini() {
			super(NAME);
		}

		override public function createProduct(type:String):AbstractProduct {

			if (type == SodaGembira.NAME) return new SodaGembira(NAME,"4500");
			if (type == NasiRawon.NAME) return new NasiRawon(NAME, "8000");
			if (type == KopiSusu.NAME) return new KopiSusu(NAME, "6000");

			throw Error("Invalid product type");
			return null;
		}

		override public function getProducts():Array {
			return [SodaGembira.NAME,NasiRawon.NAME,KopiSusu.NAME];
		}

	}

}

//DepotAgung.as
package factory {
	import product.AbstractProduct;
	import product.NasiGoreng;
	import product.PangsitMie;
	import product.SodaGembira;

	public class DepotAgung extends AbstractFactory{

		public static const NAME:String = "Depot Agung";

		public function DepotAgung() {
			super(NAME);
		}

		override public function createProduct(type:String):AbstractProduct {
			if (type == NasiGoreng.NAME) return new NasiGoreng(NAME, "5500");
			if (type == PangsitMie.NAME) return new PangsitMie(NAME, "4000");
			if (type == SodaGembira.NAME) return new SodaGembira(NAME, "3000");

			throw Error("Invalid product type");
			return null;
		}

		override public function getProducts():Array {
			return [NasiGoreng.NAME,PangsitMie.NAME,SodaGembira.NAME];
		}

	}

}

Product

package product {
	import flash.display.Sprite;
	import flash.text.TextField;

	public class AbstractProduct extends Sprite{

		//timeline objects
		public var productName:TextField;
		public var price:TextField;
		public var factoryName:TextField;

		public function AbstractProduct(productName:String,price:String,factoryName:String) {
			this.productName.text = productName;
			this.price.text = "Rp " + price;
			this.factoryName.text = factoryName;
			trace("Beli " + productName + " di " + factoryName);
		}

		public function pay():void{
			trace("Bayar " + price.text + " ke " + factoryName.text);
		}

	}

}

Concrete Factory akan membuat objek dari concrete product dan mengirimkannya ke klien ( Main )
Berikut ini concrete product nya

//NasiGoreng.as
package product {

	[Embed(source='../assets/assets.swf', symbol='NasGor')]
	public class NasiGoreng extends AbstractProduct {

		public static const NAME:String = "Nasi Goreng";

		public function NasiGoreng(factoryName:String,price:String = "7000") {
			super(NAME,price,factoryName)
		}

	}

}

//SodaGembira.as
package product {

	[Embed(source='../assets/assets.swf', symbol='Sogem')]
	public class SodaGembira extends AbstractProduct {

		public static const NAME:String = "Soda Gembira";

		public function SodaGembira(factoryName:String,price:String = "5000") {
			super(NAME, price, factoryName);
		}

	}

}

Main class

package
{
	import factory.AbstractFactory;
	import factory.DepotAgung;
	import factory.WarungBuTini;
	import factory.WarungPakJaja;
	import product.AbstractProduct;
	import fl.controls.ComboBox;
	import fl.controls.List;
	import flash.display.Sprite;
	import flash.events.Event;

	public class Main extends Sprite{

		public function Main():void{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private var _productPic:Sprite;
		private var _selector:FactorySelector;

		//main class hanya pakai base/abstract class, bukan concrete class
		private var _factory:AbstractFactory;
		private var _product:AbstractProduct;

		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);

			//_factory & _products _selector
			_selector = new FactorySelector();
			addChild(_selector);

			_selector.factories.addEventListener(Event.CHANGE, selectFactory);
			_selector.productList.addEventListener(Event.CHANGE, onProductChange);

			_selector.factoryData = [WarungBuTini.NAME, DepotAgung.NAME];

			//product picture holder
			_productPic = new Sprite();
			_productPic.x = 10;
			_productPic.y = _selector.height + 20;
			addChild(_productPic);

		}

//----------------------------------------------------------- FACTORY SELECTION

		private function selectFactory(e:Event = null):void {

			switch(_selector.factories.selectedLabel) {
				case WarungBuTini.NAME:
					_factory = new WarungBuTini();
				break;
				case DepotAgung.NAME:
					_factory = new DepotAgung();
				break;
			}

			_selector.productData = _factory.getProducts();
		}

//----------------------------------------------------------- PRODUCT SELECTION

		private function onProductChange(e:Event):void {
			var type:String = _selector.productList.itemToLabel(_selector.productList.selectedItem);
			_product = _factory.createProduct(type);
			_product.pay();

			setPicture(_product);
		}

//----------------------------------------------------------- DISPLAY PRODUCT IMAGE		

		private function setPicture(product:AbstractProduct):void {

			var i:int = _productPic.numChildren;
			while (i--) {
				_productPic.removeChildAt(i);
			}

			_productPic.addChild(product);
		}
	}
}

Tambah Factory & Produk Baru

Kalo kita ingin buat factory baru, langkah-langkahnya adalah :

1. Buat sub-class dari AbstractFactory
2. Sub-class itu harus punya konstanta bernama NAME yang dipakai untuk menampilkan nama factory di dalam combobox
3. Override createProduct() dan getProducts()
4. Tambahkan ke daftar factory

   _selector.factoryData = [...,..., FactoryBaru.NAME];

5. Instansiasi factory di dalam selectFactory()

   switch(_selector.factories.selectedLabel) {
   	....
   	case FactoryBaru.NAME:
   		_factory = new FactoryBaru();
   	break;
   }
   

Untuk bikin produk baru:

1. Buat subclass dari AbstractProduct dengan parameterized constructor dan konstanta NAME

   
   public static const NAME:String = "Produk Baru";
   public function ProdukBaru(factoryName:String,price:String = "7000") {
   	super(NAME,price,factoryName)
   }
   
   

2. Daftarkan nama produk di dalam factory pembuatnya, lihat getProducts()

   override public function getProducts():Array {
   	return [...,...,ProdukBaru.NAME];
   }
   

3. Instansiasi produk di dalam createProduct()

   override public function createProduct(type:String):AbstractProduct {
   	...
   	if (type == ProdukBaru.NAME) return new ProdukBaru(NAME,"1200");
   	...
   }

Contoh:

Produk baru : Kopi Susu

[Embed(source='../assets/assets.swf', symbol='Tarik')]
public class KopiSusu extends AbstractProduct {

	public static const NAME:String = "Kopi Susu";

//----------------------------------------------------------- INIT

	public function KopiSusu(factoryName:String,price:String = "3500") {
		super(NAME, price, factoryName);

	}

}

Factory baru : Warung Pak Jaja. Salah satu dagangannya adalah Kopi Susu.

public class WarungPakJaja extends AbstractFactory {

	public static const NAME:String = "Warung Pak Jaja";

//----------------------------------------------------------- INIT

	public function WarungPakJaja() {
		super(NAME);
	}

	override public function createProduct(type:String):AbstractProduct {

		if (type == KopiSusu.NAME) return new KopiSusu(NAME,"1200");
		if (type == SodaGembira.NAME) return new SodaGembira(NAME, "3000");
		if (type == NasiGoreng.NAME) return new NasiGoreng(NAME, "7500");

		throw Error("Invalid product type");
		return null;
	}

	override public function getProducts():Array {
		return [KopiSusu.NAME,SodaGembira.NAME,NasiGoreng.NAME];
	}

}

Tambahkan Warung Pak Jaja ke dalam Main class :

private function init(e:Event = null):void {
	removeEventListener(Event.ADDED_TO_STAGE, init);

	//_factory & _products _selector
	_selector = new FactorySelector();
	addChild(_selector);

	_selector.factories.addEventListener(Event.CHANGE, selectFactory);
	_selector.productList.addEventListener(Event.CHANGE, onProductChange);

	_selector.factoryData = [WarungBuTini.NAME, WarungPakJaja.NAME, DepotAgung.NAME];

	//product picture holder
	_productPic = new Sprite();
	_productPic.x = 10;
	_productPic.y = _selector.height + 20;
	addChild(_productPic);

}

//----------------------------------------------------------- FACTORY SELECTION

private function selectFactory(e:Event = null):void {

	switch(_selector.factories.selectedLabel) {
		case WarungPakJaja.NAME:
			_factory = new WarungPakJaja();
		break;
		case WarungBuTini.NAME:
			_factory = new WarungBuTini();
		break;
		case DepotAgung.NAME:
			_factory = new DepotAgung();
		break;
	}

	_selector.productData = _factory.getProducts();
}

Di output panel :

Pesan makanan/minuman di Warung Bu Tini
Beli Kopi Susu di Warung Bu Tini
Bayar Rp 6000 ke Warung Bu Tini
Pesan makanan/minuman di Depot Agung
Beli Pangsit Mie di Depot Agung
Bayar Rp 4000 ke Depot Agung
Pesan makanan/minuman di Warung Pak Jaja
Beli Soda Gembira di Warung Pak Jaja
Bayar Rp 3000 ke Warung Pak Jaja
Beli Kopi Susu di Warung Pak Jaja
Bayar Rp 1200 ke Warung Pak Jaja

Di dalam arsip project file di atas, saya ada banyak produk yang bisa Anda pakai untuk utak atik.

Oke, sekian artikel tentang Factory Method & Abstract Factory. Mudah-mudahan bermanfaat. Kalo nggak ngerti silakan tanya.

Links

• Project file : → AbstractFactory.rar
• sourcemaking.com
• www.as3dp.com

Selama saya berkarir sebagai developer Flash dari taun 2004-an, sudah ribuan baris kode dari puluhan aplikasi Flash yang saya baca. Banyak yang bagus dan gampang dipahami, banyak juga yang njelimet & ruwet mirip pangsit mie. Banyak kasus saya temui waktu saya menginterview pelamar di Trippertlabs dimana pelamar yang portfolionya luar biasa bagus, ternyata kalo nulis kode luar biasa jelek ( kebetulan posisi saya adalah Senior Developer jadi saya selalu kebagian giliran pertama untuk “menyiksa” pelamar ).

Untuk keperluan internal Trippertlabs, saya pernah mempublikasikan tulisan berjudul Coding Guidelines for Flash & Flex Developers. Saya pikir ada baiknya kalo artikel itu saya tulis lagi di sini.

Mulai dari yang paling dasar yaitu indentasi.

Indentasi

Indentasi berperan penting dalam presentasi kode. Ada beberapa style yang digunakan yaitu:

1. K & R Brace Style

   
   function doSomething():void{
       var max:int = 10;
       for(var i:int = 0;i<max;i++){
           ...
       }
   }
   

2. Extended Brace Style

   
   function doSomething():void
   {
   	var max:int = 10;
   	for (var i:int = 0; i < max; i++)
   	{
   		...
   	}
   }
   

3. Indented Brace/Whitesmith Style

   
   function doSomething():void
              {
                   var max:int = 10;
                   for (var i:int = 0; i < max; i++)
                       {
                         ...
                       }
              }
   

4. Other Brace Style

   
   function giveNightmare():void
   {
   
   var max:int = 10;
   for (var i:int = 0; i < max; i++)
       {
           ...
       }
   }
   

Anda bisa pilih (a) atau (b) biarpun (b) lebih baik karena sesuai dengan konvensi umum di kalangan developer flash/flex & digunakan oleh Adobe. © dan (d) sebaiknya dijauhi kecuali kalo Anda ingin nulis kode yang bisa bikin orang begadang & sakit kepala.

Style manapun yang Anda pilih, (a) atau (b), Anda harus konsisten. Jangan ganti-ganti gaya. Kalo Anda bekerja dalam satu tim, ikuti konvensi yang disepakati bersama & semua anggota tim harus menggunakan style yang sama.

Penamaan

Penamaan yang amburadul biasanya dilakukan oleh koder baru yang masih cupu. Ini bisa dipahami karena pengalaman mereka masih sedikit atau mungkin nggak punya sama sekali. Dalam buku Code Craft : The Practice of Writing Excellent Code disebutkan aturan-aturan dalam penamaan, dua di antaranya yaitu :

Write your code to be read by humans. Easily. The compiler will be able to cope.

Favor clarity over brevity.

Variabel & Function

Waktu membuat variabel & function, pilih nama yang deskriptif. Sering saya lihat nama yang nggak jelas maksudnya apa kecuali kita baca comment & dalam beberapa kasus, lebih mirip password.

Contohnya gini:

//current index
var i:int;
//text before
var txt0:String;
//final text
var txt:String;

function fib():void{
    ...
}

Kode di atas lebih baik kalo ditulis dengan lebih jelas, misalnya :

//current index
var curIdx:int;
//initial text
var initTxt:String;
//final text
var finalTxt:String;

function fibonacci():void{
    ...
}

Khusus untuk nama variabel yang hanya terdiri dari satu huruf, Anda boleh menggunakannya untuk variabel yang bersifat lokal. Contohnya :

function multiplyByFive(a:Number):Number{
    return a * 5;
}

Jangan menggunakannya untuk instance variable. Contoh :

var a:Number = 3;

function multiplyByFive():Number{
    return a * 5;
}

Kapitalisasi

Ada 4 macam skema penamaan variabel, function, dan class yang umum digunakan yaitu:

1. Camel Case, contoh : someVar, bookTitle
2. Proper Case, contoh : ApplicationModel, MainView
3. Uppercase, contoh : ENTER_FRAME, CLICK
4. Underscore, contoh : book_title, button_mc

Konvensi umum AS3 adalah menggunakan (a) untuk nama variabel dan function, (b) untuk nama class, dan © untuk konstanta. (d) banyak digunakan oleh developer yang menulis kode AS2, tapi praktek ini lebih banyak disebabkan oleh script editor bodoh bawaan Flash IDE yang nggak bisa menampilkan code hinting kecuali kalo nama variabel ditambah dengan singkatan tipe data tertentu, misalnya : myClip_mc. Praktek semacam ini udah ditinggalkan oleh developer AS3, apalagi sekarang sudah banyak code/text editor yang jauh lebih pintar daripada editor punya Flash IDE, misalnya FlashDevelop.

Komentar

Komentar adalah bagian kode yang sering diabaikan. Banyak developer yang sama sekali nggak nulis komentar biarpun kodenya rumit, ada yang nulis komentar terlalu panjang, ada juga yang nulis komentar sedikit tapi di bagian yang sebenarnya nggak butuh komentar. Contoh komentar yang nggak perlu :

//increment i
i++

//assign a to temp
temp = a

//call fibonacci
fibonacci()

Self-documenting Code

Untuk menulis komentar yang pas, nggak terlalu banyak/panjang, juga nggak terlalu sedikit ada baiknya kalo kita mulai dari menulis kode yang bisa menjelaskan dirinya sendiri tanpa kita perlu memberi komentar. Di buku Code Craft, teknik ini disebut self-documenting code, caranya adalah, kembali ke penamaan, menggunakan nama yang deskriptif. Contoh :

function onClickUploadButton(e:MouseEvent):void{ ... }

function loadVideoXML():void{ ... }

function onEnterFrame(e:Event):void { .. }

function loaderCompleteListener(e:Event):void{...}

function handleFault(e:FaultEvent):void{ ... }

function loadImage(e:Event = null):void { .. }

Baris terakhir dari contoh di atas adalah kasus spesial dimana sebuah function yang berperan sebagai event handler, bisa juga dieksekusi secara manual jadi kalo kita tambahkan “on” atau “Listener” malah membingungkan. Tiga baris di atasnya adalah skema penamaan event handler yang umum dipakai oleh developer Flash/Flex.

Setelah kita menulis self-documenting code selanjutnya kita cari function mana saja yang perlu kita masukkan ke dalam dokumentasi dan kita tambahkan komentar di sana.

Pencabangan

Pencabangan juga termasuk salah satu bagian kode yang sering bermasalah. Sebenarnya nggak ada aturan baku tentang pencabangan, tapi di sini saya sarankan jika Anda menggunakan if-else berkurung ( nested ) batasi kedalamanya sampai maksimal 3 level. Kalo lebih dari itu, pikirkan cara lain misalnya mengganti if-else dengan switch-case. Saya sendiri nggak begitu suka if-else yang lebih dari 2 level. Memang kelihatannya sepele, tapi kalo kode yang kita buat cukup rumit, kemungkinan besar kita bakal mumet kalo kita kembali utak atik kode lama setelah proyek selesai.

Class Jagoan

Developer yang baru menemukan jalan yang benar setelah tersesat di dunia prosedural ( timeline ) cenderung membuat kelas yang kadang disebut “Super Class” ( nggak ada hubungannya dengan super class di dalam hirarki OOP ). Super Class di sini adalah class yang bisa melakukan semua tugas, mulai inisialisasi, menangani user input, akses database, upload data, dan lain-lain. Class serba bisa. Di sini si developer sebetulnya tetap menulis kode secara prosedural biarpun bentuknya class. Baunya sih OOP, tapi rasanya tetap prosedural.

Untuk proyek kecil, sah-sah saja, nggak masalah. Tapi untuk proyek yang kompleks, praktek ini sebaiknya dihindari dan lebih baik kita buat class yang sesuai dengan konteks permasalahan yang dihadapi. Misalnya, untuk upload data, buat class yang berfungsi untuk upload data saja, nggak perlu menangani user input. Kalo upload dilakukan berdasar user input, buat dua class, satu untuk menghandel user input dan urusan upload, delegasikan ke class lain. Separation of concerns is a good thing.

Oke, sekian tulisan saya. Mudah-mudahan bermanfaat.

Referensi

Repost artikel yg sudah pernah saya posting di blog yang lama.

Kali ini saya jelaskan tentang cara membuat “struktur” MVC sederhana untuk menulis kode yang maintainable dengan memecah kode menjadi beberapa bagian berdasarkan fungsinya ( separation of concerns ).

Saya anggap Anda sudah cukup mengetahui dasar OOP dan mempraktekkannya, jadi saya nggak perlu menjelaskan lagi apa itu class, instance, static, getter/setter, dsb. Saya juga nggak menjelaskan apa itu custom events dan bagaimana cara membuat & menggunakannya karena sudah pernah saya jelaskan dalam artikel yang lain. Selain itu, Anda juga harus mengerti cara mendefinisikan & membuat custom class untuk objek di library.

Di sini saya membuat aplikasi sederhana berupa sebuah kotak yang posisinya bisa dikontrol oleh 4 tombol seperti berikut:

Design Patterns

Design patterns (DP) adalah sekumpulan solusi generik untuk masalah-masalah yang umum ditemui oleh para developer dalam membuat aplikasi. Pattern berarti pola, artinya DP bukan berupa kode, tetapi berupa panduan yang implementasinya terserah developer yang menggunakannya.

Info yang lebih lengkap bisa Anda baca di wikipedia.

Model-View-Controller

MVC adalah meta-pattern , artinya MVC bukan merupakan pattern yang berdiri sendiri tapi merupakan kumpulan dari beberapa pattern & dalam buku Head First Design Patterns , MVC dimasukkan dalam kelompok compound-pattern.

Pada prinsipnya, implementasi MVC membagi kode ke dalam 3 bagian yaitu:

• Model sebagai sumber data
• View sebagai representasi data dan user interface
• Controller yang berfungsi sebagai “otak” atau business logic yang memproses user input dan meng–update Model dan View ( kalau diperlukan ).

Apa keuntungan MVC ?

Sekilas MVC kelihatannya merepotkan karena kita harus menulis kode lebih banyak tapi keuntungannya adalah kode kita lebih maintainable karena kita bisa mengubah salah satu bagian tanpa harus mengubah bagian yang lain. Sebagai contoh, misalnya kita membuat aplikasi A yang memproses data berformat XML namun kemudian kita diharuskan menggunakan data berformat JSON. Dalam kasus seperti ini, kita cukup mengubah Model tanpa harus mengubah bagian yang lain.

MVC juga mempermudah debugging karena kita bisa memperkirakan bagian mana yang bermasalah tanpa harus membongkar seluruh kode yang sudah kita buat.

Jadi secara umum, keuntungan MVC jauh lebih besar daripada kerepotan yang ditimbulkannya. Di samping itu, kalo Anda nggak mau repot menulis berbaris-baris kode, mungkin menjadi programmer bukan profesi yang cocok buat Anda & sebaiknya Anda cari pekerjaan lain.

Struktur dasar

Di dalam direktori projek, saya buat 4 buah sub-direktori/package seperti gambar di bawah ini.

Direktori Project di FlashDevelop

Berikut ini diagram dari aplikasi yang saya buat.

Class Diagram

View & ViewEvent

Package view berisi class yang berhubungan dengan library symbol yaitu MainView dan ArrowButton. MainView bertugas menyiarkan ViewEvent jika salah satu tombol navigasi diklik. Event ini ditangkap oleh Controller yang kemudian meng-update Model. Selain itu MainView juga menampilkan posisi kotak kuning.

Kenapa saya membuat ViewEvent dan nggak membuat Controller yang langsung mendengarkan MouseEvent.CLICK yang disiarkan oleh tombol kontrol ? Karena saya ingin meminimalkan coupling antara MainView dan Controller sehingga jika saya perlu mengubah View, selama event yang disiarkannya tetap bertipe ViewEvent, saya nggak perlu mengubah Controller.

[js]
package simplemvc.view {

import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.text.TextField;
import simplemvc.events.ViewEvent;
import simplemvc.model.Model;

/**
* …
* @author Anggie Bratadinata
*/
public class MainView extends MovieClip {

//timeline objects
public var hero:MovieClip;
public var board:MovieClip;
public var leftBtn:ArrowButton;
public var rightBtn:ArrowButton;
public var upBtn:ArrowButton;
public var downBtn:ArrowButton;
public var positionTxt:TextField;

private var _model:Model = Model.getInstance();

//———————————————————– INIT

public function MainView() {

initButtonListener();

_model.addEventListener(Event.CHANGE, modelListener);

}

private function initButtonListener():void {
var i:int = 0;
while (i < numChildren) {
if (this.getChildAt(i) is ArrowButton) {
this.getChildAt(i).addEventListener(MouseEvent.CLICK, buttonListener);
}
i++;
}

}

private function buttonListener(e:MouseEvent):void {

switch(e.currentTarget) {
case leftBtn:
dispatchEvent(new ViewEvent(ViewEvent.MOVE_LEFT));
break;
case rightBtn:
dispatchEvent(new ViewEvent(ViewEvent.MOVE_RIGHT));
break;
case upBtn:
dispatchEvent(new ViewEvent(ViewEvent.MOVE_UP));
break;
case downBtn:
dispatchEvent(new ViewEvent(ViewEvent.MOVE_DOWN));
break;
}
}

private function modelListener(e:Event):void {

hero.x = _model.heroPos.x;
hero.y = _model.heroPos.y;

positionTxt.text = _model.heroPos.toString();

}

}

}

[/js]

[js]
package simplemvc.events {
import flash.events.Event;

/**
* …
* @author Anggie Bratadinata
*/
public class ViewEvent extends Event {

public static const MOVE_LEFT:String = “moveLeft”;
public static const MOVE_RIGHT:String = “moveRight”;
public static const MOVE_UP:String = “moveUp”;
public static const MOVE_DOWN:String = “moveDown”;

public function ViewEvent(type:String) {
super(type, true);
}

override public function clone():Event {
return new ViewEvent(type);
}

override public function toString():String {
return formatToString(“ViewEvent”, “type”, “bubbles”, “cancelable”, “eventPhase”);
}

}

}

[/js]

Model

Model adalah bagian dimana data berada. Untuk data yang bersifat global, kita bisa mengimplementasikan Singleton pattern. Singleton class hanya bisa diinstansiasi satu kali selama aplikasi berjalan. Umumnya, referensi ke instance dari Singleton diakses dengan memanggil static method getInstance().

Kalo kita bekerja bersama developer lain, kita bisa mencegah mereka menginstansiasi/membuat objek Singleton dengan menggunakan inner class yaitu class yang didefinisikan diluar package tetapi masih di dalam file yang sama.

Model saya gunakan untuk menyimpan data berupa posisi kotak kuning. Pada saat data berubah, Model akan men-dispatch Event.CHANGE yang didengarkan oleh MainView yang kemudian meng-update posisi kotak kuning.

[js]
package simplemvc.model {

import flash.events.Event;
import flash.events.EventDispatcher;
import flash.geom.Point;

/**
* …
* @author Anggie Bratadinata
*/
public class Model extends EventDispatcher {

public var heroHeight:Number = 0;
public var heroWidth:Number = 0;
//———————————————————– HERO VELOCITY

public var vx:Number = 10;
public var vy:Number = 10;

//———————————————————– HERO POSITION

private var _heroPos:Point = new Point();

public function get heroPos():Point { return _heroPos; }

public function set heroPos(value:Point):void {

if (value.x >= heroBounds.xMin && value.x <= heroBounds.xMax &&
value.y >= heroBounds.yMin && value.y <= heroBounds.yMax ) {

_heroPos = value;
dispatchEvent(new Event(Event.CHANGE));

}
}

public function moveDown():void {
heroPos = new Point(heroPos.x, heroPos.y + vy);
}

public function moveUp():void {
heroPos = new Point(heroPos.x, heroPos.y — vy);
}

public function moveLeft():void {
heroPos = new Point(heroPos.x — vx, heroPos.y);
}

public function moveRight():void {
heroPos = new Point(heroPos.x + vx, heroPos.y );
}

//———————————————————– HERO BOUNDS

private var _heroBounds:Object = {};

public function get heroBounds():Object { return _heroBounds; }

public function set heroBounds(value:Object):void {
//trace(value);
_heroBounds.xMin = value.x;
_heroBounds.xMax = value.x + value.width — heroWidth;
_heroBounds.yMin = value.y;
_heroBounds.yMax = value.y + value.height — heroHeight;

}

//———————————————————– INIT
private static var _instance:Model;
public function Model(enf:SingletonEnforcer) {}
public static function getInstance():Model {
if (_instance == null) _instance = new Model(new SingletonEnforcer());
return _instance;
}

}

}
//INNER CLASS
class SingletonEnforcer { };

[/js]

Controller

Controller mendengarkan ViewEvent yang disiarkan oleh MainView dan meng-update Model berdasarkan event tersebut.

[js]
package simplemvc.controller {
import flash.events.Event;
import flash.geom.Point;
import simplemvc.model.Model;
import simplemvc.view.*;
import simplemvc.events.*;

/**
* …
* @author Anggie Bratadinata
*/
public class Controller {

private var _model:Model = Model.getInstance();
private var _view:MainView;

//———————————————————– INIT

public function Controller(view:MainView) {

_view = view;

_model.heroHeight = _view.hero.height;
_model.heroWidth = _view.hero.width;
_model.heroBounds = _view.board.getBounds(_view);

_view.addEventListener(ViewEvent.MOVE_DOWN, viewListener);
_view.addEventListener(ViewEvent.MOVE_UP, viewListener);
_view.addEventListener(ViewEvent.MOVE_LEFT, viewListener);
_view.addEventListener(ViewEvent.MOVE_RIGHT, viewListener);

}

public function startUp():void {
_model.heroPos = new Point(0, 0);
}

private function viewListener(e:ViewEvent):void {

switch(e.type) {
case ViewEvent.MOVE_DOWN:
_model.moveDown();
break;
case ViewEvent.MOVE_LEFT:
_model.moveLeft();
break;
case ViewEvent.MOVE_RIGHT:
_model.moveRight();
break;
case ViewEvent.MOVE_UP:
_model.moveUp();
break;
}
}

}

}

[/js]

Document/Main Class

[js]
package {

import flash.display.MovieClip;
import simplemvc.controller.Controller;
import simplemvc.view.MainView;

/**
* …
* @author Anggie Bratadinata
*/
public class Main extends MovieClip {

public var mainView:MainView;
public var controller:Controller;

public function Main() {
controller = new Controller(mainView);
controller.startUp();
}

}

}

[/js]

Seperti Anda lihat, menulis kode dengan struktur MVC nggak terlalu sulit, hanya sedikit ngerepotin.

Download

simple-mvc-src.zip