Section 24.3. Creating Dynamic Pages with XSLT and XML


24.3. Creating Dynamic Pages with XSLT and XML

The most effective way to use XML in your site is with Dreamweaver's XSLT server behavior. It processes all of those "X" files and produces nothing but clean HTML for your visitors . To take advantage of this feature, you'll need to set up an application server, as described in Chapter 20, so that you can run ASP, PHP, JSP, .NET, or ColdFusion pages with the necessary programming code.

Next , you need to either have an XML file in your site, or know the URL of an XML file out on the Web that you'd like to usefor example, http://www.nationalexasperator.com/news.xml. Then you create an XSLT style sheeteither by creating a new, blank XSLT style sheet or by converting an already created HTML file into a XSL file, as explained starting on Section 24.2.

FREQUENTLY ASKED QUESTION
Finding XML Files

XML sounds great. But, where do I get these XML files ?

XML files have to be written either by hand or, very frequently, by a computer program. Dreamweaver lets you create your own XML files, but since XML is just a bunch of code, and isn't a "visual" language like HTML, you have to use Dreamweaver's Code view and type everything yourself. Dreamweaver 8's new tools don't make creating XML files much easier; they just let you convert an already existing XML file into something nice to look at in a Web browser.

While you may already be writing your own XML files, or plan on doing so, you'll more likely find them as part of your company's documentsmore and more information is saved as XML these daysor as the output from a computer program. In fact, XML is most commonly encountered on the Web in the form of a "feed" like RSS or Atom, containing summaries of Web articles, blog entries, or news stories. You'll usually find these listed as "RSS," "Feeds," or "XML" on a Web site. The tutorial on Section 24.6 demonstrates how you can use Dreamweaver 8 to incorporate these types of XML files into your Web site.



Note: PHP note : For server-side XSLT to work, the version of PHP you're using must have XSLT support. PHP 5 has this capability built in, but PHP 4 requires extra work to get this going. Unfortunately, most Web hosting companies still use PHP 4, and most of those don't offer XSLT support. So before moving ahead with your XML-fueled dynamic-page-creation efforts, call or email your Web hosting company to see if their PHP installation supports XSLT.

In addition, you can create what's called an XSLT fragment , which lets you add a " chunk " of formatted XML to just one part of a dynamic page. For example, say you want to list the top 10 headlines from CNN.com's RSS feed (see the note on Section 24.1) on your home page. Using Dreamweaver, you can transform the news feed from XML into HTML code. Of course, that won't be the only thing you want on your home page. Most of the page will consist of information related to your site. In this case, you only need to dedicate a fragment of the pagea sidebar on the right edge of the page, for exampleto these headlines.

The process for creating and inserting an XSLT fragment is simple: create the fragment, add and format XML information, open a dynamic page, and then insert the XSLT fragment into it. When your visitors view the dynamic page, the application server will process the XSLT fragment and add its contents to the rest of the page.

