Posted in ColdFusion | Posted on 03-01-2007 | 3,723 views
For those who didn't want to stay up till Midnight to hear me present on Spry (what's wrong with you!), David of the Auckland CFUG has sent me the recording URL:
http://adobechats.adobe.acrobat.com/p92687048/
I've attached the files/zip to the blog entry.
Thanks for posting the recording, I was asleep by the time you started last night...
What is the ColdFusion button in your Firebug frame?
Of course we had it easy for a change, what with it being in the afternoon N.Z and Aust. times....
I came across this post on the spry board providing some excellent insight on the caching of paged data sets from XML using spry:
http://www.adobe.com/cfusion/webforums/forum/messa...
Also an article by Andrew Powell on using cfheader to clear it out as well:
http://www.infoaccelerator.net/index.cfm?event=sho...
Sorry if its somewhat off topic, but it threw me off for a bit since it worked in the fox fine. #@$ IE. :)
Regarding step 4:
When I loaded this the first time, the pictures were red X's until they loaded.
Subsequent visits loaded instantly.
It reminds me of the @import CSS bug where the screen flashes before applying the CSS.
But the good news is that this means that Spry doesn't have to load everything before starting to display.
I would change
<b style="cursor: pointer;">{name}</b><br />
to
<a href="#">{name}</a><br />
to simplify the example.
If people balk at using a href="#" because it would throw them to the top of the page, you could use
<a href="#" onclick="aFunction();return false;">{name}</a><br />
But that's muddying the example.
But I think making the names hyperlinks is a better practice than using the (deprecated) bold element with an inline style.
Wow! I'm actually talking coherently about some of this stuff!
Here's how I reformatted step4:
<style type="text/css">
h2 {
margin-top:0;
}
#bio{
float:right;
}
#List {
float:left;
}
</style>
</head>
<body>
<div id="List" spry:region="mydata">
Please click on one of the names below for more information:<br>
<div spry:repeat="mydata" onClick="mydata.setCurrentRow('{ds_RowID}');">
<a href="#" onclick="aFunction();return false;">{name}</a><br />
</div>
</div>
<div id="bio" spry:detailregion="mydata">
<h2>{name}</h2>
{name} is {age} years old and is a {gender}
<img src="{picture}" align="left">
</div>
{name}
you can do:
<span spry:content="{name}"></span>
This will be hidden by default, and when the content is loaded, it will show up. This gets rid of the "Spry Flash".
The other columns would have to have their image turned off as well.
And of course, is there any way to select more than one column to subsort, or rearrange columns?
Probably not, especially while trying to keep the examples simple.
No - Spry sorts by one column only now (afaik).
<span spry:content="{name}"></span>
Are you saying I should replace
<img src="{picture}" align="left">
with a spry:content attribute somewhere?
And Tab/Index.html is empty.
<b>{name}</b>
I'd do
<b><span spry:content="{name}"></b>
So me bringing it up was dumb. ;) But I wanted you to see it anyway. There is ANOTHER way of doing it though. Add class="SpryHiddenRegion" to your image tag, and then add:
<style>
.SpryHiddenRegion {
visibility: hidden;
}
</style>
Spry looks for this class and removes it. Unfortunately, it has to apply to a div with a spry:region, but you could use this to hide the block that has the image.
BJW - Look at the presentations tab on top of the web site.
I didn't use tag/index.html in the preso, so ignore it. ;)
Could you try it again?
I noticed while I watched it, the presso was a bit stop start.
But when I go the end of the presso it works ok...
[Add Comment] [Subscribe to Comments]