Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have created our XSL transfer page we are going to perform a client-side XSL transformation. Now to do that we will need to actually link this XSL template to one or more XML files. So even though we described it by using one XML file, if we have a series of XML files that are using the same tags, then we can simply link that XSL transfer sheet to each one of those files. So let's open up the XML file that we created earlier and we will use our transfer sheet on it. I am just going to roll up until I see my Files panel. So we need to open up the upcoming.xml file that we created earlier. So let's double-click on that to open it up and there is our XML file that we created earlier in our exercises.
To attach our XSL transfer sheet, Dreamweaver gives us a command. So if you are looking for this in the Insert menu or in one of the panels you are going to have a hard time finding it. So you want to go up to the menu and go to Commands at the very bottom. Every time you have an XML file open you are going to see this option Attach an XSLT Stylesheet. So we will go ahead and click Attach an XSLT Stylesheet. I am going to hit Browse and this is a lot like attaching a CSS Style Sheet, you can actually draw a lot of correlation between XSL and CSS. CSS was created to describe the presentation of XHTML and HTML, whereas XSL was created to help the transformation of XML.
So we will choose the upcoming shows XSL file that we created, so you want to browse into the XML folder, find upcomingShows.xsl and you want to click Choose, click OK and it doesn't look like a whole lot has changed. But if you look at the very top of the code on line number 2, we have a brand new tag there and it says xml-stylesheet and it gives an href attribute that points to that. Notice that it's document relative and then describes it as being an XSL sheet. So let's save that and now if we preview this in our browser we can see that it's going ahead and applying the transformation inside the browser itself. So it's going from XML to our formatted XHTML here on the browser side. So that's a client side transformation and that seems pretty easy to do. It didn't take very long to do.
So what are the pros and cons to do in this? Well, we have some limitations when dealing with client side transfers. First they only work on XML files that we control. So we can only do this on local XML files we can't do it on remote feeds and if you are trying to style an RSS feed you are not going to be able to use client side transformation. The other limitation is it only really works in modern browsers and that would be the latest versions of most DOM- Compliant standard browsers. Older versions of Netscape, older versions of Internet Explorer, this is not going to work inside of them. So we have a limitation there as well. So in next series of exercises will be to look at an alternative which is to do server-side transformation, along the way we are going to learn how to style an RSS Feed.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.