Alat yang perlu dipersiapkan:

1. Adobe Flash versi CS3/CS4/CS5

Pertama-tama kita buat new document pada flash, pilih yang actionscript 3.0. Kemudian buat sebuah kotak hijau(yang akan dijadikan movieclip nantinya) dan sebuah button, berikan nama untuk button misal tombol. Select pada kotak hijau, kemudian klik kanan, pilih Convert to symbol, maka akan muncul dialog seperti di bawah ini (tekan advance jika belum muncul seprti di bawah ini). gantilah nama simbol dengan nama hijau misalnya, untuk menjadikan sebuah movieClip yang bisa diambil dari library pada runtime maka berikan centang pada pilihan export for actionscript, kemudian ganti nama Class menjadi Hijau misalnya (nama Class boleh berbeda dengan nama symbol ). Kira-kira seperti ini skrinsutnya(screenshot):

Seperti inilah kira-kira tampilan export to symbol

Pilih OK.

Setelah itu hapus movieclip yg ada di stage. berikan kode ini pada timeline:

var nampak:Boolean=false;
var hijau_mc:Hijau = new Hijau();

tombol.addEventListener(MouseEvent.CLICK, handleClick);

function handleClick(e:MouseEvent):void {
	if (! nampak) {
		addChild(hijau_mc);
		nampak=true;
	} else {
		removeChild(hijau_mc);
		nampak=false;
	}
}

Ctrl+Enter.

ada yang blum jelas. atau kurang setuju silakan menulis comment

You can see the result here.

Comment, question, and suggestion are welcome.

Flex ialah framework open source untuk membangun dan mengembangkan aplikasi web yang kaya dan ekspresif yang dapat dipasang secara dengan keluaran yang tetap pada semua browser dan sistem operasi kebanyakan.

Untuk membuat aplikasi yang menggunakan adobe flex (seterusnya akan disebut flex saja), ada beberapa program yang bisa digunakan. Di antara program-program tersebut yang populer ialah:

• Adobe Flex Builder, commercial, Windows, Mac OS X.
• FDT, commercial, Windows, Mac OS X, Linux.
• FlashDevelop, free, open source, Windows.

Flex ditulis dalam dua bahasa yang pertama ialah mxml atau bahasa xml-nya flex, yang kedua ialah actionscript 3.0. Hasil compile-an flex ini ialah file berekstensi swf (biasa diucapkan swif dalam bahasa inggris) jadi program ini berjalan pada flash platform, flash player.

Meskipun sama-sama mengeluarkan file berekstensi swf Adobe Flash dan Adobe Flex memiliki perbedaan. Adobe Flash ditujukan untuk membuat animasi, sedangkan Flex ditujukan untuk membuat aplikasi. Jadilah judul website ini Flash Application Indonesia.

Flex framework dari adobe ini open source dan ada tambahan library closed source-nya, cobalah lihat di sini.

Terima Kasih.

Tulisan ini akan mengulas sedikit tentang penggunaan MVC pada flex. MVC (Model View Controller) ialah design pattern yang umum pada dunia software engineering. Teknik ini membantu memisahkan view, model, dan controller.

MVC: Pendahuluan

Suksesnya penggunaan Model View Controller (MVC) memisahkan business logic (controller) dari user interface, sehingga aplikasi mudah untuk diubah dan dikelola baik pada business logic-nya atau pada user interface-nya tanpa mempengaruhi satu sama lain.

Model
Model menggambarkan data dari aplikasi.

ViewMenyajikan model dalam bentuk yang dapat dimengerti manusia yang disebut User Interface.

Controller
Memuat business logic yang bertanggung jawab mengubah data pada model. Pada Web Application umumnya, page HTML (JSP/ASP) membentuk view, model digambarkan oleh data yang disimpan pada View State/Session/Database. Business Services (Controller) digunakan untuk berinteraksi dengan model dan memperbarui data.

Untuk lebih lengkapnya bisa baca di Wikipedia.

Hello World – cepat dan singkat.

