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):

Mate example

#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
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;
        }
    }
}

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

No related posts.

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

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)
Loading ... Loading ...