Saving Flex’s Application State to a Database

Bill Sanders has a great post on the Memento design pattern over at his blog. After reading it, I thought I’d chime in and post a technique that takes the memento one step further. This approach allows you to serialize a Memento object into a ByteArray and save it into a database. Then, retrieving the Memento object from the server, dynamically instantiated it, and restoring its previous state.

One major draw back to the Memento, as you’ll see, is that restoring an object’s state can be a very expensive operation. Especially in a Flex environment where restoring a Memento could trigger a large display list invalidation. For that reason, the Memento is not always the ideal pattern for implementing undo/redo functionality. The alternative pattern for implementing this functionality is the Command pattern. With the Command pattern, each command is only concerned about a particular action to get to the current state of the application. With this, you can have an undo() method in each of your commands that undoes whatever action was performed in your execute() method. Continue reading »

Loading Modules/Runtime CSS into an AIR App

For those planning to load a Flex module into your AIR application from a remote server: take a look at this post before beating your head against the wall with this ambiguous error message Error: Unable to load style(SWF is not a loadable module).

Basically, loaded SWF’s are not allowed to be in the same security domain as your AIR app. Since modules and external styles loaded using StyleManager.loadStyleDeclaration() try to load themselves into the current security domain, an error will be thrown. The only workaround it appears is to bundle those modules with your application when it’s downloaded. Any new modules you want to add to your application at a later time can be downloaded using AIR’s update API via Updater.update().

CollectionEventKind.RESET, WTF Does That Mean?

When handling Flex’s collection change events, most of the change types are pretty self-explanatory. For example, CollectionEventKind.ADD is when an item is added to the collection, or CollectionEventKind.UPDATE is when an item’s property inside the collection changes. However, there’s this ambiguous change type called RESET. The documentation does a wonderful job of describing when this type of collection event is fired: Indicates that the collection has changed so drastically that a reset is required. (ASDoc Link)

Digging through ListCollectionView provides some better insight of when RESET is dispatched. Anytime a collection is passed to ListCollectionView.list, and both the old list and the new list has items in it, it will fire a reset collection change event. Here’s the code Adobe uses for setting a list on ListCollectionView:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

public function set list(value:IList):void
    {
        if (_list != value)
        {
            var oldHasItems:Boolean;
            var newHasItems:Boolean;
            if (_list)
            {
                _list.removeEventListener(CollectionEvent.COLLECTION_CHANGE,
                                          listChangeHandler);
                oldHasItems = _list.length > 0;
            }
 
            _list = value;
 
            if (_list)
            {
                // weak listeners to collections and dataproviders
                _list.addEventListener(CollectionEvent.COLLECTION_CHANGE,
                                       listChangeHandler, false, 0, true);
                newHasItems = _list.length > 0;
            }
 
            if (oldHasItems || newHasItems)
                reset();
            dispatchEvent(new Event("listChanged"));
        }
    }

Lastly, ListCollectionView is a pretty useful class. A lot of new Flex developers go straight to using ArrayCollection, and forget about its father, ListCollectionView. This collection allows you to apply different sorts and filters on a collection without directly modifying the wrapped collection. You can also call addItem() and removeItemAt() on ListCollectionView and have it modify the wrapped collection. Pretty nifty! Here’s an example of it in action:

1
2
3
4
5
6
7
8
9
10
11

var col:ArrayCollection = new ArrayCollection();
col.addItem('a');
col.addItem('b');
col.addItem('c');
 
var wrapper:ListCollectionView = new ListCollectionView(col);
wrapper.removeItemAt(0);
wrapper.removeItemAt(0);
wrapper.removeItemAt(0);
 
trace(col.length); // traces: 0

Cayri on Your Desktop!

I’m busily working on the next version of Cayri, and I’m pleased to announce that this new version will live directly on your desktop. A couple weeks ago, I was little unsure if I was going to be able to pull this off, but with some assistance from the guys over at Modest Maps and the new AIR runtime, it’s all possible. Here’s a break down of the new features:

Different Map Views
You can now switch between either Google Maps, Yahoo Maps, or Microsoft’s Virtual Earth. On top of that, you will also be able to toggle between road, aerial, and hybrid views. What’s great about hybrid view, is that the map will display country boundaries and also display aerial photography. I think that people will also enjoy using Google instead of Yahoo because their imagery is more up-to-date.

METAR Weather
Pretty basic – retrieve a weather report for almost any airport in the world by typing in an ICAO code.

Pilot and Controller Details
This was a feature that didn’t make the previous version, but it’s finally implemented now. You can either click on an aircraft or ATC position on the map, or click on a client in the Client Listing window, and a pop-up will appear with the detailed information for that user.

User Settings
Since Cayri now lives on your desktop, you will be able to store user settings. This means Cayri can store the position of the map, or save a collection of your favorite map filters.

I haven’t set a release date yet, but I’m hoping for sometime in mid August. Make sure to check back soon, as I will be posting screen shots of Cayri running on Mac OSX and in Windows.

No Dice with Yahoo Maps and AIR

Spending the last couple weeks refactoring Cayri’s code to be more modular, I was excited to start working on the AIR version of Cayri this morning. So I started up Flex Builder, drug my custom Yahoo Maps control onto the canvas, compiled the project, and got this sweet error:

Error: Error #2067: The ExternalInterface is not available in this container. ExternalInterface requires Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime.

This is just a heads up to those who are using an ExternalInterface work around for AS2 to AS3 communication, and are planning on moving your projects to AIR.

Ugh.