|
Spry's Cool HTML Panel
By Raymond Camden
Expert Author
Article Date: 2007-11-06
A few days ago I blogged about Spry's HTML panel. This is a rather cool, and simple, way to load content into a region of your web page via Ajax.
Kin Blas of the Spry team pointed out that I missed one of the cooler features - States. Spry's Data Set feature includes a simple way to handle error and loading states. You can use some specially named DIVs and Spry will handle hiding/showing what it needs to. Turns out - the HTML panel system supports the same thing! Let's look at an example.
First off - here is a simple HTML page, based on the versions I worked on in the earlier example:
<html>
<head>
<script src="/spryjs/SpryHTMLPanel.js" language="javascript" type="text/javascript"></script>
<link href="/sprycssSpryHTMLPanel.css" rel="stylesheet" type="text/css">
<style type="text/css">
.HTMLPanelLoadingContent, .HTMLPanelErrorContent {
display: none;
}
</style>
</head>
<body>
<h2>State Test</h2>
<p>
<b>
<a href="htmltest.cfm?slow=likeparis" onClick="panel.loadContent(this.href); return false">Test Slow</a> /
<a href="htmltest.cfm?bad=likelindsey" onClick="panel.loadContent(this.href); return false">Test Error</a> /
<a href="htmltest.cfm" onClick="panel.loadContent(this.href); return false">Test Good</a>
</b>
</p>
<div id="panel">
<p>
Please click something!
</p>
<div class="HTMLPanelLoadingContent">Plesse stand by - loading important content...</div>
<div class="HTMLPanelErrorContent">Something went wrong. I blame Microsoft.</div>
</div>
<script type="text/javascript">
var panel = new Spry.Widget.HTMLPanel("panel");
</script>
</body>
</html>
The first thing I want to point out is 2 new CSS elements: HTMLPanelLoadingContent and HTMLPanelErrorContent. I manually set their display to none. (I'm not sure why these aren't defined in SpryHTMLPanel.css) Next look at my links:
<a href="htmltest.cfm?slow=likeparis" onClick="panel.loadContent(this.href); return false">Test Slow</a> /
<a href="htmltest.cfm?bad=likelindsey" onClick="panel.loadContent(this.href); return false">Test Error</a> /
<a href="htmltest.cfm" onClick="panel.loadContent(this.href); return false">Test Good</a>
For my demo I linked to the same page 3 times, with different URL parameters in each one. I've got a 'slow' test, an error test, and a simple good test. Next look in my panel. I added 2 new DIVs:
<div class="HTMLPanelLoadingContent">Please stand by - loading important content...</div>
<div class="HTMLPanelErrorContent">Something went wrong. I blame Microsoft.</div>
The rest of the code is not changed. Spry will notice these 2 classes on load and when the specific state occurs (loading content, or an error), it will show and hide the divs. Pretty simple, right? The CFM code is nothing complex:
<cfif structKeyExists(url, "slow")>
<cfset sleep(2000)>
</cfif>
<cfif structKeyExists(url, "bad")>
<cfthrow message="Holy errors, Batman!">
</cfif>
<cfoutput>
Here is the CFM page. It's Business Time!
</cfoutput>
As you can see, I simply check for the URL parameters and either intentionally slow the page down or throw an error. You can see a live demo of this here.
Comments
About the Author:
Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com
Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.
|
|
