Mate examples: #1 A very basic injectors example

Aug

Flex, Mate Framework

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

This is the first of a series of gradually more complex examples on how to use Mate. It’s a fairly basic one. You’ve got 2 “counters” with 2 buttons to increase and decrease the value of 2 variables: amount (which is specific for each counter) and globalAmount (which is shared by the two counters).

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

#1 A very basic injectors example (click to Launch)

Mate is going here to help us incrementing the value of globalAmount in both counters at the same time. Let’s have a look at FirstCounter.mxml (SecondCounter.mxml is the exact same one):

Demo #1: 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
59
60
61
62
63
64
65
66
67
68

<?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]
private var globalAmount : int = 0;

[Bindable]
private var amount : int = 0;

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

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

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>

IMPORTANT: increaseGlobal() and decreaseGlobal() method must be declared public or Mate won’t be able to call them later.

A click on buttonIncrease calls buttonIncrease_clickHandler which dispatches the following CounterEvent:

Demo #1: src/Events/CounterEvent.as

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

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 function CounterEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

IMPORTANT: Note that the bubbles property is set to true. It MUST be set to true or Mate won’t be able to catch it when the event is dispatched.

Now Mate’s most important file: MainEventMap:

Demo #1: 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

<?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.CounterEvent;
]]>
</mx:Script>

<mate:Injectors target="{FirstCounter}">
<mate:ListenerInjector eventType="{CounterEvent.INCREASE_GLOBAL}"
method="increaseGlobal"/>
<mate:ListenerInjector eventType="{CounterEvent.DECREASE_GLOBAL}"
method="decreaseGlobal"/>
</mate:Injectors>

<mate:Injectors target="{SecondCounter}">
<mate:ListenerInjector eventType="{CounterEvent.INCREASE_GLOBAL}"
method="increaseGlobal"/>
<mate:ListenerInjector eventType="{CounterEvent.DECREASE_GLOBAL}"
method="decreaseGlobal"/>
</mate:Injectors>

</mate:EventMap>

]

ListenerInjectors are listening for CounterEvent and whenever one of them is caught, they call the relevant method (increaseGlobal and decreaseGlobal) in each counter.

Finally, don’t forget to declare MainEventMap in Demo.mxml:

Demo #1: src/Demo.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:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
minWidth="1024"
minHeight="768"
xmlns:local="*"
xmlns:maps="maps.*"
viewSourceURL="http://flexstuff.co.uk/wp-content/uploads/examples/mate_lfpug/_Demo01%20-%20A%20very%20basic%20Injectors%20example/srcview/index.html">

<maps:MainEventMap/>

<local:FirstCounter horizontalCenter="-200"
verticalCenter="0"/>

<local:SecondCounter horizontalCenter="200"
verticalCenter="0"/>
</mx:Application>

Very simple yet very powerful. Try to put you counters inside different wrapping mxml components and the globalAmount variable should still update without a complaint.

Next example: #2 Databinding and EventHandlers

Mate examples: #2 Databinding and EventHandlers This is the second of a series of gradually more...
Mate examples: #3 Multiple Counters This is the third of a series of gradually more...
Mate examples: #5 LocalEventMap This is the fifth 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: #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.

(No Ratings Yet)

Loading ...

Prev: << My LFPUG presentation about Mate

Next: Mate examples: #2 Databinding and... >>

Flex Stuff by Gilles Guillemin