Flex Stuff by Gilles Guillemin » Flex

Flex 4: CoverFlow Layout

gillesguillemin — Wed, 23 Dec 2009 11:41:47 +0000

UPDATED (07/04/2010):
I’ve updated the example (and the source code) to reflect some things added in the comments and also added a new stepFade property (see the example).

Finally, I’ve also updated the example “content” so it’s more in phase with the season…

Last month I already showed you how cool Flex 4′s new layout system is with my TimeMachine Layout. Pretty much at the same time I knocked together another example, the good ol’ CoverFlow but with my new gig in Paris for Keytree/SAP/Publicis I didn’t get the chance to publish it until now.

Here it is! As usual, just click on the picture to launch it and right-click to see the source.

Flex 4: CoverFlow Layout (click to Launch)

Same disclaimer as for the TimeMachine layout: it’s not optimized, some things can certainly be done a different/better way, but at least it works reasonably well and gives another idea of how easy it is to implement complex layouts with Flex 4.

Enjoy and Merry Christmas/Happy New Year!

No related posts.

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

Flex 4: Animated TimeMachine Layout

gillesguillemin — Fri, 06 Nov 2009 13:50:37 +0000

The new layout architecture in Flex 4 is pretty cool. It’s much much simpler to implement complex layouts than what was possible with Flex 3. So the other day I was asked to develop a TimeMachine-like layout. It eventually ended up being done with Flex 3 but before that I had a chance to give a try with the new layout system.

So I picked a bit of Evtim’s Wheel layout, added a bit of Ryan Campbell’s 5 3D Layouts (who got himself inspired by Evtim’s example), blended the whole thing in my own recipe and ended up with something I thought I should share (source is available by right-clicking on the demo after launching it):

Flex 4: Animated TimeMachine Layout (click to Launch)

It’s not optimized, some things can certainly be done a different/better way, but at least it works reasonably well and gives another idea of how easy it is to implement complex layouts with Flex 4.

No related posts.

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

Refresh Automatically in Flash Catalyst Beta 2: a quick fix

gillesguillemin — Wed, 21 Oct 2009 10:02:44 +0000

As explained the other day in this previous post, the new version version of Adobe Flash Catalyst Beta 2 doesn’t allow access anymore to it’s preferences so you cannot set it to refresh automatically. It’s kind of a pain when you use my synchronization tool, CatalystBuilderSync, as the synchronizations with Flash Builder do not reflect anymore in Catalyst.
So I’ve been digging a bit into Catalyst architecture and found an easy fix for that. You just need to edit the following file, depending on your platform (attention, .metadata is usually hidden by default):

On Mac:
/Users/[your username]/Library/Application Support/Adobe/Flash Catalyst/workspace/.metadata/.plugins/org.eclipse.core.runtime/.settings/org.eclipse.core.resources.prefs
On Windows 7 (and probably on Vista but unverified):
C:\Users\[your username]\AppData\Roaming\Adobe\Flash Catalyst\workspace\.metadata\.plugins\org.eclipse.core.runtime\.settings\org.eclipse.core.resources.prefs
On Windows XP:
C:\Documents and Settings\[your username]\Application Data\Adobe\Flash Catalyst\workspace\.metadata\.plugins\org.eclipse.core.runtime\.settings\org.eclipse.core.resources.prefs

Open one of those and add the following line:

refresh.enabled=true

Save, restart Catalyst and that would do the trick. I’ll simplify the whole process in CatalystBuilderSync next update, hopefully in a couple of days.

No related posts.

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

Mate examples: #11 Mediator (or Passive View)

gillesguillemin — Tue, 13 Oct 2009 07:00:26 +0000

This blog post is related to My LFPUG Presentation about Mate blog post (I know, it was 3 months ago, it’s a shame but I also must work for a living).

If you haven’t done it yet you should have a look first at our previous examples: #1, #2, #3, #4, #5, #6, #7, #8, #9 and #10.

