Flex Stuff by Gilles Guillemin » Mate Framework

Mate examples: #11 Mediator (or Passive View)

gillesguillemin — Tue, 13 Oct 2009 07:00:26 +0000

This blog post is related to My LFPUG Presentation about Mate blog post (I know, it was 3 months ago, it’s a shame but I also must work for a living).

If you haven’t done it yet you should have a look first at our previous examples: #1, #2, #3, #4, #5, #6, #7, #8, #9 and #10.

In our previous example we’ve studied a simple implementation of the Presentation Pattern. In this configuration, the View has a reference to its presentation model (or at least to its interface). But what if you want it to be the other way around? The view exists for itself and the model is the one who has a reference to the view. This approach definitely is a prime candidate if you want to use views generated in Flash Catalyst then synchronised with Flash Builder with CatalystBuilderSync. You can easily modify your views without affecting the logic whatsoever. The view is dumb or passive as explained in this other article by Paul Williams. It’s also one of the patterns used in PureMVC, called Mediator and we will keep the name here. So, how is it possible with Mate?

Let’s have a look (source is available by right-clicking on the demo after launching it):

#11 Mediator (a la PureMVC) (click to Launch)

As you can see, the 2 views FirstPanel.mxml and SecondPanel.mxml are completely autonomous, without any reference to anything else nor any logic:

Demo #11: src/views/FirstPanel.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="298"
height="164"
layout="absolute"
title="First Panel">

<mx:Button id="button1"
label="Button One"
left="30"
verticalCenter="0"/>
<mx:Button id="button2"
label="Button Two"
right="30"
verticalCenter="0"/>

mx:Panel>

Demo #11: src/views/SecondPanel.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="246"
height="232"
layout="absolute"
title="Deuxieme Panel"
borderStyle="inset"
backgroundColor="#A5C5ED">

<mx:Button id="button1"
label="Bouton Un"
horizontalCenter="0"
top="20"
emphasized="true"
cornerRadius="0"/>
<mx:Button id="button2"
label="Bouton Deux"
horizontalCenter="0"
bottom="20"
cornerRadius="0"
fillAlphas="[1.0, 1.0]"
fillColors="[#FF0000, #FF0000]"
color="#FFFFFF"/>

mx:Panel>

Now the mediators which embed all the logic and the reference to their respective view (which is passed as an argument of the initMediator method):

Demo #11: src/views/mediators/FirstPanelMediator.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

package views.mediators
{
import flash.events.EventDispatcher;
import flash.events.MouseEvent;

import mx.controls.Alert;

import views.FirstPanel;

public class FirstPanelMediator extends EventDispatcher
{
public var component : FirstPanel;

public function initMediator(target : *) : void
{
component = target as FirstPanel;
component.button1.addEventListener(MouseEvent.CLICK, button1_clickHandler);
component.button2.addEventListener(MouseEvent.CLICK, button2_clickHandler);
}

protected function button1_clickHandler( event : MouseEvent ) : void
{
Alert.show("Button1 Clicked");
}

protected function button2_clickHandler( event : MouseEvent ) : void
{
Alert.show("Button2 Clicked");
}
}
}

Demo #11: src/views/mediators/SecondPanelMediator.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

package views.mediators
{
import flash.events.EventDispatcher;
import flash.events.MouseEvent;

import mx.controls.Alert;

import views.SecondPanel;

public class SecondPanelMediator extends EventDispatcher
{
public var component : SecondPanel;

public function initMediator(target : *) : void
{
component = target as SecondPanel;
component.button1.addEventListener(MouseEvent.CLICK, button1_clickHandler);
component.button2.addEventListener(MouseEvent.CLICK, button2_clickHandler);
}

protected function button1_clickHandler( event : MouseEvent ) : void
{
Alert.show("Oh, I do not like this.");
}

protected function button2_clickHandler( event : MouseEvent ) : void
{
Alert.show("Please, don't do that.");
}
}
}

And finally the eventMap which ties together views and mediators via injection:

Demo #11: src/maps/MainEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

xml version="1.0" encoding="utf-8"?>
<mate:EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import views.SecondPanel;
import views.mediators.SecondPanelMediator;
import mx.events.FlexEvent;
import views.FirstPanel;
import views.mediators.FirstPanelMediator;
]]>
mx:Script>

<mate:Debugger level="{Debugger.ALL}"/>

<mate:Injectors target="{FirstPanel}">
<mate:MethodInvoker generator="{FirstPanelMediator}"
method="initMediator"
arguments="{event.injectorTarget}"/>

mate:Injectors>

<mate:Injectors target="{SecondPanel}">
<mate:MethodInvoker generator="{SecondPanelMediator}"
method="initMediator"
arguments="{event.injectorTarget}"/>

mate:Injectors>

mate:EventMap>

Whenever a view is instantiated then its related mediator is instantiated as well, its initMediator method is called and the injector’s target (the view: FirstPanel or SecondPanel) is passed as an argument. Important: note the use of Mate’s event.injectorTarget to retrieve the injector’s target reference. You cannot pass directly {FirstPanel} or {SecondPanel}. It wouldn’t work.

I’ll tell you what: this Mediator approach is quite simply my favourite at the moment as it leaves you with the maximum freedom to deal with the new Flex 4 paradigm (component + skin) without interfering with it at any point.

Next time (hopefully sooner than next month): Versioned Applications (think about Modules but more powerful)

Mate examples: #10 Presentation Model This is the tenth of a series of gradually more...
Mate examples: #4 Counters created dynamically This is the fourth of a series of gradually more...
Mate examples: #8 Modules Example (pt 1) This is the eigth of a series of gradually more...

Related posts brought to you by Yet Another Related Posts Plugin.

Mate examples: #10 Presentation Model

gillesguillemin — Tue, 25 Aug 2009 07:37:04 +0000

This blog post is related to My LFPUG Presentation about Mate blog post.

If you haven’t done it yet you should have a look first at our previous examples: #1, #2, #3, #4, #5, #6, #7, #8, and #9.

Today we’re going to put aside our (I know: boooring) counters. We will come back to them in a couple of posts for the great finale: Mate and versioned applications.
But for now I wanted to illustrate a really good practice with Mate (and in general): the Presentation Model pattern. For those who want to know more about the Presentation Model, have a look at Paul Williams great article. Basically, the idea is to keep the view as simple as possible, separating all the logic in a dedicated class. That way, Mate communicates with the presentation model class and not directly with the view, the latter being updated via data binding. In this configuration, the view’s only concern is its own elements and its only dependency is its model.

Let’s have a look at our very simple demo (source is available by right-clicking on the demo after launching it):

#10 Presentation Model (click to Launch)

So what do we have here (apart from the opportunity to learn a bit of French)? Two visually different panels, each with two buttons, each button triggering an alert with a different message. The structure is dead simple: the two different panels are instantiated in the now usual MainView:

Demo #10: src/views/MainView.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13

xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="656"
height="314"
xmlns:views="views.*">

<views:FirstPanel verticalCenter="0"
left="25"
width="298"/>
<views:SecondPanel verticalCenter="0"
right="25"/>

mx:Canvas>

FirstPanel and SecondPanel are pretty similar, the main differences being various “cosmetic” properties:

Demo #10: src/views/FirstPanel.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="298"
height="164"
layout="absolute"
title="First Panel">

<mx:Script>
[CDATA[
import views.presentationmodel.IPresentationModel;

[Bindable]
public var pm : IPresentationModel;
]]>
mx:Script>

<mx:Button id="button1"
label="Button One"
left="30"
verticalCenter="0"
click="pm.button1_clickHandler(event)"/>
<mx:Button id="button2"
label="Button Two"
right="30"
verticalCenter="0"
click="pm.button2_clickHandler(event)"/>

mx:Panel>

Demo #10: src/views/SecondPanel.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="246"
height="232"
layout="absolute"
title="Deuxieme Panel"
borderStyle="inset"
backgroundColor="#A5C5ED">

<mx:Script>
[CDATA[
import views.presentationmodel.IPresentationModel;

[Bindable]
public var pm : IPresentationModel;
]]>
mx:Script>

