Tonight I'm blogging again about ColdFusion, AJAX, and the new layout controls in ColdFusion 8. Tonight's entry is once again talking about cflayout and cflayoutarea. This entry will discuss the VBox and HBox type.

Now I have to admit. This feature has me a bit puzzled. First the basic syntax:

<cflayout type="hbox">

That creates a layout where all the things inside it will be positioned horizontally. The opposite of this is the VBox:

<cflayout type="vbox">

Now - I don't know about you - but when I saw this, the first thing I thought of was Flex. Flex has a VBox and HBox, and they are useful for layout out your controls in a particular direction. So for example a set of buttons can be laid out in an HBox.

So the first thing I tried was this:

<cflayout type="hbox"> <p> Hi </p>

<p> Go </p>

</cflayout>

I thought that maybe the JavaScript code would pick up all the block level elements between the tags and lay them out horizontally. Nope. You can see the result here.

Turns out that the only items you can position with this tag pair are cflayoutarea tags. For example:

<cflayout type="hbox">

<cflayoutarea name="randomlayout"> This is a basic layout. </cflayoutarea>

<cflayoutarea name="anotherlayout" style="background-color: blue"> The Blue Zone. </cflayoutarea>

</cflayout>

You can see the result of this here.

So I have to be honest and say... I don't quite get it. If you remember, the border style layout lets us position items in all four compass points and in the middle. I guess if I wanted a bit more control, like perhaps two things on top, I could use a VBox to set it up. Outside of that - I'm a bit unsure of how useful this would be. (Which is ok - I don't expect every ColdFusion tag to be useful to me.)

The docs provide a more fuller example, viewable here. Have folks done anything with this feature yet they care to share?