Краткое введение в mate flex framework

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

Константин Ковалёвhttp://riapriority.com/

[email protected]

24 августа 2008 г.

Как это выглядит?

http://mate.asfusion.com/ Мáтэ

Немного фактов

• Публичное появление 4 мая 2008

• Альфа

• Использовался в проектах AsFusion

• Текущая версия 0.7.5

• http://mate-framework.googlecode.com/svn/trunk/src

• Apache License, Version 2.0

Особенности

• СОБЫТИЯ!– «Родная» событийная модель

• Декларативный синтаксис• Dependency injection• Связывание данных• Используются сильные стороны Flex!• Это не микроархитектура – это framework!• Синглтонов – нет!

Использование

http://mate.asfusion.com/page/documentation/getting-started

1. Главный файл приложения

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

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

xmlns="*">

<MainEventMap />

<MainUI />

</mx:Application>

2. Событие

package

{

import flash.events.Event;

public class TestEvent extends Event

{

public static const BUTTON_CLICK:String = "buttonClick";

public function TestEvent(type:String,

bubbles:Boolean=true, cancelable:Boolean=false)

{

super(type, bubbles, cancelable);

}

}

}

3. Класс представления


<mx:Box


xmlns:mate="http://mate.asfusion.com/">

<mate:Dispatcher

id="clickDispatcher"

generator="{TestEvent}"

type="{TestEvent.BUTTON_CLICK}" />

<mx:Button

label="Click Me!"

click="clickDispatcher.generateEvent()" />

</mx:Box>

3. Класс представления (old style)


<mx:Box



<mx:Button

label="Click Me!"

click="dispatchEvent(new TestEvent (TestEvent.BUTTON_CLICK)" />

</mx:Box>

4. EventMap


<mate:EventMap



<mate:EventHandlers

type="{TestEvent.BUTTON_CLICK}">

<SomeAction />

</mate:EventHandlers>

</mate:EventMap>

5. Model

package

{

public class ClickManager

{

[Bindable]

public var clickNumber:int = 0;

public function performClick ():void

{

clickNumber ++;

}

}

}

4. EventMap из реальной жизни (почти )


<mate:EventMap



<mate:EventHandlers


<mate:MethodInvoker

generator="{ClickManager}"

method="performClick" />


</mate:EventMap>

3. Класс представления (из реальной жизни )


<mx:Box



<mate:Dispatcher



type="{TestEvent.BUTTON_CLICK}" />

<mx:Number

id="clickNumber" />

<mx:Button

label="Click Me!"

click="clickDispatcher.generateEvent()" />

<mx:Label

text="{clickNumber}" />

</mx:Box>

4. EventMap (финальный аккорд)


<mate:EventMap



<mate:EventHandlers


<mate:MethodInvoker

generator="{ClickManager}"

method="performClick" />


<mate:Injectors

target="{MainUI}">

<mate:PropertyInjector

source="{ClickManager}"

sourceKey="clickNumber"

targetKey="clickNumber" />

</mate:Injectors>

</mate:EventMap>

Общая картина

MainUIMainUI

MainEventMapMainEventMap

ClickManagerClickManager

TestEvent.BUTTON_CLICK


MainUIMainUI



performClick ()TestEvent.BUTTON_CLICK


MainUIMainUI



{clickNumber}



MainUIMainUI



{clickNumber}


ModelModel

ControllerController

ViewView


MainUIMainUI



Разделяем контроллер и Dependency injection


<mx:Application


xmlns="*">

<MainEventMap />

<MainUI />

<ModelMap />

</mx:Application>

Разделяем контроллер и Dependency injection




<mate:EventMap



<mate:Injectors

target="{MainUI}">

<mate:PropertyInjector

source="{ClickManager}"

sourceKey="clickNumber"

targetKey="clickNumber" />

</mate:Injectors>

</mate:EventMap>

Взаимодействие с сервером

MainUIMainUI


ServerServer


TestEvent.BUTTON_CLICK

MainUIMainUI


ServerServer



MainUIMainUI


ServerServer



MainUIMainUI