<mx:Button id="button1"
label="Bouton Un"
horizontalCenter="0"
top="20"
emphasized="true"
cornerRadius="0"
click="pm.button1_clickHandler(event)"/>
<mx:Button id="button2"
label="Bouton Deux"
horizontalCenter="0"
bottom="20"
cornerRadius="0"
fillAlphas="[1.0, 1.0]"
fillColors="[#FF0000, #FF0000]"
color="#FFFFFF"
click="pm.button2_clickHandler(event)"/>

mx:Panel>

One important thing to notice though: they both share a same pm variable referring to an Interface, IPresentationModel. Also, the 2 buttons call 2 methods within this interface: button1_clickHandler and button2_clickHandler.

Demo #10: src/views/presentationmodel/IPresentationModel.as

1
2
3
4
5
6
7
8
9
10

package views.presentationmodel
{
import flash.events.MouseEvent;

public interface IPresentationModel
{
function button1_clickHandler( event : MouseEvent ) : void;
function button2_clickHandler( event : MouseEvent ) : void;
}
}

Now, there are two classes in the views/presentationmodel package: PresentationModel1 and PresentationModel2. Once again, those two are pretty similar, the only differences being the different messages thrown by the Alerts:

Demo #10: src/views/presentationmodel/PresentationModel1.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package views.presentationmodel
{
import flash.events.EventDispatcher;
import flash.events.MouseEvent;

import mx.controls.Alert;

public class PresentationModel1 extends EventDispatcher implements IPresentationModel
{

public function button1_clickHandler( event : MouseEvent ) : void
{
Alert.show("Button1 Clicked");
}

public function button2_clickHandler( event : MouseEvent ) : void
{
Alert.show("Button2 Clicked");
}

}
}

Demo #10: src/views/presentationmodel/PresentationModel2.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package views.presentationmodel
{
import flash.events.EventDispatcher;
import flash.events.MouseEvent;

import mx.controls.Alert;

public class PresentationModel2 extends EventDispatcher implements IPresentationModel
{

public function button1_clickHandler( event : MouseEvent ) : void
{
Alert.show("Oh! I do not like this.");
}

public function button2_clickHandler( event : MouseEvent ) : void
{
Alert.show("Please don't do that.");
}

}
}

And now, the glue, as usual:

Demo #10: src/maps/MainEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

xml version="1.0" encoding="utf-8"?>
<mate:EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import views.SecondPanel;
import views.presentationmodel.PresentationModel2;
import views.presentationmodel.PresentationModel1;
import views.FirstPanel;
]]>
mx:Script>

<mate:Debugger level="{Debugger.ALL}"/>

<mate:Injectors target="{FirstPanel}">
<mate:ObjectBuilder generator="{PresentationModel1}"/>
<mate:PropertyInjector source="{lastReturn}"
targetKey="pm"/>

mate:Injectors>

<mate:Injectors target="{SecondPanel}">
<mate:ObjectBuilder generator="{PresentationModel2}"/>
<mate:PropertyInjector source="{lastReturn}"
targetKey="pm"/>

mate:Injectors>

mate:EventMap>

The MainEventMap maps each PresentationModel to its related view and the job is done! The beauty of it is that you can swap presentation models and views as easily as this:

Demo #10: src/maps/MainEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

xml version="1.0" encoding="utf-8"?>
<mate:EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import views.SecondPanel;
import views.presentationmodel.PresentationModel2;
import views.presentationmodel.PresentationModel1;
import views.FirstPanel;
]]>
mx:Script>

<mate:Debugger level="{Debugger.ALL}"/>

<mate:Injectors target="{FirstPanel}">
<mate:ObjectBuilder generator="{PresentationModel2}"/>
<mate:PropertyInjector source="{lastReturn}"
targetKey="pm"/>

mate:Injectors>

<mate:Injectors target="{SecondPanel}">
<mate:ObjectBuilder generator="{PresentationModel1}"/>
<mate:PropertyInjector source="{lastReturn}"
targetKey="pm"/>

mate:Injectors>

mate:EventMap>

Neat, isn’t it? You can as easily imagine using data binding to dynamically change view’s properties (visible, enabled, label, whatnot) with some bindable variables in the presentation model.

Here we go. Next, my new favourite one: a port of PureMVC’s mediator pattern which is one of the best ways to use Mate with the new Flex 4 component architecture.

Mate examples: #11 Mediator (or Passive View) This is the eleventh of a series of gradually more...
Mate examples: #9 Modules Example (pt 2) This is the ninth of a series of gradually more...
Mate examples: #2 Databinding and EventHandlers This is the second of a series of gradually more...

Related posts brought to you by Yet Another Related Posts Plugin.

Mate examples: #9 Modules Example (pt 2)

gillesguillemin — Sun, 23 Aug 2009 18:05:46 +0000

This blog post is related to My LFPUG Presentation about Mate blog post.

This is the ninth of a series of gradually more complex examples on how to use Mate. If you haven’t done it yet you should have a look first at our previous examples: #1, #2, #3, #4, #5, #6, #7, and #8.

By now, you should reasonably be up to speed so I’m going to speed up as well and throw examples more regularly but with less explanations (it takes some time that I don’t exactly have those days). If you really don’t get it though don’t hesitate to ask for further explanations in the comments.

In the previous example, we started to see how to use Mate with Modules but the main application was still keeping references to the module’s classes.

This example push decoupling a bit further (source is available by right-clicking on the demo after launching it):

#9 Modules Example (pt 2) (click to Launch)

As you can see, MainEventMap doesn’t hold anymore any reference to the module’s classes:

Demo #9: src/maps/MainEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

xml version="1.0" encoding="utf-8"?>
<mate:EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import Events.CountdownEvent;
import managers.CountdownManager;
import mx.events.FlexEvent;
import views.MainView;
import managers.CounterManager;
import Events.CounterEvent;
]]>
mx:Script>

<mate:Debugger level="{Debugger.ALL}"/>

<mate:EventHandlers type="{FlexEvent.APPLICATION_COMPLETE}">
<mate:ObjectBuilder generator="{CountdownManager}"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.INCREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="increaseGlobal"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.DECREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="decreaseGlobal"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.RESET}">
<mate:MethodInvoker generator="{CounterManager}"
method="reset"/>
mate:EventHandlers>

<mate:EventHandlers type="{CountdownEvent.START_COUNTDOWN}">
<mate:MethodInvoker generator="{CountdownManager}"
method="startCountdown"/>
mate:EventHandlers>

<mate:EventHandlers type="{CountdownEvent.STOP_COUNTDOWN}">
<mate:MethodInvoker generator="{CountdownManager}"
method="stopCountdown"/>
mate:EventHandlers>

<mate:Injectors target="{MainView}">
<mate:PropertyInjector source="{CounterManager}"
sourceKey="globalAmount"
targetKey="globalAmount"/>
mate:Injectors>

<mate:Injectors target="{MainView}"
debug="true">
<mate:PropertyInjector source="{CountdownManager}"
sourceKey="isCountdownRunning"
targetKey="isCountdownRunning"/>
<mate:ListenerInjector eventType="{CountdownEvent.COUNTDOWN}"
method="updateTitle"/>
mate:Injectors>

mate:EventMap>