Here's how to create and use an XSLT fragment:

  1. Choose File New .

    The New Document window appears.

  2. Make sure the General tab is selected; click the Basic Page category, select XSLT (Fragment), and click the Create button .

    The Locate XML Source window appears (Figure 24-1). Because XSLT is meant to make an XML file look great, you need to tell Dreamweaver which XML file to use. You have two choices when working with server-side XSLT: select a local file or type the URL of an XML file out on the Web.

  3. Select either "Attach a local file " or "Attach a remote file on the Internet."

    If the XML file is on your site, choose the first option. Select the second option if the XML file is on another Web site.

  4. If you're using an XML file on your site, click the Browse button to locate the file. Otherwise, type an absolute URL http://www.the_site.com/xml_file.xml , for examplein the box. Click OK .

    If you're pointing to a file out on the Internet, you must use a full, absolute URL including the http:// part. Dreamweaver finds the file in your local site (or looks for the file out on the Internet), reads its contents, and displays the file's tags and properties in the Bindings panel. At this point, jump to Section 24.4 to learn how to add XML data to the page.


    Note: If you want to try this out for fun, you can load an XML file from Wired.com. Use this URL: http://www.wired.com/news/feeds/rss2/0,2610,,00.xml.
  5. Save the new XSLT style sheet fragment .

    Make sure the file ends in the extension .xsl. In addition, make sure you save it in the same folder as the dynamic page you wish to attach the XSLT style sheet fragment to. Otherwise, if the style sheet contains links, graphics, and other linked elements, they may not show up when the XML file is viewed .


    Tip: One way to get around this limitation of needing to store everything in the same folder is to use root-relative or absolute URLs (see Section 4.1.2) for links, and to add graphics and external CSS files to your XSLT style sheet. Of course, taking these steps is probably more work than simply saving the XSL file in the same folder as your dynamic Web page.
  6. Add XML elements to the XSLT style sheet as described on Section 24.4 .

    You can also add regular Web page contentlike images, tables, CSS styles, and so onto the page, and format the XML just as you would text on any other dynamically generated page. Once you've finished the design of your XSLT fragment, you then add it to your dynamic Web page.


    Note: Because the XSLT fragment will be part of a larger Web page, you won't be able to see the effects of that page's CSS styles as you format your XML data. Fortunately, if you're using external CSS style sheets, you can use Dreamweaver's Design Time Stylesheets feature to temporarily attach, preview, and use the same CSS styles you're using on your final Web page. See Section 6.4 for instructions.
  7. Open the dynamic page that you wish to add the XSLT fragment to .

    This must be a dynamic page using the same server model as your sitefor example ASP, PHP, or ColdFusion. Because the XML transformation magic occurs via programming that Dreamweaver inserts in the page, you can't add an XSLT fragment to a regular Web pagean .html file.

  8. Click where you wish to insert the XSLT fragment .

    The spot you pick could be inside a table cell or within another layout regionsuch as a sidebaron your page. The XSLT fragment will be added to this spot, just like a Dreamweaver Library item (see Section 16.5)that is, it will just be a chunk of HTML inside your page.

  9. Make sure the Server Behaviors panel is open (Window Server Behaviors), click the + button, and then select XSL Transformation .

    The XSL Transformation window appears (see Figure 24-3). Next, you select the XSL file you created earlier.

  10. Click the top Browse button to open the Select XSLT File window. Navigate to and select the XSL file you created; click the OK (Choose, on the Mac) button to choose the file, and then close the Select XSLT File window .

    This tells Dreamweaver which fragment to use. In addition, Dreamweaver should automatically fill out the path to the XML file (it reads the comment inserted in the XSLT file identifying which XML file to usesee the Note on Section 24.2). If the XML file path doesn't appear, you can click the Browse button next to the XML file box and select the proper XML file yourself. In addition, if you're using XML from another Web site, you'll see the URL of that file, and the Browse button will disappear.

    The "XSLT parameters" option lets you pass information to the XSL file that can be used to alter how the XML file is displayed. This advanced feature is discussed on Section 24.5.2.

  11. Click the OK button to close the window and insert the fragment .

    Dreamweaver displays the XSLT fragment in your Web page. If you've set up a testing server (see Section 20.2.2), you can preview the effect by pressing F12 (Option-F12).

You can't directly edit the fragment inside the dynamic Web page. Dreamweaver treats it like a single element on the page. To make changes to the fragmentfor instance, to add graphics, changes links, or reformat the XMLyou must open the XSL file and make changes directly to it.


Note: Dreamweaver adds additional folders and files to your site when you use the XSLT server behavior, These additions contain the necessary programming code to successfully embed XML data into a Web page. That means when you're moving everythingthe dynamic page, the XSLT fragment file, and the XML fileto your Web server, you also need to upload these files, which you'll find stored in a folder named includes in your site's local root folder. Upload this folder to your Web server. (See Section 15.1.1 for instructions on using Dreamweaver's FTP tool.)
Figure 24-3. The XSL transformation window lets you attach an XSLT style sheet to a dynamic page. You can also send special informationXSLT parametersto the style sheet that affects the display of the page (this process is described on Section 24.5.2).



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net