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

Краткое введение в Mate Flex framework Константин Ковалёв http://riapriority.com/ [email_address] 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>

Общая картина MainUI MainEventMap ClickManager

Общая картина MainUI MainEventMap ClickManager TestEvent.BUTTON_CLICK

Общая картина MainUI MainEventMap ClickManager performClick () TestEvent.BUTTON_CLICK

Общая картина MainUI MainEventMap ClickManager {clickNumber} performClick () TestEvent.BUTTON_CLICK

Общая картина MainUI MainEventMap ClickManager {clickNumber} performClick () TestEvent.BUTTON_CLICK Model Controller View

Разделяем контроллер и 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>

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

Взаимодействие с сервером MainUI MainEventMap Server TestEvent.BUTTON_CLICK

Взаимодействие с сервером MainUI MainEventMap Server performClick () TestEvent.BUTTON_CLICK

Взаимодействие с сервером MainUI MainEventMap Server performClick () TestEvent.BUTTON_CLICK clickNumber ++

Взаимодействие с сервером MainUI MainEventMap Server performClick () TestEvent.BUTTON_CLICK clickNumber ++ clickNumber

Взаимодействие с сервером MainUI MainEventMap Server performClick () TestEvent.BUTTON_CLICK 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

<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:RemoteObjectInvoker destination="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"

Не забывайте убирать после отладки: жрет ресурсы!

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

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_address]

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

0 comments

Notes on slide 1

1 Favorite