Instead, the module Counter.mxml now instanciates 2 different EventMaps: ModuleEventMap and SubEventMap (we saw in Example #5 LocalEventMap how to use LocalEventMap):

Demo #9: src/modules/Counter.mxml

xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="264"
height="380"
xmlns:modules="modules.*"
xmlns:views="modules.views.*"
xmlns:maps="modules.maps.*">

<mx:Script>
[CDATA[
import Events.CounterEvent;

[Bindable]
public var globalAmount : int = 0;

[Bindable]
private var subTotal : int = 0;

[Bindable]
private var amount : int = 0;

private var _counterTitle : String = "Counter Title";

[Bindable]
public function get counterTitle() : String
{
return _counterTitle;
}

public function set counterTitle( v : String ) : void
{
_counterTitle = v;
}

public function increaseSubTotal( event : CounterEvent ) : void
{
++subTotal;
}

public function decreaseSubTotal( event : CounterEvent ) : void
{
--subTotal;
}

public function reset( event : CounterEvent ) : void
{
subTotal = 0;
}
]]>
mx:Script>

<maps:ModuleEventMap />
<maps:SubEventMap dispatcher="{this}"/>

<mx:Panel width="264"
height="380"
title="{counterTitle}"
layout="absolute">

<mx:Label x="27"
y="10"
text="Global Amount:"/>
<mx:Label x="121"
y="10"
text="{globalAmount}"/>
<views:SubCounter y="64"
horizontalCenter="0"
borderStyle="inset">
views:SubCounter>
<views:SubCounter y="208"
horizontalCenter="0"
borderStyle="inset">
views:SubCounter>
<mx:Label x="63"
y="35"
text="Subtotal:"/>
<mx:Label x="124"
y="35"
text="{subTotal}"/>

mx:Panel>
mx:Module>

And here is ModuleEventMap which deals with global events thrown by the main application:

Demo #9: src/modules/maps/ModuleEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

And SubEventMap which deals with local ones:

Demo #9: src/modules/maps/SubEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

xml version="1.0" encoding="utf-8"?>
<mate:LocalEventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import modules.Counter;
import Events.CounterEvent;
import modules.views.SubCounter;
]]>
mx:Script>

<mate:Debugger level="{Debugger.ALL}" />

<mate:Injectors targets="{[Counter, SubCounter]}">
<mate:ListenerInjector eventType="{CounterEvent.INCREASE_SUB_TOTAL}"
method="increaseSubTotal"/>
<mate:ListenerInjector eventType="{CounterEvent.DECREASE_SUB_TOTAL}"
method="decreaseSubTotal"/>
mate:Injectors>

mate:LocalEventMap>

In the example #12 we will see how to use Mate with versioned applications but first we will have a look at two different approaches of the Presentation model design pattern.

Next: #10 Presentation Model.

Mate examples: #8 Modules Example (pt 1) This is the eigth of a series of gradually more...
Mate examples: #5 LocalEventMap This is the fifth of a series of gradually more...
Mate examples: #3 Multiple Counters This is the third of a series of gradually more...

Related posts brought to you by Yet Another Related Posts Plugin.

Mate examples: #8 Modules Example (pt 1)

gillesguillemin — Tue, 18 Aug 2009 18:04:13 +0000

This blog post is related to My LFPUG Presentation about Mate blog post.

This is the eigth of a series of gradually more complex examples on how to use Mate. If you haven’t done it yet you should have a look first at our previous examples: #1, #2, #3, #4, #5, #6, and #7.

In our two previous examples, we saw how easy it was to handle communication between the application and its subcomponents, without mix-up between events intended to be listened by the whole application and events required only at the subcomponent level. But how would Mate hold up with with even looser subcomponents, of the kind that are loaded on demand and are not a concrete part of our main application, namely Modules?

I’m sure you know already it holds up pretty well, but let’s see how it does that:

#8 Modules Example (pt 1) (click to Launch)

The great thing here is that we didn’t change much between this example and our previous Reset Countdown. Basically, aside moving Counter.mxml and SubCounter.mxml into a new modules package and changing Counter.mxml from a Panel into a Module, that’s about it:

Demo #8: src/modules/Counter.mxml

xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="264"
height="380"
xmlns:maps="maps.*"
xmlns:modules="modules.*">

<mx:Script>
[CDATA[
import Events.CounterEvent;

[Bindable]
public var globalAmount : int = 0;

[Bindable]
private var subTotal : int = 0;

[Bindable]
private var amount : int = 0;

private var _counterTitle : String = "Counter Title";

[Bindable]
public function get counterTitle() : String
{
return _counterTitle;
}

public function set counterTitle( v : String ) : void
{
_counterTitle = v;
}

public function increaseSubTotal( event : CounterEvent ) : void
{
++subTotal;
}

public function decreaseSubTotal( event : CounterEvent ) : void
{
--subTotal;
}

public function reset( event : CounterEvent ) : void
{
subTotal = 0;
}
]]>
mx:Script>

<maps:SubEventMap dispatcher="{this}"/>

<mx:Panel width="264"
height="380"
title="{counterTitle}"
layout="absolute">

<mx:Label x="27"
y="10"
text="Global Amount:"/>
<mx:Label x="121"
y="10"
text="{globalAmount}"/>
<modules:SubCounter y="64"
horizontalCenter="0"
borderStyle="inset">
modules:SubCounter>
<modules:SubCounter y="208"
horizontalCenter="0"
borderStyle="inset">
modules:SubCounter>
<mx:Label x="63"
y="35"
text="Subtotal:"/>
<mx:Label x="124"
y="35"
text="{subTotal}"/>

mx:Panel>
mx:Module>

Don’t forget to declare Counter.mxml as a Flex Module in your project’s properties and of course update all your references to Counter and SubCounter from views to modules (i.e. import view.Counter => import modules.Counter).
And then, all you need to do is to change your addCounterButton_clickHandler method in MainView.mxml from a simple Class instantiation into a ModuleLoader loader:

Demo #8: src/views/MainView.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="860"
height="600"
title="{mainTitle}"
layout="absolute"
xmlns:views="views.*">

<mx:Script>
[CDATA[
import mx.modules.ModuleLoader;
import Events.CountdownEvent;
import Events.CounterEvent;
[Bindable]
public var globalAmount : int = 0;

[Bindable]
public var isCountdownRunning : Boolean;

[Bindable]
private var numCounters : int = 0;

[Bindable]
private var mainTitle : String = "MainView";

protected function buttonIncrease_clickHandler( event : MouseEvent ) : void
{
dispatchEvent( new CounterEvent( CounterEvent.INCREASE_GLOBAL ));
}

protected function buttonDecrease_clickHandler( event : MouseEvent ) : void
{
dispatchEvent( new CounterEvent( CounterEvent.DECREASE_GLOBAL ));
}

protected function addCounterButton_clickHandler( event : MouseEvent ) : void
{
var moduleLoader : ModuleLoader = new ModuleLoader();
moduleLoader.url = "modules/Counter.swf";
mainTile.addChild( moduleLoader );
++numCounters;
}

protected function deleteCounterButton_clickHandler( event : MouseEvent ) : void
{
var displayObject : DisplayObject = mainTile.getChildAt(mainTile.numChildren - 1);
ModuleLoader( displayObject ).unloadModule();
mainTile.removeChild( displayObject );
--numCounters;
}

public function updateTitle( event : CountdownEvent ) : void
{
mainTitle = "MainView (" + event.countdown + ")";
}

protected function countdownButton_clickHandler( event : MouseEvent ) : void
{
if ( isCountdownRunning )
{
countdownButton.label = "START COUNTDOWN";
dispatchEvent( new CountdownEvent( CountdownEvent.STOP_COUNTDOWN ));
}
else
{
countdownButton.label = "STOP COUNTDOWN";
dispatchEvent( new CountdownEvent( CountdownEvent.START_COUNTDOWN ));
}
}
]]>
mx:Script>

<mx:Label text="Global Amount:"
x="28"
y="16"/>
<mx:Label text="{globalAmount}"
x="124"
y="16"/>

<mx:Tile id="mainTile"
left="10"
right="10"
top="82"
bottom="10">
mx:Tile>

<mx:Button id="buttonIncrease"
x="68"
y="34"
label="+"
click="buttonIncrease_clickHandler(event)"/>
<mx:Button id="buttonDecrease"
x="140"
y="34"
label="-"
click="buttonDecrease_clickHandler(event)"/>

<mx:Button id="addCounterButton"
x="614"
y="31"
label="Add Counter"
click="addCounterButton_clickHandler(event)"/>
<mx:Button id="countdownButton"
x="366"
y="31"
label="STOP COUNTDOWN"
click="countdownButton_clickHandler(event)"/>

<mx:Button id="deleteCounterButton"
x="716"
y="31"
label="Delete Counter"
enabled="{numCounters > 0}"
click="deleteCounterButton_clickHandler(event)"/>

mx:Panel>

And yet our application keeps behaving as it always did. Isn’t that great? It is, it is, but the example is still not perfect: the views are now separated from the main application, but the logic is still part of it and there are references to the modules’ classes all around in the main application. We can clearly decouple a bit further and we’ll see how in our next part: #9 Modules Example (pt 2)