In our previous example we’ve studied a simple implementation of the Presentation Pattern. In this configuration, the View has a reference to its presentation model (or at least to its interface). But what if you want it to be the other way around? The view exists for itself and the model is the one who has a reference to the view. This approach definitely is a prime candidate if you want to use views generated in Flash Catalyst then synchronised with Flash Builder with CatalystBuilderSync. You can easily modify your views without affecting the logic whatsoever. The view is dumb or passive as explained in this other article by Paul Williams. It’s also one of the patterns used in PureMVC, called Mediator and we will keep the name here. So, how is it possible with Mate?

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

#11 Mediator (a la PureMVC) (click to Launch)

As you can see, the 2 views FirstPanel.mxml and SecondPanel.mxml are completely autonomous, without any reference to anything else nor any logic:

Demo #11: src/views/FirstPanel.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:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="298"
height="164"
layout="absolute"
title="First Panel">

<mx:Button id="button1"
label="Button One"
left="30"
verticalCenter="0"/>
<mx:Button id="button2"
label="Button Two"
right="30"
verticalCenter="0"/>

mx:Panel>

Demo #11: src/views/SecondPanel.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

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="246"
height="232"
layout="absolute"
title="Deuxieme Panel"
borderStyle="inset"
backgroundColor="#A5C5ED">

<mx:Button id="button1"
label="Bouton Un"
horizontalCenter="0"
top="20"
emphasized="true"
cornerRadius="0"/>
<mx:Button id="button2"
label="Bouton Deux"
horizontalCenter="0"
bottom="20"
cornerRadius="0"
fillAlphas="[1.0, 1.0]"
fillColors="[#FF0000, #FF0000]"
color="#FFFFFF"/>

mx:Panel>

Now the mediators which embed all the logic and the reference to their respective view (which is passed as an argument of the initMediator method):

Demo #11: src/views/mediators/FirstPanelMediator.as

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

package views.mediators
{
import flash.events.EventDispatcher;
import flash.events.MouseEvent;

import mx.controls.Alert;

import views.FirstPanel;

public class FirstPanelMediator extends EventDispatcher
{
public var component : FirstPanel;

public function initMediator(target : *) : void
{
component = target as FirstPanel;
component.button1.addEventListener(MouseEvent.CLICK, button1_clickHandler);
component.button2.addEventListener(MouseEvent.CLICK, button2_clickHandler);
}

protected function button1_clickHandler( event : MouseEvent ) : void
{
Alert.show("Button1 Clicked");
}

protected function button2_clickHandler( event : MouseEvent ) : void
{
Alert.show("Button2 Clicked");
}
}
}

Demo #11: src/views/mediators/SecondPanelMediator.as

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

package views.mediators
{
import flash.events.EventDispatcher;
import flash.events.MouseEvent;

import mx.controls.Alert;

import views.SecondPanel;

public class SecondPanelMediator extends EventDispatcher
{
public var component : SecondPanel;

public function initMediator(target : *) : void
{
component = target as SecondPanel;
component.button1.addEventListener(MouseEvent.CLICK, button1_clickHandler);
component.button2.addEventListener(MouseEvent.CLICK, button2_clickHandler);
}

protected function button1_clickHandler( event : MouseEvent ) : void
{
Alert.show("Oh, I do not like this.");
}

protected function button2_clickHandler( event : MouseEvent ) : void
{
Alert.show("Please, don't do that.");
}
}
}

And finally the eventMap which ties together views and mediators via injection:

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

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.SecondPanel;
import views.mediators.SecondPanelMediator;
import mx.events.FlexEvent;
import views.FirstPanel;
import views.mediators.FirstPanelMediator;
]]>
mx:Script>

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

<mate:Injectors target="{FirstPanel}">
<mate:MethodInvoker generator="{FirstPanelMediator}"
method="initMediator"
arguments="{event.injectorTarget}"/>

mate:Injectors>

