Welcome Pascal Romanens from Kalyss and Brian Lay from HP!

Brian will probably focus mostly on the navigation library and Pascal already added features and bugfixes to the Persistence library.

If you’re interested in contributing to Cairngorm, please contact Francois Le Droff (ledroff att adobe dott com)

Additionally, don’t forget the MAX presentations of Francois Le Droff and Yaniv De Ridder; who will touch on build automation and the impact of multi-screen on client side architecture. Afterwards, I hope we can add some outputs of it to Cairngorm.

If you’re at MAX, make sure you checkout the session from Francois Le Droff and Yaniv De Ridder, who will present technical insights from a large-scale RIA project built inside Adobe, which uses Cairngorm 3 guidelines, tools and libraries.

Additionally, Xavier Agnetti and Xavi Beumala will discuss FlexPMD, which is a crucial tool we use in our projects. More tools we’ve found important are linked through our tools section.

• Guidelines that explain our motivations and how to implement them.
• Tools that help us adhere to our guidelines and streamline our development process.
• Libraries that extend existing architectural frameworks and solve recurring problems.

This collected knowledge shows how large-scale enterprise application development can be achieved with the Flash Platform today.
Our goal is to promote a kind of application development that is clear, consistent, testable and scalable. These aspirations are independent of whatever application framework you chose to use. The specific MVC framework of Cairngorm 2 remains as is and is not deprecated. It has been in use now for almost a decade and its simple, prescriptive nature allowed developers with a background in J2EE core patterns to apply it successfully.
However, the increasing scale of some Flex applications and progression in the frameworks space in other languages demands a different focus, hence the success of recent Inversion-of-Control frameworks such as Parsley, Spring ActionScript, Swiz, Flicc and more. Cairngorm embraces this change, but does not want to compete by transforming into another IoC framework. Instead, we encourage the further development, standardisation and consolidation of the current situation. We want to explain how the design patterns advocated by Cairngorm can be applied with these new frameworks, while providing a more complete picture of what we find crucial in delivering successful, large-scale Flex applications.
Our goal is to be responsive and to release early and often. Therefore, aside from releasing content that has proven to work for us for many years, we will also release libraries that are in experimental stages. Our goal is to get quicker feedback from you and to provide more value to the Flash platform community at large.
Cairngorm 3 Beta starts here.

• 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

The implementation of this effect is surly too exaggerated for any real life application and I strongly recommend consulting your User Experience experts before using an effect such as this. However, if applied responsibly, animating visual state changes of your applications instead of just setting and using movement to manage the user’s attention can help with cognition. Consult people who understand user experience design before using effects like this.
What is it?
The flight effect moves a display object either along a straight line or a quadratic bezier curve. While playing the display object is being scaled up and down to mimic a flight object taking off and landing (with using a good bit of imagination)
I’ll explain the usage of this effect with a simpler example. This flight effect is a standard Flex effect, so you can use it in ActionScript, Behaviours, Transitions etc. The following example shows a login panel moving and rotating to the bottom right corner of the screen. It plays in a Canvas container and all we need to set up the effect is to apply a simple Transition tag to the view state change.

<mx:states>
<mx:State name="stateA">
<mx:SetProperty target="{ login1 }" name="x" value="519"/>
<mx:SetProperty target="{ login1 }" name="y" value="323"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition effect="{ mover }" />
</mx:transitions>
<mx:Sequence id="mover">
<mxeffects:Flight
target="{ login1 }"
duration="2000"
maximumHeight="2"
rotate="true" />
</mx:Sequence>
<sides:Login
id="login1"
change="currentState = ( currentState == 'stateA' ) ? '' : 'stateA';"/>

BTW: Behind the scences, Flight uses a MoveOnQuadCurve effect that I ported from AnimationPackage. You could also use this effect without Flight if you wish.
Flying across Flex container constraints
Since we use a Canvas container in the example above, the Panel component can be moved to arbitrary positions within that Canvas container. However, in some applications, like in the Cairngormstore sample application, we need to move across different containers. How I did this in Cairngormstore and how you can do the same in your applications will be the topic of the next section.
Flight Effect Applied
As pointed out in the end of the last section, the effect by itself isn’t enough if you want display objects to move across Flex containers. This section will show how I achieved this in the Cairngormstore sample application and how you can apply the same concept to your application. You can by the way also use a simple Move effect using the same concept.
But before I start with any implementation, let me please remind you on using this effect responsibly. As with many effects, applied in the wrong way, effects can dramatically reduce the user experience instead if increasing it. Consult a User Experience expert before you apply it to your application.
10000 feet overview
In order to let the flight object (our airplane) cross Flex container boundaries we need professional assistance. A FlightCaptain object can help us with

• starting up our airplane.
• finding our origin and destination coordinates.
• flying the airplane according to a specified route.

If this sounds all a bit strange to you, follow me with a little example.
Let’s fly one box from the black area to the red area.
With clicking the button, the user tells the FlightCaptain to get going:

