• Chapter 1: Getting Started with Stylus Studio
  • Starting Stylus Studio
  • Updating an XML Document-Getting Started
  • Working with Stylesheets - Getting Started
    • Opening a Sample Stylesheet
    • XSLT Stylesheet Editor Quick Tour
    • XSLT Scenarios
    • Making a Static Web Page Dynamic by Editing XSLT
  • Stylesheets That Generate HTML - Getting Started
  • Using the XSLT Mapper - Getting Started
  • Debugging Stylesheets - Getting Started
  • Defining a DTD - Getting Started
  • Defining an XML Schema Using the Diagram Tab - Getting Started
  • Opening Files in Stylus Studio
  • Working with Projects
  • Customizing Toolbars
  • Specifying Stylus Studio Options
  • Defining Keyboard Shortcuts
  • Using Stylus Studio from the Command Line
  • Managing Stylus Studio Performance
• Chapter 2: Editing and Querying XML
• Chapter 3: Converting Non-XML Files to XML
• Chapter 4: Working with XSLT
• Chapter 5: Creating XSLT Using the XSLT Mapper
• Chapter 6: Debugging Stylesheets
• Chapter 7: Defining XML Schemas
• Chapter 8: Defining Document Type Definitions
• Chapter 9: Writing XPath Expressions
• Chapter 10: Working with XQuery in Stylus Studio
• Chapter 11: Composing Web Service Calls
• Chapter 12: Accessing Relational Data as XML
• Chapter 13: Extending Stylus Studio
• Chapter 14: Stylus Studio GUI Reference

Home > Online Product Documentation > Table of Contents > Working with Stylesheets - Getting Started

Working with Stylesheets - Getting Started

This section helps you get started working with XSLT stylesheets. To focus on stylesheets that generate HTML, see Stylesheets That Generate HTML - Getting Started. To focus on stylesheets that map XML to XML, see Using the XSLT Mapper - Getting Started.

Except for the first topic, each of the following topics contains instructions for working with a sample XSLT stylesheet. You should perform the steps in each topic before you move on to the next topic. After the first topic, some steps depend on actions you performed in a previous topic.

This introduction to working with stylesheets in Stylus Studio is organized as follows:

Before you begin

To get started, you'll need to start Stylus Studio if you haven't already. See Starting Stylus Studio if you need help with this step.

Opening a Sample Stylesheet

To open the your-quotes.xsl sample XSLT stylesheet in Stylus Studio:

Alternatives: Press Ctrl+O or click Open .

Alternative: If the Stylus Studio examples project is open, you can access this file from the Project window. To open the examples project, open examples.prj in the Stylus Studio examples directory.

Figure 21. Stylus Studio's XSLT Editor

As with the XML Editor, Stylus Studio uses different colors to distinguish markup, tag names, and data in the XSLT Editor.

XSLT Stylesheet Editor Quick Tour

When you use the Stylus Studio XSLT stylesheet editor, you work with XSLT stylesheets, XML source documents, and result documents. This quick tour is organized to introduce you to some of the main features for working with XSLT in Stylus Studio:

Parts of the XSLT Editor

The XSLT Editor consists of four tabs that allow you to work with XSLT in different ways, based on your preferences and the functionality that you desire.

Exploring the XSLT Source Tab

This topic is part of a sequence. If your-quotes.xsl is not open, see Opening a Sample Stylesheet.

To work with the XSLT Source tab:

In the status bar just below the XSLT Editor tool bar, Stylus Studio displays match: /. This indicates that the location you clicked is inside a template that matches the root node.

Figure 22. Current Template Identity Is Displayed at the Top of the Editor

Now the status bar is blank. This instruction is not part of a template.

3. In the XSLT Editor tool bar, click Add a new template .

Stylus Studio inserts the following after the last template already specified in the stylesheet.

<xsl:template match="NewTemplate"> 
               
 
               
</xsl:template>
               

            

To define a new template, replace NewTemplate with the match pattern you want, and add contents to the new template as needed.

Tip

You can also create a new template by double-clicking a node on the schema tree. Templates that match nodes in the XSLT document are displayed with a check in the schema tree, as shown here. Yellow indicates that the text cursor in the XSLT source is within that template.

4. In the XSLT Editor tool bar, click Template Mode , which is the right most button.

