Flash liquid layout with BaseUI version 2

I've been working on the second version of BaseUI, so I'm happy to release it today.

THIS IS NOT AN UPDATE.

This new version is quite different, as well as the syntax, so the code you have written for the previous version won't work with this one.

I didn't try it yet in a real project but you shouldn't find too much bugs, comment if you find some, I'll solve them.

I've been working a lot with Flex and everyone enjoy a lot the layouts I think. I build this new version taking a lot of features from Flex. In the demo I use the Flex Builder interface to set the properties on a DisplayObject, so it is working pretty much the same.

I didn't build the Flex layouts obviously, but I'm thinking about it. Anyway, BaseUI allows you to use those following properties on a DisplayObject:

x, y, left, right, top, bottom, width, height, horizontalCenter, verticalCenter, ratio, alignX, alignY

You'll discover some nice features, for example you can use Number or String to set the properties. I've done that because you can now use percentage value for the width and the height!

This will make you able to do a lot more things, have a try in the demo.

Here is some examples of the new syntax:

var baseUI:BaseUI = new BaseUI(this);
var element:ElementUI = baseUI.add(mySprite);
element.right = 10;
element.bottom = "10";
element.width = "50%"
element.height = 200;
addChild(mySprite);

var baseUI:BaseUI = new BaseUI(this);
var element:ElementUI = baseUI.add(mySprite);
element.properties = {right:10, verticalCenter:0};
addChild(mySprite);

var baseUI:BaseUI = new BaseUI(this);
var element:ElementUI = baseUI.add(mySprite);
element.ratio = ElementUI.RATIO_IN;
addChild(mySprite);

As the previous version, if you use the onStage property set to false (to set the reference on the parent instead of the stage), everything will work except the "ratio in" and "ratio out". I need to build a Layout class for that, probably the next step.

A memory system has been included to make your life easier if you need to switch between properties. For example, if your width is set to 200 or "50%", and later you set a left and right version values. The width is not used anymore as it doesn't make sense, but the value is "memorized" and will be set back automatically if needed, if you set an horizontalCenter value for example. This is done internally, you don't have to do anything.

Have a look at the demo and you'll understand what I mean by values "memorized", basically it is working like the Flex Builder interface.

A tutorial will follow when I get a chance.

If you find any bugs, if you have some ideas to improve it or if you just want to talk about, please let me know.

Here is the demo and the source.