Mate examples: #9 Modules Example (pt 2) This is the ninth of a series of gradually more...
Mate examples: #6 Reset Countdown (pt 1) This blog post is related to My LFPUG Presentation about...
Mate examples: #5 LocalEventMap This is the fifth of a series of gradually more...

Related posts brought to you by Yet Another Related Posts Plugin.

Mate examples: #7 Reset Countdown (pt 2)

gillesguillemin — Sun, 09 Aug 2009 18:02:37 +0000

This blog post is related to My LFPUG Presentation about Mate blog post.

This is the seventh of a series of gradually more complex examples on how to use Mate. If you haven’t done it yet you should have a look first at our previous examples: #1, #2, #3, #4, #5, and #6.

In the previous example, we added a reset countdown which sets all the counters to 0 when the countdown is off. But it’s a bit of a pain this unstoppable countdown. It would be cool to add a start/stop button, wouldn’t it?

OK, let’s do it (source is available by right-clicking on the demo after launching it):

#7 Reset Countdown (pt 2) (click to Launch)

So we’ve first added this start/stop button (yeah, let’s have a toggle button this time):

Demo #7: src/views/MainView.mxml

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="860"
height="600"
title="{mainTitle}"
layout="absolute"
xmlns:views="views.*">

<mx:Script>
[CDATA[
import Events.CountdownEvent;
import Events.CounterEvent;
[Bindable]
public var globalAmount : int = 0;

[Bindable]
public var isCountdownRunning : Boolean;

[Bindable]
private var numCounters : int = 0;

[Bindable]
private var mainTitle : String = "MainView";

protected function buttonIncrease_clickHandler( event : MouseEvent ) : void
{
dispatchEvent( new CounterEvent( CounterEvent.INCREASE_GLOBAL ));
}

protected function buttonDecrease_clickHandler( event : MouseEvent ) : void
{
dispatchEvent( new CounterEvent( CounterEvent.DECREASE_GLOBAL ));
}

protected function addCounterButton_clickHandler( event : MouseEvent ) : void
{
var counter : Counter = new Counter();
counter.counterTitle = "Counter " + ++numCounters;
mainTile.addChild( counter );
}

protected function deleteCounterButton_clickHandler( event : MouseEvent ) : void
{
mainTile.removeChildAt( mainTile.numChildren - 1 );
--numCounters;
}

public function updateTitle( event : CountdownEvent ) : void
{
mainTitle = "MainView (" + event.countdown + ")";
}

protected function countdownButton_clickHandler( event : MouseEvent ) : void
{
if ( isCountdownRunning )
{
countdownButton.label = "START COUNTDOWN";
dispatchEvent( new CountdownEvent( CountdownEvent.STOP_COUNTDOWN ));
}
else
{
countdownButton.label = "STOP COUNTDOWN";
dispatchEvent( new CountdownEvent( CountdownEvent.START_COUNTDOWN ));
}
}
]]>
mx:Script>

<mx:Label text="Global Amount:"
x="28"
y="16"/>
<mx:Label text="{globalAmount}"
x="124"
y="16"/>

<mx:Tile id="mainTile"
left="10"
right="10"
top="82"
bottom="10">
mx:Tile>

<mx:Button id="buttonIncrease"
x="68"
y="34"
label="+"
click="buttonIncrease_clickHandler(event)"/>
<mx:Button id="buttonDecrease"
x="140"
y="34"
label="-"
click="buttonDecrease_clickHandler(event)"/>

<mx:Button id="addCounterButton"
x="614"
y="31"
label="Add Counter"
click="addCounterButton_clickHandler(event)"/>
<mx:Button id="countdownButton"
x="366"
y="31"
label="STOP COUNTDOWN"
click="countdownButton_clickHandler(event)"/>

<mx:Button id="deleteCounterButton"
x="716"
y="31"
label="Delete Counter"
enabled="{numCounters > 0}"
click="deleteCounterButton_clickHandler(event)"/>

mx:Panel>

Depending on isCountdownRunning (note that it is bindable…), the button’s label will change, and a click on the button will dispatch the new CountdownEvent.START_COUNTDOWN or CountdownEvent.STOP_COUNTDOWN.

Demo #7: src/Events/CountdownEvent.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package Events
{
import flash.events.Event;

public class CountdownEvent extends Event
{
public static const COUNTDOWN : String = "countDown";
public static const START_COUNTDOWN : String = "startCountDown";
public static const STOP_COUNTDOWN : String = "stopCountDown";

public var countdown : int;

public function CountdownEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

We can see those two new types here. What about CountdownManager?

Demo #7: src/managers/CountdownManager.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

package managers
{
import Events.CountdownEvent;
import Events.CounterEvent;

import com.asfusion.mate.events.Dispatcher;

import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;
import flash.events.TimerEvent;
import flash.utils.Timer;

public class CountdownManager extends EventDispatcher
{
private var timer : Timer;

private var duration : int = 10;
private var countdown : int;

private var dispatcher : Dispatcher = new Dispatcher();

[Bindable]
public var isCountdownRunning : Boolean = true;

public function CountdownManager( target : IEventDispatcher = null )
{
super( target );
init();
}

private function init() : void
{
countdown = duration;
timer = new Timer( 1000, 1 );
timer.addEventListener( TimerEvent.TIMER_COMPLETE, onTimerComplete );
timer.start();
}

private function onTimerComplete( event : TimerEvent ) : void
{
timer.reset();
timer.start();

--countdown;
var counterEvent : CountdownEvent = new CountdownEvent( CountdownEvent.COUNTDOWN );
counterEvent.countdown = this.countdown;
dispatcher.dispatchEvent( counterEvent );

if ( countdown < 1 )
{
dispatcher.dispatchEvent( new CounterEvent( CounterEvent.RESET ));
countdown = duration;
}

}

public function startCountdown() : void
{
timer.start();
isCountdownRunning = true;
}

public function stopCountdown() : void
{
timer.stop();
isCountdownRunning = false;
}
}
}

The same bindable isCountdownRunning here. And two dead simple methods: startCountdown() and stopCountdown().

Last, but not least: the now famous MainEventMap:

Demo #7: src/maps/MainEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

xml version="1.0" encoding="utf-8"?>
<mate:EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import Events.CountdownEvent;
import views.SubCounter;
import managers.CountdownManager;
import mx.events.FlexEvent;
import views.Counter;
import views.MainView;
import managers.CounterManager;
import Events.CounterEvent;
]]>
mx:Script>

<mate:Debugger level="{Debugger.ALL}"/>

<mate:EventHandlers type="{FlexEvent.APPLICATION_COMPLETE}">
<mate:ObjectBuilder generator="{CountdownManager}"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.INCREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="increaseGlobal"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.DECREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="decreaseGlobal"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.RESET}">
<mate:MethodInvoker generator="{CounterManager}"
method="reset"/>
mate:EventHandlers>

<mate:EventHandlers type="{CountdownEvent.START_COUNTDOWN}">
<mate:MethodInvoker generator="{CountdownManager}"
method="startCountdown"/>
mate:EventHandlers>

<mate:EventHandlers type="{CountdownEvent.STOP_COUNTDOWN}">
<mate:MethodInvoker generator="{CountdownManager}"
method="stopCountdown"/>
mate:EventHandlers>

<mate:Injectors targets="{[Counter, MainView]}">
<mate:PropertyInjector source="{CounterManager}"
sourceKey="globalAmount"
targetKey="globalAmount"/>
mate:Injectors>

<mate:Injectors targets="{[Counter, SubCounter]}">
<mate:ListenerInjector eventType="{CounterEvent.RESET}"
method="reset"/>
mate:Injectors>

<mate:Injectors target="{MainView}"
debug="true">
<mate:PropertyInjector source="{CountdownManager}"
sourceKey="isCountdownRunning"
targetKey="isCountdownRunning"/>
<mate:ListenerInjector eventType="{CountdownEvent.COUNTDOWN}"
method="updateTitle"/>
mate:Injectors>

mate:EventMap>

EventHandlers and ListenerInjectors catch events, then invoke methods, or inject properties, blah, blah, blah.