Stylus Studio displays only the new template.

Figure 23. Use Template Mode to Focus on a Single Template

You can edit the stylesheet in either template mode or in full source mode. In template mode, Stylus Studio displays one template at a time. In full source mode, Stylus Studio displays the whole stylesheet.

Stylus Studio displays a list of the templates in the stylesheet with their match patterns.

Figure 24. You Can Show Individual Templates in a Stylesheet

Every stylesheet that Stylus Studio creates includes two built-in templates. One built-in template matches every element and the root node. The other built-in template matches all text and attribute nodes. See Using Stylus Studio Default Templates.

To delete a template, click the match pattern for the template you want to delete and then click Delete template in the XSLT Editor tool bar. You must be in template mode to delete a template.

7. Click Full Source Mode .

Stylus Studio displays the complete stylesheet. The cursor is at the beginning of the template that was being displayed in template mode.

Exploring the Params/Other Tab

Click the Params/Other tab:

Drop-down menus let you specify the encoding format used to store the stylesheet in Stylus Studio, as well as method and encoding output attributes. A simple grid displays the name, source URL, and default value of any global parameters used by the active stylesheet, as well as by any imported ones.

Figure 25. Specify XSLT Parameters Here or in XSLT Source

All information that you can specify in the Params/Other tab can also be specified in the XSLT source. For example, you can specify the XSLT encoding in the processing instruction at the beginning of the stylesheet; you can specify the output method and encoding with the xsl:output instruction. Stylus Studio automatically updates the XSLT source with any changes you make in the Params/Other tab, and vice versa.

Exploring the WYSIWYG Tab

The XSLT Editor WYSIWYG tab is available only in Stylus Studio XML Professional Edition.

The WYSIWYG tab is a graphical XSLT editor that lets you compose XSLT by constructing the HTML document you want the XSLT to output.

To work with the WYSIWYG tab:

Stylus Studio displays a message that indicates that the output of the stylesheet is unspecified and asks you if you want to make it HTML. When the output is HTML (or XML), you can edit the stylesheet in the WYSIWYG HTML editor.

Stylus Studio displays the WYSIWYG tab.

Figure 26. XSLT Editor WYSIWYG Tab

See Stylesheets That Generate HTML - Getting Started to learn more about using the XSLT WYSIWYG editor.

XSLT Scenarios

This topic is part of a sequence. If your-quotes.xsl is not open, see Opening a Sample Stylesheet. The sequence starts with Exploring the XSLT Source Tab.

To apply a stylesheet to an XML document in Stylus Studio, you use a scenario. A scenario is a group of customizable settings that allows you to experiment with different source XML documents (that is, the XML document to which you will apply the XSLT), processors, parameter values, post-processors, and profiling settings. You can define scenarios using different settings to see how each affects document processing. Stylus Studio also supports scenarios for Web service calls, DB-to-XML Data Sources, and XQuery.

Figure 27. Scenarios Let You Easily Test Stylesheets and XML Source

An XSLT scenario is defined by a single stylesheet-XML document pair. You can associate any number of scenarios with a stylesheet, though only one scenario can be in effect at the time the XSLT is processed. Similarly, you can associate any number of scenarios with an XML source document.

A scenario has already been created for the your-quotes.xsl stylesheet, using the your-quotes.xml as the source XML document. Run the scenario now and look at the output created by the XSLT defined in your-quotes.xsl.

To run a scenario, click Preview Result .

Stylus Studio processes the source XML document using the XSLT stylesheet you specify and displays the results in the Preview window.

Figure 28. XSLT Processing Results are Shown in the Preview Window

By default, results are displayed using a Web browser. If you choose, you can display results in tree or text format, by clicking Preview in Tree and Preview Text in the Preview window tool bar.

Use the scroll bar to review the HTML in the Preview window. You can see that the values come from the XML document your-quotes.xml.

Working with Scenarios

To define additional scenarios, click the down arrow next to the scenario field in the XSLT Editor tool bar, and click Create Scenario. After you have more than one scenario, click the same down arrow to select the scenario you want to use to preview a result.

To change the properties of a scenario, or to delete a scenario, select the scenario you want to change or delete, and then click Browse to the right of the scenario name field. Stylus Studio displays the Scenario Properties dialog box.

About Preview

