From the code depot you can download a compiled SWC or a ZIP file that contains all the source and ASDoc generated files. We have posted the ADoc files on-line so that you can easily access them if you do not download them. Currently, we have 219 unit tests running and passing for the library, which are all available from the source tree if you wish to access them.

The current release of Core contains the following functionality. We have marked new and updated features that have been changed from the Vivisecting Media Library to the new Core Library:

• Task Management System new! – The Task system is a priority queuing system that enables an application to execute specific bundles of business and/or server logic in a specific order leveraging priority and the ability to override previously queued bundles. These bundles are encapsulated inside of Task objects, which can be then bundled Task Group objects. Tasks and task groups have the ability to take priority over other Tasks or Task Groups inside of the queue, as well as replace existing tasks in the queue based on a set of overrides an individual task can define.
• Command Action Delegation System (CAD) new! – Provides a pre-built solution for implementing the Command Pattern within ActionScript/Flex/AIR applications. The command / action system allows for commands to be dispatched to the ActionDelegate which then executes any assigned functionality via an Action.
• Selection Management System updated! – The Selection Management system enables any kind of object to become selectable and treated as part of a Selection group. In most cases this would be a UI Component that should behave similarly to a radio button group, where only one item can be selected at one time. This system also allows for multi-select and deselection of items that are members of a selection group.
• Local Connection Management updated! – The Local Connection manager is a helper class to quickly establish and manage local connection instances within an application. The Local Connection manager also supports the ability to maintain strong class types when the data object is passed over the local connection instance.
• Event Broker Utility – The Event Broker is a utility class that acts as a router for specified events. The Event Broker is a single point of contact that any object can broadcast to or subscribe to. This functionality is intended to be the focal point for implementing the mediator pattern within the application.
• Instance Factory Utility new! – The Instance Factory allows for the ability to make sure there is only one instance of a specified class within the instance of the factory. This is useful for using in Locators that handle generating a new instance on the first request but then making sure the original instance of the requested item is returned on subsequent requests.
• Singleton Factory Utility new! – Similar to the Instance Factory, the Singleton Factory verifies that there is only one instance of a requested item, but instead of being limited to the instance of the factory, the Singleton Factory verifies there is only one instance of the requested item in the entire application.
• Adjustable Date Utility new! – The adjustable date wraps a Flash Date object and provides a series of helper methods to adjust time and dates quickly and easily. Example uses included the ability to adjust a date by a specific number of days forward or backwards, making sure that the number of days in the month and Leap Years are respected during the adjustment.
• Queue Data Structures updated! – The Queue system allows for items to be stored in either a LIFO or FIFO based queue order or in a priority queue order and then retrieved from the data structure depending on how the items are ordered.
• Hash Table Data Structure – The Hash Table is key/value that allows any value or object to be used as a reference key to another value or object item. The Hash Table is similar to Flex’s ArrayCollection in how items can be referenced but unlike the collection, this is ActionScript independent, is not intended for data pagination and is focused on performance for larger data sets.
• Browser Location Utility new! – Utility class used to query the current url in the application. The class provides static properties for each piece of the application url.

Aaron and I have a TON of notes and thoughts that are being worked on, all thanks to MAX North America. I am sure we will have even more coming from MAX EU. We will both be working on a ton of new posts over the coming few weeks and at the same time we are in the process of getting our DevelopmentArc site proper (don’t forget client work and other assorted projects we are working on too!). More to come on that later. So, for those of you in/from the States that celebrate T-day, enjoy! For those of you that don’t, no worries, you can laugh at us as we Americans stumble around in a triptiphane induced food coma.

Oh, and for those of you that read this blog for Flex/Flash/Technology info, read up on my newest obsession while I am away: Degrafa. Degrafa is short for “Declarative Graphics Framework” and it is a set of Classes that enable you to create simple to complex graphical content using MXML instead of having to write a bunch of ActionScript graphics calls. But that is just the tip of the iceberg, you can actually make component skins (states and all!) using their framework. Its rare for me to get this excited about a new framework, I am usually super hesitant about jumping in, but after a demo at the MAX Birds of a Feather, and now getting my hands dirty in it, I am super impressed. Good work guys!