I bet you start to get it by now

Next: #8 Modules Example (pt 1)

Mate examples: #6 Reset Countdown (pt 1) This blog post is related to My LFPUG Presentation about...
Mate examples: #8 Modules Example (pt 1) This is the eigth of a series of gradually more...
Mate examples: #9 Modules Example (pt 2) This is the ninth of a series of gradually more...

Related posts brought to you by Yet Another Related Posts Plugin.

Mate examples: #6 Reset Countdown (pt 1)

gillesguillemin — Sun, 09 Aug 2009 18:00:04 +0000

This blog post is related to My LFPUG Presentation about Mate blog post.

This is the sixth of a series of gradually more complex examples on how to use Mate. If you haven’t done it yet you should have a look first at our previous examples: #1, #2, #3, #4 and #5.

Today we’re going to add another useless functionality to our already useless application: a reset countdown. It’s a timer that resets all the counters when it reaches 0. The point here is to illustrate the communication (other than using data binding) between a manager and the rest of the application.

Here is the demo (source is available by right-clicking on the demo after launching it):

#6 Reset Countdown (part 1) (click to Launch)

As you can see, it’s pretty much the same application as before (visually speaking) except that there’s now a countdown showing up next to the MainView title. When it reaches 0 all your amounts, subAmounts and globalAmounts are reset to 0.

Now let’s have a look at MainView.mxml first:

Demo #6: src/views/MainView.mxml

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="860"
height="600"
title="{mainTitle}"
layout="absolute"
xmlns:views="views.*">

<mx:Script>
[CDATA[
import Events.CountdownEvent;
import Events.CounterEvent;
[Bindable]
public var globalAmount : int = 0;

[Bindable]
private var numCounters : int = 0;

[Bindable]
private var mainTitle : String = "MainView";

protected function buttonIncrease_clickHandler( event : MouseEvent ) : void
{
dispatchEvent( new CounterEvent( CounterEvent.INCREASE_GLOBAL ));
}

protected function buttonDecrease_clickHandler( event : MouseEvent ) : void
{
dispatchEvent( new CounterEvent( CounterEvent.DECREASE_GLOBAL ));
}

protected function addCounterButton_clickHandler( event : MouseEvent ) : void
{
var counter : Counter = new Counter();
counter.counterTitle = "Counter " + ++numCounters;
mainTile.addChild(counter);
}

protected function deleteCounterButton_clickHandler(event:MouseEvent):void
{
mainTile.removeChildAt(mainTile.numChildren - 1);
--numCounters;
}

public function updateTitle ( event : CountdownEvent ) : void
{
mainTitle = "MainView (" + event.countdown + ")";
}

]]>
mx:Script>

<mx:Label text="Global Amount:"
x="28"
y="16"/>
<mx:Label text="{globalAmount}"
x="124"
y="16"/>

<mx:Tile id="mainTile"
left="10"
right="10"
top="82"
bottom="10">
mx:Tile>

<mx:Button id="buttonIncrease"
x="68"
y="34"
label="+"
click="buttonIncrease_clickHandler(event)"/>
<mx:Button id="buttonDecrease"
x="140"
y="34"
label="-"
click="buttonDecrease_clickHandler(event)"/>

<mx:Button id="addCounterButton"
x="614"
y="31"
label="Add Counter"
click="addCounterButton_clickHandler(event)"/>

<mx:Button id="deleteCounterButton"
x="716"
y="31"
label="Delete Counter"
enabled="{numCounters > 0}"
click="deleteCounterButton_clickHandler(event)"/>

mx:Panel>

A new method updateTitle has appeared, updating the MainView panel title with the event.countdown property of a new CountdownEvent:

