Tutorial Mate Framework V1.1 09042009

Tutorial Mate Framework Penyederhanaan dan Modifikasi dari contoh : http://mate.asfusion.com/assets/content/examples/cafeTownsend 1. Persiapan a. Buat Project Flex dengan nama TutorialMateContact b. Buat Struktur Project sebagai berikut :

business  Class .as business logic events  Class .as extends Event maps  EventMap untuk menangani events views  Grafical User Interface vos  Domain mirip seperti java bean

2. Login a. Buat Kelas LoginEvent.as dipackage com.contact.events package com.contact.events { import flash.events.Event;

public class LoginEvent extends Event { public static const LOGIN: String = "loginEvent";

public var username:String; public var password:String;

public function LoginEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false) { super(type, bubbles, cancelable); } } }

b. Buat Kelas NavigationEvent.as dipackage com.contact.events Jumlah tipe event pada NavigationEvent tergantung pada jumlah halaman. Disini kita membuat 2 tipe event Login Form (halaman login) dan Contact Form (halaman setelah login) package com.contact.events { import flash.events.Event;

public class NavigationEvent extends Event { public static const LoginForm : String="loginFormNavigation"; public static const ContactForm : String="ContactFormNavigation";

public function NavigationEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false) {

super(type, bubbles, cancelable); } } }

c. Buat kelas LoginManager.as dipackage com.contact.business dispatcher.dispatcherEvent(event) digunakan untuk mengirimkan event yaitu NavigationEvent package com.contact.business { import com.contact.events.NavigationEvent; import flash.events.IEventDispatcher;

public class LoginManager { private var dispatcher:IEventDispatcher;

public function LoginManager(dispatcher:IEventDispatcher){ this.dispatcher = dispatcher; }

public function login(username:String, password:String):Boolean{ if(username == 'flex' && password == 'mate'){ var event:NavigationEvent = new NavigationEvent(NavigationEvent.ContactForm);

dispatcher.dispatchEvent(event); return true; } return false; } } }

d. Buat kelas MainEventMap.mxml dipackage com.contact.maps - ObjectBuilder digunakan untuk membuat object (proses instansiasi), constructorArguments diisi sesuai dengan konstruktor kelas LoginManager. Karena konstruktor LoginManager hanya 1 jadi pasti diisi dengan parameter bertipe dispatcher. - Selanjutnya kita membuat EventHandlers untuk method login yang ada dikelas LoginManager. ResponseAnnouncer digunakan untuk mengirim response kepada object yang yang men-dispacther LoginEvent.LOGIN ini. Biasanya digunakan untuk method yang memiliki return type dimana hasil dari method dinamakan lastReturn. <EventMap xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script>
import com.contact.events.*; import com.contact.business.*;

]]>

<EventHandlers type="{FlexEvent.PREINITIALIZE}">

<EventHandlers type="{LoginEvent.LOGIN}"> <MethodInvoker generator="{LoginManager}" method="login" arguments="{[event.username, event.password]}" />

e. Buat kelas LoginPanel.mxml dipackage com.contact.views Perhatikan <mate:Responsehandler> mengambil loginResultResponse dan loginResult dari diatas.Prosesnya sbb: Click button login  loginDispatcher.generateEvent()  panggil EventHandler LoginEvent.LOGIN, masukkan username dan password lastReturn dikirim kepada loginDispatcher dan ditangani oleh <mate:ResponseHandler>  terakhir oleh method checkLoginResult <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:mate="http://mate.asfusion.com/" title="Please enter username and password"> <mx:Script>
public function checkLoginResult(result:Boolean):void{ if (!result){ Alert.show("Invalid Login"); }else{ tiUsername.text = ''; tiPassword.text = ''; } } ]]>

<mate:Dispatcher id="loginDispatcher" generator="{LoginEvent}" type="{LoginEvent.LOGIN}">

<mate:ResponseHandler type="loginResultResponse" response="checkLoginResult(event.loginResult)"/> <mate:eventProperties> <mate:EventProperties username="{tiUsername.text}" password="{tiPassword.text}"/>

<mx:Form id="loginForm" defaultButton="{ loginBtn }"> <mx:FormItem label="Username:" required="true"> <mx:TextInput id="tiUsername"/> <mx:FormItem label="Password:" required="true"> <mx:TextInput id="tiPassword" displayAsPassword="true"/> <mx:FormItem direction="horizontal" verticalGap="15" paddingTop="20"> <mx:Button id="loginBtn" label="Login" click="login()"/> <mx:Label htmlText="Username: flex

