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?
Archived Comments
Ray - 404 on the demo links. Think they are missing the layout directory - /demos/layout/layout10.cfm
Should be fixed now. I also fixed the stray sentence at the end. I also fixed the second code block. I swear I'm not drinking tonight - but man I screwed up that blog post.
I kind of see this as a way for those not too saavy with CSS to get a horizontal layout. If you had no idea how to float a div these tags would come in handy I suppose. You do get the added benefit of being able to provide Ajax content in the layoutareas with a dynamic source though, correct?
I'm a little stumped by the use for cflayout with hbox and vbox as well, because it would be just as easy to use divs with appropriate class names and CSS (probably less typing that way infact).
I guess the useful part is in the "source" attribute of the cflayoutarea tag. So in addition to the simple layout functionality, you might have shared pieces of UI which could easily be used throughout an application or you might be building the UI at runtime (remembering this is an Ajax feature). I can't really think of a good example of why it would be necessary or why you couldn't do it another way though...
Maybe someone like Peter Bell will find a use for it :) Hehe.
Now think all this staff will be great ( exept hbox and vbox that looks to me a bad way to avoid 2 lines of css )for application admin panels and peculiar rendered pages on web sites.
My point is that I can easily add tab staff extc... in a easy way ( see jquery etc...) saving a lof of K of js.
By the other hand I will surely use cflayout to replace frames with a better standard solutions as cflayout looks like.
What I hope is that there will be a great attention to w3c standards ( example: all the div created bu CF8 have a _CF_88888.... class, when a class or name and so on must start with a letter to be validate).
Really hope do not have to choose do not use these features for keeping my pages code clean.
The same for cfwindow type html.....in my source I do not see really nothing o html code....
What you think about??
Andrea
>>you should probably mention that the first example also adds ten additional javascript and css files (about 325K) to the weight of your page.
That's from the last blog post and is insane. The ajax file alone was 30kb!
On this one the first css file is 21kb and the 2nd is 60kb! That's also insane.
All of this layout stuff looks like total crap to be avoided. Anyone intelligent would surely prefer his own css file and a little jquery file and plugin that could do a heck of a lot more.
Well, you don't have to use the built-in functionality... It's just nice to have if you need to create something quick and simple (where CF is sometimes incredibly powerful!) and where the page weights don't matter. If you were using this for an internal application on a gigabit LAN then even 400kb of JS and CSS is nothing to worry about, and it gets cached on the client anyway.
You would definitely not use it on a public facing web site where your target audience would include dial-up users or other users which needed the site to be totally accessible.
So it can go both ways. Just because it exists doesn't mean it's bad... If it suits, use it! If it doesn't suit, don't use it :)
ziggy - You need to remember this is still beta. If I were them I'd be worried about shrinking the JS _after_ I let folks test out the features.
Why would they not shrink it for a beta? They could even have a compressed/non-compressed attribute.
I don't see how they're going to shrink those sizes down much on a final release. Yui was a bad choice I think anyway for quick add-ins. I'm all for some built in js validators and such if you want it and MAYBE some html/css shortcuts but it can't be too well thought out if they're getting sizes like that to start. My site's jquery js is about 26kb with a nice menu and all sorts of onload functions. The "ajax" and "rapid development" hype is what they're after but once you look at it whose going to use it?
>>if you need to create something quick and simple and where the page weights don't matter.
rare, and if for a company lan, they'd do it right, not use these things I'd imagine.
Well, no harm done if not using them anyway :-)
a little unrelated, but...
with the ajax ui stuff in coldfusion (specifically <cflayout type="tab"> in my case), is there a way to use window.onload events?
i am attempting to use a script for zebra striping tables, but i'm having a hard time nailing down exactly where to put this code to make it work.
as it stands, it is almost as if the browser never "sees" the html behind the content because if you view source on a tabbed cflayout, there is no source there, just empty divs for every tab. this is clearly impossible though, because the content is rendered.
can anyone help me understand what is going on?