Demo #6: src/Events/CountdownEvent.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package Events
{
import flash.events.Event;

public class CountdownEvent extends Event
{
public static const COUNTDOWN : String = "countDown";

public var countdown : int;

public function CountdownEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

It’s a rather common (bubbles = true) Event, with one type (COUNTDOWN) and a public var countdown (an integer). Now let’s have a look at CounterEvent.as, see if there’s any change:

Demo #6: src/Events/CounterEvent.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package Events
{
import flash.events.Event;

public class CounterEvent extends Event
{
public static const INCREASE_GLOBAL : String = "increaseGlobal";
public static const DECREASE_GLOBAL : String = "decreaseGlobal";
public static const INCREASE_SUB_TOTAL : String = "increaseSubTotal";
public static const DECREASE_SUB_TOTAL : String = "decreaseSubTotal";
public static const RESET : String = "resetCounters";

public function CounterEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

There’s only a new type: RESET. Ok, what about CounterManager.as then?

Demo #6: src/managers/CounterManager.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

package managers
{
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;

public class CounterManager extends EventDispatcher
{
[Bindable]
public var globalAmount : int = 0;

public function increaseGlobal() : void
{
++globalAmount;
}

public function decreaseGlobal() : void
{
--globalAmount;
}

public function reset() : void
{
globalAmount = 0;
}
}
}

Oh, there’s a new method reset() that set globalAmount value to 0. Looks like there’s a relationship of some sort between the method and the new RESET type of CounterEvent…

And Counter.mxml and SubCounter.mxml?

Demo #6: src/views/Counter.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="264"
height="380"
title="{counterTitle}"
layout="absolute"
xmlns:views="views.*"
xmlns:maps="maps.*">

<mx:Script>
[CDATA[
import Events.CounterEvent;

[Bindable]
public var globalAmount : int = 0;

[Bindable]
private var subTotal : int = 0;

[Bindable]
private var amount : int = 0;

private var _counterTitle : String = "Counter Title";

[Bindable]
public function get counterTitle() : String
{
return _counterTitle;
}

public function set counterTitle( v : String ) : void
{
_counterTitle = v;
}

public function increaseSubTotal( event : CounterEvent ) : void
{
++subTotal;
}

public function decreaseSubTotal( event : CounterEvent ) : void
{
--subTotal;
}

public function reset( event : CounterEvent ) : void
{
subTotal = 0;
}
]]>
mx:Script>

<maps:SubEventMap dispatcher="{this}"/>

<mx:Label x="27"
y="10"
text="Global Amount:"/>
<mx:Label x="121"
y="10"
text="{globalAmount}"/>
<views:SubCounter y="64"
horizontalCenter="0"
borderStyle="inset">
views:SubCounter>
<views:SubCounter y="208"
horizontalCenter="0"
borderStyle="inset">
views:SubCounter>
<mx:Label x="63"
y="35"
text="Subtotal:"/>
<mx:Label x="124"
y="35"
text="{subTotal}"/>

mx:Panel>

Demo #6: src/views/SubCounter.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="220"
height="120">

<mx:Script>
[CDATA[
import Events.CounterEvent;

[Bindable]
private var subTotal : int = 0;

[Bindable]
private var amount : int = 0;

public function increaseSubTotal( event : CounterEvent ) : void
{
++subTotal;
}

public function decreaseSubTotal( event : CounterEvent ) : void
{
--subTotal;
}

public function reset( event : CounterEvent = null ) : void
{
amount = 0;
subTotal = 0;
}

protected function buttonIncrease_clickHandler( event : MouseEvent ) : void
{
++amount;
dispatchEvent( new CounterEvent( CounterEvent.INCREASE_GLOBAL ));
dispatchEvent( new CounterEvent( CounterEvent.INCREASE_SUB_TOTAL ));
}

protected function buttonDecrease_clickHandler( event : MouseEvent ) : void
{
--amount;
dispatchEvent( new CounterEvent( CounterEvent.DECREASE_GLOBAL ));
dispatchEvent( new CounterEvent( CounterEvent.DECREASE_SUB_TOTAL ));
}
]]>
mx:Script>

<mx:Label x="50"
y="15"
text="Subtotal:"/>
<mx:Label x="111"
y="15"
text="{subTotal}"/>

<mx:Label x="57"
y="50"
text="Amount:"/>
<mx:Label x="111"
y="50"
text="{amount}"/>

<mx:Button id="buttonIncrease"
x="58"
y="77"
label="+"
click="buttonIncrease_clickHandler(event)"/>

<mx:Button id="buttonDecrease"
x="130"
y="77"
label="-"
click="buttonDecrease_clickHandler(event)"/>

mx:Canvas>

Pretty much the same reset() methods in both of them as well.

Ok, it’s time to have a look at the newcomer then: CountdownManager.as:

Demo #6: src/managers/CountdownManager.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

package managers
{
import Events.CountdownEvent;
import Events.CounterEvent;

import com.asfusion.mate.events.Dispatcher;

import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;
import flash.events.TimerEvent;
import flash.utils.Timer;

public class CountdownManager extends EventDispatcher
{
private var timer : Timer;

private var duration : int = 10;
private var countdown : int;

private var dispatcher : Dispatcher = new Dispatcher();

public function CountdownManager( target : IEventDispatcher = null )
{
super( target );
init();
}

private function init() : void
{
countdown = duration;
timer = new Timer( 1000, 1 );
timer.addEventListener( TimerEvent.TIMER_COMPLETE, onTimerComplete );
timer.start();
}

private function onTimerComplete( event : TimerEvent ) : void
{
timer.reset();
timer.start();

--countdown;
var counterEvent : CountdownEvent = new CountdownEvent( CountdownEvent.COUNTDOWN );
counterEvent.countdown = this.countdown;
dispatcher.dispatchEvent( counterEvent );

if ( countdown < 1 )
{
dispatcher.dispatchEvent( new CounterEvent( CounterEvent.RESET ));
countdown = duration;
}

}
}
}

CountdownManager extends EventDispatcher and is once again rather simple: it’s basically a Timer that dispatches every second a CountdownEvent with the type CountdownEvent.COUNTDOWN, passing its countdown variable value to the event countdown property (property that will be caught later on by MainView to update its title).
Countdown also dispatchs a CounterEvent with the type CounterEvent.RESET whenever its countdown value reaches 0.

Once again, there’s absolutely no direct connection between the different parts of the application (CountdownManager, MainView, Counter, etc). MainEventMap.mxml is here to make this connection:

Demo #6: src/maps/MainEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

xml version="1.0" encoding="utf-8"?>
<mate:EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import Events.CountdownEvent;
import views.SubCounter;
import managers.CountdownManager;
import mx.events.FlexEvent;
import views.Counter;
import views.MainView;
import managers.CounterManager;
import Events.CounterEvent;
]]>
mx:Script>

<mate:Debugger level="{Debugger.ALL}"/>

<mate:EventHandlers type="{FlexEvent.APPLICATION_COMPLETE}">
<mate:ObjectBuilder generator="{CountdownManager}"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.INCREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="increaseGlobal"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.DECREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="decreaseGlobal"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.RESET}">
<mate:MethodInvoker generator="{CounterManager}"
method="reset"/>
mate:EventHandlers>

<mate:Injectors targets="{[Counter, MainView]}"
start="trace('MAIN INJECTORS')">
<mate:PropertyInjector source="{CounterManager}"
sourceKey="globalAmount"
targetKey="globalAmount"/>
mate:Injectors>

<mate:Injectors targets="{[Counter, SubCounter]}">
<mate:ListenerInjector eventType="{CounterEvent.RESET}"
method="reset"/>
mate:Injectors>

<mate:Injectors target="{MainView}">
<mate:ListenerInjector eventType="{CountdownEvent.COUNTDOWN}"
method="updateTitle"/>
mate:Injectors>

mate:EventMap>

First thing to notice: Mate can catch FlexEvent events. Not being a visual component, CountdownManager still needs to be declared and instanciated somewhere in order to function properly. That’s the role of ObjectBuilder tag. When FlexEvent. APPLICATION_COMPLETE is caught, CountdownManager is instanciated (and the init() method, starting the timer, is called by the class constructor).

You should be used now to the other parts: whenever CounterEvent.RESET is caught (by EventHandlers or a ListenerInjector) it invokes the reset methods of CounterManager, Counter and SubCounter. And it’s just the same with CountdownEvent.COUNTDOWN which calls MainView’s updateTitle method.

One VERY important thing to notice though: CountdownManager not being part of the displaylist it can not dispatch events on its own if you want them to be caught by the MainEventMap. That’s the Dispatcher’s role:

Demo #6: src/managers/CountdownManager.as (detail)

1
2
3
4
5
6
7
8

...

private var dispatcher : Dispatcher = new Dispatcher();
...

dispatcher.dispatchEvent( counterEvent );

...

Forget to do this and you can wait for long before something reacts at all…

Once again, Mate makes things really easy as long as you follow some simple rules.

Next: some refinements of our reset countdown with #7 Reset Countdown (pt 2).

Mate examples: #7 Reset Countdown (pt 2) This is the seventh of a series of gradually more...
Mate examples: #8 Modules Example (pt 1) This is the eigth of a series of gradually more...
Mate examples: #9 Modules Example (pt 2) This is the ninth of a series of gradually more...

Related posts brought to you by Yet Another Related Posts Plugin.

Mate examples: #5 LocalEventMap

gillesguillemin — Thu, 06 Aug 2009 17:32:28 +0000

This blog post is related to My LFPUG Presentation about Mate blog post.

This is the fifth of a series of gradually more complex examples on how to use Mate. If you haven’t done it yet you should have a look first at our previous examples: #1, #2, #3 and #4.

In the previous example, we added the capability to add/remove counters to the Tile component dynamically. Now let’s imagine that each counter is now embedding two subcounters, each one being capable of interacting with the other, but without affecting the subcounters in other counters.

The demo should probably be clearer (source is available by right-clicking on the demo after launching it):

#5 LocalEventMap (click to Launch)

When you click on the [+]/[-] buttons of one a the subcounters, it increases/decreases its own amount, the globalAmount (at every level of the application) and its subtotal along with the subtotal of its counterpart (the other subcounter of its parent counter), without affecting the subtotal values of the other subcounters.

Demo #5: src/views/Counter.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="264"
height="380"
title="{counterTitle}"
layout="absolute"
xmlns:views="views.*"
xmlns:maps="maps.*">

<mx:Script>
[CDATA[
import Events.CounterEvent;

[Bindable]
public var globalAmount : int = 0;

[Bindable]
private var subTotal : int = 0;

[Bindable]
private var amount : int = 0;

private var _counterTitle : String = "Counter Title";

[Bindable]
public function get counterTitle() : String
{
return _counterTitle;
}

public function set counterTitle( v : String ) : void
{
_counterTitle = v;
}

public function increaseSubTotal( event : CounterEvent ) : void
{
++subTotal;
}

public function decreaseSubTotal( event : CounterEvent ) : void
{
--subTotal;
}
]]>
mx:Script>

<maps:SubEventMap dispatcher="{this}"/>

<mx:Label x="27"
y="10"
text="Global Amount:"/>
<mx:Label x="121"
y="10"
text="{globalAmount}"/>
<views:SubCounter y="64"
horizontalCenter="0"
borderStyle="inset">
views:SubCounter>
<views:SubCounter y="208"
horizontalCenter="0"
borderStyle="inset">
views:SubCounter>
<mx:Label x="63"
y="35"
text="Subtotal:"/>
<mx:Label x="124"
y="35"
text="{subTotal}"/>

mx:Panel>

Plenty of novelties in Counter.mxml: 2 new SubCounter components, a new subTotal private variable incremented/decremented by 2 new public methods: increaseSubTotal and decreaseSubTotal.

A very important new thing as well: the appearing of a new SubEventMap. We’ll come back to that one a bit later. Let’s have a look at SubCounter.mxml first:

Demo #5: src/views/SubCounter.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="220"
height="120">

<mx:Script>
[CDATA[
import Events.CounterEvent;

[Bindable]
private var subTotal : int = 0;

[Bindable]
private var amount : int = 0;

public function increaseSubTotal ( event : CounterEvent ) : void
{
++subTotal;
}

public function decreaseSubTotal ( event : CounterEvent ) : void
{
--subTotal;
}

protected function buttonIncrease_clickHandler( event : MouseEvent ) : void
{
++amount;
dispatchEvent( new CounterEvent( CounterEvent.INCREASE_GLOBAL ));
dispatchEvent( new CounterEvent( CounterEvent.INCREASE_SUB_TOTAL ));
}

protected function buttonDecrease_clickHandler( event : MouseEvent ) : void
{
--amount;
dispatchEvent( new CounterEvent( CounterEvent.DECREASE_GLOBAL ));
dispatchEvent( new CounterEvent( CounterEvent.DECREASE_SUB_TOTAL ));
}

]]>
mx:Script>

<mx:Label x="50"
y="15"
text="Subtotal:"/>
<mx:Label x="111"
y="15"
text="{subTotal}"/>

<mx:Label x="57"
y="50"
text="Amount:"/>
<mx:Label x="111"
y="50"
text="{amount}"/>

<mx:Button id="buttonIncrease"
x="58"
y="77"
label="+"
click="buttonIncrease_clickHandler(event)"/>

<mx:Button id="buttonDecrease"
x="130"
y="77"
label="-"
click="buttonDecrease_clickHandler(event)"/>

mx:Canvas>

As you can see, it looks a lot like Counter used to in our previous examples. But there are differences: almost any references to globalAmount were replaced by references to SubTotal. It also refers to 2 new event types:

Demo #5: src/Events/CounterEvent.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package Events
{
import flash.events.Event;

public class CounterEvent extends Event
{
public static const INCREASE_GLOBAL : String = "increaseGlobal";
public static const DECREASE_GLOBAL : String = "decreaseGlobal";
public static const INCREASE_SUB_TOTAL : String = "increaseSubTotal";
public static const DECREASE_SUB_TOTAL : String = "decreaseSubTotal";

public function CounterEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

CounterEvent.INCREASE_SUB_TOTAL and CounterEvent.DECREASE_SUB_TOTAL were added to the previous ones. Now let’s see the EventMaps. First the MainEventMap.mxml:

Demo #5: src/maps/MainEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

xml version="1.0" encoding="utf-8"?>
<mate:EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import views.Counter;
import views.MainView;
import managers.CounterManager;
import Events.CounterEvent;
]]>
mx:Script>

<mate:Debugger level="{Debugger.ALL}" />

<mate:EventHandlers type="{CounterEvent.INCREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="increaseGlobal"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.DECREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="decreaseGlobal"/>
mate:EventHandlers>

<mate:Injectors targets="{[Counter, MainView]}" start="trace('MAIN INJECTORS')">
<mate:PropertyInjector source="{CounterManager}"
sourceKey="globalAmount"
targetKey="globalAmount"/>
mate:Injectors>

mate:EventMap>

Well, except for the Debugger tag and the trace inside the start property (an eventListener actually) it hasn’t changed at all! So, what’s in the new SubEventMap.mxml?

Demo #5: src/maps/SubEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

xml version="1.0" encoding="utf-8"?>
<mate:LocalEventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import views.Counter;
import Events.CounterEvent;
import views.SubCounter;
]]>
mx:Script>

