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

Mate example

#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

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
<?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!

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