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? :)
Archived Comments
Ray: Where did the smooth corners in demo 3 come from ???
It looks like they all have rounded corners, but maybe my colored one simply shows it off more?
You are right Ray they may not be the most exciting thing in CF8 but they can be useful.
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?
Thanks
Andrea
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.
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.
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.
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.
Andrea
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?
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.
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.
Not sure Josh. Maybe try with CSS.
Is there a way to refresh this CFPOD through JavaScript? and not reload the whole page to attain the refresh?
Yes, use ColdFusion.navigate. It is a JS function.