Your SlideShare is downloading. ×
0
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Mate
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mate

1,181

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,181
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mate Flex Framework Using Flex Frameworks to Build Data- Driven Applications Flex@Beach'10
  • 2. What is Mate? Event Handling <MXML> Dependency Injection Flex@Beach'10
  • 3. Sample Projects  InsyncMate1  Exact copy of original app with a model and central event handling  InsyncMate2  Logic moved to ContactManager  InsyncMate3  Better architecture with Presentation Model pattern  Modularized application  InsyncMate4  Modularized application Flex@Beach'10
  • 4. Before & After Contact List Flex@Beach'10
  • 5. ContactList.mxml Toolbar.mxml ContactList.mxml Flex@Beach'10
  • 6. ContactList.mxml - Plain version <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var contacts:ArrayCollection; private var lastSearchStr:String; public function search(searchStr:String):void { service.getContactsByName(searchStr); lastSearchStr = searchStr; } private function getContacts_result(event:ResultEvent):void { contacts = event.result as ArrayCollection; } </mx:Script> <mx:RemoteObject id="service" destination="contacts" endpoint="http://localhost:8400/ messagebroker/amf"> <mx:method name="getContactsByName" result="getContacts_result(event)"/> </mx:RemoteObject> <mx:DataGrid id="dg" dataProvider="{ contacts }" doubleClick="dispatchEvent( new ContactEvent( ContactEvent.EDIT, dg.selectedItem as Contact) )" ... /> </mx:Canvas> Flex@Beach'10 6
  • 7. ContactList.mxml - Plain version <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var contacts:ArrayCollection; private var lastSearchStr:String; public function search(searchStr:String):void { service.getContactsByName(searchStr); lastSearchStr = searchStr; } private function getContacts_result(event:ResultEvent):void { contacts = event.result as ArrayCollection; } </mx:Script> <mx:RemoteObject id="service" destination="contacts" endpoint="http://localhost:8400/ messagebroker/amf"> <mx:method name="getContactsByName" result="getContacts_result(event)"/> </mx:RemoteObject> <mx:DataGrid id="dg" dataProvider="{ contacts }" doubleClick="dispatchEvent( new ContactEvent( ContactEvent.EDIT, dg.selectedItem as Contact) )" ... /> </mx:Canvas> Flex@Beach'10
  • 8. ContactList.mxml - Plain version <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var contacts:ArrayCollection; private var lastSearchStr:String; public function search(searchStr:String):void { called by parent service.getContactsByName(searchStr); executes service call lastSearchStr = searchStr; } private function getContacts_result(event:ResultEvent):void { contacts = event.result as ArrayCollection; } </mx:Script> <mx:RemoteObject id="service" destination="contacts" endpoint="http://localhost:8400/ messagebroker/amf"> <mx:method name="getContactsByName" result="getContacts_result(event)"/> </mx:RemoteObject> <mx:DataGrid id="dg" dataProvider="{ contacts }" doubleClick="dispatchEvent( new ContactEvent( ContactEvent.EDIT, dg.selectedItem as Contact) )" ... /> </mx:Canvas> Flex@Beach'10
  • 9. ContactList.mxml - Plain version <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var contacts:ArrayCollection; private var lastSearchStr:String; public function search(searchStr:String):void { service.getContactsByName(searchStr); lastSearchStr = searchStr; } private function getContacts_result(event:ResultEvent):void { contacts = event.result as ArrayCollection; } </mx:Script> <mx:RemoteObject id="service" destination="contacts" endpoint="http://localhost:8400/ messagebroker/amf"> <mx:method name="getContactsByName" result="getContacts_result(event)"/> </mx:RemoteObject> <mx:DataGrid id="dg" dataProvider="{ contacts }" doubleClick="dispatchEvent( new ContactEvent( ContactEvent.EDIT, dg.selectedItem as Contact) )" ... /> </mx:Canvas> Flex@Beach'10
  • 10. ContactList.mxml - Plain version <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var contacts:ArrayCollection; private var lastSearchStr:String; public function search(searchStr:String):void { service.getContactsByName(searchStr); lastSearchStr = searchStr; } private function getContacts_result(event:ResultEvent):void { contacts = event.result as ArrayCollection; } </mx:Script> <mx:RemoteObject id="service" destination="contacts" endpoint="http://localhost:8400/ messagebroker/amf"> <mx:method name="getContactsByName" result="getContacts_result(event)"/> </mx:RemoteObject> <mx:DataGrid id="dg" dataProvider="{ contacts }" doubleClick="dispatchEvent( new ContactEvent( ContactEvent.EDIT, dg.selectedItem as Contact) )" ... /> </mx:Canvas> Flex@Beach'10
  • 11. ContactList.mxml - Plain version <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var contacts:ArrayCollection; private var lastSearchStr:String; public function search(searchStr:String):void { service.getContactsByName(searchStr); lastSearchStr = searchStr; } private function getContacts_result(event:ResultEvent):void { contacts = event.result as ArrayCollection; } </mx:Script> <mx:RemoteObject id="service" destination="contacts" endpoint="http://localhost:8400/ messagebroker/amf"> <mx:method name="getContactsByName" result="getContacts_result(event)"/> </mx:RemoteObject> <mx:DataGrid id="dg" dataProvider="{ contacts }" doubleClick="dispatchEvent( new ContactEvent( ContactEvent.EDIT, dg.selectedItem as Contact) )" ... /> </mx:Canvas> Flex@Beach'10
  • 12. Plain version calls search view MainView services Toolbar business logic ContactList Flex@Beach'10
  • 13. Open file (InsyncMate1): src insync mate ui views ContactList.mxml Flex@Beach'10 8
  • 14. ContactList.mxml - Mate version 1 <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"> <mx:Metadata> [Event(name="editContact", type="insync.mate.events.ContactEvent")] </mx:Metadata> <mx:Script> import mx.collections.ArrayCollection; import insync.mate.model.Contact; import insync.mate.events.ContactEvent; [Bindable] public var contacts:ArrayCollection; </mx:Script> <mx:DataGrid id="dg" dataProvider="{ contacts }" top=" 0" left="0" right=" 0" bottom="0" doubleClickEnabled=" true" doubleClick="dispatchEvent( new ContactEvent( ContactEvent.EDIT, dg.selectedItem as Contact) )"> Flex@Beach'10 <mx:columns> 9
  • 15. ContactList.mxml - Mate version 1 <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"> <mx:Metadata> [Event(name="editContact", type="insync.mate.events.ContactEvent")] </mx:Metadata> <mx:Script> import mx.collections.ArrayCollection; import insync.mate.model.Contact; import insync.mate.events.ContactEvent; [Bindable] public var contacts:ArrayCollection; provided by injection </mx:Script> <mx:DataGrid id="dg" dataProvider="{ contacts }" top=" 0" left="0" right=" 0" bottom="0" doubleClickEnabled=" true" doubleClick="dispatchEvent( new ContactEvent( ContactEvent.EDIT, dg.selectedItem as Contact) )"> Flex@Beach'10 <mx:columns> 9
  • 16. ContactList.mxml - Mate version 1 <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"> <mx:Metadata> [Event(name="editContact", type="insync.mate.events.ContactEvent")] </mx:Metadata> <mx:Script> import mx.collections.ArrayCollection; import insync.mate.model.Contact; import insync.mate.events.ContactEvent; no business logic [Bindable] not dependent on service public var contacts:ArrayCollection; </mx:Script> independent from Mate <mx:DataGrid id="dg" dataProvider="{ contacts }" top=" 0" left="0" right=" 0" bottom="0" doubleClickEnabled=" true" doubleClick="dispatchEvent( new ContactEvent( ContactEvent.EDIT, dg.selectedItem as Contact) )"> Flex@Beach'10 <mx:columns> 9
  • 17. Open file (InsyncMate1): src insync mate services Services.mxml Flex@Beach'10 10
  • 18. Services.mxml - Mate version 1 <Object xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:RemoteObject id="contacts" destination="contacts" endpoint="http://localhost:8400/messagebroker/amf" /> </Object> centralized services Flex@Beach'10 11
  • 19. Services.mxml - Mate version 1 <Object xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml"> <MockRemoteObject id="contacts" mockGenerator="{ MockContactService }" delay="3"> <methods> <MockMethod name="search" dataUrl="assets/xml/contacts.xml"/> </methods> </MockRemoteObject> </Object> Flex@Beach'10 11
  • 20. Open file (InsyncMate1): src insync mate managers ContactsManager.as Flex@Beach'10 12
  • 21. ContactsManager.as - Mate version 1 public class ContactsManager extends EventDispatcher { // property to store the last search keyword public var lastSearch:String = ""; // Read-only public variable used to access the current contacts to show in list private var _contacts:ArrayCollection; [Bindable(event="contactsChanged")] public function get contacts():ArrayCollection { return _contacts; } // Stores given contacts and the current search keyword public function saveContacts( list:ArrayCollection, searchKey:String ):void { _contacts = list; //trigger binding by dispatching change event dispatchEvent( new Event( "contactsChanged" ) ); lastSearch = searchKey; } } Flex@Beach'10 13
  • 22. ContactsManager.as - Mate version 1 public class ContactsManager extends EventDispatcher { // property to store the last search keyword public var lastSearch:String = ""; // Read-only public variable used to access the current contacts to show in list private var _contacts:ArrayCollection; [Bindable(event="contactsChanged")] public function get contacts():ArrayCollection { return _contacts; } // Stores given contacts and the current search keyword public function saveContacts( list:ArrayCollection, searchKey:String ):void { _contacts = list; //trigger binding by dispatching change event dispatchEvent( new Event( "contactsChanged" ) ); lastSearch = searchKey; } } Flex@Beach'10 13
  • 23. ContactsManager.as - Mate version 1 public class ContactsManager extends EventDispatcher { // property to store the last search keyword public var lastSearch:String = ""; // Read-only public variable used to access the current contacts to show in list private var _contacts:ArrayCollection; [Bindable(event="contactsChanged")] public function get contacts():ArrayCollection { return _contacts; } // Stores given contacts and the current search keyword public function saveContacts( list:ArrayCollection, searchKey:String ):void { _contacts = list; independent from services //trigger binding by dispatching change event dispatchEvent( new Event( "contactsChanged" ) ); easy to mock and test lastSearch = searchKey; } } Flex@Beach'10 13
  • 24. Open file (InsyncMate1): src insync mate ui views Toolbar.mxml Flex@Beach'10 14
  • 25. Toolbar.mxml - Mate version 1 <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"> <mx:Metadata> [Event(name="search", type="insync.plain.events.SearchEvent")] [Event(name="addContact", type="insync.plain.events.ContactEvent")] </mx:Metadata> <mx:Script> <![CDATA[ import insync.plain.events.SearchEvent; import insync.plain.events.ContactEvent; ]]> </mx:Script> <mx:Button toolTip="Add Contact" click="dispatchEvent( new ContactEvent(ContactEvent.ADD))"/> <mx:Label text="Search:" /> <mx:TextInput id="searchBox" change="dispatchEvent( new SearchEvent(SearchEvent.SEARCH, searchBox.text))"/> </mx:Canvas> Flex@Beach'10 15
  • 26. Open file (InsyncMate1): src insync mate maps MainMap.mxml Flex@Beach'10 16
  • 27. MainMap.mxml - Mate version 1 <EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/" xmlns:services="insync.mate.services.*"> <services:Services id="services" /> <EventHandlers type="{ SearchEvent.SEARCH }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" arguments=" { event.searchStr }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method=" saveContacts" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> Flex@Beach'10 17
  • 28. MainMap.mxml - Mate version 1 <EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/" xmlns:services="insync.mate.services.*"> <services:Services id="services" /> <EventHandlers type="{ SearchEvent.SEARCH }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" arguments=" { event.searchStr }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method=" saveContacts" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> Flex@Beach'10 17
  • 29. MainMap.mxml - Mate version 1 <EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/" xmlns:services="insync.mate.services.*"> <services:Services id="services" /> <EventHandlers type="{ SearchEvent.SEARCH }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" arguments=" { event.searchStr }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method=" saveContacts" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> Flex@Beach'10 17
  • 30. MainMap.mxml - Mate version 1 <EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/" xmlns:services="insync.mate.services.*"> <services:Services id="services" /> <EventHandlers type="{ SearchEvent.SEARCH }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" arguments=" { event.searchStr }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method=" saveContacts" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> Flex@Beach'10 17
  • 31. MainMap.mxml - Mate version 1 <EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/" xmlns:services="insync.mate.services.*"> <services:Services id="services" /> <EventHandlers type="{ SearchEvent.SEARCH }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" arguments=" { event.searchStr }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method=" saveContacts" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> Flex@Beach'10 17
  • 32. MainMap.mxml - Mate version 1 <EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/" xmlns:services="insync.mate.services.*"> <services:Services id="services" /> <EventHandlers type="{ SearchEvent.SEARCH }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" arguments=" { event.searchStr }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method=" saveContacts" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> Flex@Beach'10 17
  • 33. MainMap.mxml - Mate version 1 <EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/" xmlns:services="insync.mate.services.*"> <services:Services id="services" /> <EventHandlers type="{ SearchEvent.SEARCH }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" service methods separated arguments=" { event.searchStr }"> from view and business <resultHandlers> logic <MethodInvoker generator="{ ContactsManager }" method=" saveContacts" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> Flex@Beach'10 17
  • 34. Open file (InsyncMate1): src InsyncMate1.mxml Flex@Beach'10 18
  • 35. InsyncMate1.mxml (version 1) <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:views=" insync.mate.ui.views.*" xmlns:maps=" insync.mate.maps.*" xmlns:mate="http://mate.asfusion.com/"> <!-- Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <mx:Style source="assets/styles/styles.css" /> <!-- EventMaps ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <maps:MainMap /> <!-- UI ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <views:MainView/> <!-- Debugger ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <mate:Debugger level="{Debugger.ALL}" /> </mx:Application> Flex@Beach'10 19
  • 36. InsyncMate1.mxml (version 1) <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:views=" insync.mate.ui.views.*" xmlns:maps=" insync.mate.maps.*" xmlns:mate="http://mate.asfusion.com/"> <!-- Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <mx:Style source="assets/styles/styles.css" /> <!-- EventMaps ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <maps:MainMap /> <!-- UI ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <views:MainView/> <!-- Debugger ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <mate:Debugger level="{Debugger.ALL}" /> </mx:Application> Flex@Beach'10 19
  • 37. InsyncMate1.mxml (version 1) <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:views=" insync.mate.ui.views.*" xmlns:maps=" insync.mate.maps.*" xmlns:mate="http://mate.asfusion.com/"> <!-- Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <mx:Style source="assets/styles/styles.css" /> <!-- EventMaps ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <maps:MainMap /> <!-- UI ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <views:MainView/> <!-- Debugger ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <mate:Debugger level="{Debugger.ALL}" /> </mx:Application> Flex@Beach'10 19
  • 38. Debugging Output <EventHandlers (started) type="SearchEvent.SEARCH" (search) priority="0" useCapture="false" useWeakReference="true" dispatcherType="inherit" scope="[object Scope]"> <RemoteObjectInvoker instance="[RemoteObject destination="contacts" channelSet="[ChannelSet null ]"]" arguments="Pam" showBusyCursor="false" makeObjectsBindable="true" method="getContactsByName" requestTimeout="0" debug="false"/> </EventHandlers (end) type="SearchEvent.SEARCH" (search)> Flex@Beach'10
  • 39. Debugging Output <EventHandlers (started) type="SearchEvent.SEARCH" (search) priority="0" useCapture="false" useWeakReference="true" dispatcherType="inherit" scope="[object Scope]"> <RemoteObjectInvoker instance="[RemoteObject destination="contacts" channelSet="[ChannelSet null ]"]" arguments="Pam" showBusyCursor="false" makeObjectsBindable="true" method="getContactsByName" requestTimeout="0" debug="false"/> </EventHandlers (end) type="SearchEvent.SEARCH" (search)> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" debug="true" arguments=" { event.searchStr }"> Flex@Beach'10
  • 40. Debugging Output <EventHandlers (started) type="SearchEvent.SEARCH" (search) priority="0" useCapture="false" useWeakReference="true" dispatcherType="inherit" scope="[object Scope]"> <RemoteObjectInvoker instance="[RemoteObject destination="contacts" channelSet="[ChannelSet null ]"]" arguments="Pam" showBusyCursor="false" makeObjectsBindable="true" method="getContactsByName" requestTimeout="0" debug="false"/> </EventHandlers (end) type="SearchEvent.SEARCH" (search)> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" debug="true" arguments=" { event.searchStr }"> <ServiceHandlers (started) type="SearchEvent.SEARCH" (search) token="[object AsyncToken]" priority="0" useCapture="false" useWeakReference="true" scope="[object ServiceScope]" dispatcherType="local"> <MethodInvoker method="saveContacts" arguments="[ [object Contact], Pam ]" generator="[class ContactsManager]" cache="inherit" registerTarget="true"/> </ServiceHandlers (end) type="SearchEvent.SEARCH" (search)> Flex@Beach'10
  • 41. Event Handling Event Bus Toolbar Remote Object (Services.mxml) Model (ContactManager.as) View EventMap (ContactList.mxml) binding via Injection Flex@Beach'10
  • 42. Open file (InsyncMate1): src insync mate maps MainMap.mxml Flex@Beach'10 22
  • 43. MainMap.mxml - Mate version 1 <EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/"> <Injectors target="{ ContactList }"> <PropertyInjector targetKey="contacts" Takes advantage of source=" { ContactsManager }" sourceKey="contacts"/> bindings </Injectors> </EventMap> Flex@Beach'10 23
  • 44. Injection Event Bus ContactList Flex@Beach'10
  • 45. Injection Event Bus 1 creationComplete dispatched ContactList Flex@Beach'10
  • 46. Injection Event Bus 1 creationComplete dispatched ContactList EventMap Flex@Beach'10
  • 47. Injection Event Bus 1 creationComplete dispatched ContactList EventMap ContactManager Flex@Beach'10
  • 48. Injection Event Bus 1 creationComplete dispatched ContactList 2 creates binding between model and view EventMap ContactManager Flex@Beach'10
  • 49. Injection Event Bus 1 creationComplete dispatched ContactList 2 creates binding 3 binding between model updates and view EventMap ContactManager Flex@Beach'10
  • 50. Injection Event Bus ContactList 3 binding updates ContactManager Flex@Beach'10
  • 51. Version 1 Contact Form Flex@Beach'10
  • 52. ContactEvent.SAVE ContactEvent.DELETE Flex@Beach'10
  • 53. Open file (InsyncMate2): src insync mate ui views ContactForm.mxml Flex@Beach'10 27
  • 54. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" label="{contact.id>0?contact.fullName:'New Contact'}"> <mx:Script> <![CDATA[ [Bindable] public var contact:Contact; private function save():void { contact.firstName = firstName.text; contact.lastName = lastName.text; contact.email = email.text; contact.phone = phone.text; contact.address = address.text; contact.city = city.text; contact.state = state.text; contact.zip = zip.text; contact.pic = picture.source; dispatchEvent( new ContactEvent( ContactEvent.SAVE, contact ) ); } private function remove():void { dispatchEvent( new ContactEvent( ContactEvent.DELETE, contact ) ); } public function save_result( ):void { status.text = "Contact saved successfully"; } ]]> </mx:Script> Flex@Beach'10 ®
  • 55. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" label="{contact.id>0?contact.fullName:'New Contact'}"> <mx:Script> <![CDATA[ [Bindable] public var contact:Contact; private function save():void { contact.firstName = firstName.text; contact.lastName = lastName.text; contact.email = email.text; contact.phone = phone.text; contact.address = address.text; contact.city = city.text; contact.state = state.text; contact.zip = zip.text; contact.pic = picture.source; dispatchEvent( new ContactEvent( ContactEvent.SAVE, contact ) ); } private function remove():void { dispatchEvent( new ContactEvent( ContactEvent.DELETE, contact ) ); } public function save_result( ):void { status.text = "Contact saved successfully"; } ]]> </mx:Script> Flex@Beach'10
  • 56. Event Handling Event Bus Toolbar Remote Object (Services.mxml) Model (ContactManager.as) View EventMap (ContactList.mxml) binding via Injection Flex@Beach'10
  • 57. <mx:Form> <mx:FormItem label="Id"> <mx:TextInput text="{contact.id}" enabled="false"/> </mx:FormItem> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" text="{contact.firstName}"/> </mx:FormItem> <mx:FormItem label="Last Name"> <mx:TextInput id="lastName" text="{contact.lastName}"/> </mx:FormItem> <mx:FormItem label="Email"> <mx:TextInput id="email" text="{contact.email}"/> </mx:FormItem> <-- all of the other fields here --> </mx:Form> <controls:PictureInput id="picture" source="{contact.pic}"/> <mx:Button label="Save" click="save()"/> <mx:Button label="Delete" click="remove()"/> <mx:Label id="status" /> </mx:Canvas> Flex@Beach'10
  • 58. <mx:Form> <mx:FormItem label="Id"> <mx:TextInput text="{contact.id}" enabled="false"/> </mx:FormItem> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" text="{contact.firstName}"/> </mx:FormItem> <mx:FormItem label="Last Name"> <mx:TextInput id="lastName" text="{contact.lastName}"/> </mx:FormItem> <mx:FormItem label="Email"> <mx:TextInput id="email" text="{contact.email}"/> </mx:FormItem> <-- all of the other fields here --> </mx:Form> <controls:PictureInput id="picture" source="{contact.pic}"/> <mx:Button label="Save" click="save()"/> <mx:Button label="Delete" click="remove()"/> <mx:Label id="status" /> </mx:Canvas> Flex@Beach'10
  • 59. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" label="{contact.id>0?contact.fullName:'New Contact'}"> <mx:Script> <![CDATA[ [Bindable] public var contact:Contact; private function save():void { contact.firstName = firstName.text; contact.lastName = lastName.text; contact.email = email.text; contact.phone = phone.text; contact.address = address.text; contact.city = city.text; contact.state = state.text; contact.zip = zip.text; contact.pic = picture.source; dispatchEvent( new ContactEvent( ContactEvent.SAVE, contact ) ); } private function remove():void { dispatchEvent( new ContactEvent( ContactEvent.DELETE, contact ) ); } public function save_result( ):void { status.text = "Contact saved successfully"; } ]]> </mx:Script> Flex@Beach'10 ®
  • 60. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" label="{contact.id>0?contact.fullName:'New Contact'}"> <mx:Script> <![CDATA[ [Bindable] public var contact:Contact; private function save():void { contact.firstName = firstName.text; contact.lastName = lastName.text; contact.email = email.text; contact.phone = phone.text; contact.address = address.text; contact.city = city.text; contact.state = state.text; contact.zip = zip.text; contact.pic = picture.source; dispatchEvent( new ContactEvent( ContactEvent.SAVE, contact ) ); } private function remove():void { dispatchEvent( new ContactEvent( ContactEvent.DELETE, contact ) ); } public function save_result( ):void { status.text = "Contact saved successfully"; } ]]> </mx:Script> Flex@Beach'10 ®
  • 61. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" label="{contact.id>0?contact.fullName:'New Contact'}"> <mx:Script> <![CDATA[ [Bindable] public var contact:Contact; private function save():void { contact.firstName = firstName.text; contact.lastName = lastName.text; contact.email = email.text; contact.phone = phone.text; contact.address = address.text; contact.city = city.text; contact.state = state.text; contact.zip = zip.text; contact.pic = picture.source; dispatchEvent( new ContactEvent( ContactEvent.SAVE, contact ) ); } private function remove():void { dispatchEvent( new ContactEvent( ContactEvent.DELETE, contact ) ); } public function save_result( ):void { status.text = "Contact saved successfully"; } ]]> </mx:Script> Flex@Beach'10
  • 62. Open file (InsyncMate1): src insync mate maps MainMap.mxml Flex@Beach'10
  • 63. <EventMap> <EventHandlers type="{ ContactEvent.SAVE }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" save" arguments=" { event.contact }"> <resultHandlers> <CallBack method="save_result"/> <EventAnnouncer generator="{ SearchEvent }" type=" { SearchEvent.SEARCH }"> <Property targetKey="searchStr" source="{ ContactsManager }" sourceKey="lastSearch"/> </EventAnnouncer> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> Flex@Beach'10
  • 64. <EventMap> <EventHandlers type="{ ContactEvent.SAVE }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" save" arguments=" { event.contact }"> <resultHandlers> <CallBack method="save_result"/> <EventAnnouncer generator="{ SearchEvent }" type=" { SearchEvent.SEARCH }"> <Property targetKey="searchStr" source="{ ContactsManager }" sourceKey="lastSearch"/> </EventAnnouncer> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> ® Flex@Beach'10
  • 65. <EventMap> <EventHandlers type="{ ContactEvent.SAVE }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" save" arguments=" { event.contact }"> <resultHandlers> <CallBack method="save_result"/> <EventAnnouncer generator="{ SearchEvent }" type=" { SearchEvent.SEARCH }"> <Property targetKey="searchStr" source="{ ContactsManager }" sourceKey="lastSearch"/> </EventAnnouncer> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> Flex@Beach'10
  • 66. <EventMap> <EventHandlers type="{ ContactEvent.SAVE }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" save" arguments=" { event.contact }"> <resultHandlers> <CallBack method="save_result"/> <EventAnnouncer generator="{ SearchEvent }" type=" { SearchEvent.SEARCH }"> <Property targetKey="searchStr" source="{ ContactsManager }" sourceKey="lastSearch"/> </EventAnnouncer> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> ® Flex@Beach'10
  • 67. <EventMap> <EventHandlers type="{ ContactEvent.SAVE }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" save" arguments=" { event.contact }"> <resultHandlers> <CallBack method="save_result"/> <EventAnnouncer generator="{ SearchEvent }" type=" { SearchEvent.SEARCH }"> <Property targetKey="searchStr" source="{ ContactsManager }" sourceKey="lastSearch"/> </EventAnnouncer> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> ® Flex@Beach'10
  • 68. <EventMap> <EventHandlers type="{ ContactEvent.SAVE }"> <RemoteObjectInvoker instance="{ services.contacts }" method=" save" arguments=" { event.contact }"> <resultHandlers> <CallBack method="save_result"/> <EventAnnouncer generator="{ SearchEvent }" type=" { SearchEvent.SEARCH }"> <Property targetKey="searchStr" source="{ ContactsManager }" sourceKey="lastSearch"/> </EventAnnouncer> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> </EventMap> ® Flex@Beach'10
  • 69. Open file (InsyncMate1): src insync mate ui views ContactForm.mxml Flex@Beach'10
  • 70. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" label="{contact.id>0?contact.fullName:'New Contact'}"> <mx:Script> <![CDATA[ [Bindable] public var contact:Contact; private function save():void { contact.firstName = firstName.text; contact.lastName = lastName.text; contact.email = email.text; contact.phone = phone.text; contact.address = address.text; contact.city = city.text; contact.state = state.text; contact.zip = zip.text; contact.pic = picture.source; dispatchEvent( new ContactEvent( ContactEvent.SAVE, contact ) ); } private function remove():void { dispatchEvent( new ContactEvent( ContactEvent.DELETE, contact ) ); } public function save_result( ):void { status.text = "Contact saved successfully"; } ]]> </mx:Script> Flex@Beach'10
  • 71. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" label="{contact.id>0?contact.fullName:'New Contact'}"> <mx:Script> <![CDATA[ [Bindable] public var contact:Contact; private function save():void { contact.firstName = firstName.text; contact.lastName = lastName.text; contact.email = email.text; contact.phone = phone.text; contact.address = address.text; contact.city = city.text; contact.state = state.text; contact.zip = zip.text; contact.pic = picture.source; dispatchEvent( new ContactEvent( ContactEvent.SAVE, contact ) ); } private function remove():void { dispatchEvent( new ContactEvent( ContactEvent.DELETE, contact ) ); } public function save_result( ):void { status.text = "Contact saved successfully"; } ]]> </mx:Script> Flex@Beach'10
  • 72. Saving a contact Event Bus Remote Object (Services.mxml) View (ContacForm.mxml) EventMap Flex@Beach'10
  • 73. Version 3 Contact Form Flex@Beach'10
  • 74. Presentation Model Event Bus • User input & visualization • Maintains its state • Dispatches events Remote Object • Receives data (Services.mxml) • Validates user input View (ContacForm.mxml) EventMap Flex@Beach'10
  • 75. Presentation Model Event Bus • User input & visualization • Maintains its state • Dispatches events Remote Object • Receives data (Services.mxml) • Validates user input View (ContacForm.mxml) EventMap Flex@Beach'10
  • 76. Presentation Model Event Bus Remote Object (Services.mxml) View (ContacForm.mxml) EventMap Flex@Beach'10
  • 77. Presentation Model Event Bus Remote Object (Services.mxml) View Presentation (ContacForm.mxml) Model EventMap Flex@Beach'10
  • 78. Presentation Model Event Bus Remote Object (Services.mxml) View Presentation (ContacForm.mxml) Model EventMap Flex@Beach'10
  • 79. Open file (InsyncMate3): src insync mate contacts ui views ContactForm.mxml Flex@Beach'10
  • 80. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var model:ContactFormPresentationModel; </mx:Script> <mx:Form> <mx:FormItem label="Id"> <mx:TextInput text="{ model.contact.id }" enabled="false" /> </mx:FormItem> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" text="{ model.contact.firstName }" change="model.updateFirstName( firstName.text )" /> </mx:FormItem> <-- all of the other fields here --> </mx:Form> <controls:PictureInput id="picture" source=" { model.contact.pic }"/> <mx:Button bottom="26" left="12" label="Save" click="model.save()"/> <mx:Button bottom="26" left="72" label="Delete" click="model.remove()"/> <mx:Label id="status" text="{ model.status }" /> </mx:Canvas> Flex@Beach'10 ®
  • 81. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var model:ContactFormPresentationModel; </mx:Script> <mx:Form> <mx:FormItem label="Id"> <mx:TextInput text="{ model.contact.id }" enabled="false" /> </mx:FormItem> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" text="{ model.contact.firstName }" change="model.updateFirstName( firstName.text )" /> </mx:FormItem> <-- all of the other fields here --> </mx:Form> <controls:PictureInput id="picture" source=" { model.contact.pic }"/> <mx:Button bottom="26" left="12" label="Save" click="model.save()"/> <mx:Button bottom="26" left="72" label="Delete" click="model.remove()"/> <mx:Label id="status" text="{ model.status }" /> </mx:Canvas> ® Flex@Beach'10
  • 82. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var model:ContactFormPresentationModel; </mx:Script> <mx:Form> <mx:FormItem label="Id"> <mx:TextInput text="{ model.contact.id }" enabled="false" /> </mx:FormItem> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" text="{ model.contact.firstName }" change="model.updateFirstName( firstName.text )" /> </mx:FormItem> <-- all of the other fields here --> </mx:Form> <controls:PictureInput id="picture" source=" { model.contact.pic }"/> <mx:Button bottom="26" left="12" label="Save" click="model.save()"/> <mx:Button bottom="26" left="72" label="Delete" click="model.remove()"/> <mx:Label id="status" text="{ model.status }" /> </mx:Canvas> Flex@Beach'10
  • 83. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var model:ContactFormPresentationModel; </mx:Script> <mx:Form> <mx:FormItem label="Id"> <mx:TextInput text="{ model.contact.id }" enabled="false" /> </mx:FormItem> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" text="{ model.contact.firstName }" change="model.updateFirstName( firstName.text )" /> </mx:FormItem> <-- all of the other fields here --> </mx:Form> <controls:PictureInput id="picture" source=" { model.contact.pic }"/> <mx:Button bottom="26" left="12" label="Save" click="model.save()"/> <mx:Button bottom="26" left="72" label="Delete" click="model.remove()"/> <mx:Label id="status" text="{ model.status }" /> </mx:Canvas> ® Flex@Beach'10
  • 84. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> [Bindable] public var model:ContactFormPresentationModel; </mx:Script> <mx:Form> <mx:FormItem label="Id"> <mx:TextInput text="{ model.contact.id }" enabled="false" /> </mx:FormItem> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" text="{ model.contact.firstName }" change="model.updateFirstName( firstName.text )" /> </mx:FormItem> <-- all of the other fields here --> </mx:Form> <controls:PictureInput id="picture" source=" { model.contact.pic }"/> <mx:Button bottom="26" left="12" label="Save" click="model.save()"/> <mx:Button bottom="26" left="72" label="Delete" click="model.remove()"/> <mx:Label id="status" text="{ model.status }" /> </mx:Canvas> ® Flex@Beach'10
  • 85. Open file (InsyncMate3): src insync mate contacts ui presenters ContactPresentationModel.as Flex@Beach'10
  • 86. public class ContactFormPresentationModel extends EventDispatcher { // ---------------------------------- private var _title:String; [Bindable(Event="titleChange")] public function get title():String { return _title; } // ----------------------------------- private var _status:String; [Bindable(Event="statusChange")] public function get status():String { return _status; } // ----------------------------------- private var _contact:Contact; [Bindable(Event="contactChange")] public function get contact():Contact { return _contact; } Flex@Beach'10
  • 87. public class ContactFormPresentationModel extends EventDispatcher { // ---------------------------------- private var _title:String; [Bindable(Event="titleChange")] public function get title():String { return _title; } // ----------------------------------- private var _status:String; [Bindable(Event="statusChange")] public function get status():String { return _status; } // ----------------------------------- private var _contact:Contact; [Bindable(Event="contactChange")] public function get contact():Contact { return _contact; } Flex@Beach'10
  • 88. ----------------------------------- private var dispatcher:IEventDispatcher; public function ContactFormPresentationModel(dispatcher:IEventDispatcher, contact:Contact) { this.dispatcher = dispatcher; _contact = contact; _title = contact.id > 0 ? contact.fullName: 'New Contact'; } // ----------------------------------- public function save():void { dispatcher.dispatchEvent( new ContactEvent( ContactEvent.SAVE, contact ) ); } // ----------------------------------- public function remove():void { dispatcher.dispatchEvent( new ContactEvent( ContactEvent.DELETE, contact ) ); } // ----------------------------------- public function contactSaved( event:ContactEvent ):void { if( event.contact == contact ) { _status = "Contact saved successfully"; dispatchEvent( new Event( "statusChange" ) ); }Flex@Beach'10
  • 89. ----------------------------------- private var dispatcher:IEventDispatcher; public function ContactFormPresentationModel(dispatcher:IEventDispatcher, contact:Contact) { this.dispatcher = dispatcher; _contact = contact; _title = contact.id > 0 ? contact.fullName: 'New Contact'; } // ----------------------------------- public function save():void { dispatcher.dispatchEvent( new ContactEvent( ContactEvent.SAVE, contact ) ); } // ----------------------------------- public function remove():void { dispatcher.dispatchEvent( new ContactEvent( ContactEvent.DELETE, contact ) ); } // ----------------------------------- public function contactSaved( event:ContactEvent ):void { if( event.contact == contact ) { _status = "Contact saved successfully"; dispatchEvent( new Event( "statusChange" ) ); }Flex@Beach'10
  • 90. ----------------------------------- private var dispatcher:IEventDispatcher; public function ContactFormPresentationModel(dispatcher:IEventDispatcher, contact:Contact) { this.dispatcher = dispatcher; _contact = contact; _title = contact.id > 0 ? contact.fullName: 'New Contact'; } // ----------------------------------- public function save():void { dispatcher.dispatchEvent( new ContactEvent( ContactEvent.SAVE, contact ) ); } // ----------------------------------- public function remove():void { dispatcher.dispatchEvent( new ContactEvent( ContactEvent.DELETE, contact ) ); } // ----------------------------------- public function contactSaved( event:ContactEvent ):void { if( event.contact == contact ) { _status = "Contact saved successfully"; dispatchEvent( new Event( "statusChange" ) ); }Flex@Beach'10
  • 91. // Update functions ---------------------------------------------- public function updateFirstName( firstName:String ):void { contact.firstName = firstName; } // ----------------------------------- public function updateLastName( lastName:String ):void { contact.lastName = lastName; } // ----------------------------------- public function updateEmail( email:String ):void { contact.email = email; } // ----------------------------------- public function updatePhone( phone:String ):void { contact.phone = phone; } Flex@Beach'10
  • 92. Open file (InsyncMate3): src insync mate contacts managers ContactsManager.as Flex@Beach'10
  • 93. ContactsManager.as (InsyncMate3) public class ContactsManager extends EventDispatcher { private var editOpenContacts:Dictionary = new Dictionary( true ); private var newOpenContacts:Dictionary = new Dictionary( true ); // ------------------------------------------------------------------------ // property to store the last search keyword public var lastSearch:String = " "; // ------------------------------------------------------------------------ // Read-only public variable used to access the current contacts to show in list private var _contacts:ArrayCollection; [Bindable(event="contactsChanged")] public function get contacts():ArrayCollection { return _contacts; } // ------------------------------------------------------------------------ // Read-only public variable used to access the current contact (last selected contact) private var currentContact:Contact; public function getCurrentContact():Contact { return currentContact; } // ------------------------------------------------------------------------- // Stores given contacts and the current search keyword public function storeSearch( list:ArrayCollection, searchKey:String ):void { _contacts = list; Flex@Beach'10
  • 94. ContactsManager.as (InsyncMate3) public class ContactsManager extends EventDispatcher { private var editOpenContacts:Dictionary = new Dictionary( true ); private var newOpenContacts:Dictionary = new Dictionary( true ); // ------------------------------------------------------------------------ // property to store the last search keyword public var lastSearch:String = " "; // ------------------------------------------------------------------------ // Read-only public variable used to access the current contacts to show in list private var _contacts:ArrayCollection; [Bindable(event="contactsChanged")] public function get contacts():ArrayCollection { return _contacts; } // ------------------------------------------------------------------------ // Read-only public variable used to access the current contact (last selected contact) private var currentContact:Contact; public function getCurrentContact():Contact { return currentContact; } // ------------------------------------------------------------------------- // Stores given contacts and the current search keyword public function storeSearch( list:ArrayCollection, searchKey:String ):void { _contacts = list; Flex@Beach'10
  • 95. Open file (InsyncMate3): src insync mate contacts maps ContactMap.mxml Flex@Beach'10
  • 96. ContactMap.mxml <LocalEventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/"> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <Injectors target="{ ContactForm }"> <MethodInvoker generator="{ ContactsManager }" method="getCurrentContact" /> <ObjectBuilder generator="{ ContactFormPresentationModel }" cache="none" constructorArguments=" { [ scope.dispatcher, lastReturn ] }" /> <PropertyInjector targetKey="model" source="{ lastReturn }"/> </Injectors> <Injectors target="{ ContactFormPresentationModel }"> <ListenerInjector eventType="{ ContactEvent.SAVED }" method="contactSaved" /> </Injectors> </LocalEventMap> Flex@Beach'10
  • 97. ContactMap.mxml <LocalEventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/"> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <Injectors target="{ ContactForm }"> <MethodInvoker generator="{ ContactsManager }" method="getCurrentContact" /> <ObjectBuilder generator="{ ContactFormPresentationModel }" cache="none" constructorArguments=" { [ scope.dispatcher, lastReturn ] }" /> <PropertyInjector targetKey="model" source="{ lastReturn }"/> </Injectors> <Injectors target="{ ContactFormPresentationModel }"> <ListenerInjector eventType="{ ContactEvent.SAVED }" method="contactSaved" /> </Injectors> </LocalEventMap> Flex@Beach'10
  • 98. ContactMap.mxml (InsyncMate3) <!-- ContactEvent.SAVE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ ContactEvent.SAVE }"> <RemoteObjectInvoker instance="{ services.contacts }" method="save" arguments=" { event.contact }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method="save" arguments="{ [resultObject, event.contact] }"/> <EventAnnouncer generator="{ SearchEvent }" dispatcherType="global" type=" { ContactEvent.REFRESH }"/> <EventAnnouncer generator="{ ContactEvent }" constructorArguments="{ [ContactEvent.SAVED, event.contact] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> Flex@Beach'10
  • 99. Version 3 Modules Flex@Beach'10
  • 100. Open folder (InsyncMate3): src insync mate contacts ContactModule.mxml shared Flex@Beach'10
  • 101. ContactModule.mxml <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> public function addTab( event:NavigatorEvent ):void { try { var childIndex:int = tabNavigator.getChildIndex( event.content ); tabNavigator.selectedIndex = childIndex; } catch( e:Error) { tabNavigator.addChild( event.content ); tabNavigator.selectedChild = event.content; } } public function removeTab( event:NavigatorEvent ):void { tabNavigator.removeChild( event.content ); } </mx:Script> <!-- EventMaps --> <maps:ContactMap dispatcher="{ this }"/> <!-- UI --> <mx:HDividedBox width="100%" height="100%"> <flexLib:SuperTabNavigator id="tabNavigator" width="100%" height="100%"/> <views:ContactList id="list" width="300"/> </mx:HDividedBox> Flex@Beach'10
  • 102. ContactModule.mxml <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> public function addTab( event:NavigatorEvent ):void { try { var childIndex:int = tabNavigator.getChildIndex( event.content ); tabNavigator.selectedIndex = childIndex; } catch( e:Error) { tabNavigator.addChild( event.content ); tabNavigator.selectedChild = event.content; } } public function removeTab( event:NavigatorEvent ):void { tabNavigator.removeChild( event.content ); } </mx:Script> <!-- EventMaps --> <maps:ContactMap dispatcher="{ this }"/> <!-- UI --> <mx:HDividedBox width="100%" height="100%"> <flexLib:SuperTabNavigator id="tabNavigator" width="100%" height="100%"/> <views:ContactList id="list" width="300"/> </mx:HDividedBox> Flex@Beach'10
  • 103. ContactModule.mxml <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> public function addTab( event:NavigatorEvent ):void { try { var childIndex:int = tabNavigator.getChildIndex( event.content ); tabNavigator.selectedIndex = childIndex; } catch( e:Error) { tabNavigator.addChild( event.content ); tabNavigator.selectedChild = event.content; } } public function removeTab( event:NavigatorEvent ):void { tabNavigator.removeChild( event.content ); } </mx:Script> <!-- EventMaps --> <maps:ContactMap dispatcher="{ this }"/> <!-- UI --> <mx:HDividedBox width="100%" height="100%"> <flexLib:SuperTabNavigator id="tabNavigator" width="100%" height="100%"/> <views:ContactList id="list" width="300"/> </mx:HDividedBox> Flex@Beach'10
  • 104. Open file (InsyncMate3): src insync mate contacts maps ContactMap.mxml Flex@Beach'10
  • 105. ContactMap.mxml <LocalEventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns=" http://mate.asfusion.com/"> <!-- SearchEvent.SEARCH ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ SearchEvent.SEARCH }" dispatcherType="global"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" arguments=" { event.searchStr }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method=" storeSearch" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> <!-- ContactEvent.EDIT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ ContactEvent.EDIT }"> <MethodInvoker generator="{ ContactsManager }" method="openEditContact" arguments="{[ event.contact, ContactForm ]}" /> <EventAnnouncer generator="{ NavigatorEvent }" type="{ NavigatorEvent.ADD_CONTENT }" > <Property targetKey="content" source="{ lastReturn }"/> </EventAnnouncer> </EventHandlers> <!-- ContactEvent.ADD ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ ContactEvent.ADD }" dispatcherType="global"> <MethodInvoker generator="{ ContactsManager }" method="openNewContact" arguments="{ ContactForm }"/> Flex@Beach'10
  • 106. ContactMap.mxml <LocalEventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns=" http://mate.asfusion.com/"> <!-- SearchEvent.SEARCH ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ SearchEvent.SEARCH }" dispatcherType="global"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" arguments=" { event.searchStr }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method=" storeSearch" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> <!-- ContactEvent.EDIT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ ContactEvent.EDIT }"> <MethodInvoker generator="{ ContactsManager }" method="openEditContact" arguments="{[ event.contact, ContactForm ]}" /> <EventAnnouncer generator="{ NavigatorEvent }" type="{ NavigatorEvent.ADD_CONTENT }" > <Property targetKey="content" source="{ lastReturn }"/> </EventAnnouncer> </EventHandlers> <!-- ContactEvent.ADD ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ ContactEvent.ADD }" dispatcherType="global"> <MethodInvoker generator="{ ContactsManager }" method="openNewContact" arguments="{ ContactForm }"/> Flex@Beach'10
  • 107. ContactMap.mxml <LocalEventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/"> <!-- SearchEvent.SEARCH ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ SearchEvent.SEARCH }" dispatcherType="global"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" arguments=" { event.searchStr }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method=" storeSearch" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> <!-- ContactEvent.EDIT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ ContactEvent.EDIT }"> <MethodInvoker generator="{ ContactsManager }" method="openEditContact" arguments="{[ event.contact, ContactForm ]}" /> <EventAnnouncer generator="{ NavigatorEvent }" type="{ NavigatorEvent.ADD_CONTENT }" > <Property targetKey="content" source="{ lastReturn }"/> </EventAnnouncer> </EventHandlers> <!-- ContactEvent.ADD ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ ContactEvent.ADD }" dispatcherType="global"> <MethodInvoker generator="{ ContactsManager }" method="openNewContact" arguments="{ ContactForm }"/> Flex@Beach'10
  • 108. ContactMap.mxml <LocalEventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/"> <!-- SearchEvent.SEARCH ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ SearchEvent.SEARCH }" dispatcherType="global"> <RemoteObjectInvoker instance="{ services.contacts }" method=" getContactsByName" arguments=" { event.searchStr }"> <resultHandlers> <MethodInvoker generator="{ ContactsManager }" method=" storeSearch" arguments=" { [resultObject, event.searchStr] }"/> </resultHandlers> </RemoteObjectInvoker> </EventHandlers> <!-- ContactEvent.EDIT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ ContactEvent.EDIT }"> <MethodInvoker generator="{ ContactsManager }" method="openEditContact" arguments="{[ event.contact, ContactForm ]}" /> <EventAnnouncer generator="{ NavigatorEvent }" type="{ NavigatorEvent.ADD_CONTENT }" > <Property targetKey="content" source="{ lastReturn }"/> </EventAnnouncer> </EventHandlers> <!-- ContactEvent.ADD ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <EventHandlers type="{ ContactEvent.ADD }" dispatcherType="global"> <MethodInvoker generator="{ ContactsManager }" method="openNewContact" arguments="{ ContactForm }"/> Flex@Beach'10 54
  • 109. Learn more http://mate.asfusion.com Flex@Beach'10 57

×