My goal was to take these two posts, summarize them and show how to get the current source and check it in. Just as I sat down to write this all up, Mike Chambers comes in and scoops me. Figures. Anyway, I yelled at Mike via IM for stealing my thoughts and then mentioned that I figured out how to bind the Flex 4 source to the SWC in Flex Builder so that you can F3 / CTRL+Click you way to the code. So, I am going to post that aspect of the process and refer back to Mike’s straightforward post on how to get the SDK compiling and running.

Check Out The Source
The first step of linking the Flex 4 source to Flex Builder, is to download the code from Adobe’s Open Source website. Adobe and the Flex team are using Subversion to manage the code base so you will need to use SVN to checkout the source. I already had Subversion installed so I was able to jump right in and checkout the code. If you don’t have Subversion, or want to learn more about how Adobe has the SVN configured, then make sure to read how to check out from Adobe’s code base. If you have Subversion installed, then here is the short and sweet version.

First, I didn’t want to download the entire SDK SVN trunk, so I found the direct path the Flex 4 Framework code using their web browser interface:

http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/flex4/src/

Next, I picked a location to keep the source. I personally chose to put it inside the flex 4 SDK folder under a new subfolder called src. You can put this folder anywhere you want, I just chose this location on a whim. To get the source, I opened up my terminal, cd‘d to the new src folder and then ran the following command to download the source:

svn checkout http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/flex4/src/ ./

You don’t technically have to cd to the new folder but I hate having to fit it all in one command line. Whatever, I can do what I want! Once you run this command, Subversion will download all the ActionScript source for the framework into your new directory. The last step is to inform Flex Builder that you have source for it.

Get Flex Builder Into The Know
To do this, right click (CMD+Click) on your project in Flex Builder and choose Properties > Flex Build Path > Library Path. Expand the Flex 4 SDK tree and then expand Flex4.SWC so that you see the Source Attachment: option. Double click Source Attachment: and then browse to the folder that holds the source you just downloaded. Choose Okay, and there you have it, source is now bound to your SDK and you can F3 to your hearts content.

One thing to note, if you only use the default namespace, then hinting will not follow through in FB3. I recommend binding the gumbo library for this to work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library:adobe/flex/halo" 
	xmlns:gumbo="library:adobe/flex/gumbo"
	layout="vertical">
 
	<gumbo:Button label="hello world" />
	<gumbo:Group>
		<gumbo:content>
			<gumbo:Ellipse width="30" height="30">
				<gumbo:fill>
					<mx:SolidColor color="#FF0000" />
				</gumbo:fill>
			</gumbo:Ellipse>
		</gumbo:content>
	</gumbo:Group>
</mx:Application>

This tells FB where to start looking for the source and enables it to open properly. If you know of a way to bind the namespace to the source, please let me know!

I read a great analysis article by Grant Skinner, talking about the different Open Source licenses and how they can affect you and your client. I originally licensed the code library under the Mozilla Public License (MPL) due to its popularity, its freedom to allow developers to build on top of the code base for any purpose (free or for charge) and only requires code modification submission if the developer changed the original code in the library. My goal with VivMedia is to help developers build great applications, and the last thing I wanted to do is limit them, yet I do want to encourage people to submit changes and updates. That is why I went with MPL at first.

The issue with MPL (as Grant points out) is that when you use MPL code there are certain steps you need to take to release your project. In most cases this is not a big deal and it very rarely impacts the project but it may cause some developers or their clients a bit of grief. In all honesty, I just want to create a library that myself and others can use without having to jump through hoops with our clients. This lead me to change all the code license to MIT, which is very permissive of all forms of development. All you need to do is keep the MIT license headers in the source. You don’t have to submit changes (all thought I would be very happy if you did) and you don’t have to jump through any other legal hoops when deploying. So, if you are using the library already, update to the new version and know that the door is now wide open and you don’t have to fret about how you or your clients release the work.