var captain : FlightCaptain = new FlightCaptain();
captain.airplaneType = Login;
captain.origin = login;
captain.destination = destinationContainer;
captain.play();

We tell him the type of plane we would like him to use (a custom Panel component of type Login), and the start and destination locations.
In the above example the FlightCaptain creates a new airplane of type Login, flies it to the destination location and once landed, he removes it (he would put it back into the hanger)
But in your specific application, you might want the FlightCaptain to move not just copy the display object that we tell him is the airplane.
We can do that with removing the display object specified with the origin property when FlightCaptain is taking off…

captain.addEventListener( TweenEvent.TWEEN_START, acualTakeOffTime );

…and adding it to the display list once the captain lands.

captain.addEventListener( TweenEvent.TWEEN_START, acualTakeOffTime );

Important to note here is that we use the TweenEvent.TWEEN_START event. This event is triggered when the first tween update is performed, meaning we are sure our airplane is in the air (popup is created) and we can safely remove our old display object.
We also have access to the route our FlightCaptain is taking. His route property is a Flight effect. We can i.e. tell him to take a long way round with modifying the xBetween and yBetween properties of route.

captain.flight.yBetween = 1000;

Here’s the full code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:sides="view.sides.*"
layout="horizontal">
<mx:Script>
<![CDATA[
import mx.events.TweenEvent;
import mx.events.EffectEvent;
import mx.core.Container;
import view.sides.Login;
import com.adobe.ac.mxeffects.FlightCaptain;
private var originContainer : Container;
private var destinationContainer : Container;
private function fly() : void
{
destinationContainer = ( login.parent == blackBox ) ? redBox : blackBox;
originContainer = ( destinationContainer == blackBox ) ? redBox : blackBox;
var captain : FlightCaptain = new FlightCaptain();
captain.addEventListener( TweenEvent.TWEEN_START, acualTakeOffTime );
captain.addEventListener( TweenEvent.TWEEN_END, acualLandingTime );
captain.airplaneType = Login;
captain.origin = login;
captain.destination = destinationContainer;
captain.configureFlight();
captain.play();
}
private function acualTakeOffTime( event : TweenEvent ) : void
{
originContainer.removeChild( login );
}
private function acualLandingTime( event : TweenEvent ) : void
{
destinationContainer.addChild( login );
}
]]>
</mx:Script>
<mx:Canvas
id="blackBox"
backgroundColor="black"
width="400" height="400"
>
<sides:Login
id="login" left="8" top="8"
change="fly()" />
</mx:Canvas>
<mx:Canvas
id="redBox"
backgroundColor="red"
width="400" height="400"/>
</mx:Application>

Behind the captain’s curtain
How does the FlightCaptain do his job? This section explains how you he manages to fly across Flex containers.
Let’s first take a look into FlightCaptain’s play method.
At first we get the airplane of the specified type…

airplane = getPlaneFromHanger();

…which simply creates a popup using PopUpManager.

private function getPlaneFromHanger() : IFlexDisplayObject
{
return PopUpManager.createPopUp( DisplayObject( Application.application ), typeOfPlane );
}

Then he finds out about the actual coordinates where he is expected to start and land.

var originCoords : Point = findOriginCoords( origin );
var destinationCoords : Point = findDestinationCoords( destination );

This translates the local coordinates of our specified origin and destination display objects into a global coordinate system. We need to do this because our origin and destination display objects are potentially deeply nested somewhere between various Flex containers. Our FlightCaptain prefers to fly high up in the sky (in popup coordinate space, which understands global coordinates), therefore we need to translate.

private function findOriginCoords( origin : DisplayObject ) : Point
{
var originTopLeft : Point = new Point( 0, 0 );
originTopLeft = origin.localToGlobal( originTopLeft );
return originTopLeft;
}
private function findDestinationCoords( destination : DisplayObject ) : Point
{
var destinationTopLeft : Point = new Point( 0, 0 );
destinationTopLeft = destination.localToGlobal( destinationTopLeft );
return destinationTopLeft;
}

Have fun with it!

The above version is still Flash Player 9 and Flex, 2, 3 compatible. If you can target Flash Player 10, make sure you check out the new 3D functionality, which makes effects such as these easier to do and more efficient.
Also, Tink has released a new Flex effects library (efflex.org) that also adds distortion effects. I’d definitely recommend checking out Tink’s work or even considering participating in this new exciting open source project. Great work Tink!

Here is How You Can Use it:
Generally you define a lighting source. When your lighting source is located on the top left then the effects will turn brighter once your display object turns towards the top or left.
To do that you just have to set two properties

• -horizontalLightingLocation takes either a LEFT and RIGHT value (use DistortionConstants for setting this or FlexBuilder’s code hints).
• -verticalLightingLocation takes either TOP or BOTTOM.
• -lightingStrength is an optional property, which defaults to 7.5 if not set.

Lighting is turned off by default. To activate it you just need to set either the horizontalLightingLocation, verticalLightingLocation or both properties.

