< Previous | Next >

Lesson 1.4: Create and edit an XSL style sheet

Style sheets are files that can be used to transform XML documents into other document types and to format the output. In this exercise, you will create a simple XSL style sheet to format your XML file data into a table in an HTML file.

Before you begin

Before you begin, you must complete Lesson 1.3: Create and edit your XML file

Create the style sheet

About this task

Follow these steps to create a new, empty style sheet:

Procedure

  1. Select File > New > Other. In the New window, select XML > XSL. Click Next.
  2. Select the MyProject directory.
  3. In the File name field, type CDTitle.xsl and click Next.
  4. In the Select XML file page, select the CDTitle.xml file. This associates the CDTitle.xml file with the CDTitle.xsl file.
  5. Click Finish.

Results

The CDTitle.xsl file is created and opens automatically in the XSL editor.

Edit the style sheet

About this task

The XSL editor provides a number of wizards to help you create content in your style sheet.

Procedure

  1. To create an HTML document, you will add a template to generate HTML header information and define the output method for the document.
    1. In the XSL editor, position the cursor on an empty line after the <xsl:stylesheet> element in the CDTitle.xsl file.
    2. Click the Snippets view and open the XSL drawer. If the Snippets view is not displaying, it can be opened by clicking Window > Show View > Other > General > Snippets.
    3. Double-click Default HTML header. This creates an <xsl:output> element that will output the results of the transformation (that is, applying CDTitle.xsl to CDTitle.xml) in HTML, and a template that will produce an HTML header with an <xsl:apply templates> rule to process all of the immediate children in the CDTitle.xml file.
  2. Create a template that will produce an HTML table:
    1. Position the cursor on an empty line after the end tag </xsl:template> that was generated in Step 1 above.
    2. In the XSL drawer, double-click HTML table in XSL.
    3. Select the first CD element as the context node for building the HTML table.
    4. Click the Wrap table in a template check box. This indicates that you want to wrap this table in a new template.
    5. Click the Include header check box to indicate that you want to include a header in this table. Click Next.
    6. In the Cell spacing field, type 20. This will help the table look better by increasing the amount of space between the cells in your table.
    7. Click Finish. This creates a new template that will produce an HTML table in your CDTitle.xsl file.
  3. Click File > Save to save your file.

Transform the XML file to HTML

Procedure

  1. In the Navigator view, hold down the Ctrl key and select CDTitle.xml and CDTitle.xsl.
  2. Right-click and select Run As > XSL Transformation.
  3. The result file name is _CDTitle_transform.html. It automatically opens in the Page Designer, and contains the contents of your XML file in a table.
  4. To see the table as it will look in a Web browser, close the _CDTitle_transform.html file, right-click it in the Navigator view and select Open With > Web Browser.

Results

It should appear as shown below:

Web Browser

Lesson checkpoint

The XSL editor provides a number of wizards to help you create a content filled style sheet. It also provides a method to create an HTML table based on that style sheet.
Now that you have completed this lesson, you should be able to:
  • Create an XSL style sheet.
  • Fill the style sheet with contents which will generate an HTML table.
  • Transform an XML file to HTML.
< Previous | Next >
Feedback