password: mate" width="100%"/>



f. Buat kelas ContactPanel.mxml dipackage com.contact.views ContactPanel.mxml adalah halaman setelah login.

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="Welcome to Contact Panel" width="300" height="200">

g. Buat kelas MainUI.mxml dipackage com.contact.views MainUI berisi ViewStack dimana isinya adalah halaman-halaman yang ada. Sampai sekarang kita mempunyai 2 halaman (LoginPanel dan ContactPanel). Banyaknya <mate:Listener> tergantung pada jumlah halaman.

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mate="http://mate.asfusion.com/" xmlns:views="com.contact.views.*"> <mx:Script>
private const LOGIN:uint = 0; private const CONTACT:uint = 1;

]]>



<mate:Listener type="{NavigationEvent.LoginForm}" receive="viewStack.selectedIndex = LOGIN"/> <mate:Listener type="{NavigationEvent.ContactForm}" receive="viewStack.selectedIndex = CONTACT"/>

<mx:HBox styleName="mainBody" width="100%" height="100%"> <mx:ViewStack id="viewStack" resizeToContent="true">

h. Masukkan Script berikut kedalam TutorialMateContact.mxml Panggil <maps:MainEventMap> dan <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:maps="com.contact.maps.*" xmlns:views="com.contact.views.*">

<maps:MainEventMap/>

3. Logout a. Tambahkan type event LOGOUT kedalam LoginEvent.as public static const LOGOUT: String = "logoutEvent";

b. Tambahkan method logout kedalam LoginManager.as public function logout():void{ var event:NavigationEvent = new NavigationEvent(NavigationEvent.LoginForm); dispatcher.dispatchEvent(event); }

c. Tambahkan sebuah EventHandlers LOGOUT kedalam MainEventMap.mxml

<EventHandlers type="{LoginEvent.LOGOUT}"> <MethodInvoker generator="{LoginManager}" method="logout" />

d. Tambahkan script berikut kedalam ContactPanel.mxml

<mx:Script>
public function logout():void { var event:LoginEvent=new LoginEvent(LoginEvent.LOGOUT); this.dispatchEvent(event); } ]]> <mx:ControlBar> <mx:Button label="logout" click="logout()"/>

4. Select Contact a. Buat kelas Contact.as dipackage com.contact.vos

package com.contact.vos { public class Contact { public var first:String; public var last:String;

public function Contact(first:String, last:String) { this.first = first; this.last = last; }

} }

b. Buat kelas ContactManager.as dipackage com.contact.business package com.contact.business {

import com.contact.vos.Contact;

import flash.events.Event; import flash.events.EventDispatcher;

import mx.collections.ArrayCollection;

public class ContactManager extends EventDispatcher { private var _arrContact:ArrayCollection;

[Bindable (event="ContactListChange")] public function get arrContact():ArrayCollection{ return _arrContact; }

public function saveContactList(arr:ArrayCollection):void{ _arrContact = arr; dispatchEvent(new Event('ContactListChange')); } } }

c. Buat kelas ContactData.as dipackage com.contact.business Attribute myArray akan digunakan untuk mengisi parameter Method saveContactList

package com.contact.business { import mx.collections.ArrayCollection; import com.contact.vos.Contact;

public class ContactData { private static var _myArray:ArrayCollection; public static function get myArray():ArrayCollection { _myArray = new ArrayCollection(); _myArray.addItem(new Contact("Erick","Costanio")); _myArray.addItem(new Contact("Ade", "Rusmana")); _myArray.addItem(new Contact("Yoshua", "Timotius")); _myArray.addItem(new Contact("Jun", "Junaidy")); return _myArray; } } }

d. Tambahkan sebuah EventHandlers kedalam MainEventMap.mxml

<EventHandlers type="{FlexEvent.APPLICATION_COMPLETE}"> <MethodInvoker generator="{ContactManager}" method="saveContactList" arguments="{ContactData.myArray}" />

e. Tambahkan script berikut kedalam ContactPanel.mxml Method formatName digunakan untuk menampilkan attribute dari object. Jika tidak menggunakan mehtod ini hasilnya akan berupa Object sehingga yang dicetak adalah [Object Contact]. import mx.collections.ArrayCollection;

