actionscript layout framework demo

Currently I am in the process of starting another actionscript open source project. The plan is to create some sort of UI library/framework which makes the everyday UI programming tasks a more pleasant experience. The main goal is to encourage clean concise and flexible client code which can be easily maintained and changed.

One part of the project is a layout framework. I created a little demo app to test it's current capabilities. Click the image to launch to demo:

//EDIT:
A friend of mine read this post and complained that it lacks a clear explanation what the demo is about.

Well, the demo's purpose is to test and showcase the current state of a layout framework which I am currently working on.

The 'GuiBuilder' demo enables you to create layouts visually and save/restore them to/from XML. If you start the demo it automatically loads a "default" layout. To explore this layout you can select any cell or container on the stage and change it's values by either dragging it's right and bottom border or by changing it's values in the form on the left side.

You can select any cell or container by either clicking on it, or selecting it with the dropdown box on the right side. The difference between a cell and a container is that a container can contain any number of cells or containers, whereas a cell can't contain anything else. (Composite pattern)

You can remove any selected cell or container exept for the "Container stage" (Some root must remain). If you remove a container, all cells and containers it contains are also removed. If you select a container you can also add cells or containers to it. If you select a cell you can only change the cell's settings, but not add anything to it.

As containers can hold other containers and cells, containers allow a lot more settings then cells. Select a container and look at it's settings in the left side form. These are the actual features of the layout framework. Any value you change affects the content of the selected container. So you could for instance change the amount of columns, the alignment, and so on. But to see any change, the container needs content. As long as the container doesn't contain cells or containers, nothing happens. But as soon as you start adding cells or containers to the container you will see the settings take effect, because the container's settings are applied to it's content.

If you are finally happy with your result you can click the "Save to clipboard" button and store the resulting XML on your clipboard. The next time you open the 'GuiBuilder' demo just paste the XML into the TextArea on the right side and click restore and your layout will be restored.