Learning Flex Part 4: Cairngorm Events != Flex Events

One thing I struggled with while learning about Cairngorm is the Cairngorm Event model. In short, Cairngorm Events are quite different from standard Flex Events in the way they are handled.

This may be obvious to seasoned users of Cairngorm, but this took me a while to wrap my head around. Cairngorm Events map to Commands via a Cairngorm Controller. They are (as I understand them) meant to update the ModelLocator and get data from the server (via Delegates and Responders). They don't "bubble" up the Flex container hierarchy, and they don't get announced to the rest of the Flex application.

My first instinct was to try and decouple my Views from Cairngorm by having them only announce Flex events. These events would bubble up the container hierarchy and be handled at the top level of the application. From there, corresponding Cairngorm Events would be dispatched. This way, I could still have non-Cairngrom event listeners respond to the bubbling events, and my Views would be decoupled from the Cairngorm framework, which sounded like a good idea.

However, with more experimentation and thought, I've realized this approach adds complexity and doesn't offer much in the way of benefits. It requires a separate layer of event mappings so that the Flex events can be translated into Cairngorm events. And in most cases, your Views are tied to Cairngorm anyway. For example, a Shopping Cart panel is directly tied to the ModelLocator to keep track of what is in the cart. You can't easily reuse this Cart component in a non-Cairngorm app without changing it. The same thing probably applies to most of the Views. So in retrospect, in most cases I believe it is fine for your Views to just go ahead and dispatch Cairngorm events and avoid all the overhead of trying to make them framework independent.

Now, I can see that for certain kinds of components, this would not apply. If you truly have a reusable component, say a custom Select Box for picking States or something, this would benefit from being totally decoupled from Cairngorm. You can have it dispatch a custom Flex event that the parent container would then handle by dispatching a Cairngorm Event. So it appears that one must consider the purpose of the View component in question and decide whether it is application-specific or application-independent. The answer would seem to dictate whether it is appropriate to announce Cairngrom Events vs. Flex Events.

I'm interested to hear from anyone more deeply familiar with Flex and Cairngorm. Is my thinking on the right track on this? Please fire away in the comments and let me know your thoughts. Thanks!

Comments Comments (6) | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 8785 Views

Learning Flex Part 3: Taming Cairngorm