The other addition to this version is the new Queue data structure. The Queue allows you to add and remove items is in a linear fashion. You can define the Queue as either Last in First Out (LIFO) or First in First Out (FIFO). What that means is when you add() item A and item B to the Queue and then call next(), the item returned is dependent if the queue is set to LIFO or FIFO. A LIFO Queue returns item B, since it was the last item added. A FIFO Queue returns item A since it was the first item added. As always, a full tutorial will be posted soon on how to use the Queue in your code.

The Queue is a building block for a lot of new functionality that I am starting to plan out. There will probably be variations of the Queue going forward too. For example a version that is designed to help solve Asynchronous issues in a Synchronous fashion, without you having to write a lot of logic around the actions. Right now, its all about what time permits… and as I said in the last post, vacation is nearly here! So, update/download the library, check out the ASDocs in the source (I always update them for each release) and let me know what you all think.

Overview
The SelectionController allows you to group items similarly to how a radio group works in both HTML and Flex. The general principle with a radio group is that when one radio button is selected, any of the other radio buttons in the group are then deselected. This kind of selection occurs in Lists, DataGrids, etc.

The challenge is that in a highly stylized Flash/Flex applications we often need to treat custom components as a group. One example is my Wordpress PhotoSlider. When a user selects a thumbnail, the selected thumbnail is highlighted and the previously highlighted thumbnail is deselected.

A typical solution is to make the parent container smart enough to understand when an item is selected and then let the parent change the highlight state. This approach can get tricky when you have items that are deeply nested and don’t share an easily accessible common parent or if you have complex selection/deselection requirements that may span across multiple containers or even have selected children that are currently off the display stack.

To solve the easiest issues to the most complex selection challenges I developed a SelectionController that is a Singleton instance that manages selection of content for you. Items first need to implement the ISelectable interface and then they can be added to a selection group. When you want to select or deselect a group you can either pass in the group ID or you can pass in one of the items in the group to handle selection.

Examples
First, lets look at our item that we want to be selectable and then we will look at how you can select/deselect the item.

package com.vivisectingmedia.tutorial
{
	import com.vivisectingmedia.framework.controllers.SelectionController;
	import com.vivisectingmedia.framework.controllers.interfaces.ISelectable;
 
	import flash.events.MouseEvent;
 
	import mx.controls.Button;
 
	public class MySelectionButton extends Button implements ISelectable
	{
		// constructor
		public function MySelectionButton()
		{
			super();
		}
 
		/**
		 * The default method for when a Button is clicked.
		 * We override this method so that when a user clicks
		 * on this Button we select this item and deselect
		 * all the other Buttons in the group.
		 * 
		 * @param event Click event.
		 * 
		 */
		override protected function clickHandler(event:MouseEvent):void
		{
			super.clickHandler(event);
 
			// this item is now selected
			SelectionController.selectItem(this);
		}
 
		/**
		 * This setter is called when the SeletionController
		 * changes the Button's selection state.  Technically,
		 * we do not have to override this method because the Button
		 * Class already supports the selected getter/setter signature
		 * required by the ISelectable interface.
		 *  
		 * @param value True is selected, false is deselected.
		 * 
		 */		
		override public function set selected(value:Boolean):void
		{
			// store the private reference
			super.selected = value;
		}
 
		override public function get selected():Boolean
		{
			return super.selected;
		}
 
	}
}

A couple of notes about the above code. As I mentioned in the comments, we don’t really need to override the get/set method for selected. The Button Class already meets the ISelectable interface requirement, but you will still need to extend the Button class to add the ISelectable interface so that it works with the SelectionController. I overrode the code just to show you how you would need to implement this in a component that does not already support selection states. What I really want you to focus on is implements ISelectable and the clickHandler() method.

In the clickHandler() call we pass up the super.clickHandler() and then we call the SelectionController.selectItem() passing the component instance reference in as the argument. What this is telling the SelectionController to do is first, see if the passed item is in a selection group, if so, select the item by setting selected to true, and then set selected value to false on any other item in the selection group. The SelectionController is friendly enough that if the item passed in is not in a selection group, then the item is still selected and nothing else happens.

So how do you leverage the selection object? Let’s look at some examples:

// create some selectable items
var buttonOne:MySelectionButton = new MySelectionButton();
var buttonTwo:MySelectionButton = new MySelectionButton();
var buttonThree:MySelectionButton = new MySelectionButton();
 
