Cairngorm For Beginners (part 1)
When I first started using Flex I was given an existing project to work on which was already using Cairngorm. Having started up a brand new project today which will also use Cairngorm (the first one from scratch for me), I thought this would be an opportune moment to help anyone who may be trying to get to grips with Cairngorm for the very first time. The changes from version 2.0 to 2.2 are new to me and I will try and write about them as I discover them.
There is a lot of documentation already out there for Cairngorm but many of the basic examples on the web (and especially on labs.adobe.com) are now slightly out of date, and use deprecated methods. I expect it can be a little frustrating for someone coming in to Cairngorm for the first time, especially if you have not used anything similar before, so this should be a good next step for you if you have already read the docs, understand the basic concepts and want an aid to help speed up your understanding of the example(s).
I’m by no means a Cairngorm expert, and gladly welcome feedback in order to improve these posts. This first post will deal with getting a sample application to compile.
The first thing to do is download the Cairngorm binary and a Cairngorm example application. I’m currently using FlexBuilder3 beta (Moxie), and so I decided to go with the latest version of Cairngorm which is 2.2. Due to issues with a recent FlexBuilder hotfix I’ve downloaded a beta version called 2.2.1_beta. The best thing to do is look at the Cairngorm wiki on Adobe.labs to ensure you get the correct version for you:
http://labs.adobe.com/wiki/index.php/Cairngorm
The binary, source & documentation are all available for download. You only need the binary file in order to get the basic example working, but in this post I will be using the source … and I suggest you grab the docs too.
The example I’ve chosen to look at is the CairngormLogin sample application from Alex Uhlmann’s blog. You can find it here:
http://weblogs.macromedia.com/auhlmann…
Now we have all the files we need, let’s get started. First I will get the sample application compiling and try to give a decent overview of how it all works together, then hopefully I will have time in future posts to update it to use Cairngorm 2.2
Basic Setup
Unzip the CairngormLogin.zip and drag the “com” folder and the “CairngormLogin” mxml file to your Desktop for now.
Open up FlexBuilder and create a new Flex Project. Call it “CairngormLogin”. Select and copy the two files on the Desktop, go back in to FlexBuilder, right-click on the CairngormLogin project folder and choose to paste these files in to the project. Flexbuilder will ask you if you want to overwrite the existing file - say yes.
You now have a new Flex project with three folders (bin, com & html-template) and one mxml file at the top-level called CairngormLogin.mxml
If you try to run the project now you’ll get a whole bunch of errors. This is because you need to associate the project with the Cairngorm swc (I’ll explain how in a moment).
First, unzip the Cairngorm binary zip (which you downloaded earlier). You should find that it contains a folder called “bin”, and inside that is the swc itself. Drag the folder to your Desktop.
All you really need, in order to get this example to work is the swc, but I like to include the source files in with the project too, and as with Flex, the source for Cairngorm is made available to you, so this is what I do:
I create a new folder which I call “external” in my project, in to which I paste the Cairngorm source. Then, inside of that folder I paste the bin folder which contains the swc. So my project tree looks like this:
As you can see, I renamed the source folder to include the current version details (Cairngorm_2.2.1_beta). You may notice that I also have another folder in the bin directory called “generated” - you can ignore this for the moment.
We need to associate the project and the Cairngorm swc (update: check out this post for an easier way to do this in FlexBuilder3). To do this, right-click on the Project folder and choose “properties” from the pop-up menu (alternatively, ensure that the CairngormLogin project is selected, and choose “project -> properties” from the main menu). Now click on “Flex Build Path” and choose the “Library Path” tab. Click the “Add SWC” button and browse to the location of the Cairngorm swc (where-ever you chose to put it - my location is Flex Builder Moxie\CairngormLogin\external\Cairngorm_2.2.1_beta\bin )
If FlexBuilder is set to build automatically then you should see any errors (which may have been displaying in the FlexBuilder problems panel) disappear. The project is now ready to compile, so hit that run button and marvel at the simple login.
In the next post I’ll give an overview of the sample application.
31 Comments so far
Leave a reply
Thanks for this most useful series.
I’ve been playing/struggling with Cairngorm for a while. There are a lot of moving parts to the completed examples. Having someone start from scratch is great.
I hope you’ll continue the series as you learn more.
[...] nwebb.co.uk » Blog Archive » Cairngorm For Beginners (part 1) [...]
great, this will come in handy.
Getting started with Cairngorm is the scary part but I know I’ll need it badly as my projects start to grow larger…
Neil, do you have any examples of how to do unit testing in Cairngorm? It seems like it is hard to isolate parts of it to unit test. The logic is all in the commands, but the commands all require the presence of the eventdispatcher and the FrontController, and some of them will require the presence of the ServiceLocator and delegates. Have you done TDD with Cairngorm?
Best regards,
OK
DAH
Hi David, sorry for the delay in replying - I’ve not forgotten about you - I am trying to confirm a possible solution. I’ve not done any TDD with Cairngorm as yet, so I’m asking around.
Thanks for your reply! I’ll be very interested to hear what you find; I have been experimenting a bit and haven’t found anything very elegant yet. Thanks Neil!
Thanks for this guide! Very appreciated.
For anyone struggling trying to find the CairngormLogin.zip, you have to click on the weblogs.macromedia… link, click the first example, then after the flex interface loads in the browser right click, and view source…then click on the bottom left of the screen where there is an option to download the full source in ZIP format… it took me some time to find it :P
[...] Neil Webb, a UK-based Flash and Flex developer, has authored a three-part series entitled “Cairngorm for Beginners.” If you’re new to Cairngorm, and especially development frameworks in general, check out [...]
Hi Neil any updates on TDD with Cairngorm? I’ve searched around and haven’t been able to find much. Especially the Command classes.
[...] development time. To begin learning, I have been trying to collect as many resources as possible. This is one site that I was encountering repeatedly, and have tried reading through it. It is a good [...]
Hi Shaf, not to my knowledge but I’ll post on the blog if I find anything
When I set up the above sample project, I get the following errors. I’m using the 2.2.1 version of the .swc file … is there an easy fix. It compiles, but I don’t like warnings.
3606: ‘onResult’ has been deprecated. Please use ‘mx.rpc.IResponder.result.
3606: ‘onFault’ has been deprecated. Please use ‘mx.rpc.IResponder.fault’.
Hi Kev, take a look at part 3 of the series. You can find it here: http://nwebb.co.uk/blog/?p=63
Cheers,
Neil
Hey Neil,
I guess I should of kept going… ha ha ha ha. I had actually started to do what you mentioned but then started thinking about all the places it might change and decided against.
Makes me think that there is a need for another “Updater” pattern which has a class with properties that reference all the import statements…LOL.
Thanks for pointing me to article #3.
Cheers To You,
Kev
Hi All,
I’ve just downloaded and installed Flex Builder 3, thought I’d hold out learning Flex until Version 3.0 came out, but I am very new to Flex, 2 day’s new as it happens.
I’ve followed your tutorial to the letter, and I’ve attached the .swc file to the resources section of my new project, but FB3 assures me that there are errors (see below). Any ideas?
The only exception is my project is called Cairngorm1, but should that really make a difference?
Thanks,
Matt
Severity and Description Path Resource Location Creation Time Id
1046: Type was not found or was not a compile-time constant: LoginControl. Cairngorm1/src CairngormLogin.mxml line 39 1204147365809 93
1046: Type was not found or was not a compile-time constant: LoginPanel. Cairngorm1/src CairngormLogin.mxml line 48 1204147365809 94
1046: Type was not found or was not a compile-time constant: ModelLocator. Cairngorm1/src CairngormLogin.mxml line 17 1204147365810 95
1046: Type was not found or was not a compile-time constant: Services. Cairngorm1/src CairngormLogin.mxml line 36 1204147365809 92
1120: Access of undefined property ModelLocator. Cairngorm1/src CairngormLogin.mxml line 17 1204147365810 96
1120: Access of undefined property ModelLocator. Cairngorm1/src CairngormLogin.mxml line 21 1204147365810 97
Fixed it! Flex Builder 3 uses a new “src” folder where it appears to prefer all source files be kept. I originally pasted all the sample files into the root.
With FB3, copy the “com” and “CairngormLogin.mxml” file into the “/src” folder.
Now I’ve only got deprecated methods to worry about!
Matt
[...] your project is if you use the architectural framework Cairngorm (as described at the bottom of this post). In FlexBuilder 3 you can simply paste your .swc in to the libs folder, so there is no need to [...]
[...] Cairngorm for starters : http://nwebb.co.uk/blog/?p=58 [...]
Thank you so much for your post. It’s clearly written. Appreciate it :)
Thanks Neil,
I’ve been looking for an introduction to Cairngorm for some time. This is a very useful article.
Sarah
/**
Hi Sarah, thanks and I’m pleased to hear that :) I hope you find parts 2 & 3 equally useful.
I have a better way of teaching Cairngorm in my sessions, using an analogy (unfortunately it becomes too wordy for a text-tutorial). If you happen to be looking for an excuse to attend a Flex event in either the UK or USA this year, check out my session:
http://www.scotch-on-the-rocks.co.uk/
http://www.360conferences.com/360flex/
Cheers,
Neil
**/
Shaf/David,
I’ve just added a post about TDD and Cairngorm with respect to singletons. You may be interested:
http://nwebb.co.uk/blog/?p=168
Much Appreciated!
[...] taken Alex Uhlmann’s ‘Cairngorm Login‘ example and used it as the basis for my ‘Cairngorm For Beginners’ series of [...]
[...] Webb :: Cairngorm For Beginners :: Covers version 2.2 :: Part 1 :: Part 2 :: Part [...]
[...] Webb :: Cairngorm For Beginners :: Covers version 2.2 :: Part 1 :: Part 2 :: Part [...]
[...] Webb :: Cairngorm For Beginners :: Covers version 2.2 :: Part 1 :: Part 2 :: Part [...]
[...] Webb :: Cairngorm For Beginners :: Covers version 2.2 :: Part 1 :: Part 2 :: Part [...]
[...] Webb :: Cairngorm For Beginners :: Part 1 :: Part 2 :: Part [...]
[...] http://nwebb.co.uk/blog/?p=58 [...]
Thanks a lot for such an easy article …
installing caringorm with Flex is straightforward but it is not supported and most websites are lacking the update
If you are looking for a thorough and well written book on the subject, specifically for flex developers, I highly recommend Professional Cairngorm by Jeremy Wischusen:
http://sdflex.org/blog/air/cairngorm-101