Mate examples: #3 Multiple Counters

Aug

Flex, Mate Framework

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

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="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...
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.

(No Ratings Yet)

Loading ...

Prev: << Mate examples: #2 Databinding and...

Next: Mate examples: #4 Counters created... >>

Flex Stuff by Gilles Guillemin