<mate:Injectors target="{SecondPanel}">
<mate:MethodInvoker generator="{SecondPanelMediator}"
method="initMediator"
arguments="{event.injectorTarget}"/>

mate:Injectors>

mate:EventMap>

Whenever a view is instantiated then its related mediator is instantiated as well, its initMediator method is called and the injector’s target (the view: FirstPanel or SecondPanel) is passed as an argument. Important: note the use of Mate’s event.injectorTarget to retrieve the injector’s target reference. You cannot pass directly {FirstPanel} or {SecondPanel}. It wouldn’t work.

I’ll tell you what: this Mediator approach is quite simply my favourite at the moment as it leaves you with the maximum freedom to deal with the new Flex 4 paradigm (component + skin) without interfering with it at any point.

Next time (hopefully sooner than next month): Versioned Applications (think about Modules but more powerful)

No related posts.

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

Flash Builder 4 beta2, Flash Catalyst Beta2 and CatalystBuilderSync? Good to go but…

gillesguillemin — Thu, 08 Oct 2009 06:51:02 +0000

[Edit: there's a workaround for the preferences issue here]

I’ve been literally sucked up into a black hole of work recently (hence the obvious lack of activity on FlexStuff.co.uk), but not to the point I couldn’t check out the brand new Flash Builder 4 Beta 2 and its counterpart Flash Catalyst Beta 2 (like all good geeks I like novelties). So I took a couple of hours to see how the two of them behaved with CatalystBuilderSync and for what I’ve seen so far it’s still all good, with the usual caveats (not all your Flash Builder 4 code will necessarily play well in Catalyst). It looks like my approach remains entirely valid and I suspect it’ll remain valid even after Catalyst 1.0 release, but I can be wrong and obviously Adobe doesn’t warmly encourage this approach according to Andrew Shorten’s (excellent) article: Exploring Flash Catalyst and Flash Builder workflows:

Other workflows

Whilst not an official list of recommended workflows, the approaches described in this article are all supported within the current versions of the Flash Catalyst and Flash Builder.

There are a number of third-party tools and alternative workflows that you might like to consider as you work with Flash Catalyst and Flash Builder; these can often improve productivity further for advanced developers. Note, however, that some of these tools may use unsupported or non-recommended approaches that may not work with future versions of Flash Catalyst and Flash Builder.

So CatalystBuilderSync works well, BUT (of course there has to be a but) unfortunately Adobe limited one thing in Catalyst: there’s no right-click available anymore in Catalyst’s code view. Which means you can’t manually refresh the content of your project folder nor access Catalyst’s preferences in order to activate the Automatic Refresh (as explained in this previous post). There are a couple workarounds (like switching back and forth between design and code view or saving Catalyst project then choosing “Revert” in the file menu) but it’s a bit of a shame as we’re not children and I don’t really see the point of removing this functionality (now I’m also doomed to use the system’s default browser which is all but a convenience for me). I guess there must be somewhere in Catalyst some .ini file to edit (after all Catalyst is just another Eclipse distro) but I must say I don’t have a clue where this might be.
I’ll keep searching when I have the time but if someone has a suggestion I’d love to hear it. Now the good thing is CatalystBuilderSync is still working and it’s even more useful now with all the new Catalyst’s functionalities.

No related posts.

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

CatalystBuilderSync 0.6.2: First public alpha

gillesguillemin — Thu, 27 Aug 2009 10:06:11 +0000

Like some others I’ve been working a lot recently in trying to improve the Adobe Flash Catalyst / Flash Builder workflow. I came up with a partial solution not so long ago, but it wasn’t exactly seamless and it most definitely needed a tool to act as a middle-man, to simplify synchronization between both softwares.

This is that tool: CatalystBuilderSync

And more than a long story, the second of a series of screencasts I’ve recorded yesterday should give you a good taste of what CatalystBuilderSync is capable of…

Part 2 - First synchronizations

Remember, it’s a very early alpha version, so bugs, hiccups and other funny things are to be expected (and to be reported so I can fix them at some point).

You can download the latest version and give some feedback (I really need them) here:

CatalystBuilderSync 0.6.2

And please spread the word, I feel like this tool should be of interest to many of you.

No related posts.

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

Mate examples: #10 Presentation Model

gillesguillemin — Tue, 25 Aug 2009 07:37:04 +0000

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

If you haven’t done it yet you should have a look first at our previous examples: #1, #2, #3, #4, #5, #6, #7, #8, and #9.

Today we’re going to put aside our (I know: boooring) counters. We will come back to them in a couple of posts for the great finale: Mate and versioned applications.
But for now I wanted to illustrate a really good practice with Mate (and in general): the Presentation Model pattern. For those who want to know more about the Presentation Model, have a look at Paul Williams great article. Basically, the idea is to keep the view as simple as possible, separating all the logic in a dedicated class. That way, Mate communicates with the presentation model class and not directly with the view, the latter being updated via data binding. In this configuration, the view’s only concern is its own elements and its only dependency is its model.

Let’s have a look at our very simple demo (source is available by right-clicking on the demo after launching it):

#10 Presentation Model (click to Launch)

So what do we have here (apart from the opportunity to learn a bit of French)? Two visually different panels, each with two buttons, each button triggering an alert with a different message. The structure is dead simple: the two different panels are instantiated in the now usual MainView:

Demo #10: src/views/MainView.mxml

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

xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="656"
height="314"
xmlns:views="views.*">

<views:FirstPanel verticalCenter="0"
left="25"
width="298"/>
<views:SecondPanel verticalCenter="0"
right="25"/>

mx:Canvas>

FirstPanel and SecondPanel are pretty similar, the main differences being various “cosmetic” properties:

Demo #10: src/views/FirstPanel.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

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="298"
height="164"
layout="absolute"
title="First Panel">

<mx:Script>
[CDATA[
import views.presentationmodel.IPresentationModel;

[Bindable]
public var pm : IPresentationModel;
]]>
mx:Script>

<mx:Button id="button1"
label="Button One"
left="30"
verticalCenter="0"
click="pm.button1_clickHandler(event)"/>
<mx:Button id="button2"
label="Button Two"
right="30"
verticalCenter="0"
click="pm.button2_clickHandler(event)"/>

mx:Panel>

Demo #10: src/views/SecondPanel.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

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="246"
height="232"
layout="absolute"
title="Deuxieme Panel"
borderStyle="inset"
backgroundColor="#A5C5ED">

<mx:Script>
[CDATA[
import views.presentationmodel.IPresentationModel;

[Bindable]
public var pm : IPresentationModel;
]]>
mx:Script>

<mx:Button id="button1"
label="Bouton Un"
horizontalCenter="0"
top="20"
emphasized="true"
cornerRadius="0"
click="pm.button1_clickHandler(event)"/>
<mx:Button id="button2"
label="Bouton Deux"
horizontalCenter="0"
bottom="20"
cornerRadius="0"
fillAlphas="[1.0, 1.0]"
fillColors="[#FF0000, #FF0000]"
color="#FFFFFF"
click="pm.button2_clickHandler(event)"/>

mx:Panel>

One important thing to notice though: they both share a same pm variable referring to an Interface, IPresentationModel. Also, the 2 buttons call 2 methods within this interface: button1_clickHandler and button2_clickHandler.

Demo #10: src/views/presentationmodel/IPresentationModel.as

1
2
3
4
5
6
7
8
9
10

package views.presentationmodel
{
import flash.events.MouseEvent;

public interface IPresentationModel
{
function button1_clickHandler( event : MouseEvent ) : void;
function button2_clickHandler( event : MouseEvent ) : void;
}
}

Now, there are two classes in the views/presentationmodel package: PresentationModel1 and PresentationModel2. Once again, those two are pretty similar, the only differences being the different messages thrown by the Alerts:

Demo #10: src/views/presentationmodel/PresentationModel1.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package views.presentationmodel
{
import flash.events.EventDispatcher;
import flash.events.MouseEvent;

import mx.controls.Alert;

public class PresentationModel1 extends EventDispatcher implements IPresentationModel
{

public function button1_clickHandler( event : MouseEvent ) : void
{
Alert.show("Button1 Clicked");
}

public function button2_clickHandler( event : MouseEvent ) : void
{
Alert.show("Button2 Clicked");
}

}
}

Demo #10: src/views/presentationmodel/PresentationModel2.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package views.presentationmodel
{
import flash.events.EventDispatcher;
import flash.events.MouseEvent;

import mx.controls.Alert;

public class PresentationModel2 extends EventDispatcher implements IPresentationModel
{

public function button1_clickHandler( event : MouseEvent ) : void
{
Alert.show("Oh! I do not like this.");
}

public function button2_clickHandler( event : MouseEvent ) : void
{
Alert.show("Please don't do that.");
}

}
}

And now, the glue, as usual:

Demo #10: 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.SecondPanel;
import views.presentationmodel.PresentationModel2;
import views.presentationmodel.PresentationModel1;
import views.FirstPanel;
]]>
mx:Script>

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