// generate an group id to assign them to
var groupOne:int = SelectionController.generateNewId();
 
// assign the items to the group
SelectionController.addItem(buttonOne, groupOne);
SelectionController.addItem(buttonTwo, groupOne);
SelectionController.addItem(buttonThree, groupOne);

This is the basic use case for grouping items. First, we use a helper method to generate a new group ID. The ID is an int and it must be unique for each group. The generateNewId() returns the next ID number not in use. Once you have an ID you can then add items to the SelectionController using the addItem() method. This stores the reference of the item and pairs it with the group.

Because the MySelectionButton is built with the SelectionController in mind we don’t have to do anything else if we want these three buttons to behave as a group. When a user clicks one of the buttons in the group, the clickHandler calls the SelectionController and the SelectionController will then select the clicked button and deselect the rest.

What happens when you want to programatically select one item, or all of the items in the group or deselect all the items in the group? The SelectionController provides methods to handle these tasks:

// select one item
SelectionController.selectItem(buttonTwo);
 
// select all the items, first get the group if
// you don't know it
var currentGroup:int = SelectionController.getItemGroup(buttonOne);
 
// now select the group
SelectionController.selectAll(currentGroup);
 
// or you can deselect them all
SelectionController.deselectAll(currentGroup);

Considerations and Gotchas
As with all my tutorials, lets talk about things you should consider/know about the SelectionController that may cause you some trouble if you attempt to do certain things.

One group to an item. Selectable items can not be members of multiple groups and when a new group is applied the item is removed from the original group. For example:

// create a new group
var groupTwo:int = SelectionController.generateNewId();
 
// apply the group to ButtonTwo
SelectionController.addItem(buttonTwo, groupTwo);

Doing the above would remove ButtonTwo from groupOne and when you call selectAll() on groupOne only buttonOne and buttonThree would be selected.

Items are Strong referenced. When an item is added to a group it is strong referenced in memory. This means that if you want to delete the item so that Garbage Collection can be applied you need to remove the item form the SelectionController by calling removeItem(). This removes the item from the SelectionController and Garbage Collection can be applied when the next pass occurs.

Multi-Select is supported by not built in by default. If you want to create a multi-selectable grouping you can use the SelectionController for this kind of functionality, but you will need to add more logic to you selectable items. For example, we want our MySelectionButton’s to be multi-selectable when a user has the Control/Command key down. To do this in our example you would modify the clickHandler() like so:

override protected function clickHandler(event:MouseEvent):void
{
	super.clickHandler(event);
 
	if(event.ctrlKey)
	{
		// do not select using the controller
		this.selected = true;
	} else {
		// do select using the controller
		SelectionController.selectItem(this);
	}
}

The above example determines if the user is multi-selecting by checking the ctrlKey value in the MouseEvent. The MouseEvent passes true if the key is down and false if the key is up. In the case when the key is down we want the object selected but we don’t want the Controller to deselect the rest of the items in the group. Otherwise, we do want the rest of the items to be deselected, so use then use the Controller.

That is the basics of the SelectionController, play around with it and let me know if you need more examples, find any issues or have any questions with the Controller.

New And Improved UI

So, what’s new? Well the first thing up is the updated application UI. The goal for the updated ui was to continue showing off the skin-ability of AIR applications and also help streamline user interactions. kuler continues to leverage the transparency effects of AIR and now has a beautiful cutout UI that highlights the kuler logo and application buttons.

Some of the other UI additions are unification of the kuler web application loading animation with the loading animation within kuler Desktop and making the Sign In / Active Internet connection light more prominent at the bottom of the tool.

Another important change is the addition of the grip bar and hand icon over the Themes. One of the coolest features in kuler Desktop is the ability for a user to grab a Theme and tear it off into its own window. This is one of the “wow” features because every time someone sees it for the first time they instantly go “WOW!”, me being one of them. This functionality is actually not a new feature, it was in the original release of kuler Desktop. Unfortunately it was not as easily discoverable as was hoped and this new UI update is intended to help people discover it quickly.

