Download - Tutorial Mate Framework V1.1 09042009
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 1/23
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 :
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;
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
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 2/23
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)
{
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 3/23
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);
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 4/23
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.
<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns="http://mate.asfusion.com/"
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import com.contact.events.*;
import com.contact.business.*;
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 5/23
]]>
</mx:Script>
<EventHandlers type="{FlexEvent.PREINITIALIZE}">
<ObjectBuilder generator="{LoginManager}" constructorArguments="{scope.dispatcher}"/>
</EventHandlers>
<EventHandlers type="{LoginEvent.LOGIN}">
<MethodInvoker generator="{LoginManager}"
method="login" arguments="{[event.username, event.password]}" />
<ResponseAnnouncer type="loginResultResponse" >
<Properties loginResult="{lastReturn}"/>
</ResponseAnnouncer>
</EventHandlers>
</EventMap>
e. Buat kelas LoginPanel.mxml dipackage com.contact.views
Perhatikan <mate:Responsehandler> mengambil loginResultResponse dan loginResult dari
<ResponseAnnouncer> 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
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 6/23
xmlns:mate="http://mate.asfusion.com/"
title="Please enter username and password">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import com.contact.events.LoginEvent;
public function login():void{
loginDispatcher.generateEvent();
}
public function checkLoginResult(result:Boolean):void{
if (!result){
Alert.show("Invalid Login");
}else{
tiUsername.text = '';
tiPassword.text = '';
}
}
]]>
</mx:Script>
<mate:Dispatcher id="loginDispatcher" generator="{LoginEvent}"
type="{LoginEvent.LOGIN}">
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 7/23
<mate:ResponseHandler type="loginResultResponse" response="checkLoginResult(event.loginResult)"/>
<mate:eventProperties>
<mate:EventProperties username="{tiUsername.text}"
password="{tiPassword.text}"/>
</mate:eventProperties>
</mate:Dispatcher>
<mx:Form id="loginForm" defaultButton="{ loginBtn }">
<mx:FormItem label="Username:" required="true">
<mx:TextInput id="tiUsername"/>
</mx:FormItem>
<mx:FormItem label="Password:" required="true">
<mx:TextInput id="tiPassword" displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem direction="horizontal" verticalGap="15" paddingTop="20">
<mx:Button id="loginBtn" label="Login" click="login()"/>
</mx:FormItem>
</mx:Form>
<mx:Label htmlText="Username: flex password: mate" width="100%"/>
</mx:Panel>
f. Buat kelas ContactPanel.mxml dipackage com.contact.views
ContactPanel.mxml adalah halaman setelah login.
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 8/23
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
title="Welcome to Contact Panel"
width="300"
height="200">
</mx:Panel>
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.
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/" xmlns:views="com.contact.views.*">
<mx:Script>
<![CDATA[
import com.contact.events.*;
private const LOGIN:uint = 0;
private const CONTACT:uint = 1;
]]>
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 9/23
</mx:Script>
<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">
<views:LoginPanel/>
<views:ContactPanel/>
</mx:ViewStack>
</mx:HBox>
</mx:Panel>
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 10/23
h. Masukkan Script berikut kedalam TutorialMateContact.mxml
Panggil <maps:MainEventMap> dan <views:MainUI>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:maps="com.contact.maps.*"
xmlns:views="com.contact.views.*">
<maps:MainEventMap/>
<views:MainUI/>
</mx:Application>
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
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 11/23
<EventHandlers type="{LoginEvent.LOGOUT}">
<MethodInvoker generator="{LoginManager}" method="logout" />
</EventHandlers>
d. Tambahkan script berikut kedalam ContactPanel.mxml
<mx:Script>
<![CDATA[
import com.contact.events.*;
public function logout():void
{
var event:LoginEvent=new LoginEvent(LoginEvent.LOGOUT);
this.dispatchEvent(event);
}
]]>
</mx:Script>
<mx:ControlBar>
<mx:Button label="logout" click="logout()"/>
</mx:ControlBar>
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 12/23
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
{
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 13/23
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'));
}
}
}
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 14/23
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;
}
}
}
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 15/23
d. Tambahkan sebuah EventHandlers kedalam MainEventMap.mxml
<EventHandlers type="{FlexEvent.APPLICATION_COMPLETE}">
<MethodInvoker generator="{ContactManager}" method="saveContactList" arguments="{ContactData.myArray}" />
</EventHandlers>
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}"
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 16/23
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 ContactManagerkedalam arrContact yang ada di ContactPanel
<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns="http://mate.asfusion.com/"
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import com.contact.business.*;
import com.contact.views.*;
]]>
</mx:Script>
<Injectors target="{ContactPanel}">
<PropertyInjector targetKey="arrContact" source="{ContactManager}" sourceKey="arrContact"/>
</Injectors>
</EventMap>
g. Terakhir tambahkan <maps:ModelMap/> kedalam TutorialMateContact.mxml
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 17/23
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);
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 18/23
}
}
}
c. Tambahkan EventHandlers DELETE kedalam MainEventMap.mxml
<EventHandlers type="{ContactEvent.DELETE}">
<MethodInvoker generator="{ContactManager}" method="deleteContact" arguments="{event.contact}" />
</EventHandlers>
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()"/>
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 19/23
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
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 20/23
<EventHandlers type="{ContactEvent.SELECT}">
<MethodInvoker generator="{ContactManager}" method="selectContact" arguments="{event.contact}" />
<EventAnnouncer generator="{ NavigationEvent}" type="{ NavigationEvent.ContactDetail}"/>
</EventHandlers>
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()"/>
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 21/23
f. Buat ContactListPanel.mxml dipackage com.contact.views
ContactListPanel adalah halaman untuk menampilkan detail dari Contact yaitu nama depan dan nama
belakang
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
title="List Contact"
width="300"
height="200">
<mx:Script>
<![CDATA[
import com.contact.vos.Contact;
[Bindable]
public var selectedContact:Contact=null;
]]>
</mx:Script>
<mx:TextInput text="{selectedContact.first}"/>
<mx:TextInput text="{selectedContact.last}"/>
</mx:Panel>
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 22/23
g. Tambahkan script berikut kedalam MainUI.mxml
private const CONTACT_LIST:uint = 2;
<mate:Listener type="{NavigationEvent.ContactDetail}" receive="viewStack.selectedIndex = CONTACT_LIST"/>
<views:ContactListPanel/>
8/14/2019 Tutorial Mate Framework V1.1 09042009
http://slidepdf.com/reader/full/tutorial-mate-framework-v11-09042009 23/23
h. Tambahkan sebuah Injector untuk memasukkan nilai contact yang ada di ContactManager kedalam
selectedContact yang ada di ContactListPanel
<Injectors target="{ContactListPanel}">
<PropertyInjector targetKey="selectedContact" source="{ContactManager}" sourceKey="contact"/>
</Injectors>
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()" />