<mate:Injectors target="{FirstPanel}">
<mate:ObjectBuilder generator="{PresentationModel1}"/>
<mate:PropertyInjector source="{lastReturn}"
targetKey="pm"/>

mate:Injectors>

<mate:Injectors target="{SecondPanel}">
<mate:ObjectBuilder generator="{PresentationModel2}"/>
<mate:PropertyInjector source="{lastReturn}"
targetKey="pm"/>

mate:Injectors>

mate:EventMap>

The MainEventMap maps each PresentationModel to its related view and the job is done! The beauty of it is that you can swap presentation models and views as easily as this:

Demo #10: 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.SecondPanel;
import views.presentationmodel.PresentationModel2;
import views.presentationmodel.PresentationModel1;
import views.FirstPanel;
]]>
mx:Script>

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

<mate:Injectors target="{FirstPanel}">
<mate:ObjectBuilder generator="{PresentationModel2}"/>
<mate:PropertyInjector source="{lastReturn}"
targetKey="pm"/>

mate:Injectors>

<mate:Injectors target="{SecondPanel}">
<mate:ObjectBuilder generator="{PresentationModel1}"/>
<mate:PropertyInjector source="{lastReturn}"
targetKey="pm"/>

mate:Injectors>

mate:EventMap>

Neat, isn’t it? You can as easily imagine using data binding to dynamically change view’s properties (visible, enabled, label, whatnot) with some bindable variables in the presentation model.

