Posted in | Posted on 11-06-2007 | 4,477 views
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:
2
3<head>
4 <script src="/spryjs/SpryHTMLPanel.js" language="javascript" type="text/javascript"></script>
5 <link href="/sprycssSpryHTMLPanel.css" rel="stylesheet" type="text/css">
6 <style type="text/css">
7 .HTMLPanelLoadingContent, .HTMLPanelErrorContent {
8 display: none;
9 }
10 </style>
11</head>
12
13<body>
14
15<h2>State Test</h2>
16
17<p>
18<b>
19 <a href="htmltest.cfm?slow=likeparis" onClick="panel.loadContent(this.href); return false">Test Slow</a> /
20 <a href="htmltest.cfm?bad=likelindsey" onClick="panel.loadContent(this.href); return false">Test Error</a> /
21 <a href="htmltest.cfm" onClick="panel.loadContent(this.href); return false">Test Good</a>
22</b>
23</p>
24
25<div id="panel">
26<p>
27 Please click something!
28</p>
29<div class="HTMLPanelLoadingContent">Plesse stand by - loading important content...</div>
30<div class="HTMLPanelErrorContent">Something went wrong. I blame Microsoft.</div>
31</div>
32
33<script type="text/javascript">
34var panel = new Spry.Widget.HTMLPanel("panel");
35</script>
36</body>
37</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:
2<a href="htmltest.cfm?bad=likelindsey" onClick="panel.loadContent(this.href); return false">Test Error</a> /
3<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:
2<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:
2 <cfset sleep(2000)>
3</cfif>
4
5<cfif structKeyExists(url, "bad")>
6 <cfthrow message="Holy errors, Batman!">
7</cfif>
8
9<cfoutput>
10Here is the CFM page. It's Business Time!
11</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.
www.youtube.com/watch?v=WGOohBytKTU
:-)
Troy
http://www.youtube.com/watch?v=WGOohBytKTU
Troy
Is there anyway to dynamically create this regions? pretty much like the cflayout can? (cant see this on the livedocs)
Thanks for this site, its a great.
You can add a new DIV via JS, so sure, you could make the region on the fly if you had to.
Although you could make the region on the fly in JS, it would be more complicated to do so, and I really do not see the benefit. Could you give a reason why or an example where it would make more sense to do so?
The beauty of this solution, and Spry in general, is that it mostly controlled via CSS styles with attached behaviors. Creating the div on the fly based on some server results or timing would be moving *slightly* away from one of the main goals of Spry.
I assume I can create this regions inside the tabs. Is nothing I am working on, Im just wondering.
It's nice that spry takes that next step for you and uses HTMLPanelLoadingContent and HTMLPanelErrorContent names as a convention to know those should be hidden or shown when necessary.
Loaded content on the HTML panel cant have Spry has well?
{ evalScripts: true }
[Add Comment] [Subscribe to Comments]