Alex Uhlmann

I'm excited to announce that we've redefined Cairngorm to increase its scope. Tom Sugden announced our intentions here last month. We've now published the first content on opensource.adobe.com.

Instead of only providing a specific implementation of an MVC architecture, our team within the Adobe Technical Services organization took a step back and collected some of the most important knowledge that helped us deliver enterprise Flex applications over the last few years of consulting projects. This includes modular application development, layered architecture, domain-driven design, loose coupling, quality guidelines, build automation strategies, agile testing, code coverage best practices, and more. We present Cairngorm in three parts:

Adobe TV now hosts the full MAX 2008 session about Agile Testing of Enterprise RIAs with Flex and LiveCycle ES from Herve Dupriez and me. Herve talks about the LCES part and I about Flex.

This presentation focuses on how your architectural design could look like to make agile testing feasible and efficient. It’s explaining principles we’ve been following at projects that can make Test Driven Development of RIAs a reality.

It also touches upon code coverage tooling available for Flex and its recommended usage. Checkout Flexcover, the open source code coverage tool. Flexcover was created by Joe Berkovitz and some months ago I joined his efforts after I developed an internal tool that followed another approach using only Flash Player APIs. Joe's approach is actually customizing the open source Flex compiler and can therefore achieve object code branch coverage. Join the Flexcover project to keep it going!

During the presentation I’ve mentioned further information about IoC frameworks that my collegue Ed Eustace already put online. Also, Michael Labriola’s presentation at MAX 08 “Testing Flex Applications” spend more time comparing different testing tools. This is not online at Adobe TV yet, but upcoming.

Also check out the presentations from my other colleagues at Adobe Professional Services:

• RIA Development with Cairngorm - Tips from the Experts from Peter Martin and Eric Garza
• Architectural Best Practices for Flex and LiveCycle ES Application from Steven Webster and Tunde Turner
• Television on AIR - Creating Custom Media Player Experiences from Xavi Beumala Segura, John Bennett Kyle Glossy and Mark Hirsch
• Delivering Collaborative Apps with AIR and LiveCycle Data Services from Alistair McLeod and Xavier Agnetti
• Lazy Innovation: Strategy for the Design of Innovative User Experiences from George Neill and Jerome Doran

Imagine an airplane that takes off the ground, flies across a distance and lands at an arbitrary destination. This post will explain how to do the same in Flex, using the Flight effect, which you can download here.

Before I explain any further, take a look at a running example. I've taken the Cairngormstore and added the Flight effect to the point when the user wants to add a product to his shopping cart. Simply click on the "Add to Cart" button to see the effect playing.

The key here is that the product doesn't immediately appear in the shopping cart DataGrid control as the user presses the "Add to Cart" button. Instead, the Flight effect animates the product into the shopping cart control. Download it here.

There’s a slightly updated version of the distortion effects shipping with the amazing Tour de Flex AIR application (flex.org/tour). This update adds another feature that our User Experience team found “adding to reality”. Lighting!

Lighting works on all effects supplied. Here’s how it looks like on CubeRotate:

But see all the effects in action from this example. Download it here directly.

Here’s a new version of the distortion effects.

Thanks for all your tremendous feedback on the previously released distortion effects. Some of that feedback is now included in this updated version. This version adds various features and updates. Here’s an excerpt:

Exceed Bounds

Much of the feedback I’ve received was about making the flip effect more realistic. The hint was to let its bounds overlap while the flip effect is coming towards the user. (flipping in). The new exceedBounds property on the Flip effect does exactly that and is now turned on by default!

Pop mode UP

The Pop effect now has an additional mode. The default mode is DOWN, which pops a display object off a stack/pile, away from the user. The new UP mode pops it towards the user.

Often I see this question coming up:

"How should I best create a popup in my Cairngorm application?"

I think of creating a popup control as something only views should be concerned about. It’s like creating other view components, managing states of view components or effects. Therefore this question isn't just about creating popups, instead it's about how to invoke methods that belong to the view. (BTW: I often hear from our User Experience team that they try to prevent popups where possible)

Often I see the question coming up on whether to use MXML Script blocks, Code Behind or Helper classes.

I think the question behind the question we're addressing here is not whether to use Code Behind, MXML Script blocks or View Helpers, but is actually where is it best to place functionality in a Flex application.

But first of all, let’s have a quick rundown on what Code Behind, View Helper and MXML Script blocks actually are:

For everyone who couldn’t attend my MAX presentation in Las Vegas, here is the presentation as PDF. Furthermore, I’ve released the complete source code for every effect shown.

And here is the Flex 2.0.1 version.

Behind the scenes, these effects are using the DistortImage utility from the open source 3D Engine Sandy. Make sure you check out Sandy if you haven’t yet! The effects included are called Flip, CubeRotate, Push, Pop, Door and Gate. But instead of talking about them, just see them in action for yourself:

Distortion Effects

This sample application lets you play with all effects available. You can also see different configurations, i.e. try enabling the blur checkbox.

In my last post about the Cairngorm Dashboard example I’ve added a little functionality that allowed a view to react to a state change in the model in order to do something view related like invoking a popup or an effect.

I’ve been using the binding approach and that made it very easy and flexible to do. But as I said in my last post, this can have one slight drawback you have to consider. In this post I’ll showcase the drawback and provide a solution to it via an extended version of Paul’s Observe tag. Furthermore, this extended version of Observe makes it even easier to perform this kind of listening to the model.

In the last post about this topic, I’ve added some functionality and another use case to our stock quote application and showcased how a Cairngorm application could scale with focusing on creating model objects. In this post I’ll perform some further refactorings to our model objects.

Furthermore, our customer wants us to show a pop-up as soon as a successful stock purchase is being made. I’ll cover how a state change in your model can transparently cause view related code (like creating a pop-up) to be executed.