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? :)