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

Mate example

#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

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
<?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
<?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;
            import modules.views.SubCounter;
            import managers.CounterManager;
            import modules.Counter;
        ]]>
    </mx:Script>

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

    <mate:Injectors target="{Counter}">
        <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:EventMap>

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.

No related posts.

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

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...