Here we go. Next, my new favourite one: a port of PureMVC’s mediator pattern which is one of the best ways to use Mate with the new Flex 4 component architecture.

No related posts.

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

Mate examples: #9 Modules Example (pt 2)

gillesguillemin — Sun, 23 Aug 2009 18:05:46 +0000

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

#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

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

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.

Mate examples: #8 Modules Example (pt 1)

gillesguillemin — Tue, 18 Aug 2009 18:04:13 +0000

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

This is the eigth 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, and #7.

In our two previous examples, we saw how easy it was to handle communication between the application and its subcomponents, without mix-up between events intended to be listened by the whole application and events required only at the subcomponent level. But how would Mate hold up with with even looser subcomponents, of the kind that are loaded on demand and are not a concrete part of our main application, namely Modules?

I’m sure you know already it holds up pretty well, but let’s see how it does that:

#8 Modules Example (pt 1) (click to Launch)

The great thing here is that we didn’t change much between this example and our previous Reset Countdown. Basically, aside moving Counter.mxml and SubCounter.mxml into a new modules package and changing Counter.mxml from a Panel into a Module, that’s about it:

Demo #8: src/modules/Counter.mxml

xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="264"
height="380"
xmlns:maps="maps.*"
xmlns:modules="modules.*">

<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: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}"/>
<modules:SubCounter y="64"
horizontalCenter="0"
borderStyle="inset">
modules:SubCounter>
<modules:SubCounter y="208"
horizontalCenter="0"
borderStyle="inset">
modules:SubCounter>
<mx:Label x="63"
y="35"
text="Subtotal:"/>
<mx:Label x="124"
y="35"
text="{subTotal}"/>

