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:

Actionscript:
  1. var baseUI:BaseUI = new BaseUI(this);
  2. var element:ElementUI = baseUI.add(mySprite);
  3. element.right = 10;
  4. element.bottom = "10";
  5. element.width = "50%"
  6. element.height = 200;
  7. addChild(mySprite);

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

Actionscript:
  1. var baseUI:BaseUI = new BaseUI(this);
  2. var element:ElementUI = baseUI.add(mySprite);
  3. element.ratio = ElementUI.RATIO_IN;
  4. 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 comment.

Here is the demo, the docs and the source.

Vote in HexoSearch
10 Responses to “Flash liquid layout with BaseUI version 2”
  1. Federico Bebber says:

    Yeah! great again!
    Remember the tween feature if you can :)

    keep it up

  2. freddy says:

    really great job!!

  3. Romuald says:

    Happy you like it. For the tween thing, I thought about it, I prepared it in a way. I still need to make some test though. I'll probably insert a bypass property and dispatch an event with an object containing the real values to reach with the tweener.

  4. freddy says:

    maybe you could add limits to the items

  5. Romuald says:

    What do you mean by limit?

  6. freddy says:

    mainly to prevent the items overlap

  7. Romuald says:

    yes I see, this requires a lot more work. The layout will be the next step, I've started to think about.

  8. freddy says:

    great... I'll be waiting

  9. Getting Started with ActionScript 3.0 « Bauhouse says:

    [...] Flash Liquid Layout with BaseUI version 2 [...]

  10. noponies says:

    Hi,

    Nice class, really nicely written with excellent feature set.

    I've been building a layout manager of my own and randomly stumbled on your implementation.

    Anyway, keep up the nice work!

Leave a Reply