Since I'm learning Flex in preparation for what will probably be a large project, I thought it would be smart to also tackle learning Cairngorm. In case you don't know, Cairngorm is a framework (they call it a Microarchitecture though I don't really see the distinction other than it sounds fancier) for creating RIAs with Flex.

I won't lie to you, Cairngorm is a monster. It seems much more complicated than any of the ColdFusion frameworks, even Mach-II which is arguably the most difficult for CF'ers to get their heads around. Maybe it's just been so long since I was on the outside trying to look in at a completely new language and framework, but at first glance Cairngorm looks ridiculously complicated.

Part of the challenge is simply trying to figure out where to start, get at good documentation, and get some examples up and running. I don't want to single out the Cairngorm people since this problem affects every framework I've ever seen, but they sure don't make it easy for a brand new person to come in and try to get a handle on how Cairngorm works or even where to start. Adobe.com has some detailed articles on Cairngorm, but even this just skip right over any kind of real introduction and leap right into detailed discussions of patterns and keeping state on the client, etc. All I wanted was two things: how do I actually SET THIS UP in FlexBuilder? And where can I see a non-trivial example of using Cairngorm with ColdFusion?

Luckily, with a lot of searching and some trial and error, I was able to answer both of these questions. I'll point out what I found and do some explaining here so that hopefully I can save future Cairngorm-seekers my pain!

The first really useful tutorials I found are at davidtucker.com. This guy understands how to explain something! Having the video and audio to go along with the tutorials is incredibly helpful. While he does sometimes fall into the "just trust me, do it like this because it is better" trap, overall these helped me understand how, and more importantly WHY, Cairngorm does things the way it does.

The second thing that helped me immensely was finding and running the ColdFusion-based port of the CairngormStore. The CairngormStore is a fairly complex store application based on the original Flex Store application (which in turn is based on the Store demo applications that are available for many frameworks and languages).

Even after I found this store though, getting it to run was actually quite a challenge for me. I downloaded the code and I then thought "OK, now what?" Here's how you get it working:

  1. Download the CF CairngormStore
  2. Create a new Flex Project in FlexBuilder (I'm using FlexBuilder 3). Make sure you choose a ColdFusion Flash Remoting project and ensure that the CF server settings work using the Test Configuration button. Also you can make life easier later by defining the main MXML file for this project as "CairngormStoreMultipleBackend.mxml"
  3. Also make sure you follow David Tucker's tutorial and add the Cairngorm .swc to your project's build path.
  4. Unzip everything from the zip file into temp folder.
  5. Copy everything under "/{your temp folder}/CairngormStoreMultipleBackend" into the "src" folder under your Flex project.
  6. Copy everything under "/{your temp folder}/CairngormStoreMultipleBackend/cfmx" into your ColdFusion web root (I'm using CF8).
  7. Go into the Flex project and find "/src/com/adobe/cairngorm/samples/store/business/Services.mxml" and comment out or remove the section that uses AMF0 and AMFPHP 1.2. Even though I'm not doing anything with PHP I could never get this to compile so I must be missing some AMFPHP bits.
  8. At this point everything should be set up. If everything is configured correctly, you should be able to cross your fingers and right click on your CairngormStoreMultipleBackend.mxml file and choose "Run as Flex Application". This will launch a new browser window and you'll see the CairngormStore.

Being able to run this example and move around through the code was very helpful to start getting a feel for how this beast of a framework actually works. However, be ready to feel overwhelmed. It is a LOT of code. It is a LOT of layers. Only as I experiment with it more and keep refactoring my simple Bookstore application over to Cairngorm do the pieces and layers start to make sense. I'll have some more follow ups on my experience with Cairngorm and Flex in general, but for now I think this is more than enough for any Flex neophytes to digest.

Quick Edit: I should also add that Brian Rinaldi's overview of Cairngorm in the last issue of Fusion Authority Quarterly Update was also quite helpful in explaining several of the layers in Cairngorm and walking though a simple example!

Comments Comments (7) | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 9160 Views

Adobe Flex Part 1: Initial Impressions of Learning Flex

I've spent the last several weeks really immersing myself in learning Flex in preparation for some upcoming projects. I'll be blogging about this learning process as it goes on, but to start with I wanted to give some initial impressions.

First off, working with Flex is a joy compared to working with AJAX. Sorry AJAX lovers, there is just no comparison. Even with Aptana and jQuery/EXT/insert JS framework here, building any kind of complex AJAX app is an utter pain in the ass. My favorite is when you make a change and the whole thing just stops working, with no indication of why. If you're lucky, Aptana or Firebug will flag a missing semicolon. If not, then start wading through line by line adding debug statements, and kiss your day goodbye.

Not so with FlexBuilder. This IDE just rocks. I've dabbled in Java for years, so I've seen what a good Java IDE like Eclipse can do. FlexBuilder works the same way. The instant code insight is such a refreshing change, the automatic imports, the flagged errors, the debugging, and the refactoring tools all work together to make Flex development feel quite effortless. Seeing FlexBuilder makes the old anger at Adobe's lack of a great IDE for ColdFusion come rising up again. I wish they'd put that kind of effort into CFEclipse. I love CFEclipse and salute Mark Drew for making it what it is, but it could be so much more if Adobe would really put effort into it. In my opinion they just have no excuse for this.

But I digress, this isn't supposed to be a "Pine for Killer CF IDE" blog entry. The other thing I love about Flex is that a "design-challenged" person like me (to put it mildly) can make things that actually look halfway decent with very little effort, just using the default look and feel. And if you do put some time into styling things, you can make some great looking UI's.

I do have to say that learning Flex, ActionScript, and Cairngorm all at once is a pretty duanting set of things to take on. The Flex API is quite huge, ActionScript is an entire language unto itself, and Cairngorm...well don't get me started on Cairngorm since it is truly a beast when you first look at it. I'll be blogging about Cairngorm and my experiences in absorbing it as well.

My approach so far has been to take my trusty bookstore application (the one that has gone through Fusebox 3, FuseQ, Fusebox 4, Fusebox 5, Model-Glue, Mach-II, Reactor, and ColdSpring versions) and port this to Flex. I've deliberately NOT done this port in a "best practices way". Instead, I've created a giant mess of a main MXML file, with virtually all the event handlers, remote object calls, and UI elements stuffed into one big file. I did this on purpose. First, I just wanted to get it working in a "brute force" kind of way to see how things are done in Flex. Now that this is done, I can clearly see where the problems are and what a maintenance nightmare it would be. To put it another way, I needed to see where some of the pain points are when doing Flex development.

I'm now refactoring the whole thing and migrating it to Cairngorm. This way, as I break things up and move things into line with that framework, I can more easily see the benefits of why it does things the way it does. As I said, I'll be blogging about this process, and I plan to add my initial "Chaos Framework" version as well as the Cairngorm version of the bookstore to the zip file in the sidebar when it is done.

I'll also put together a list of links and resources that I am finding helpful in my learning. I'm interested to hear from anyone who is learning Flex, or who has already learned it and has any advice, tips or pointers. I'm also interested in hearing from anyone who hasn't made the jump to Flex or who just doesn't want to learn it. I know that Flex isn't meant to replace traditional web pages, but rather is meant to build full blown applications where issues like search engine friendliness are less of an issue. (Though if someone has pointers to techniques for making Flex apps more search engine accessible, I'd love to hear them). Hopefully these blog entries and any reader comments will help others who are tackling Flex make the leap as painlessly as possible!

Comments Comments (9) | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 6730 Views

Joe Rinehart on Architectural Relationships Between Model-Glue and Cairngorm

Joe has posted a nice diagram that shows how the pieces of a Model-Glue application relate to the pieces of a Cairngorm application. As someone trying to learn Cairngorm, this is pretty useful. To be honest, from a noob perspective, Cairngrom seems to have a lot of layers and a lot of code, and I was unsure of what the actual point to these layers are. This diagram helped clear up some of the confusion.

Comments Comments (2) | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 6234 Views