ServerServer

clickNumber ++



MainUIMainUI


ServerServer

clickNumber ++

clickNumber



MainUIMainUI


ServerServer

clickNumber ++

clickNumber

clickNumber

Идем на сервер


<mate:EventMap



<mate:EventHandlers


<mate:RemoteObjectInvoker

destination="someDestination"

method="performClick">

<mate:resultHandlers>

<mate:ServiceResponseAnnouncer

type="result" />

</mate:resultHandlers>

</mate:RemoteObjectInvoker>


</mate:EventMap>

Видоизмененный View<?xml version="1.0" encoding="utf-8"?>

<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mate="http://mate.asfusion.com/">

<mx:Script>

<![CDATA[

import com.asfusion.mate.events.ResponseEvent;

[Bindable]

public var clickNumber:Number = 0;

private function onResult (event:ResponseEvent):void {

clickNumber = Number (event.result);

}

]]>

</mx:Script>

<mate:Dispatcher id="clickDispatcher” generator="{TestEvent}” type="{TestEvent.BUTTON_CLICK}">

<mate:ServiceResponseHandler

result="onResult(event)" />

</mate:Dispatcher>

<mx:Button label="Click Me!” click="clickDispatcher.generateEvent()" />

<mx:Label text="{clickNumber}" />

</mx:Box>

Передача параметров

Видоизмененное событие

package

{

import flash.events.Event;

public class TestEvent extends Event {

public static const BUTTON_CLICK:String = "buttonClick";

public var amount:int;

public function TestEvent(type:String,

bubbles:Boolean=true, cancelable:Boolean=false) {

super(type, bubbles, cancelable);

}

}

}

Параметр во View

<mx:Number

id="currentAmount">1</mx:Number>

<mx:RadioButtonGroup id="amountGroup"

change="currentAmount = event.currentTarget.selection.data" />

<mx:RadioButton

group="{amountGroup}“

selected=“true”

data="1"

label="1" />

<mx:RadioButton

group="{amountGroup}"

data="2"

label="2" />

Рассылка события из View

<mate:Dispatcher




<mate:eventProperties>

<mate:EventProperties

amount="{currentAmount}" />

</mate:eventProperties>

</mate:Dispatcher>

<mx:Number

id="currentAmount">1</mx:Number>

Отсылка параметра на сервер

<mate:EventHandlers


<mate:RemoteObjectInvoker

destination="someDestination"

method="performClick "

arguments="{event.amount}">

<mate:resultHandlers>

<mate:ServiceResponseAnnouncer

type="result" />

</mate:resultHandlers>

</mate:RemoteObjectInvoker>


EventMap: SmartObject

• event• resultObject• fault• lastReturn• message• data• scope• currentEvent

<mate:RemoteObjectInvokerdestination="someDestination“method="performClick “arguments="{event.amount}">…</mate:RemoteObjectInvoker>

Хитрости SmartObject

• Можно:– arguments=“{event.count}”

• Нельзя:– arguments=“{event.count + 1}”– arguments=“{event.book.id}”– итд.

• Можно использовать MethodInvoker

Отладка

<mate:Debugger

level="{Debugger.DEBUG}" />

<mate:EventHandlers

debug="true"

type="{TestEvent.BUTTON_CLICK}">• Не забывайте убирать после

отладки: жрет ресурсы!


• RemoteObjectInvoker• HTTPServiceInvoker• WebServiceInvoker• Производные от ServiceInvoker > AbstractServiceInvoker

• При создании своего сервиса:– implements IAction

Собственные обработчики

• implements IAction• Можно унаследоваться от AbstractAction

Ресурсы

• http://mate.asfusion.com/page/documentation• http://mate.asfusion.com/api_docs • http://mate.asfusion.com/page/downloads• http://mate.asfusion.com/page/examples

Mate+Cairngorm= ♥• http://mate.asfusion.com/page/examples/

cafe-townsend

Пример Ozon Book Finder

Q&A

Константин Ковалёвhttp://riapriority.com/

[email protected]

Краткое введение в mate flex framework

Documents