PRODUCTS

DOWNLOAD

BUY

LEARN

SUPPORT

COMPANY

Cart

< Previous | Next >

Getting Started with the XSLT WYSIWYG Editor

This section provides instructions for getting started with the XSLT WYSIWYG editor. It introduces the basic WYSIWYG editor features, and provides background information needed to edit simple stylesheets.

You should perform the steps in each topic before you move on to the next topic. After the first topic, some steps in subsequent topics depend on actions you performed in a previous topic.

This section is organized as follows:

Creating Static HTML

Defining Dynamic Contents

Adding a Table with Dynamic Contents

Using the Properties Window

Creating Static HTML

To create static HTML:

1. In the Stylus Studio menu bar, select File > New > XSLT Stylesheet.

Stylus Studio displays the Scenario Properties dialog box.

2. In the Scenario Properties dialog box, to the right of the Source XML URL field, click Browse

3. Navigate to and select examples\query\books.xml in the Stylus Studio installation directory, and click Open.

4. In the Scenario Properties dialog box, click OK.

Stylus Studio displays the XSLT Editor open to the WYSIWYG tab. The HTML canvas, the center pane on the WYSIWYG tab, is empty. A tree that represents the XML source document, books.xml, appears to the right of the HTML canvas. The Properties window is displayed by default.

Figure 33. XSLT Editor WYSIWYG Tab

5. Click the XSLT Source tab. As you can see, the basic XSLT instructions that Stylus Studio inserts in every new stylesheet are there. Because you created the stylesheet by selecting the WYSIWYG editor, which is used to design HTML, Stylus Studio has set the output method to HTML ( <xsl:output method="html"/>).

6. Click the WYSIWYG tab.

7. Click in the HTML canvas and type My Favorite Books.

8. In the WYSIWYG tool bar, in the HTML Element field, click the down arrow to display the element menu and click Heading 1.

Figure 34. Select HTML Formatting from Drop-down Menus

9. In the HTML canvas, select My Favorite Books.

10. In the WYSIWYG tool bar, click Text Color

and select a color, and then click Center

. You can enter and format text in the HTML canvas as you would in any other WYSIWYG editor. What you are creating is static HTML.

11. Click Preview Result

The Save As dialog box appears.

12. Type myBooks.xsl in the URL field and click the Save button.

13. As you can see in the Preview window, the contents of the HTML canvas and the contents of the result document are identical.


Tip		Resize the Preview window by dragging the splitter that separates the Preview window from the XSLT Editor.

Figure 35. Preview Result in the WYSIWYG Editor

14. Click the XSLT Source tab. Stylus Studio has captured the formatting and translated it into XSLT instructions. The stylesheet now contains these instructions in the template that matches the root node.

<?xml version='1.0' encoding='utf-8'?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"/>

<xsl:template match="/">

<body>

<font color="#008000">My Favorite Books</font>

</body>

</html>

</p>

</xsl:template>

</xsl:stylesheet>

15. Click the WYSIWYG tab before continuing.

Defining Dynamic Contents

This topic is part of a sequence that starts with Creating Static HTML.

To define dynamic contents:

1. In the source XML document tree, click books and press the asterisk key (*) in the numeric keypad to expand all the elements.

2. In the HTML canvas, position the cursor at the end of My Favorite Books and press Enter.

3. Type This is a list of :.

4. In the XML source tree, drag the name attribute to just before the colon ( :). Stylus Studio displays a pop-up menu.

5. Click xsl:value-of. Stylus Studio adds <<@name>> to the canvas; this statement is a placeholder for the value returned by /books/@name.

6. Move the pointer over this placeholder to display a yellow marker

. This is the value-of marker.

7. Move the pointer over the value-of marker.

Stylus Studio displays the instruction that generates the contents for the placeholder.

Figure 36. xsl:value-of Marker in the HTML Canvas

In this example, it is xsl:value-of. Stylus Studio also displays the context for the placeholder. In this example, the context is books/@name.

8. Select This is a list of <<@name>>:.

9. In the WYSIWYG tool bar, click the down arrow in the HTML Element field.

10. Click Heading 2. As you can see, you can format a mixture of static and dynamic HTML.

11. Click Preview Result

. The result document contains This is a list of My books: where the HTML canvas contains This is a list of <<@name>>:

12. Press the Enter key to move the cursor to the next line before continuing.

Adding a Table with Dynamic Contents

This topic is part of a sequence that starts with Creating Static HTML.

To add a table with dynamic contents:

1. In the XML source tree, notice the

symbol; this symbol identifies repeating elements, such as book and author.

2. Drag the book element from the XML source tree and drop it onto the HTML canvas.

Stylus Studio displays the pop-up menu with an additional option, Add Table.

3. Click Add Table.

Stylus Studio inserts a two-column table with a marker to the left of the table. This marker indicates a looping element.

Figure 37. Table Created Using WYSIWYG Editor

4. Move the pointer over the marker. Stylus Studio displays the instruction that generates the contents of the table, xsl:for-each, and the context for the instruction, books/book. Anything you enter in the table is in the context of books/book.

5. Drag the title element from the XML source tree and drop it into the first column of the table in the HTML canvas.

Stylus Studio displays a pop-up menu.

6. Click xsl:value-of.

Stylus Studio displays the «title» placeholder in the first column. When you apply the stylesheet, the title of each book will appear in a row of the first column of the table.

7. Drag the author element from the XML source tree and drop it into the second column of the table in the HTML canvas.

Stylus Studio displays the pop-up menu.

8. Click Add table.

Stylus Studio displays a subtable in the second column of the table.

9. Right-click in the second column of the subtable to display a new pop-up menu.

10. Click Delete Columns to delete the second column in the subtable.

11. Drag the author element from the XML source tree and drop it into the subtable again.

12. In the pop-up menu that appears, click xsl:value-of.

Stylus Studio displays the «author» placeholder in the second column.

13. Click Preview XSLT

. The result document now contains a table that displays the title and authors for each book in books.xml.

Figure 38. Table with Dynamic Content

Using the Properties Window

This topic is part of a sequence that starts with Creating Static HTML.

To get started using the HTML editor to format a table with dynamic contents:

1. In the HTML canvas, click the «author» placeholder, which represents an xsl:value-of instruction.

2. In the Properties window, click the down arrow to display a list of elements.

Figure 39. Drop-Down List Shows Enclosing Elements

Starting with the xsl:value-of element itself, these are the elements that enclose the xsl:value-of element in the XSLT, from the innermost to the outermost. You can specify properties for any of these elements, and what you specify can affect the display represented by the placeholder you clicked.

3. Click the second td element to specify properties for the table data. (If you click the first td element, you specify properties for the subtable that is in the second column of the main table.)

Stylus Studio displays only the properties that can be specified for the element you clicked. For the td element, there are many such properties, or attributes, and you can click the tabs at the bottom of the Properties window to view a particular subset ( Color, Layout, Position, and so on).

4. At the bottom of the Properties window, click the Color tab.

5. Double-click the background-color field.

6. Click Browse

to display a drop-down color menu.