Sam's occasional tech thinkings

Flex Cairngorm code example

Over the Christmas break I finally managed to claw an afternoon of free time together to knock up a little example application. Why bother? Well just about every client I go to meet and potentially work with wants to see some example code first… now since writing code is my job you wouldn’t think that was a very difficult task, but its not quite that simple. Often the projects I work on are very large, worked on by multiple programmers, and dependent on some server side code to run. Even when the projects are small enough to send to someone as an example I’m not even sure I have the legal right to-do so!

With the above in mind I though it was about time I created a little application that I could send around to plug my abilities etc, and you can see it here

A little about how it works

The app is built using Flex 3.0 and the Cairngorm framework. Data is pulled in via XML, and displayed using a simple image viewing component I created.

Why use Flex

Flex enables me to build the same breed of applications we have all been building with Flash for sometime… only with Flex we can do faster, more reliably, with a fuller api and using a decent IDE… whats not to like?

Why Cairngorm

Cairngorm is all about building complex RIA’s in a consistent MVC manner… adobe puts it like this “The Cairngorm microarchitecture is intended as a framework for Enterprise RIA developers”. As you may have noticed the little image viewer I’m using as my example code is no enterprise application, in fact it only has a couple of user gestures, I’m just trying to demonstrate my familiarity with the framework.

I think Cairngorm is very important to the Flex developer community, it offers a well proven methodology for building applications, which separates concerns, promotes testability and leads to very predictable, scalable solutions.

About the view

I wanted to build a little set of classes that would allow me to display items (which could be anything from products to images etc.) in a number of ways, and was simple to extend. The snappyviewer, which is the name of the component displaying the images is an implementation of those classes.

The main classes the view is built around are two interfaces IItemView and IItemDisplayer.

Both interfaces contain a function named display. The display function in IItemVIew is intended to delegate the displaying of items to the IItemDisplayer via composition. The display function in IItemDisplayer is implemented for various display types, ie, displaying items in a grid, or in a row (GridItemDisplayer & SlideItemDisplayer).

To change which type of view the IItemView uses I can set the IItemDisplayer though the dispayer setter function in IItemVIew and hey presto, the view is updated.

You can check out the code by right clicking on the application and selecting Source View.

Any feedback welcome

ps.. you can see the application here