New Menu Access

The drop-down menu now has two new options for users. The first is the About menu. In the previous release the general about details were located in different locations within the info panel and this information is now consolidated into a single location. The other new menu option is shown when a user signs into their kuler account using an Adobe ID. The previous version of kuler Desktop allowed users to view the Themes they created in the kuler web application but they could not view any of the Themes that were marked as favorites. Now user can view any Themes that they have marked as a favorite on the site once they have signed into My kuler.

Paging and Caching of Themes

With kuler Desktop users can now view all the Themes in all the categories. One of the limitations of the original release was that they could only see the first 100 Themes in a category. No longer! The UI has a new feature that allows users to page through the themes a 100 at a time, or they can jump to the first or last 100 with a press of a button. kuler now also show users their current position in the Theme category so that they know exactly where they are.

In addition to exposing this feature in the UI kuler now has added the ability to cache Theme pages so that when someone navigate back and forth through Themes they only have to load a new page when they exceeded the current cache limit. This makes extended browsing much quicker for everyone.

Creative Suite Integration (CS) via SwitchBoard

The killer feature in this release is the ability for kuler Desktop to export Themes directly into Adobe Photoshop, Adobe Illustrator and Adobe InDesign with a single click. Not only can kuler Desktop directly import a Theme with a click kuler Desktop can also launch the CS application if it is not already running.

kuler can do this thanks to an awesome new application called SwitchBoard. SwitchBoard, which is now on Adobe Labs, allows AIR applications to communicate with CS applications via an ActionScript API. Using the API developers can send ExtendScript commands directly to the CS application of their choice. Thanks to the power of SwitchBoard users are now able to save the Theme ASE (Adobe Swatch Exchange) file to the appropriate CS folder location, call the CS application, tell the application where the ASE now lives and to have it open the ASE in the Swatch palette.

Auto-updating / General Fixes

On top of all that kuler now has a built in an auto-update utility leveraging AIRs update support that allows kuler to determine you when a new version is available. Adobe kuler Desktop can now call out and see if a new version is provided and if it is the application will download and auto-install the update for you. The new version also a lot of fixes for usability issues and bugs that both the QE and the kuler community have found. Overall, this is a great dot-release and I feel you all are going to love the new features!!

The big change is this version is the addition of the new SelectionController and ISelectable interface. The SelectionController is a manager that allows you to group any number of items that implement the ISelectable interface and then treat them as a Radio Group or multi-selectable group. With the controller you assign items to groups and then you can use the controller to select and deselect the items.

A great example of this code is how I handle image highlighting in the Photoslider. Each of my image thumbnails implement ISelectable and then when a user clicks a thumb it calls the SelectionController.selectItem() and passes itself as an argument. The SelectionController then sets selected on all the thumbnails in the group, setting true for the passed in item and false for the rest. I plan on doing a full tutorial in the near future so keep an eye out for it. Enjoy!

The ArrayCollection is much more then this too. It also has the ability to tie directly into FlexData services and then dynamically page the data into the ArrayCollection instance as data is requested. The ArrayCollection is also the complex data structure that is generated by the HTTPService (when parse to Object is set) if you have more then one child node in an XML structure. If you haven’t used it yet, the ArrayCollection is a very powerful data-structure.

Of course, with this robustness comes limitations. First off, its Flex only. This means that if you are used to Flex development but find yourself on an AS3 only project, you can’t use the ArrayCollection. Another big one is performance. As you begin filling the ArrayCollection up, queries into the data structure start to slow down, and I mean significantly slow down. If you have hundreds of objects in the ArrayCollection, the performance for lookup and access are way slower then just looping over an array and finding it the old fashioned way. A more minor issue is when trying to manipulate data dynamically you start having to write some pretty ugly code such as to prevent null reference errors:

// remove the item if it exists
if(myCollection.contains(objectNeeded))
{
	myCollection.removedItemAt(myCollection.getItemIndex(objectNeeded));
}

Its not that bad, but as you get more and more complex accessing structures you start longing for the simplicity of an Array. This is where the HashTable came into the picture. I wanted something that performs like an Array, yet has the API data accessors that can simplify development. Yet, there was one more thing that I wanted, the ability to map key’s to values like in an object or Dictionary but still maintain Array like access.

