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!

21 Responses to FOTD 22: Dreamweaver 8 – XSLT Authoring

  1. Jack says:

    This rocks!! :D

  2. Indeed! I’ve been really loving this feature for a while now- it’s about time DW’s XML handling caught up to Flash a bit! :)

  3. John says:

    nice! I’ve considered adding these to DW7 manually but just never found the time. Looking forward to DW8!

  4. mark says:

    Hi Scott! is it possible to post the source code of tutorial above on your blog? By the way, thanks very much for your Studio 8 FOTD series. It’s been very helpful indeed.

  5. Hi, Mark-I can’t post any of the internal DW8 JS code (used for clientside previews/transforms), but the complete XSL code used in this tutorial can be downloaded here:Download XSL sample file(You’ll want to right-click/option-click and download the file to your hard drive before viewing it, of course.)Hope this helps- thanks for the good words!

  6. mark says:

    You are the man ~ Scott! Thanks a lot!!

  7. No problem, Mark! Hope you find it useful. :)

  8. Al Perreault says:

    Hi Scott,Thanks for this great article. I am very new to XSL so please be patient! I am using Dreamweaver 8, and have created the following XSL as per your example.]>This Week in Amateur Radio.style1 {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 18px;}This Week in Amateur Radio by  The questions that I had are:1) How do I make the text link into a hyperlink?2) Is there a way of only showing the top 3 news items?3) Is there a way of linking to the rest of the news items?4) Finally, how do I insert this into a regular html page… ie I would like to have a sidebar box on my html page with this info.Thanks again for your awesome articles…Ala Canadian newbie!

  9. Al Perreault says:

    Sorry about that, my code didn’t show up… I’ll try again: by  

  10. Hi, Al-Sorry, the comment areas here don’t accept markup (too many problems with misuse, apologies!) so won’t show up on the live site, though I can see your source on my end.Suggestions re: your questions:1) Just use the same XSLT/Xpath syntax to write the URL property into an <a href=”#your_URL_variable#”> tag to make a link- most direct way to do this is drag the URL property onto your page, then go into source view, cut/copy it’s dynamic parameter, then paste it into the anchor tag’s href attribute by hand. I believe you can also select the text in design view as usual, then drag the dynamic URL parameter over to the URL field in the Property Inspector too (although don’t have DW8 handy right now to check!).2) You can use XPath expressions to conditionally grab certain nodes/elements, or to pull back only (n) amount of them. If you intend to logically control what parts of the XML document are accessed and displayed, you’ll want to spend some time learning XPath to get an idea of what is and isn’t possible (your example of pulling back (n) number of children from a given XML node should be easily handled, however). Check out a XPath tutorial here going through the basics, to help get the ball rolling:http://www.w3schools.com/xpath/3) Linking to the rest of the articles in the XML document could be handled directly by building an XSL layout to handle it specifically, then linking to it directly. Basically it depends on how you want to build the ‘all articles’ listing page/view, then linking directly to it from your ‘summary’ page.4) As noted in the tip, you can create either an XSLT Page, or an XSLT Fragment in Dreamweaver 8. Sounds like a sidebar could be the latter (a fragment that’s included in another page). Honestly, I’d check out the tutorials/help pages in the Dreamweaver help system (search for ‘XSLT’ and you’ll get tons of references in the results)- there’s a lot of very specific walkthru information there that will help you get started on the basics! You can also check out this article on the Dev Center, which gives many more examples and walkthroughs for creating XSLT content:http://www.macromedia.com/devnet/dreamweaver/xml.htmlLots of content there to help get your feet wet- hope it helps out!

  11. Mark says:

    In your FOTD, you state:”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.”Where does the Javascript file reside in DW8 that you upload to a web server if your web server does not support XSLT?On another note, if you were running LAMP on a webserver, what would you recommend as an XSLT client for the server?

  12. Hey, Mark-The ‘extra’ files for XSL authoring should be created on your local site root in the ‘includes’ directory. For PHP, it includes the MM_XSLTransform.class.php file, assuming your PHP installation has XSLT support configured.Keep in mind that if you need to use client-side transformations, you have to have direct access to the XML file itself- as noted in the DW 8 manual, you’d then link that XML file to an XSL stylesheet, then call the XML file from your browser to display- not the XSL file. Slightly different workflow, and again – it won’t work for syndicated feeds like offsite, third-party RSS and Atom feeds. For those applications, you should use server-side transformations.If you’re using PHP 5, XSLT support is built in but may not be set by default, you can get more specifics on setting things up for server-side XSL development here (just uncommenting a line from your php.ini file):http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=5ca5614c#php_configHope this helps out!

  13. michelle says:

    This is nice. ^_^ Im just a business student & im very much interested doing blogs, can you tell me how can I use Dreamweaver for my future business?

  14. Hi, Michelle-I can’t really advise you on how to plan or run your future business, but if you’re interested in maintaining your own weblog, Dreamweaver can both help you edit blog templates – or if you’re enterprising, build your own blog. I’d recommend reading through some of the articles on the Dreamweaver developer center to get an idea of how it’s being used, and good tutorials for getting started:http://www.macromedia.com/devnet/mx/dreamweaver/

  15. edimensional says:

    I am trying to follow your tutorial on XSLT authoring. How did you get your content to format so nicely? When I try to preview the XSL file in IE, I get what looks like an XML representation of my code in DW, instead of dynamically populated fields in my table. Maybe we could have a look at your CSS file?

  16. Hi, e-Honestly I don’t have that CSS file around anymore- but it wasn’t particularly verbose or tricky. I simply styled the table/page as I normally would without dynamic data (just did it to a single row as the ‘repeat rows’ comes from the XSLT transform), then added the XSLT transforms in. No special trickery involved whatsoever. If you’re still running into issues previewing, please post your code and let me take a look at it (although I’m pretty busy on the road this month, so there may be a significant lag time involved with me looking at it personally- Tech Support is a far faster option… ;-)

  17. Fred says:

    Hi Scott, I’m from brazil.It’s great tutorial. I read your article at macromedia web site > XML in the Real World.I would like to know how to display these data at my server. I used xsl entire document.In Short, what I need to finish your tutorial and display the news your blog at my site?tks

  18. Hi, Fred-Basically you need to configure your server to parse the XSL document. I’d suggest starting with the FAQ here:http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=5ca5614c… and then also checking out these tutorials for more details:Displaying XML DataOn-Demand Seminar – DW 8 XML featuresXSL FragmentsAnd of course, refer to the XML/XSL developer center here (another good article on configuring PHP servers for XML/XSL parsing is within, if I recall correctly).Hope this helps out!

  19. Mark says:

    Sorry to sound like a newbie but is there anyway to insert a fragment into an HTML page without needing a dynamic page?

  20. Ben Plewes says:

    Hi Scott, thanks for your words of wisdom, very helpful.After reading your advice to Al Perreault (first point), I’m still having difficulty making any dynamic links with the a href command. Can you shed any further light on this?Thanks in advance.BenPS everything else is working nicely.

  21. Mark – you’ll need server-side trickery for that, as HTML is parsed a specific way by most all web servers/browsers, and wouldn’t otherwise know how to parse the XSLT fragment itself if HTML is the base file.Ben- I’d just drag the property for the URL itself into code view, into the href=”” double quotes for the link. You can’t do this in design view, alas.