<mate:Debugger level="{Debugger.ALL}" />

<mate:Injectors targets="{[Counter, SubCounter]}">
<mate:ListenerInjector eventType="{CounterEvent.INCREASE_SUB_TOTAL}"
method="increaseSubTotal"/>
<mate:ListenerInjector eventType="{CounterEvent.DECREASE_SUB_TOTAL}"
method="decreaseSubTotal"/>
mate:Injectors>

mate:LocalEventMap>

Here again, it’s pretty simple and still all the power lies here. The only true novelty here is the fact that the component now extends LocalEventMap (instead of EventMap). The main difference between LocalEventMap and the regular EventMap is that the LocalEventMap listens only for events coming from the view it was declared in and its children. Nothing from the outside (unless explicitly told so). Exactly what we were looking for!

One last important bit here: when you instantiate your SubEventMap in Counter.mxml, you must declare a dispatcher:

Demo #5: src/views/Counter.mxml (detail)

48	<maps:SubEventMap dispatcher="{this}"/>

If you don’t declare {this} as a dispatcher it will simple won’t work at all and won’t catch any event.

That’s it for now. Next to come: #6 Reset Countdown (part 1)

Mate examples: #9 Modules Example (pt 2) This is the ninth of a series of gradually more...
Mate examples: #8 Modules Example (pt 1) This is the eigth of a series of gradually more...
Mate examples: #6 Reset Countdown (pt 1) This blog post is related to My LFPUG Presentation about...

Related posts brought to you by Yet Another Related Posts Plugin.

Mate examples: #4 Counters created dynamically

gillesguillemin — Thu, 06 Aug 2009 14:15:25 +0000

This blog post is related to My LFPUG Presentation about Mate blog post.

This is the fourth of a series of gradually more complex examples on how to use Mate. If you haven’t done it yet you should have a look first at our previous examples: #1, #2 and #3.

In the previous example, we manually added four counters to a Tile component. Let’s now add/remove those counters dynamically.

But let’s have a look at the demo first (source is available by right-clicking on the demo after launching it):

#4 Counters created dynamically (click to Launch)

Let’s say it straight ahead: there is absolutely no change in the Mate related classes/components in the current example. Still, we set here the ground for further examples so let’s have a quick look at the changes since Example #3:

Demo #4: src/views/MainView.mxml

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="860"
height="600"
title="MainView"
layout="absolute"
xmlns:views="views.*">

<mx:Script>
[CDATA[
import Events.CounterEvent;
[Bindable]
public var globalAmount : int = 0;

[Bindable]
private var numCounters : int = 0;

protected function buttonIncrease_clickHandler( event : MouseEvent ) : void
{
dispatchEvent( new CounterEvent( CounterEvent.INCREASE_GLOBAL ));
}

protected function buttonDecrease_clickHandler( event : MouseEvent ) : void
{
dispatchEvent( new CounterEvent( CounterEvent.DECREASE_GLOBAL ));
}

protected function addCounterButton_clickHandler( event : MouseEvent ) : void
{
var counter : Counter = new Counter();
counter.counterTitle = "Counter " + ++numCounters;
mainTile.addChild(counter);
}

protected function deleteCounterButton_clickHandler(event:MouseEvent):void
{
mainTile.removeChildAt(mainTile.numChildren - 1);
--numCounters;
}

]]>
mx:Script>

<mx:Label text="Global Amount:"
x="28"
y="16"/>
<mx:Label text="{globalAmount}"
x="124"
y="16"/>

<mx:Tile id="mainTile"
left="10"
right="10"
top="82"
bottom="10">
mx:Tile>

<mx:Button id="buttonIncrease"
x="68"
y="34"
label="+"
click="buttonIncrease_clickHandler(event)"/>
<mx:Button id="buttonDecrease"
x="140"
y="34"
label="-"
click="buttonDecrease_clickHandler(event)"/>

<mx:Button id="addCounterButton"
x="614"
y="31"
label="Add Counter"
click="addCounterButton_clickHandler(event)"/>

<mx:Button id="deleteCounterButton"
x="716"
y="31"
label="Delete Counter"
enabled="{numCounters > 0}"
click="deleteCounterButton_clickHandler(event)"/>

mx:Panel>

MainView.mxml is the only file that sees some changes. Here we’ve added the logic to handle adding/removing new counters (addCounterButton_clickhandler method) and two new buttons Add Counter and Delete Counter, the latter being dynamically enabled/disabled, depending whether there are counters or not in the Tile (increments/decrements the numCounter variable).

Ok, VERY simple this time, but don’t worry, we’ll do better in the next example: #5 LocalEventMap so don’t give up on me!

Mate examples: #3 Multiple Counters This is the third of a series of gradually more...
Mate examples: #8 Modules Example (pt 1) This is the eigth of a series of gradually more...
Mate examples: #7 Reset Countdown (pt 2) This is the seventh of a series of gradually more...

Related posts brought to you by Yet Another Related Posts Plugin.

Mate examples: #3 Multiple Counters

gillesguillemin — Thu, 06 Aug 2009 11:02:45 +0000

This blog post is related to My LFPUG Presentation about Mate blog post.

This is the third of a series of gradually more complex examples on how to use Mate. If you haven’t done it yet you should have a look first at our first example and at our second one.

And now let’s have a look on the demo (source is available by right-clicking on the demo after launching it):

#3 Multiple Counters (click to Launch)

