Flex dan MVC

Posted by on . 3 comments.

Tutorial flex kali ini membahas tentang teknik coding aplikasi menggunakan MVC (Model View Controller) sehingga nantinya aplikasi akan lebih mudah diubah antar mukanya (user interface) tanpa mempengaruhi alur logikanya (Business Logic) ataupun sebaliknya.

Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Share on StumbleUpon

Tulisan ini diolah dari sini.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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

1
2
3
4
5
6
7
8
9
<?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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?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.