From this need came the HashTable. In the past I had built multiple solutions similar to the HashTable but they typically where one-offs that lived in the code the functionality was needed. I never got around to formalizing it into a proper data-structure. I finally got the chance and built it from the ground up for my Photoslider app. So, let’s talk about the HashTable…

Using The HashTable
The HashTable is an ActionScript 3.0 data structure that is not dependent on any of the Flex SDK, this means you can use it freely in both Flash and Flex projects. The HashTable, simply put, is two Arrays which are wrapped in logic to provide a simplified data access API for development. Its not complex, but it can cut out a ton of code that you would typically write over and over.

The main thing to know about the HashTable is that everything revolves around a key/value pair. The key can be anything, from a number to a complex object. When you add an item to the HashTable you define this pairing:

// create a key (person) and item (friends)
var person:Object = {name: "James"};
var friends:Array = [{name: "Eno"}, {name: "Aaron"}, {name: "Doug"}, {name: "Dave"}];
 
// create the table
var hash:HashTable = new HashTable();
hash.addItem(person, friends);
 
...
 
// get my friends
var myFriends:Array = hash.getItem(person) as Array;

As you can see from the example, we can use an Object as a key and then bind another complex object to the key. Later on we can retrieve the item by simply requesting the item by providing the key. Not only can we access via the key, but we can also get all the keys and then retrieve their data. For example, we now have multiple people in our HashTable and we want to get all their friends:

// get all the people and loop on them
var people:Array = hash.getAllKeys();
var len:int = people.length();
for(var i:uint = 0; i < len; i++)
{
	var friends:Array = hash.getItem(people[i]) as Array;
	...
}

Not only can you get all the keys but you can also get all the items by using getAllItems(). There are also other accessors that can help you along the way. Such as:

// how many key/items are in the HashTable
var numberOfItems:int = hash.length;
 
// do we have any items
if(!hash.isEmpty)
{
	// do something
	...
}
 
// is the key or the item in the table?
if(hash.containsKey(person) || hash.containsItem(friends))
{
	// do something
	...
}
 
// we can also remove key pairs
hash.remove(person);
 
// or clear the entire table
hash.removeAll();

Things to Consider When Using the HashTable
If you read my EventBroker post or my Code Behind Pattern post then you know I like to point out any possible gotcha’s when using code. I feel this is very important because if the issues are raised in the beginning it makes the life of the developer a hell of a lot easier. Here are a few nuggets to consider when using the HashTable:

• The HashTable uses an Array under the hood so this means items are strong referenced. Make sure to remove the items from the HashTable before you decide you no longer need the items in you application and want the Garbage Collection to clean them up.
• When using the getAllKeys() or getAllItems() you are being handed back a clone of the internal Array. If you want to change the value in the HashTable you will need to overwrite them by updating the HashTable. Note: The current version (0.01) of the Framework has a brute force clone in the HashTable. I was a little for loop happy and this has been fixed locally and will be available in the SVN soon. Version 0.02 of the framework will have this fix. Its nothing to worry about, I just prefer more elegant code and wanted to note this for the few of you that will poor over my code (Aaron, Eno and Dave!)
• You can have the same object multiple times in the HashTable if it is an item, but only one instance as a key. This means that if you have the object “person” as the key to item “friends”, and then try to addItem(person, friendsTwo) then “friends” will be replaced with “friendsTwo” within the table. This is silent and allowed. Key’s must be unique otherwise you overwrite.

That should be all… if you find anything, want more examples or event want new features let me know!

After my first in-depth pass of the spec I have some concerns around the developer workflow and the possible complexity of the MXML generated with the new inline states. I agree that the current Flex state mechanism is hard to read, limited and can be overly complex to follow. Looking at the new proposed methodology I feel the solution has the potential to become just as complex, if not more so, and could make the code harder to follow for developers with larger components. An example of this kind of complex situation would be creating large forms that dynamically change their field structure dependent upon how the user answered previous fields in the form. On a project I worked on we relied heavily on states to solve this issue because we constantly had to show/hide fields and extend forms based on the user selections.

