Flex Stuff by Gilles Guillemin

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!

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.

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.

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)

Continue Reading…

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

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…

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.

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)

Continue Reading…

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)

Continue Reading…

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)

Continue Reading…

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)

Continue Reading…