[Bindable] public var arrContact:ArrayCollection=null;

public function formatName(dpItem:Object):String { return dpItem.last + ", " + dpItem.first; }

<mx:List id="contactList" dataProvider="{arrContact}"

labelFunction="formatName" width="100%"/>

f. Buat Sebuah EventMap bernama ModelMap.mxml yang berisi Injectors – Injectors. Injectors memungkinkan terjadi pengiriman data dari business ke views Kali ini tambahkan sebuah Injectors untuk memasukkan nilai arrContact yang ada di ContactManager kedalam arrContact yang ada di ContactPanel <EventMap xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script>

g. Terakhir tambahkan <maps:ModelMap/> kedalam TutorialMateContact.mxml

5. Delete Contact a. Tambahkan method deleteContact kedalam ContactManager.as

public function deleteContact(contact:Contact):void{ _arrContact.removeItemAt(_arrContact.getItemIndex(contact)); }

b. Buat Kelas ContactEvent.as dipackage com.contact.events package com.contact.events { import com.contact.vos.Contact; import flash.events.Event;

public class ContactEvent extends Event { public static const DELETE: String = "deleteContactEvent";

public var contact:Contact;

public function ContactEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false) { super(type, bubbles, cancelable);

} } }

c. Tambahkan EventHandlers DELETE kedalam MainEventMap.mxml <EventHandlers type="{ContactEvent.DELETE}"> <MethodInvoker generator="{ContactManager}" method="deleteContact" arguments="{event.contact}" />

d. Tambahkan method deleteContact kedalam ContactPanel.mxml Sebelumnya tambahkan import com.contact.vos.Contact; public function deleteContact():void { var event:ContactEvent = new ContactEvent(ContactEvent.DELETE); event.contact = contactList.selectedItem as Contact; this.dispatchEvent(event); }

Setelah itu, tambahkan button delete di Container <mx:Control Bar>

<mx:Button label="delete" click="deleteContact()"/>

6. View Contact a. Buat kelas ContactManager.as dipackage com.contact.bussiness private var _contact:Contact;

[Bindable (event="ContactChanged")] public function get contact():Contact{ return _contact; }

public function selectContact(contact:Contact):void{ _contact = contact; dispatchEvent(new Event('ContactChanged')); }

b. Tambahkan type event ContactDetail di NavigationEvent.as public static const ContactDetail : String = "ContactDetailNavigation";

c. Tambahkan type event SELECT di ContactEvent.as public static const SELECT: String = "selectContactEvent";

d. Tambahkan EventHandlers SELECT didalam MainEventMap.mxml

<EventHandlers type="{ContactEvent.SELECT}"> <MethodInvoker generator="{ContactManager}" method="selectContact" arguments="{event.contact}" /> <EventAnnouncer generator="{ NavigationEvent}" type="{ NavigationEvent.ContactDetail}"/>

e. Tambahkan method viewDetailContact di ContactPanel.mxml public function viewDetailContact():void { var event:ContactEvent=new ContactEvent(ContactEvent.SELECT); event.contact = contactList.selectedItem as Contact; this.dispatchEvent(event); }

Setelah itu buat button view : <mx:Button label="view" click="viewDetailContact()"/>

f. Buat ContactListPanel.mxml dipackage com.contact.views ContactListPanel adalah halaman untuk menampilkan detail dari Contact yaitu nama depan dan nama belakang <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="List Contact" width="300" height="200">

<mx:Script>
[Bindable] public var selectedContact:Contact=null; ]]>

<mx:TextInput text="{selectedContact.first}"/> <mx:TextInput text="{selectedContact.last}"/>

g. Tambahkan script berikut kedalam MainUI.mxml private const CONTACT_LIST:uint = 2;

<mate:Listener type="{NavigationEvent.ContactDetail}" receive="viewStack.selectedIndex = CONTACT_LIST"/>



h. Tambahkan sebuah Injector untuk memasukkan nilai contact yang ada di ContactManager kedalam selectedContact yang ada di ContactListPanel

i.

Terakhir tambahkan sebuah tombol back di ContactListPanel.mxml untuk kembali ke ContactPanel.mxml

import com.contact.events.NavigationEvent;

public function back():void{ var event:NavigationEvent = new NavigationEvent(NavigationEvent.ContactForm); this.dispatchEvent(event); }

<mx:Button label="Back" click="back()" />