Scaling Support
Some of you have experienced issues with distortions done on display objects that are below other display objects, which are being scaled. You can scale display objects either using UIComponent’s or DisplayObject’s scaleX, scaleY properties or with modifying the DisplayObject’s transform matrix (a and d properties). This version of the distortion effects supports any scalings applied to any parent display objects in your display list.
Support of More Environments
My goal with these effects always was to support all possible environments where you can use these effects and distortions. With environments I meant i.e. using distortions or utilities in a non Flex framework environment, using only the Flash Player API. But also the use in different Flex framework containers and effect setups, i.e. States and Transitions, hideEffects, ActionScript effects, with ViewStacks, custom containers etc.
This version increases the number of environments to support to the point that I currently haven’t heard of an environment that isn’t supported. If you have one, let me know and feel free to send me an isolated example and I’ll try to help out.
This version added support for some States and Transition usages i.e. with supporting multiple siblings and improves error handling in case views cannot be initialized.
See them in action here.
Download here!
And if you’re interested in the source code of the cube example, download it here.

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

First and foremost, I’d try to let your views directly call a method that dispatches a popup.
However, most of the use cases that came up when questions like the above have been asked are slightly more complex. Users for example want to create a popup in a completely different part of the application. Or they receive an asynchronous remote service response, only want to react to the user with a popup at that point in time and work in a context where no view references are available, such as a typical Cairngorm Command.
Some users have created the code needed for creating a popup directly in the result method of a command or in a model object that’s been called by the result method of a command.
Sticking to my above rule; that only views should be concerned about popups, I think both solutions are not the optimal approach. A command should just be an encapsulated request to your model and a model itself should also not be concerned about any UI behavior. I’d argue we need to tell the model about the state change that has just occurred in your application, but in a model context. For example you might set a loggedIn property on a Login model object to true in order to signal that the login process was successful after a positive remote service response.
So, how can our views react to that state change in our model?
In a typical Cairngorm application, we may bind UI controls to properties of our model objects. But for creating a Popup control, there’s no UI component where we can bind to. How do we best let a view invoke a view related method after a certain state change in our model occurred?
Let’s take a step by step approach using a very simple Cairngorm application, that retrieves a list of employees and displays them in a popup after successful retrieval.
Please do ask your UX team if something like this is really a good idea in a real world application. For the sake of this example we don’t care about the user experience here!
This step by step tutorial will walk you through the relevant parts. You can see and download (via right click > View Source) the complete application here. Let’s go:
Dispatch a Cairngorm Event.
Let the view dispatch a user gesture via a Cairngorm Event in order to trigger the remote service:
On a mx:Button’s click event, the getEmployees method dispatches the Cairngorm event:
Excerpt from GetEmployeesCommand.as:

private function getEmployees() : void
{
var event : GetEmployeesEvent = new GetEmployeesEvent();
event.employees = model.employees;
CairngormEventDispatcher.getInstance().dispatchEvent( event );
}

Call and handle the remote service and modify your model.
The handling GetEmployeesCommand’s execute method calls a server side method. Its result method modifies the model. Here, it retrieves the model object Employeee via the ModelLocator.
Excerpt from GetEmployeesCommand.as:

private var employees : Employees;
public function execute( event : CairngormEvent ) : void
{
employees = GetEmployeesEvent( event ).employees;
employees.hasEmployees = false;
var delegate : EmployeeDelegate = new EmployeeDelegate( this );
delegate.getEmployees();
}
public function result( event : Object ) : void
{
employees.employees = IList( event.result );
employees.hasEmployees = true;
}

Employees.as:

package com.adobe.cairngorm.samples.popup.model
{
import mx.collections.IList;
public class Employees
{
[Bindable]
public var employees : IList;
[Bindable]
public var hasEmployees : Boolean;
}
}

Note that we modify the hasEmployees property of the Empoyees model object.
Let the view react react for you!
And here comes the crux: You can use the mx:Binding tag or the Observe/ObserveValue tag to invoke a view method, once the hasEmployees Boolean value changes.
I’d recommend using the ObserveValue tag to listen to a specific value of a state change of your model. More precisely, you can bind the source property of it to the bindable hasEmployees property of your model object Employees.

<ac:ObserveValue
source="{ model.employees.hasEmployees }"
handler="{ createEmployeeList }"
value="{ true }"/>

You could have also used the Observe tag to listen all updates of the hasEmployees property. For more information, check this out.
The ObserveValue tag above will invoke the createEmployeeList method defined in a Script block of the same MXML file. This method will invoke the popup.

private function createEmployeeList() : void
{
var application : DisplayObject = DisplayObject( Application.application );
var popup : IFlexDisplayObject = PopUpManager.createPopUp( application, EmployeeList, true );
PopUpManager.centerPopUp( popup );
var concretePopup : EmployeeList = EmployeeList( popup );
concretePopup.employees = model.employees;
}

That’s it! Through a state change in your model, you view has reacted. Furthermore, you can now let many other objects observing this particular state of your model and they can all act independently.
Cheers!