blog.log2e.com

Coming from a Flex/Cairngorm background, I’ve always missed a utility that takes care of the asynchronous loading of resources during application startup. Being too lazy to write one myself, I usually chain together several Cairngorm commands for loading configuration settings, stylesheets, language resources and initial data from a database. Each command is only executed if the predecessor task has been finished successfully. The user interface isn’t initialized until the whole chain is completed, otherwise an error message is generated and the application won’t start. It’s not elegant but it works.

When I started to learn PureMVC (and I’m still learning), I was happy to discover that the AS3 version is accompanied by a Startup Manager. This utility isn’t part of the core PureMVC framework and has to be downloaded and installed separately, but it nicely integrates with the “PureMVC way of things”.

There’s a very well-documented sample project (Startup as Ordered) from the author of the utility, Philip Sexton. After exploring the source code of this project, I thought I give it a try and set up my own little startup sequence. Philip’s sample just simulates the asynchronous loading with the help of another utility he wrote (Asynchronous Stub), so I decided to take a more real-world scenario where an external stylesheet and an XML file are loaded before the user interface is created. Once you have understood the basic setup, it’s no big deal to extend the startup sequence by, for example, making asynchronous calls to remote services.

Preparing the Project Space

Loading a stylesheet and some initial data is a common task in both Flash and Flex projects. So my approach in this tutorial is to set up a pure AS3 project that can easily be adjusted to work in both worlds. This also means that you can use whatever IDE you prefer for ActionScript coding. I’m using FlashDevelop along with the Flex 3 SDK but the project space would look very similar in FlexBuilder.

If you haven’t already done so, download the PureMVC framework and the Startup Manager. Make sure that both libraries are available to your project. Either copy the SWC files in your project space or add their locations to the classpath. On the top level, your project should contain the three folders bin, lib and src. For my purposes, I placed copies of the SWC files in the lib folder so that I can provide a working FlashDevelop project for download that includes all resources.

Choose a package name (I’m going to use com.log2e.puremvcdemo) and create the usual model, view, controller folders. Also, in addtion to your document class (Main.as) create an empty file with the name ApplicationFacade.as in the puremvcdemo folder. You project panel should look similar to this now:

The Resource Files: styles.css and data.xml

Inside the bin folder create two text files with the names styles.css and data.xml. These are the resources that we will be loading during startup. The stylesheet is pretty simple:

The XML file contains some sample content:

Important note: Make sure that the HTML-coded content inside the CDATA block is only composed of HTML tags that can be interpreted by HTML-enabled textfields in Flash/Flex.

In the next part of this tutorial we will be taking a closer look at the inner working of the Startup Manager.

Tags: ActionScript, Cairngorm, Flash, Flex, PureMVC

This entry was posted on Friday, May 16th, 2008 at 4:04 pm and is filed under ActionScript, Flash, FlashDevelop, Flex, PureMVC. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.