When you preview a result, Stylus Studio automatically saves the changes you have made to the document. If you want to revert to the document's previous state, you can use the undo function ( Edit > Undo).

Working with a Sample Result Document

This topic is part of a sequence. If your-quotes.xsl is not open, see Opening a Sample Stylesheet. The sequence starts with Exploring the XSLT Source Tab.

To work with a sample result document, follow these steps:

Using its backmapping functionality, Stylus Studio displays the template in the XSLT Editor's status bar and flags the line that generated the line you clicked with a blue pointer.

Figure 29. Backmapping Shows which XSLT Generated a Result

2. In the left tool bar of the Preview window, click Preview Text . Stylus Studio displays the HTML file that generates the browser display.

Figure 30. You Can Render XSLT Results as Plain HTML

This works in reverse as well. If you click a line in a template (full source mode or template mode), Stylus Studio uses a gray background to display the HTML generated by that template.

4. In the left tool bar, click Export Preview . Stylus Studio displays the Save As dialog box. If you want, you can enter a file name and click Save to preserve the generated HTML file. Otherwise, click Cancel.

Making a Static Web Page Dynamic by Editing XSLT

Suppose you have an XML document with a repeating element, and you want to build a Web page that displays information for each of the elements. For example, you might have a document that contains information for hundreds of books, customer accounts, sales calls, or even chemistry experiments. It is relatively easy to create an HTML file that elegantly displays the information for one element. You can then import this file into Stylus Studio, and modify it in a few steps to display all the elements in your XML document.

This section provides step-by-step instructions for converting a static Web page that displays information about one video into a dynamic Web page that displays information about many videos. The process is described in the following major steps:

If you follow the instructions in these topics, you create the video.xsl stylesheet. Stylus Studio includes a sample version of this stylesheet. It is sampleVideo.xsl, and it is in the examples\VideoCenter directory of your Stylus Studio installation directory. If the Stylus Studio examples project is open, you can access this file from the Project window. To open the examples project, open examples.prj in the Stylus Studio examples directory.

Stylus Studio includes an additional sample stylesheet, sample2Video.xsl. This stylesheet performs the same function as sampleVideo.xsl, but it does not use the xsl:apply-templates instruction. Instead, it directly executes the instructions. This results in a nicer looking WYSIWYG display.

An alternative to editing the XSLT source is to use the WYSIWYG tab to compose HTML graphically. This feature is described in Making a Static Web Page Dynamic Using the WYSIWYG Editor.

Importing a Sample HTML File

The HTML to XSLT Document Wizard is available only in Stylus Studio XML Professional Edition.

To import an HTML file:

u

Stylus Studio displays a stylesheet in the XSLT Editor. The stylesheet contains one template, which matches the root node ( <xsl:template match="/">). Stylus Studio copies all HTML markup that is in movies.html into the CDATA section of this template.

If you want, you can move and enlarge the XSLT editor window. If you do, leave a few inches at the bottom of the Stylus Studio window for the Preview window, which Stylus Studio will display later in this procedure.

5. In the XSLT editor tool bar, click Preview Result .

Stylus Studio displays the Scenario Properties dialog box. A scenario associates a stylesheet with an XML source document. When Stylus Studio imports an HTML file, it automatically creates the stylesheet that can generate that HTML file.

7. Next to the Source XML Url: field, click Browse . Stylus Studio displays the Open dialog box.

Stylus_Studio_install_dir
      \examples\VideoCenter
       

       
      

You must type an absolute path.

      

    

Stylus Studio displays the Save As dialog box.

Stylus Studio applies the new stylesheet to the videos.xml document and displays the result in the Preview window.

Figure 31. XSLT Preview of video.xsl

The result provides information about one video. Also, Stylus Studio displays the tree of the XML source document in a pane to the right of the stylesheet.

What to do next

To modify the stylesheet in the XSLT Source tab, continue to the next topic, Creating the video Template.

To modify the stylesheet using the WYSIWYG tab, see Making Repeating Table Rows in the WYSIWYG Editor.

Creating the video Template

This topic is part of a sequence that starts with Importing a Sample HTML File.

To create the video template, follow these steps:

Stylus Studio creates a template that matches the video element. The new template is empty, and it appears in the XSLT Editor pane near the end of the stylesheet (around line 159). In the source tree pane, a check appears next to video to indicate that there is a template that matches video.

