Initially, I found Cairngorm 3 a little hard to wrap my brain around. It’s not a framework per se, but a set of optional libraries, guidelines and suggestions for other frameworks to use. It almost seems possible to accidentally code a “Cairngorm 3” program, at least by Adobe’s definition. All that said, many of the optional Cairngorm 3 libraries provided by Adobe require the Parsley framework, so Adobe seems to be strongly nudging in that direction. I’m going to take the hint and build my first Cairngorm 3 application with Parsley, using those optional libraries when I can.

My goal will be to build a complete (if profoundly stupid) Cairngorm 3 application from design to completion, following all Cairngorm 3 guidelines, and including the following features:

  • Deep-linking. This application will have two pages, and each can be navigated to through a URL.
  • Localizable string resources. Because it’s the right thing to do.
  • Use of SkinnableComponent and SparkSkin for visual components.
  • Unit testing.

So what will it do? Well, a recruiter recently tried to get me to move to Austin to help build “video gaming” devices. I won’t lie – my soul is definitely for sale, but the asking price is higher than what they were offering. Still, why not build a video gaming website just for fun? Maybe not Texas Hold ‘Em, but more something like…

Creating skins in Flex 4 for existing components  such as the scrollbar (see last post) turns out to be fairly easy. Creating components that can be skinned is pretty easy as well. Here’s my take on it (View Source enabled):

Skinnable Component Example

When you drag a picture into the canvas area, a Stamp object is created, which uses a StampSkin to handle display and user interface. The Stamp class lays down the requirements it expects from the skin using the metatag [SkinPart(“true”)], and the StampSkin component handles the display and user input. It’s a nice separation between data and UI.

This was my first experiment with Flex 4, which I made in late October. It’s a little spooky, be warned. View Source enabled:
Skinned scrollbar in Flex 4
Here’s what I learned.
  1. Skinning in Spark is much, much easier than skinning in Halo. The SkinnableComponent/SparkSkin architecture is flexible and easy to grasp. Well done, Adobe!
  2. Flex is still kinda buggy. This cost me some time today…
  3. Scrolling and layout is a little tricky. Why does this Scroller contain a Group within a Group? The reason is that I want the contents of the Scroller to contain a black rectangle that’s as wide as the scrollable area, not just the visible area. The interior group is sized to fit its contents (so it extends from the leftmost textbox to the rightmost picture), causing the parent group to expand to fit its content, which then causes the black rectangle contained in the parent group to match its width.

Howdy, World!

January 18, 2011

This blog is (primary) devoted to my experiences programming in Flex 4, primarily using Cairngorm 3 and Parsley. I hope this will be useful to other programmers attempting to learn this set of development tools and libraries.