Now, instead of duplicating FirstCounter.mxml code into a useless SecondCounter.mxml, we are using only one generic class: Counter.mxml.

Demo #3: src/views/Counter.mxml

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="264"
height="146"
title="{counterTitle}"
layout="absolute">

<mx:Script>
[CDATA[
import Events.CounterEvent;

[Bindable]
public var globalAmount : int = 0;

[Bindable]
private var amount : int = 0;

private var _counterTitle : String = "Counter Title";

[Bindable]
public function get counterTitle():String
{
return _counterTitle;
}

public function set counterTitle(v:String):void
{
_counterTitle = v;
}

protected function buttonIncrease_clickHandler( event : MouseEvent ) : void
{
++amount;
dispatchEvent(new CounterEvent(CounterEvent.INCREASE_GLOBAL));
}

protected function buttonDecrease_clickHandler( event : MouseEvent ) : void
{
--amount;
dispatchEvent(new CounterEvent(CounterEvent.DECREASE_GLOBAL));
}
]]>
mx:Script>

<mx:Label x="27"
y="10"
text="Global Amount:"/>
<mx:Label x="121"
y="10"
text="{globalAmount}"/>

<mx:Label x="67"
y="45"
text="Amount:"/>
<mx:Label x="121"
y="45"
text="{amount}"/>

<mx:Button id="buttonIncrease"
x="68"
y="72"
label="+"
click="buttonIncrease_clickHandler(event)"/>

<mx:Button id="buttonDecrease"
x="140"
y="72"
label="-"
click="buttonDecrease_clickHandler(event)"/>

mx:Panel>

We’ve also created a getter/setter counterTitle in order to dynamically change the component’s title (it extends the Panel component). Aside from that, it’s exactly the same code as the one you could find in the FirstCounter.mxml component of our second example.

Let’s see check out now Demo.mxml:

Demo #3: src/Demo.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
minWidth="1024"
minHeight="768"
xmlns:local="*"
xmlns:maps="maps.*"
xmlns:views="views.*"

<maps:MainEventMap/>

<views:MainView horizontalCenter="0"
verticalCenter="0"/>

mx:Application>

It is now simplified, everything being now grouped inside a new MainView.mxml component:

Demo #3: src/views/MainView.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="860"
height="600"
title="MainView"
layout="absolute"
xmlns:views="views.*">

<mx:Script>
[CDATA[
[Bindable]
public var globalAmount : int = 0;
]]>
mx:Script>

<mx:Label text="Global Amount:"
x="300"
y="21"/>
<mx:Label text="{globalAmount}"
x="396"
y="21"/>

<mx:Tile left="10"
right="10"
top="68"
bottom="10">
<views:Counter counterTitle="Counter 1"/>
<views:Counter counterTitle="Counter 2"/>
<views:Counter counterTitle="Counter 3"/>
<views:Counter counterTitle="Counter 4"/>
mx:Tile>

mx:Panel>

We’ve added here a globalAmount variable along with the now well-known related labels. This way we can see that the global amount can be updated simultaneously at various level of the application.

We have also created a Tile and added four Counter components (manually for now, we’ll see later how to add them dynamically).

And where is the glue? As always, everything relies on the MainEventMap.mxml:

Demo #3: src/maps/MainEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

xml version="1.0" encoding="utf-8"?>
<mate:EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import views.Counter;
import views.MainView;
import managers.CounterManager;
import Events.CounterEvent;
]]>
mx:Script>

<mate:EventHandlers type="{CounterEvent.INCREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="increaseGlobal"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.DECREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="decreaseGlobal"/>
mate:EventHandlers>

<mate:Injectors targets="{[Counter, MainView]}">
<mate:PropertyInjector source="{CounterManager}"
sourceKey="globalAmount"
targetKey="globalAmount"/>
mate:Injectors>

mate:EventMap>

As you can see, not much has changed since the last time. We have just replaced the target property of our Injectors by the targets property which accepts an array of views: MainView and Counter. And as Counter is repeated four times, the four instances will receive their update.

How easy is that?

Next example: #4 Counters created dynamically

Mate examples: #4 Counters created dynamically This is the fourth of a series of gradually more...
Mate examples: #8 Modules Example (pt 1) This is the eigth of a series of gradually more...
Mate examples: #5 LocalEventMap This is the fifth of a series of gradually more...

Related posts brought to you by Yet Another Related Posts Plugin.

Mate examples: #2 Databinding and EventHandlers

gillesguillemin — Wed, 05 Aug 2009 12:06:04 +0000

This blog post is related to My LFPUG Presentation about Mate blog post.

This is the second of a series of gradually more complex examples on how to use Mate. It’s still a fairly basic one and visually it looks just the same as our previous example.

But let’s first have a look on the demo (source is available by right-clicking on the demo after launching it):

#2 Databinding and EventHandlers (click to Launch)

Let’s have a look at FirstCounter.mxml (SecondCounter.mxml has the same content):

Demo #2: src/FirstCounter.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="264"
height="146"
title="First Counter"
layout="absolute">

<mx:Script>
[CDATA[
import Events.CounterEvent;

[Bindable]
public var globalAmount : int = 0;

[Bindable]
private var amount : int = 0;

protected function buttonIncrease_clickHandler( event : MouseEvent ) : void
{
++amount;
dispatchEvent(new CounterEvent(CounterEvent.INCREASE_GLOBAL));
}

protected function buttonDecrease_clickHandler( event : MouseEvent ) : void
{
--amount;
dispatchEvent(new CounterEvent(CounterEvent.DECREASE_GLOBAL));
}
]]>
mx:Script>

<mx:Label x="27"
y="10"
text="Global Amount:"/>
<mx:Label x="121"
y="10"
text="{globalAmount}"/>

<mx:Label x="67"
y="45"
text="Amount:"/>
<mx:Label x="121"
y="45"
text="{amount}"/>

<mx:Button id="buttonIncrease"
x="68"
y="72"
label="+"
click="buttonIncrease_clickHandler(event)"/>

<mx:Button id="buttonDecrease"
x="140"
y="72"
label="-"
click="buttonDecrease_clickHandler(event)"/>

mx:Panel>

Here the increaseGlobal and decreaseGlobal methods have disappeared and globalAmount is now public (which is important).

Actually, they haven’t completely disappeared: we’ve created a new class: CounterManager.as

Demo #2: src/managers/CounterManager.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Here are our methods! Along with a bindable public globalAmount variable again…

Let’s check what has changed in our MainEventMap.mxml:

Demo #2: src/maps/MainEventMap.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

xml version="1.0" encoding="utf-8"?>
<mate:EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/">
<mx:Script>
[CDATA[
import managers.CounterManager;
import Events.CounterEvent;
]]>
mx:Script>

<mate:EventHandlers type="{CounterEvent.INCREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="increaseGlobal"/>
mate:EventHandlers>

<mate:EventHandlers type="{CounterEvent.DECREASE_GLOBAL}">
<mate:MethodInvoker generator="{CounterManager}"
method="decreaseGlobal"/>
mate:EventHandlers>

<mate:Injectors target="{FirstCounter}">
<mate:PropertyInjector source="{CounterManager}"
sourceKey="globalAmount"
targetKey="globalAmount"/>
mate:Injectors>

<mate:Injectors target="{SecondCounter}">
<mate:PropertyInjector source="{CounterManager}"
sourceKey="globalAmount"
targetKey="globalAmount"/>
mate:Injectors>

mate:EventMap>

There are new tags: first EventHandlers: as previously our ListenerInjectors, they are listening to one specific event type then invoke a specific method inside our new CounterManager.as class using the tag MethodInvoker.
Another tag has appeared inside our Injectors tags: PropertyInjector which tie together the public variable globalAmount of CounterManager and both counters. Here CounterManager acts as a model shared by the counters. When the model is updated, the counters are automatically updated as well.

Next example: #3 Multiple Counters

Mate examples: #3 Multiple Counters This is the third of a series of gradually more...
Mate examples: #1 A very basic injectors example This is the first of a series of gradually more...
Mate examples: #5 LocalEventMap This is the fifth of a series of gradually more...

Related posts brought to you by Yet Another Related Posts Plugin.