Stylus Studio displays the template it created that matches the root element, and flags the line that generates the title. This shows you about where the HTML markup starts for a single video. In the next few steps, you are going to move the markup for the video element into its own template.

Figure 32. Backmapping Shows What Source Generates Output

<!-- *** Start Video *** -->
       

    

Tip

The cursor position (line and column number) is displayed in the Stylus Studio status bar, shown here:

<!-- *** End Video *** -->
       

    

8. Click Preview Result to apply the current stylesheet to the XML source document and refresh the Preview window.

The display no longer includes any information about the video. This is because you moved the video markup to the video template, but you did not specify an instruction that instructs the XSLT processor to instantiate the video template.

9. Click Save .

Instantiating the video Template

This topic is part of a sequence that starts with Importing a Sample HTML File.

To instantiate the video template, follow these steps:

Stylus Studio displays the Sense:X tag completion menu.

Figure 33. Sense:X Tag Completion in XSLT

Stylus Studio inserts the xsl:apply-templates instruction.

Stylus Studio again displays the choices for what you can enter.

The XSLT you have just composed selects all video elements for processing. The complete instruction is as follows:

	<xsl:apply-templates select="result/videos/video"/>
       

    

10. Click Preview Result to refresh the Preview window.

Now you can see that the XSLT processor does instantiate the video template for each video element in the XML source document. However, because the template currently contains information for Enemy of the State only, the information for that video appears for each video element in the XML source document. You need to modify the XSLT instructions that generate the Enemy of the State text. Each time the XSLT processor instantiates the video template, you want it to pull in information for a different video.

11. Click Save .

Making Titles Dynamic

This topic is part of a sequence that starts with Importing a Sample HTML File.

To change the video template to display the title for each video, follow these steps:

In the Backmap Stack pane, Stylus Studio shows you the XSLT instruction that generated the output you clicked in the result document. In the XSLT Editor pane, Stylus Studio's backmapping feature points to the line that contains Enemy of the State.

Do not cut the <b> and </b> tags.

	<xsl:apply-templates select="title"/>
       

       
      

This instructs the XSLT processor to instantiate a template that matches 
        title. However, there is no such template because a 
        title template is not needed in this stylesheet. The default templates provide the required operations. When the XSLT processor cannot find a template that matches 
        title, it instantiates the default template that matches all elements - its template rule is 
        /|*.

      

       
      

This default template operates on the children of the node for which it is instantiated. In this case, each time the default template is instantiated for a 
        title element, it operates on the text node that is the lone child of the 
        title element. Because the child node is a text node, this template instantiates the other default template, the one that matches all text nodes. This other default template copies the contents of the text node to the result document. This is how the actual title of each video gets displayed in the result.

      

       
      

The templates that match 
        /|* and
         text()|@* are default templates in every stylesheet whether or not you or Stylus Studio explicitly include them. For additional information about how these templates work, see 
        Understanding How the Default Templates Work.

      

    

4. Click Preview Result to refresh the Preview window.

Now the display for each video has a different title, but the rest of the information (the summary, the image, and so on) is that for Enemy of the State.

5. Click Save .

Making Images Dynamic

This topic is part of a sequence that starts with Importing a Sample HTML File.

To change the video template to display the image associated with each video, follow these steps:

Again, Stylus Studio's backmapping feature identifies the line in the stylesheet that generates the image.

The Backmap Stack window now displays two xsl:template instructions. One matches the root node and one matches video.

      {@id}
       

       
      

The result should look like the following:

      
<img src="images/video/{@id}.gif" align=BOTTOM" ... 
       

       
      

During XSLT processing, the XSLT processor replaces the attribute value template with the ID for the current video.

      

    

4. Click Preview Result to refresh the Preview window.

Stylus Studio displays a different image for each title.

5. Click Save .

Making Summaries Dynamic

This topic is part of a sequence that starts with Importing a Sample HTML File.

To change the video template to display the summary of each movie, follow these steps:

Stylus Studio uses backmapping to point to the line that generates the summary.

<xsl:apply-templates select="summary"/>
       

       
      

Again, the XSLT processor will use the default templates to copy the text to the result document.

      

    

4. Click Preview Result to refresh the Preview window.

Stylus Studio displays a different summary for each title.

6. Click Save .