Pada tulisan ini kita akan mencoba “Hello World” yang sederhana Pada contoh berikut ini, program ini akan menerima input dari user yang kemudian mengatakan “Hello” pada user.

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	width="300"
	height="150">
	<mx:Script>
		<![CDATA[
		import mx.controls.Alert;
		// Business Logic Controller
		private function clickHandler():void
		{
			// Model
			Alert.show('Hello '+personName.text, 'Hello World!');
		}
		]]>
	</mx:Script>
	<!-- View -->
	<mx:TextInput id="personName" />

	<mx:Button id="showHello" label="Say Hello" click="clickHandler();"/>
</mx:Application>

Di sini Anda lihat kita telah menambahkan 3 component. Sintaks MXML sebagai view, clickHandler() sebagai business logic atau controller (dalam hal ini menambahkan kata-kata pada user dan mengatakan hello) dan model yang memuat data yaitu nama yang diketikkan user.

main.swf

Mungkin kita sempat berpikir mengapa harus menggunakan cara yang rumit untuk hal sesederhana itu? Untuk contoh ini memang terlihat sederhana, namun seiring bertambahnya kode kita maka akan terasa bahwa pola(pattern) ini sangat berguna.

Ok, saatnya kita buat aplikasi flex dengan MVC yang sedikit lebih lengkap.

Membuat View

Marilah kita buat view-nya yang semata-mata bertanggung jawab untuk menampilkan data kepada user.

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TextInput id="personName" />

    <mx:Text id="res" text="" />

    <mx:Button id="showHello" label="Say Hello" />
</mx:Application>

Kode tersebut akan menampilkan interface sederhana, yaitu:

• TextInput: digunakan user untuk memasukkan namanya.
• Text: yang akan menampilkan hasil keluaran.
• Button: mengelik akan memicu event.

Membuat Model

Model berfungsi untuk memuat data. Dalam kasus ini kita akan membuat singleton class sehingga data tetap terjaga (persisted) walaupun lintas class.

Model.as

package classes.MVC1
{
    [Bindable]
    public class Model
    {
        private static var _model:Model;

        public static function getInstance():Model
        {
            if(_model == null)
            {
                _model = new Model();
            }

            return _model;
        }

        public function Model()
        {
            _model = this;
        }

        public var result:String = "Hello ";
    }
}

Catatan:

1. Class telah ditandai sebagai [Bindable], sehingga perubahan pada salah satu member-nya akan mempengaruhi View.
2. variabel “result” memuat data dan akan digunakan untuk memperbaharui View.

Membuat Controller

Controller memuat business logic yang dalam hal ini sangat sederhana (Menambahkan string “hello” pada nama user).

Controller.as

package classes.MVC1
{
    public class Controller
    {
        public function showName(name:String):void
        {
            var model:Model = Model.getInstance();
            model.result +=  name;
        }
    }
}

Terlihat bahwa kita menggunakan Model sebagai singleton class yang kemudian memperbaharui nilai “result”.

Menghubungkan dengan View

Saatnya untuk menghubungkan view pada model dan controller. Sehingga Main.mxml menjadi seperti berikut ini:

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	width="300" height="150">
    <mx:Script>
        <![CDATA[
            import classes.MVC1.Controller;
            import classes.MVC1.Model;

            [Bindable]
            private var model:Model = Model.getInstance();

            private function clickHandler():void
            {
                var controller:Controller = new Controller();
                controller.showName(personName.text);
            }
        ]]>
    </mx:Script>

    <mx:TextInput id="personName" />

    <mx:Text id="res" text="{model.result}" />

    <mx:Button id="showHello" label="Say Hello" click="clickHandler();"/>
</mx:Application>

Catatan:

1. event handler button memanggil Controller.
2. text terikat pada variabel “result” pada Model.

dan sekarang kita dapatkan MVC-nya telah tersambung satu sama lain.

Tulisan ini kami terjemahkan dengan beberapa tambahan dan pengurangan, saran, kritik, pertanyaan silakan tuliskan komentar.

Terima Kasih.