FOTD 22: Dreamweaver 8 – XSLT Authoring

Syndication is one of the most rapidly-growing themes online these days, and I’ve personally used RSS and Atom feeds to browse and aggregate content from the blogosphere, news sites, podcast directories, TV listings and many other sources quickly and easily in Flash (using its XML features) as well as with some server-side tricks. And now with version 8, Dreamweaver speaks XSLT authoring- allowing you to really do something with all those XML documents and site feeds you’ve been collecting. Roll up your sleeves, this FOTD will be a doozy (and it’s relatively certain I’m only going to scratch the tip of this iceberg).


An XSL document can be an entire document, or just an XSL ‘fragment’ that’s included/embedded in an existing HTML page. If you look at XML (and it’s derivative content types, such as RSS, RDF and Atom syndication feeds) as strictly your content, and XSLT as strictly your presentation, you’ve got the rote basics. Now let’s say you want to provide users on your site with a listing of the most recent posts and FOTDs I’ve written here. Let’s start by creating a new XSLT document (entire page) by choosing “File < New…”, and noting the two new XSLT document types in the template list:

new_file_types.gif
The new XSLT document types-
(XSLT – Entire Page & Fragment)

As noted earlier, an XSLT document is a fully-formed document that you create to display a particular XML schema, and an XSLT fragment is for small news pods, lists, etc. that are to be displayed in an existing HTML page. In this case we want to create an entire page listing the current entries from my weblog, as published via its XML-based RSS 2.0 feed.Let’s dive in. After creating my new XSLT (entire page) document, I’m immediately asked to show Dreamweaver a sample document- either locally (on my computer) or remotely via the network. I’ll use the URL for my RSS 2.0 feed here as the basis for this new page:

locate_xml_source.jpg
Locate XML Source dialog

After entering the URL and clicking ‘OK’, you’ll note the ‘Bindings’ tab of the Application panel is now updated with the schema of my XML/RSS feed- much like dynamic application development, this represents the heirarchical levels of data in my feed- both ‘global’ data variables that represent my ‘blog itself – its title, the link to it’s home page, description, copyright information, etc. – along with variables that are different for each content ‘item’ in my ‘blog, such as title, description, permalink, category, etc. The top-level container is ‘RSS’- the actual schema used in my RSS 2 file.Wanna see?

xml_bindings_panel.jpg
My RSS file’s schema

From here, let’s do a quick test. I simply drag the channel ‘title and ‘lastBuildDate’ into a sentence I’ve already typed into Dreamweaver’s design view as so:

global_vars_before.jpg

… and when previewing in my browser, it becomes…

global_vars_after.gif

Nice and easy!I’ve just dynamically updated the content in that page based on the ‘blog description and last update time in my live RSS feed. Are the potentials here becoming obvious yet? If not, let’s take it a step further.We just updated the page itself with the singular title and ‘last modified’ date from my ‘blog, but what about variables in my XML schema that repeat- i.e. the variables underneath the ‘item’ node, which represent data in the posts themselves? Well, they’re handled much like repeating regions in your favorite Dreamweaver server models- you need to set up an area that repeats, and then populate it with the dynamic data. First, I’m going to create a table to hold the sequential ‘blog postings themselves- but just build out one entry as a ‘mockup’ like so (table borders left in place to help clarify):

item_vars_before.gif
Starting ‘dynamic’ XSL view

Now I’m assuming that these three table rows will repeat for each ‘blog post (item) in my RSS feed, so we need to tell Dreamweaver what part of the page actually repeats so it can do the heavy lifting! Since the three consecutive table rows will repeat, I’ll just drop into Code View, select all three <tr> rows, and then select the menu option “Insert < XSLT Objects < Repeat Region”, which brings up the XPath Expression Builder (although I won’t get into it in this FOTD, XPath is how you write expressions to conditionally interact with your XML data, very powerful):

repeat_region.gif
Selecting the table rows to loop, and then…
xpath_xbuilder.jpg
Binding them to the ‘Item’ node for looping

This will simply tell Dreamweaver to write those three rows for each ‘item’ in our RSS file, using specific values from each post to do so. We just did the first part (set up the repeating 3-row region), now let’s finish the job by dragging the appropriate variables (title, description, link, date) from our Bindings Panel into the comp we’ve created replacing our ‘boilerplate’ text- and hit Preview in Browser to see it in it’s full glory:

final.jpg
The final XSL page

And that’s all there is to it- with Dreamweaver 8 you can quickly consume XML data, bind it to areas of your document, and display it dynamically on your site. A few points to note:

  • This FOTD does not cover server-side transformations, which are possible as well w/DW 8, but require your server to be configured with XSLT support.
  • Despite the above, Dreamweaver will still let you perform client-side XSLT transformations using an included Javascript file (DW 8 will provide it, no worries) that you simply upload to your web server alongside your XSL document/fragment.
  • Although we just showed a very basic example here, with the power of XPath you can build very complex logic around your XML datasources, allowing very involved applications without a traditional ‘server model’!

Anyway, as mentioned in the first paragraph, I’m barely scratching the surface of what you can do with XML and XSL in Dreamweaver 8- but the possibilities are endless. Don’t forget you can also consume XML data in Flash 8 (but that’s not necessarily news), too.See you tomorrow for another FOTD!