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



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)


{


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)

{




}

}

}

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.

<?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.*;



]]>

</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


<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"



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}">



<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.





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.



xmlns:mate="http://mate.asfusion.com/" xmlns:views="com.contact.views.*">

<mx:Script>

<![CDATA[


private const LOGIN:uint = 0;

private const CONTACT:uint = 1;

]]>



</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>



h. Masukkan Script berikut kedalam TutorialMateContact.mxml

Panggil <maps:MainEventMap> dan <views:MainUI>


<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



<EventHandlers type="{LoginEvent.LOGOUT}">

<MethodInvoker generator="{LoginManager}" method="logout" />

</EventHandlers>

d. Tambahkan script berikut kedalam ContactPanel.mxml

<mx:Script>

<![CDATA[


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>



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


{



import com.contact.vos.Contact;


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


{



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}" />

</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].


[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 ContactManagerkedalam arrContact yang ada di ContactPanel


<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



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


{



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)

{




}

}

}

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;


}

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}"/>

</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;


}

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



title="List Contact"

width="300"

height="200">

<mx:Script>

<![CDATA[


[Bindable]

public var selectedContact:Contact=null;

]]>

</mx:Script>

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

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

</mx:Panel>



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/>



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);


}

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

tutorial mate framework v1.1 09042009

Documents