mx:Panel>
mx:Module>

Don’t forget to declare Counter.mxml as a Flex Module in your project’s properties and of course update all your references to Counter and SubCounter from views to modules (i.e. import view.Counter => import modules.Counter).
And then, all you need to do is to change your addCounterButton_clickHandler method in MainView.mxml from a simple Class instantiation into a ModuleLoader loader:

Demo #8: 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="860"
height="600"
title="{mainTitle}"
layout="absolute"
xmlns:views="views.*">

<mx:Script>
[CDATA[
import mx.modules.ModuleLoader;
import Events.CountdownEvent;
import Events.CounterEvent;
[Bindable]
public var globalAmount : int = 0;

[Bindable]
public var isCountdownRunning : Boolean;

[Bindable]
private var numCounters : int = 0;

[Bindable]
private var mainTitle : String = "MainView";

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 moduleLoader : ModuleLoader = new ModuleLoader();
moduleLoader.url = "modules/Counter.swf";
mainTile.addChild( moduleLoader );
++numCounters;
}

protected function deleteCounterButton_clickHandler( event : MouseEvent ) : void
{
var displayObject : DisplayObject = mainTile.getChildAt(mainTile.numChildren - 1);
ModuleLoader( displayObject ).unloadModule();
mainTile.removeChild( displayObject );
--numCounters;
}

public function updateTitle( event : CountdownEvent ) : void
{
mainTitle = "MainView (" + event.countdown + ")";
}

protected function countdownButton_clickHandler( event : MouseEvent ) : void
{
if ( isCountdownRunning )
{
countdownButton.label = "START COUNTDOWN";
dispatchEvent( new CountdownEvent( CountdownEvent.STOP_COUNTDOWN ));
}
else
{
countdownButton.label = "STOP COUNTDOWN";
dispatchEvent( new CountdownEvent( CountdownEvent.START_COUNTDOWN ));
}
}
]]>
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="countdownButton"
x="366"
y="31"
label="STOP COUNTDOWN"
click="countdownButton_clickHandler(event)"/>

<mx:Button id="deleteCounterButton"
x="716"
y="31"
label="Delete Counter"
enabled="{numCounters > 0}"
click="deleteCounterButton_clickHandler(event)"/>

mx:Panel>

And yet our application keeps behaving as it always did. Isn’t that great? It is, it is, but the example is still not perfect: the views are now separated from the main application, but the logic is still part of it and there are references to the modules’ classes all around in the main application. We can clearly decouple a bit further and we’ll see how in our next part: #9 Modules Example (pt 2)

No related posts.

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

Mate examples: #7 Reset Countdown (pt 2)

gillesguillemin — Sun, 09 Aug 2009 18:02:37 +0000

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

This is the seventh 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, and #6.

In the previous example, we added a reset countdown which sets all the counters to 0 when the countdown is off. But it’s a bit of a pain this unstoppable countdown. It would be cool to add a start/stop button, wouldn’t it?

OK, let’s do it (source is available by right-clicking on the demo after launching it):

#7 Reset Countdown (pt 2) (click to Launch)

So we’ve first added this start/stop button (yeah, let’s have a toggle button this time):

Demo #7: src/views/MainView.mxml

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="860"
height="600"
title="{mainTitle}"
layout="absolute"
xmlns:views="views.*">

