[Looking for Charlie's main web site?]

I-Spry Part 3: Some easy mistakes (I hope you will now avoid)

Note: This blog post is from 2006. Some content, links and indeed comments from others may be outdated--though not necessarily. Corrections are welcome, in the comments. I may revise the content if 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):

<?xml version="1.0" encoding="utf-8"?><br>
   <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.

For more like this:

Comments
nice tips. I found a tool in the Spry zip called DataSetExplorer.html in the samples directory. This allows you to browse a XML set as the Spry framework would see it and it builds your XPath string too. Nifty.

DK
# Posted By Douglas Knudsen | 7/11/06 9:56 PM
Doug, thanks. I did mean to mention that. Part of my hesitance was that I found several problems with it, both in terms of using it when served from IIS and also even some curiosities regarding how it works differently in IE and FF (regardless of the server). You can read the thread (and the agreement from Adobe folks and others that there is indeed a problem) at:

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.
# Posted By Charlie Arehart | 7/12/06 11:30 AM
Charlie:

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
# Posted By Bruce | 7/12/06 12:51 PM
Hi Bruce, thanks for that. Glad it may help. As for your question, I don't know the answer, but I would recommend the forums at the adobe labs site. Folks there are quick to respond. You can even search the spry forums easily for date and may well find a ready answer. I know I saw some discussion of date handling issues. Just can't recall if it was in your specific area of interest.
# Posted By Charlie Arehart | 7/12/06 2:16 PM
For the date question, you can put the following code in a simple function:

<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>
# Posted By Teddy R Payne | 7/12/06 3:16 PM
This date function is great. I wonder if you can help me? How do I apply it to a Spry data field? I currently have the code:

<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
# Posted By Mark Chapman | 8/9/07 6:38 PM
Mark, your question is directed to Teddy who'd offered the date function last year, right? If he doesn't reply (he should get the email notification of a new comment like everyone else), drop me a note directly and I'll get word to him to come give this some attention.
# Posted By Charlie Arehart | 8/9/07 10:59 PM
I have been working on a similar thing and make use of the following code to make the conversion. This works for a spry data table hence the inclusion of ds_CurrentRowID to make an unique table cell id; hope this helps
<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>
# Posted By Paul Barber | 8/13/07 12:20 PM
Many thanks Paul, with a few minor tweaks it worked fine with my Spry table.

Mark :-)
# Posted By Mark Chapman | 8/13/07 4:44 PM
Hello. I was looking for a solution to formatting the pubDate data in a test I made recently. I wanted to put recent post from my blog in the home page of my site and I could make it thanks to rss and the spry function. But I can´t do the code works. I´m not a code master, and, altought I understand something about it, I can´t find the problem. This is my code:

<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.
# Posted By Matías Corado | 12/15/07 2:15 AM
Hi Matías (and others posting questions here), I'd like to point out that there really is a better place, the Adobe Spry forums:

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.
# Posted By Charlie Arehart | 12/15/07 1:34 PM
Charlie, thanks. I really apreciate your answer. I thought that the code I posted was enough to resolve the problem because I want to format the codes as Mark does. I also modified (sorry is this verb isn´t right) the feed-rss2.php archive in the wp-includes folder in the lines where the code date data is. But it doesn´t work. Thanks for the recommendation, I will post the link in the Adobe forums trying to find a solution.

Grettings, Matías.
# Posted By Matías Corado | 12/15/07 11:46 PM
Thanks for putting this information out for those of us that are new to Spry. I made this exact mistake (had channel/title but it needed to be rss/channel/title). Great minds think alike! I'll be back to see what else you find before me and try and pass the help forward.

Terrific!
# Posted By Richard | 12/17/07 3:47 PM
Hello. I´m back again. Well, I posted my problem at Adobe forums and I found a solution.
(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.
# Posted By Matías Corado | 12/30/07 12:37 AM
Hi. Its me...again.

Finally, in the Adobe forums a member post the solution.

I left you the answer.
http://www.adobe.com...

Matías.
# Posted By Matías Corado | 1/2/08 8:20 AM
Hi there,

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?
# Posted By Wayne Atherton | 7/28/08 3:57 PM
Wayne, I don't have an answer for you (as I've not used Spry in quite a while). I would doubt many would see your question here. I would recommend instead that you ask it on the Spry forums: http://www.adobe.com...
# Posted By Charlie Arehart | 7/28/08 4:29 PM
Copyright ©2019 Charlie Arehart
Carehart Logo
BlogCFC was created by Raymond Camden. This blog is running version 5.005.
(Want to validate the html in this page?)

Managed Hosting Services provided by
Managed Dedicated Hosting