ColdFusion 8: AJAX UI Pods

This post is more than 2 years old.

Tonight I want to show another new UI control in ColdFusion 8, the Pod. While not the most exciting item in the world, it is a pretty nice and simple to use. The simplest example can be done in three lines:

<cfpod> This is a pod. </cfpod>

Which results in:

Live demo here.

So obviously that doesn't do too much. Lets add a bit more information to the pod:

<cfpod title="Cool Advertising Info Here" width="200" height="150"> This is where I'd put the ad. Or other interesting fine. </cfpod>

Which results in:

Live demo here.

You can also add some pretty stles to the pod as well:

<cfpod title="Cool Advertising Info Here" width="200" height="150" headerStyle="background-color: black; color: red;" bodyStyle="background-color: ##fff68a"> This is where I'd put the ad. Or other interesting fine. </cfpod>

Which results in:

Live demo here. And yes, this is why I'm not alllowed to do web design.

Finally, like the other UI controls, you do not have to provide the content directly inside the control. You can use the source attribute instead:

<cfpod title="J2EE Powered Clock" source="podsource.cfm" /> <cfoutput> <p> The current time is #timeFormat(now(),"h:mm:ss tt")#. </p> </cfoutput>

Live demo here.

And in case you are wondering what happens when you do this...

<!--- I'm pod4.cfm by the way... ---> <cfpod title="J2EE Powered Clock" source="pod4.cfm" />

I think I literally felt my laptop get 20 degrees warmer when I did this. (And no, there isn't a live demo of this.)

In terms of JavaScript API, the navigate function works on Pod containers:

<cfpod title="Test" name="mypod"> </cfpod>

<a href="javaScript:ColdFusion.navigate('podsource.cfm', 'mypod')">Load me up some pod goodness</a>

Live demo here.

And please - can we skip the comments about the size of the JavaScript libraries? Pretty please? :)

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Mikkel Johansen posted on 6/12/2007 at 4:59 PM

Ray: Where did the smooth corners in demo 3 come from ???

Comment 2 by Raymond Camden posted on 6/12/2007 at 5:12 PM

It looks like they all have rounded corners, but maybe my colored one simply shows it off more?

Comment 3 by Gary Gilbert posted on 6/12/2007 at 5:21 PM

You are right Ray they may not be the most exciting thing in CF8 but they can be useful.

Comment 4 by Andrea posted on 6/12/2007 at 6:36 PM

A note about w3c standards.
I have noted that in all the UI controls every div Id start with _CF.
Every div wil be an error cause id must start with a letter to be valid.

You think this will be possible to be changed?



Comment 5 by Raymond Camden posted on 6/12/2007 at 6:52 PM

Andrea, I don't speak for Adobe. I'd just be sure to log a bug though. They can't fix anything if it isn't recorded by someone.

Comment 6 by Aaron Roberson posted on 6/13/2007 at 1:05 AM

Besides be invalid (as noted by Andrea), these pods generate some bloated markup.

They may come in handy for quick and dirty work but make sure you don't use them on paying clients sites or anything you would include in your portfolio.

Comment 7 by Sam Farmer posted on 6/13/2007 at 1:15 AM

Don't forget CF 8 is in beta and file sizes, etc may well get smaller.

I see this as being a reasonably useful tag, especially if you need to throw together a quick demo.

Comment 8 by andrea posted on 6/13/2007 at 5:18 AM

Hi Aaron

what you mean for "bloated markup".....I am Italian living in Cancun ....sometime my english let me down...
In any case I have posted to Adobe.
I think these new staff are excellent but the code that they generate is maybe much more important....optimize a web site has become a hard job.
I'd like to use these new staff knowing I will not have to go back to old solutions.


Comment 9 by JC Anderson posted on 9/7/2007 at 12:31 AM

I know I'm late to the party on this, but I've noticed that when you specify a bgcolor and color, the header becomes more rounded and the text gets pushed closer to the border. If you don't specify any styles, it stays silver, white font, a more square header with a slight amount of margin space.

Now, the question is, how do you change the colors and retain the shape and margin in the header?

Comment 10 by Raymond Camden posted on 9/7/2007 at 1:01 AM

I believe I saw that as well. Not sure how to solve it. You could try to set theshape/margin to what is there by default.

Comment 11 by Josh posted on 4/3/2008 at 3:56 AM

Is there a way to dynamically size these things (width)?
You can't put a width in as a percentage so I'm curious if there is another way.

Comment 12 by Raymond Camden posted on 4/3/2008 at 4:47 AM

Not sure Josh. Maybe try with CSS.

Comment 13 by Reeya posted on 5/29/2008 at 5:21 PM

Is there a way to refresh this CFPOD through JavaScript? and not reload the whole page to attain the refresh?

Comment 14 by Raymond Camden posted on 5/29/2008 at 5:23 PM

Yes, use ColdFusion.navigate. It is a JS function.