<mx:Script>
[CDATA[
import Events.CountdownEvent;
import Events.CounterEvent;
[Bindable]
public var globalAmount : int = 0;

[Bindable]
public var isCountdownRunning : Boolean;

[Bindable]
private var numCounters : int = 0;

[Bindable]
private var mainTitle : String = "MainView";

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

public function updateTitle( event : CountdownEvent ) : void
{
mainTitle = "MainView (" + event.countdown + ")";
}

protected function countdownButton_clickHandler( event : MouseEvent ) : void
{
if ( isCountdownRunning )
{
countdownButton.label = "START COUNTDOWN";
dispatchEvent( new CountdownEvent( CountdownEvent.STOP_COUNTDOWN ));
}
else
{
countdownButton.label = "STOP COUNTDOWN";
dispatchEvent( new CountdownEvent( CountdownEvent.START_COUNTDOWN ));
}
}
]]>
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="countdownButton"
x="366"
y="31"
label="STOP COUNTDOWN"
click="countdownButton_clickHandler(event)"/>

<mx:Button id="deleteCounterButton"
x="716"
y="31"
label="Delete Counter"
enabled="{numCounters > 0}"
click="deleteCounterButton_clickHandler(event)"/>

mx:Panel>

Depending on isCountdownRunning (note that it is bindable…), the button’s label will change, and a click on the button will dispatch the new CountdownEvent.START_COUNTDOWN or CountdownEvent.STOP_COUNTDOWN.

Demo #7: src/Events/CountdownEvent.as

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

package Events
{
import flash.events.Event;

public class CountdownEvent extends Event
{
public static const COUNTDOWN : String = "countDown";
public static const START_COUNTDOWN : String = "startCountDown";
public static const STOP_COUNTDOWN : String = "stopCountDown";

public var countdown : int;

public function CountdownEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

We can see those two new types here. What about CountdownManager?

Demo #7: src/managers/CountdownManager.as

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

package managers
{
import Events.CountdownEvent;
import Events.CounterEvent;

import com.asfusion.mate.events.Dispatcher;

import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;
import flash.events.TimerEvent;
import flash.utils.Timer;

public class CountdownManager extends EventDispatcher
{
private var timer : Timer;

private var duration : int = 10;
private var countdown : int;

private var dispatcher : Dispatcher = new Dispatcher();

[Bindable]
public var isCountdownRunning : Boolean = true;

public function CountdownManager( target : IEventDispatcher = null )
{
super( target );
init();
}

private function init() : void
{
countdown = duration;
timer = new Timer( 1000, 1 );
timer.addEventListener( TimerEvent.TIMER_COMPLETE, onTimerComplete );
timer.start();
}

private function onTimerComplete( event : TimerEvent ) : void
{
timer.reset();
timer.start();

--countdown;
var counterEvent : CountdownEvent = new CountdownEvent( CountdownEvent.COUNTDOWN );
counterEvent.countdown = this.countdown;
dispatcher.dispatchEvent( counterEvent );

if ( countdown < 1 )
{
dispatcher.dispatchEvent( new CounterEvent( CounterEvent.RESET ));
countdown = duration;
}

}

public function startCountdown() : void
{
timer.start();
isCountdownRunning = true;
}

public function stopCountdown() : void
{
timer.stop();
isCountdownRunning = false;
}
}
}

The same bindable isCountdownRunning here. And two dead simple methods: startCountdown() and stopCountdown().

Last, but not least: the now famous MainEventMap:

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

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 views.SubCounter;
import managers.CountdownManager;
import mx.events.FlexEvent;
import views.Counter;
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 targets="{[Counter, MainView]}">
<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:Injectors target="{MainView}"
debug="true">
<mate:PropertyInjector source="{CountdownManager}"
sourceKey="isCountdownRunning"
targetKey="isCountdownRunning"/>
<mate:ListenerInjector eventType="{CountdownEvent.COUNTDOWN}"
method="updateTitle"/>
mate:Injectors>

mate:EventMap>

EventHandlers and ListenerInjectors catch events, then invoke methods, or inject properties, blah, blah, blah.

I bet you start to get it by now

Next: #8 Modules Example (pt 1)

No related posts.

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