My first concern is that by moving into an inline methodology making changes from code view becomes harder to traverse and manage overtime. The new inline syntax requires the developer to look for state properties and tags within the whole of the MXML layout to determine what is being show when and where. One of the benefits of the current syntax is that each state node clearly (more or less) shows what happens when each state is selected. With the new syntax the developer has to comb over all the code and then attempt to find all the references that define state layout. In many situations this can be overcome by componentizing the code to help alleviate the complexity of the MXML but with large forms this is not necessarily an easy or viable solution.

My second concern is based around state inheritance. I see that I can set includeIn/excludeFrom to multiple states or groups, but this means that I have to track all of the reparenting inline vs. using the classic “basedOn” inheritance approach. A benefit of the inheritance model is that if state A handles a complex reparentaing structure and state B is a simple change to state A, a developer can simply state the changes in state B and then say extend from state A. With the new syntax, a developer has to track all the iterations of A and verify that B is added to all the state A changes and then make sure the B changes are applied.

As you can tell, both of my concerns are focused on codebase management. With the push of RIA development we are now creating code bases that have to grow, mature and scale over time. The focus of maintenance and team growth on a project is becoming more important for development teams and as new developers are brought into the code base, readability and ease of maintenance is very important. If a new developer was assigned to edit a form using the new layout they would have to review all of the MXML layout to determine both how it is structured and how it evolves with state changes. If this state management is defined outside of the layout then in some ways it is easier to determine what is changing and when. I fully realize that the current states model needs to be redesigned but I feel moving to 100% inline solution is not necessarily the best answer and possibly a hybrid approach could help help manage code readability.

Part of my passion about states is that I was the QA engineer assigned to the first iteration of states when we were developing them for Flex 2. States are one of those concepts that are hard to grasp at first but then make a lot of sense and are incredibly useful after you get it. In fact, we used states all over the place on Scion.com and I think all of the dev team learned to both love and hate them. Let me know what you think about the proposed changes and if you feel strongly one way or the other I highly recommend commenting directly on the Flex spec!

So how can you tell if a Flash app uses Flex? If the UI is skinned and the default loader is changed (like Scion.com) then there is no easy way to determine if a Flash app is Flex. That is where a really simple tool called “Is it Flex?” that was built by James Ward. He built a simple web form that you can pass in a SWF location, the app then processes the SWF and then returns back if it uses Flex or not. His app probably loads the SWF into a SWF and then pings it for certain Flex specific APIs.

James’ tool has been around for a while and when Aaron asked me if SearchMe was Flex I instantly thought of testing the site using the form. The only problem was that it took me over 20 minutes to find the fracking thing! When I put in the words ‘is it flex’ (no quotes) it didn’t come up at all in Google. I then went to James’ site and nothing there mentioned it. I searched his blog and only the Flex blog posts came up (which he as 100 of). I then went back to Google and tried different combinations. I started to doubt my memory and thought maybe James didn’t write it. Maybe it was not called “Is it Flex”, maybe it was something else. I searched for how to determine if a SWF is a Flex application. Finally, I put the “is it flex” in quotes and it was the first hit.

Arg… I am usually pretty good with my searches and I would have tried that on my second try. But the first time my search results were soooo off that I doubted my memory and immediately tried other keywords. Its kind of funny that this happened because I had just read a great interview with Udi Manber, VP of search quality at Google. He talks about how frustrating it is when your search fails. We are so used to first success that when it doesn’t happen we tend to get frustrated. Word.

So this is a twofold post. First to point out a great tool that let’s you peek under the covers to see if its all Flash or does it use the Flex Framework. Second, to archive this link so that I don’t forget how to f***ing find it.

– ps: I used Textmate to write this post and I forgot to save it the first time when I previewed it in the Textmate preview window. I was all done and checking my links when I hit the SearchMe link. I then hit back before it loaded and Flash Player then through a “load never completed” exception (yeah debug player), which then hung Flash and crashed Textmate. I lost my first post and had to write this stupid thing again! I got spoiled with Wordpress’ auto-save feature… stupid, stupid, stupid.