I-Spry Part 3: Some easy mistakes (I hope you will now avoid)
Note: This blog post is from 2006. Some content may be outdated--though not necessarily. Same with links and subsequent comments from myself or others. Corrections are welcome, in the comments. And I may revise the content as necessary.As I explore Spry, one of the first demos I tried to write from scratch--rather than use code from an existing demo--was an experience that taught me a couple of lessons I now want to share with others.
(As suggested in the entry's title, this is part of a series I'm doing on Spry. Be sure to check out the other entries.)
Make sure you understand your XML
I made a mistake of trying to eyeball an XML file's layout to determine the nesting needed to create the XPath value for the XMLDataset constructor. Oops.
[If you're new to Spry, I've likely just gotten way over your head! This entry is for those already checking it Spry. Newcomers should leave right now and go check out the "bolded" resources I point to in my Spry compendium for that sort of help....Go on. I'm serious! You won't appreciate the rest otherwise! :-)]
I was looking at an RSS stream that looked like this (abbreviated):
<rss version="2.0"><br>
<channel><br>
<title>Blogname</title><br>
<item><br>
<title>Blog entry 1</title><br>
So I thought that the "rss" element was outermost and the rest, including my desired "title", were all children, so I set the xpath to be rss/title. And I got no generated output from Spry. Doh! It should have been rss/channel/title.
Here's a tip: open the desired XML file with some tool that shows you the XML in a nested tree structure. Perhaps easiest, you can just open the file using IE or Firefox (as of 1.5), which will show it using a special stylesheet that renders the XML in a nested structure.
Of course, if the destination you try to open doesn't respond with pure XML, you won't even be able to open it effectively with such tools, which will tell you that you have another problem (like forgetting to turn off debugging if generating XML from CFML, or forgetting to cause the CFML page to change the mime type to text/xml. More on both of those mistakes in a later entry).
Don't use spry:region on Table tag
Interested in creating an HTML table? OK, no noise please from the CSS crowd. Some of us old-timers are slow to the party or just don't gravitate to it for quick testing.
Anyway, I mistakenly assumed that if I wanted to create a table of multiple rows that I would just add the spry:region tag to the Table tag. I figured that since I would naturally want the spry:repeat on the TR tags, I should put the enclosing spry:region on the enclosing TABLE tag. Wrong! Should have RTFM.
Ok, I did. I just missed that. It clearly says in 2 of the key introductory articles that TABLE tags are one of many on which you are not to use spry:region. More important, the excellent Dynamic Table Tutorial also clearly shows how it's to be done.
You want to wrap the table, in a DIV for instance, and put the spry:region there. If you don't, you don't get an error. You just don't get any of the content you expected to be dynamically generated (which could appear to be a blank page or portion, depending on what you're doing).
Don't mistake spry:repeatchildren for spry:repeat
Similarly, I made another mistake when I copied a line of code to do the repeat, and I used code from an example that used spry:repeatchildren, rather than spry:repeat. Doh!
The Spry Data Set and Dynamic Region Overview says it best in describing the two:
One allows you to repeat an element and all of its content for each row in a given data set (spry:repeat), and another that allows you to repeat all of the children of a given element for each row in a given data set (spry:repeatchildren)
I have lots of other tasty tidbits to share, but they're more general than these related to me trying to write code from scratch.
DK
http://www.adobe.com...
I was thinking I may blog about it, because you're right that it would have been another useful approach to exploring the XML.
Thank you for posting all this information on Spry. I'm using it in several pages on our company's intranet. It's much simpler to build a dynamic table that is sortable by each column using Spry than just using coldfusion.
One challenge I have is formatting the dates in my table. The date returned in the XML is a long date ( 2006-05-08 00:00:00.0 ) and I want to display it in the table like 5/8/2006.
I can't use the CF dateFormat() function since the value for the date is not provided on the server where CF can use it.
I though of writing a JavaScript function to return the date in the format I want but that seems like some work since I'm not a JavaScript guru.
I was wondering if Spry has any date formating functions built in?
Thanks Again,
Bruce
<script language="javascript" type="text/javascript">
function UTC2Western(strUTC)
{
// Seperate the UTC into two parts: Date and Time, the separator is a space
var datePiece = strUTC.split(" ");
// Take the date part of the UTC and break it into 3 parts: year, month, day
var dateArray = datePiece[0].split("-");
// Rearrange the date to mm/dd/yyyy
var dateRearranged = dateArray[1] + "/" + dateArray[2] + "/" + dateArray[0];
return(dateRearranged);
}
// UTC Time
var dateTime = '2006-05-08 00:00:00.0';
var dateReturned = UTC2Western(dateTime);
alert(dateReturned);
</script>
<div spry:region="ds1">
<table class="tbl_standard_layout">
<tr class="tbl_row_header">
<th spry:sort="title">Theme</th>
<th spry:sort="pubDate">Date</th>
<th spry:sort="itunes:subtitle">Title</th>
<th spry:sort="itunes:author">Author</th>
</tr>
<tr spry:repeat="ds1" spry:setrow="ds1" spry:odd="tbl_row_alt_line" spry:even="tbl_row_line">
<td>{title}</td>
<td>{pubDate}</td>
<td>{itunes:subtitle}</td>
<td>{itunes:author}</td>
</tr>
</table>
</div>
and want to reformat the {pubDate} field using your function.
many thanks
Mark
<tr>
<td><b>Creation Date:</b></td>
<td id="DateCreated{ds_CurrentRowID}"> {DateCreated}
</td>
<script type="text/javascript" language="javascript1.2">
{
var strUTC = '{DateCreated}';
// Take the date part of the UTC and break it into 3 parts: year, month, day
var dateArray = strUTC.split("-");
// Rearrange the date to dd/mm/yyyy
var dateRearranged = dateArray[2] + "/" + dateArray[1] + "/" + dateArray[0];
var elTab = document.getElementById('DateCreated{ds_CurrentRowID}');
elTab.innerHTML = dateRearranged;
}
</script>
</tr>
Mark :-)
<div spry:region="ds1">
<small>{pubDate}</small>
<h2><a href="{link}" rel="bookmark" title="Permanent Link: {title}">{title}</a></h2>
{content:encoded}
</div>
And the date data looks like this:
Thu, 01 Jun 2006 23:00:00 +0000.
If you can help, I will really apreciate it. Thanks a lot.
Grettins, Matías
pd: sorry for my bad english.
http://www.adobe.com...
They're free, and you'll find a very active community (several questions asked and answered this week).
I appreciate that a google search may have led you to my blog entry here, and I understand the pain of feeling "alone" when trying to solve problems, but I really recommend the forums both as the place to find fellow Spry users and as well the better way to get help. Thanks.
BTW, Matías, it will help when you do post to the forum to provide more info on the data you're retrieving, as well as the error you're getting, so that people can help understand your problem.
You may also want to indicate if you've run any tests of other working examples and how your attempt differs from those. The problem may have nothing to do with your code but instead your environment. If you can't run working examples provided by Adobe, then you know you've got larger problems to resolve that are not about code.
Grettings, Matías.
Terrific!
(here is the post from wich I take the code http://www.adobe.com...
But now, I want to display the month in numbers and not in letters. I guess that now the problem is the date format. I want an UTC format and the format in the feed-rss2.php archive in my blog is in GMT.
I modified the lines of code that format the date in this archive. I changed the GMT for UTC2Western, tried changing the day, month and year format, but nothing happened.
The part of code without modifications is below:
<description><?php bloginfo_rss("description") ?></description>
<pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_lastpostmodified('GMT'), false); ?></pubDate>
<generator>http://wordpress.org... bloginfo_rss('version'); ?></generator>
<language><?php echo get_option('rss_language'); ?></language>
<?php do_action('rss2_head'); ?>
<?php while( have_posts()) : the_post(); ?>
<item>
<title><?php the_title_rss() ?></title>
<link><?php permalink_single_rss() ?></link>
<comments><?php comments_link(); ?></comments>
<pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
)
The link to the rss channel of my blog is this
http://www.visualqui...
The link to the test in wich I use the spry method is
http://www.visualqui...
And the code of this page look like this:
<html xmlns="http://www.w3.org/19..." xmlns:spry="http://ns.adobe.com/...">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("http://www.visualqui...", "rss/channel/item");
// convert and format pubDate
function filterMyData(ds, row, rowNumber) {
var myData = row['pubDate'];
da = new Date(myData) // create a date object set to the RSS pubDate
db = da.toGMTString() // convert to a string
dc = db.split(" ") // split the string on spaces
// Wed 19 Jan 2007 01:30:00 -0700
// [0] Day of week
// [1] Date
// [2] Month
// [3] Year
// [4] Time
// [5] GMT zone
dd = dc[1] + "." + dc[2] + "." + dc[3]; // format date
row['pubDate'] = dd;
return row;
}
ds1.filter(filterMyData);
ds1.setColumnType('pubDate','date');
//-->
</script>
</head>
<body>
<div spry:region="ds1">
<small>{pubDate}</small>
<h2><a href="{link}" rel="bookmark" title="Permanent Link: {title}">{title}</a></h2>
{content:encoded}
<p>publicado en / <em>posted in</em> {category}</p>
<table>
<tr>
<th>Title</th>
<th>Link</th>
<th>Comments</th>
<th>PubDate</th>
<th>Dc:creator</th>
<th>Category</th>
<th>Guid</th>
<th>Guid/@isPermaLink</th>
<th>Description</th>
<th>Content:encoded</th>
<th>Wfw:commentRss</th>
</tr>
<tr>
<td>{title}</td>
<td>{link}</td>
<td>{comments}</td>
<td>{pubDate}</td>
<td>{dc:creator}</td>
<td>{category}</td>
<td>{guid}</td>
<td>{guid/@isPermaLink}</td>
<td>{description}</td>
<td>{content:encoded}</td>
<td>{wfw:commentRss}</td>
</tr>
</table>
</div>
</body>
</html>
Once I get the month format I want, I will eliminate the table and only display the data in divs.
Well, thats all...I hope you can help me.
Best wishes and happy new year.
Grettingd, Matías.
ps: Sorry if I make some grammar mistakes.
Finally, in the Adobe forums a member post the solution.
I left you the answer.
http://www.adobe.com...
Matías.
sorry to jump on the end of this post..
I am using Dreamweaver CS3 Spry Accordion region with it's data coming from an xml file. If I change/add another branch to my xml file, my accordion does not update. Is this a Dreamweaver issue, or something more to do with the Spry widget?