MinimalComps Updates: Dark Style, HBox & VBox alignment

A couple of updates to MinimalComps.

First, go over to soulwire and check out the great GUI tool created there. One thing that struck me about it was the dark colors on the components. I liked it and set out to create a similar theme by setting dark values on the Style class. Easy enough. But I didn’t want to go through that every time I wanted to create the same look, so I added a new method on Style, called Style.setStyle. This can be “light” or “dark” (Style.LIGHT or Style.DARK). If you don’t set it, or set it to light, you’ll get something like this:

But with one line:

Style.setStyle(Style.DARK);

you can instead have this:

I like it a lot. If you haven’t used the Style class before, It’s just a list of static vars containing colors that are used whenever a component draws itself. Setting a value on Style does NOT update anything that’s already created, until that component re-draws itself, if it ever does. You should set your style values BEFORE you create a single component, and not change them, unless your’e going to take responsibility for redrawing anything. Same goes for this new method. If anyone comes up with any other useful preset styles that look decent, send them over and if I like them, I may add them to Style. And you’ll win a free set of Minimal Components!

The other change I made is to the HBox and VBox. These have really been bugging me because HBoxes always top-align their contents, and VBoxes always left-align their contents. You can set the x position of an element in a VBox and the y position of an element in a HBox, but it was tricky and non-dynamic. Now they each have an alignment property. This can be top, middle, bottom, or none for HBox and left, center, right, or none for VBox. These are static constants on the respective classes as well (HBox.TOP, HBox.MIDDLE, etc.).

The default alignment for both is NONE, meaning that they’ll work the way they always have. Left and top aligned, unless you’ve set the x or y property of an element as just described. If you set the alignment to anything else, it will ignore the current x or y property and align them exactly as you would expect. Here’s a demo:

[kml_flashembed publishmethod=”static” fversion=”10.0.0″ movie=”http://www.bit-101.com/blog/wp-content/uploads/2011/01/boxalign.swf” width=”450″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

All these changes are checked into SVN. I have one other thing that I’m working on before I go and release a new SWC though.