Краткое введение в Mate Flex framework

3,019 views

Published on

Доклад Константина Ковалёва aka Constantiner освещает основные особенности Flex-фреймворка Mate и дает все необходимые ссылки.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,019
On SlideShare
0
From Embeds
0
Number of Embeds
169
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Краткое введение в Mate Flex framework

  1. 1. Краткое введение в Mate Flex framework Константин Ковалёв http://riapriority.com/ [email_address] 24 августа 2008 г.
  2. 2. Как это выглядит? http://mate.asfusion.com/ М á тэ
  3. 3. Немного фактов <ul><li>Публичное появление 4 мая 2008 </li></ul><ul><li>Альфа </li></ul><ul><li>Использовался в проектах AsFusion </li></ul><ul><li>Текущая версия 0.7.5 </li></ul><ul><li>http://mate-framework.googlecode.com/svn/trunk/src </li></ul><ul><li>Apache License, Version 2.0 </li></ul>
  4. 4. Особенности <ul><li>СОБЫТИЯ! </li></ul><ul><ul><li>«Родная» событийная модель </li></ul></ul><ul><li>Декларативный синтаксис </li></ul><ul><li>Dependency injection </li></ul><ul><li>Связывание данных </li></ul><ul><li>Используются сильные стороны Flex ! </li></ul><ul><li>Это не микроархитектура – это framework ! </li></ul><ul><li>Синглтонов – нет! </li></ul>
  5. 5. Использование <ul><li>http://mate.asfusion.com/page/documentation/getting-started </li></ul>
  6. 6. 1 . Главный файл приложения <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mx:Application </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>xmlns=&quot;*&quot;> </li></ul><ul><li><MainEventMap /> </li></ul><ul><li><MainUI /> </li></ul><ul><li></mx:Application> </li></ul>
  7. 7. 2. Событие <ul><li>package </li></ul><ul><li>{ </li></ul><ul><ul><li>import flash.events.Event; </li></ul></ul><ul><ul><li>public class TestEvent extends Event </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><ul><li>public static const BUTTON_CLICK:String = &quot;buttonClick&quot;; </li></ul></ul></ul><ul><ul><ul><li>public function TestEvent(type:String, </li></ul></ul></ul><ul><ul><ul><li>bubbles:Boolean = true , cancelable:Boolean=false) </li></ul></ul></ul><ul><ul><ul><li>{ </li></ul></ul></ul><ul><ul><ul><li>super(type, bubbles, cancelable); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul>
  8. 8. 3. Класс представления <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mx:Box </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>xmlns:mate=&quot;http://mate.asfusion.com/&quot;> </li></ul><ul><li><mate:Dispatcher </li></ul><ul><li>id=&quot;clickDispatcher&quot; </li></ul><ul><li>generator=&quot;{TestEvent}&quot; </li></ul><ul><li>type=&quot;{TestEvent.BUTTON_CLICK}&quot; /> </li></ul><ul><li><mx:Button </li></ul><ul><li>label=&quot;Click Me!&quot; </li></ul><ul><li>click=&quot; clickDispatcher.generateEvent() &quot; /> </li></ul><ul><li></mx:Box> </li></ul>
  9. 9. 3. Класс представления ( old style ) <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mx:Box </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>xmlns:mate=&quot;http://mate.asfusion.com/&quot;> </li></ul><ul><li><mx:Button </li></ul><ul><li>label=&quot;Click Me!&quot; </li></ul><ul><li>click=&quot; dispatchEvent(new TestEvent (TestEvent.BUTTON_CLICK) &quot; /> </li></ul><ul><li></mx:Box> </li></ul>
  10. 10. 4. EventMap <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mate:EventMap </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>xmlns:mate=&quot;http://mate.asfusion.com/&quot;> </li></ul><ul><li><mate:EventHandlers </li></ul><ul><li>type=&quot;{TestEvent.BUTTON_CLICK}&quot;> </li></ul><ul><li><SomeAction /> </li></ul><ul><li></mate:EventHandlers> </li></ul><ul><li></mate:EventMap> </li></ul>
  11. 11. 5. Model <ul><li>package </li></ul><ul><li>{ </li></ul><ul><li>public class ClickManager </li></ul><ul><li>{ </li></ul><ul><li>[Bindable] </li></ul><ul><li>public var clickNumber:int = 0; </li></ul><ul><li>public function performClick ():void </li></ul><ul><li>{ </li></ul><ul><li>clickNumber ++; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  12. 12. 4. EventMap из реальной жизни (почти  ) <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mate:EventMap </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>xmlns:mate=&quot;http://mate.asfusion.com/&quot;> </li></ul><ul><li><mate:EventHandlers </li></ul><ul><li>type=&quot;{TestEvent.BUTTON_CLICK}&quot;> </li></ul><ul><li><mate:MethodInvoker </li></ul><ul><li>generator=&quot;{ClickManager}&quot; </li></ul><ul><li>method=&quot;performClick&quot; /> </li></ul><ul><li></mate:EventHandlers> </li></ul><ul><li></mate:EventMap> </li></ul>
  13. 13. 3. Класс представления (из реальной жизни  ) <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mx:Box </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>xmlns:mate=&quot;http://mate.asfusion.com/&quot;> </li></ul><ul><li><mate:Dispatcher </li></ul><ul><li>id=&quot;clickDispatcher&quot; </li></ul><ul><li>generator=&quot;{TestEvent}&quot; </li></ul><ul><li>type=&quot;{TestEvent.BUTTON_CLICK}&quot; /> </li></ul><ul><li><mx:Number </li></ul><ul><li>id=&quot;clickNumber&quot; /> </li></ul><ul><li><mx:Button </li></ul><ul><li>label=&quot;Click Me!&quot; </li></ul><ul><li>click=&quot;clickDispatcher.generateEvent()&quot; /> </li></ul><ul><li><mx:Label </li></ul><ul><li>text=&quot;{clickNumber}&quot; /> </li></ul><ul><li></mx:Box> </li></ul>
  14. 14. 4. EventMap ( финальный аккорд ) <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mate:EventMap </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>xmlns:mate=&quot;http://mate.asfusion.com/&quot;> </li></ul><ul><li><mate:EventHandlers </li></ul><ul><li>type=&quot;{TestEvent.BUTTON_CLICK}&quot;> </li></ul><ul><li><mate:MethodInvoker </li></ul><ul><li>generator=&quot;{ClickManager}&quot; </li></ul><ul><li>method=&quot;performClick&quot; /> </li></ul><ul><li></mate:EventHandlers> </li></ul><ul><li><mate:Injectors </li></ul><ul><li>target=&quot;{MainUI}&quot;> </li></ul><ul><li><mate:PropertyInjector </li></ul><ul><li>source=&quot;{ClickManager}&quot; </li></ul><ul><li>sourceKey=&quot;clickNumber&quot; </li></ul><ul><li>targetKey=&quot;clickNumber&quot; /> </li></ul><ul><li></mate:Injectors> </li></ul><ul><li></mate:EventMap> </li></ul>
  15. 15. Общая картина MainUI MainEventMap ClickManager
  16. 16. Общая картина MainUI MainEventMap ClickManager TestEvent.BUTTON_CLICK
  17. 17. Общая картина MainUI MainEventMap ClickManager performClick () TestEvent.BUTTON_CLICK
  18. 18. Общая картина MainUI MainEventMap ClickManager {clickNumber} performClick () TestEvent.BUTTON_CLICK
  19. 19. Общая картина MainUI MainEventMap ClickManager {clickNumber} performClick () TestEvent.BUTTON_CLICK Model Controller View
  20. 20. Разделяем контроллер и Dependency injection <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mx:Application </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>xmlns=&quot;*&quot;> </li></ul><ul><li><MainEventMap /> </li></ul><ul><li><MainUI /> </li></ul><ul><li><ModelMap /> </li></ul><ul><li></mx:Application> </li></ul>
  21. 21. Разделяем контроллер и Dependency injection <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><!-- ModelMap --> </li></ul><ul><li><mate:EventMap </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>xmlns:mate=&quot;http://mate.asfusion.com/&quot;> </li></ul><ul><li><mate:Injectors </li></ul><ul><li>target=&quot;{MainUI}&quot;> </li></ul><ul><li><mate:PropertyInjector </li></ul><ul><li>source=&quot;{ClickManager}&quot; </li></ul><ul><li>sourceKey=&quot;clickNumber&quot; </li></ul><ul><li>targetKey=&quot;clickNumber&quot; /> </li></ul><ul><li></mate:Injectors> </li></ul><ul><li></mate:EventMap> </li></ul>
  22. 22. Взаимодействие с сервером MainUI MainEventMap Server
  23. 23. Взаимодействие с сервером MainUI MainEventMap Server TestEvent.BUTTON_CLICK
  24. 24. Взаимодействие с сервером MainUI MainEventMap Server performClick () TestEvent.BUTTON_CLICK
  25. 25. Взаимодействие с сервером MainUI MainEventMap Server performClick () TestEvent.BUTTON_CLICK clickNumber ++
  26. 26. Взаимодействие с сервером MainUI MainEventMap Server performClick () TestEvent.BUTTON_CLICK clickNumber ++ clickNumber
  27. 27. Взаимодействие с сервером MainUI MainEventMap Server performClick () TestEvent.BUTTON_CLICK clickNumber ++ clickNumber clickNumber
  28. 28. Идем на сервер <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mate:EventMap </li></ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; </li></ul><ul><li>xmlns:mate=&quot;http://mate.asfusion.com/&quot;> </li></ul><ul><li><mate:EventHandlers </li></ul><ul><li>type=&quot;{TestEvent.BUTTON_CLICK}&quot;> </li></ul><ul><li><mate:RemoteObjectInvoker </li></ul><ul><li>destination=&quot;someDestination&quot; </li></ul><ul><li>method=&quot;performClick&quot;> </li></ul><ul><li><mate:resultHandlers> </li></ul><ul><li><mate:ServiceResponseAnnouncer </li></ul><ul><li>type=&quot;result&quot; /> </li></ul><ul><li></mate:resultHandlers> </li></ul><ul><li></mate:RemoteObjectInvoker> </li></ul><ul><li></mate:EventHandlers> </li></ul><ul><li></mate:EventMap> </li></ul>
  29. 29. Видоизмененный View <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mx:Box xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; xmlns:mate=&quot;http://mate.asfusion.com/&quot;> </li></ul><ul><li><mx:Script> </li></ul><ul><li><![CDATA[ </li></ul><ul><li>import com.asfusion.mate.events.ResponseEvent; </li></ul><ul><li>[Bindable] </li></ul><ul><li>public var clickNumber:Number = 0; </li></ul><ul><li>private function onResult (event:ResponseEvent):void { </li></ul><ul><li>clickNumber = Number (event.result); </li></ul><ul><li>} </li></ul><ul><li>]]> </li></ul><ul><li></mx:Script> </li></ul><ul><li><mate:Dispatcher id=&quot;clickDispatcher” generator=&quot;{TestEvent}” type=&quot;{TestEvent.BUTTON_CLICK}&quot;> </li></ul><ul><li><mate:ServiceResponseHandler </li></ul><ul><li>result=&quot;onResult(event)&quot; /> </li></ul><ul><li></mate:Dispatcher> </li></ul><ul><li><mx:Button label=&quot;Click Me!” click=&quot;clickDispatcher.generateEvent()&quot; /> </li></ul><ul><li><mx:Label text=&quot;{clickNumber}&quot; /> </li></ul><ul><li></mx:Box> </li></ul>
  30. 30. Передача параметров
  31. 31. Видоизмененное событие <ul><li>package </li></ul><ul><li>{ </li></ul><ul><li>import flash.events.Event; </li></ul><ul><li>public class TestEvent extends Event { </li></ul><ul><li>public static const BUTTON_CLICK:String = &quot;buttonClick&quot;; </li></ul><ul><li>public var amount:int; </li></ul><ul><li>public function TestEvent(type:String, </li></ul><ul><li>bubbles:Boolean=true, cancelable:Boolean=false) { </li></ul><ul><li>super(type, bubbles, cancelable); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  32. 32. Параметр во View <ul><li><mx:Number </li></ul><ul><li>id=&quot;currentAmount&quot;>1</mx:Number> </li></ul><ul><li><mx:RadioButtonGroup id=&quot;amountGroup&quot; </li></ul><ul><li>change=&quot;currentAmount = event.currentTarget.selection.data&quot; /> </li></ul><ul><li><mx:RadioButton </li></ul><ul><li>group=&quot;{amountGroup}“ </li></ul><ul><li>selected=“true” </li></ul><ul><li>data=&quot;1&quot; </li></ul><ul><li>label=&quot;1&quot; /> </li></ul><ul><li><mx:RadioButton </li></ul><ul><li>group=&quot;{amountGroup}&quot; </li></ul><ul><li>data=&quot;2&quot; </li></ul><ul><li>label=&quot;2&quot; /> </li></ul>
  33. 33. Рассылка события из View <ul><li><mate:Dispatcher </li></ul><ul><li>id=&quot;clickDispatcher&quot; </li></ul><ul><li>generator=&quot;{TestEvent}&quot; </li></ul><ul><li>type=&quot;{TestEvent.BUTTON_CLICK}&quot;> </li></ul><ul><li><mate:eventProperties> </li></ul><ul><li><mate:EventProperties </li></ul><ul><li>amount=&quot;{currentAmount}&quot; /> </li></ul><ul><li></mate:eventProperties> </li></ul><ul><li></mate:Dispatcher> </li></ul><ul><li><mx:Number </li></ul><ul><li>id=&quot;currentAmount&quot;>1</mx:Number> </li></ul>
  34. 34. Отсылка параметра на сервер <ul><li><mate:EventHandlers </li></ul><ul><li>type=&quot;{TestEvent.BUTTON_CLICK}&quot;> </li></ul><ul><li><mate:RemoteObjectInvoker </li></ul><ul><li>destination=&quot;someDestination&quot; </li></ul><ul><li>method=&quot;performClick &quot; </li></ul><ul><li>arguments=&quot;{event.amount}&quot; > </li></ul><ul><li><mate:resultHandlers> </li></ul><ul><li><mate:ServiceResponseAnnouncer </li></ul><ul><li>type=&quot;result&quot; /> </li></ul><ul><li></mate:resultHandlers> </li></ul><ul><li></mate:RemoteObjectInvoker> </li></ul><ul><li></mate:EventHandlers> </li></ul>
  35. 35. EventMap: SmartObject <ul><li>event </li></ul><ul><li>resultObject </li></ul><ul><li>fault </li></ul><ul><li>lastReturn </li></ul><ul><li>message </li></ul><ul><li>data </li></ul><ul><li>scope </li></ul><ul><li>currentEvent </li></ul><mate:RemoteObjectInvoker destination=&quot;someDestination“ method=&quot;performClick “ arguments=&quot;{ event.amount }&quot;> … </mate:RemoteObjectInvoker>
  36. 36. Хитрости SmartObject <ul><li>Можно: </li></ul><ul><ul><li>arguments=“{event.count}” </li></ul></ul><ul><li>Нельзя: </li></ul><ul><ul><li>arguments=“{event.count + 1 }” </li></ul></ul><ul><ul><li>arguments=“{event.book.id}” </li></ul></ul><ul><ul><li>итд. </li></ul></ul><ul><li>Можно использовать MethodInvoker </li></ul>
  37. 37. Отладка <ul><li><mate:Debugger </li></ul><ul><li>level=&quot;{Debugger.DEBUG}&quot; /> </li></ul><ul><li><mate:EventHandlers </li></ul><ul><li>debug=&quot;true&quot; </li></ul><ul><li>type=&quot;{TestEvent.BUTTON_CLICK}&quot;> </li></ul><ul><li>Не забывайте убирать после отладки: жрет ресурсы! </li></ul>
  38. 38. Взаимодействие с сервером <ul><li>RemoteObjectInvoker </li></ul><ul><li>HTTPServiceInvoker </li></ul><ul><li>WebServiceInvoker </li></ul><ul><li>Производные от ServiceInvoker > AbstractServiceInvoker </li></ul><ul><li>При создании своего сервиса: </li></ul><ul><ul><li>implements IAction </li></ul></ul>
  39. 39. Собственные обработчики <ul><li>implements IAction </li></ul><ul><li>Можно унаследоваться от AbstractAction </li></ul>
  40. 40. Ресурсы <ul><li>http://mate.asfusion.com/page/documentation </li></ul><ul><li>http://mate.asfusion.com/api_docs </li></ul><ul><li>http://mate.asfusion.com/page/downloads </li></ul><ul><li>http://mate.asfusion.com/page/examples </li></ul>
  41. 41. Mate+Cairngorm= ♥ <ul><li>http://mate.asfusion.com/page/examples/cafe-townsend </li></ul>
  42. 42. Пример Ozon Book Finder
  43. 43. Q&A <ul><li>Константин Ковалёв </li></ul><ul><li>http://riapriority.com/ </li></ul><ul><li>[email_address] </li></ul>

×