Home > Online Product Documentation > Table of Contents > Creating Stylesheets That Generate HTML

Creating Stylesheets That Generate HTML

The WYSIWYG HTML editor is available only in Stylus Studio XML Professional Edition.

The WYSIWYG HTML editor allows you to design stylesheets that generate HTML in a way that is easier than typing all required XSLT instructions.

Figure 205. WYSIWYG HTML Editor for XSLT

Stylus Studio synchronizes the XSLT Source and WYSIWYG tabs in the XSLT editor. Any updates you make in one tab are automatically reflected in the other tab. This allows you to go back and forth between these two views as needed. You might find that it is easier to insert some XSLT instructions directly, and then return to the WYSIWYG tab.

In the WYSIWYG tab, Stylus Studio displays a tree that represents the XML source document that the stylesheet operates on. It is important to note that when the XML source document is associated with a schema, the tree still represents the XML source document. It does not represent the associated schema.

The stylesheet that you design in the WYSIWYG tab can generate HTML or XHTML. Consequently, the output method must be HTML or XML. The output method cannot be text or unspecified.

This section covers the following topics:

Descriptions of WYSIWYG Terms

The following terms are used to describe parts of the WYSIWYG tab:

Figure 206. Parts of HTML Diagram in the WYSIWYG Tab

To remove the glyphs, select the enclosed item, and right-click it to display a pop-up menu. Click Unwrap selected element.

Inserting Contents in the HTML Editor

The WYSIWYG tab provides an HTML editor that operates as you would expect. You can type text and select it to format it. The usual formatting tools appear in the WYSIWYG tool bar. Select the text you want to operate on and then click the tool that provides the feature you want.

Figure 207. WYSIWYG Tool Bar

Image Position

Image Position allows you to specify whether the position of an image is fixed or dependent on the contents that come before it. Click the image for which you want to set this position attribute. Then click Make Absolute if you want the image to always appear in the same location regardless of where the image is in the HTML source. You can also specify whether the image is movable. When Movable is selected, you can move the image to a new location. The image always appears in the new location unless you explicitly move it again.

Displaying a Repeating Element in the HTML Editor

In the source tree diagram, repeating elements are identified by .

There are several ways to define a repeating element in the HTML canvas:

When you define a repeating element, Stylus Studio displays a marker ( ) to the left of the element. When you click this marker, Stylus Studio displays the properties of the elements that are displayed by the xsl:for-each instruction.

When you select Add Table from the pop-up menu, Stylus Studio always creates a tables with two columns. You can, of course, delete one of the columns if you do not need it.

When you drag a repeating element onto a placeholder that is already a repeating element, Stylus Studio displays a pop-up menu that includes the Reset repeating XPath option. Select this option if you want to reset the context for the repeating element. The new context is the element that you dragged in.

Adding Conditional Processing in the HTML Editor

Conditional processing can be on a single item, a repeating item or a row.

You can then specify whether you want to insert an xsl:choose or xsl:if instruction.

Only one branch of a conditional instruction can be active at any one time. Consequently, the HTML canvas might haze or hide glyphs and placeholders. If you want to operate on a placeholder that is not visible, you must change the active branch.

When you specify conditional processing on a table row, a marker ( ) appears to the left of the table row. You can move the cursor over the marker to display a message that indicates the active branch. Click the marker to display the properties for the active conditional branch associated with the marker your clicked.

This section covers the following topics:

Specifying Choose Conditional Processing in the HTML Editor

At any point in time only one branch of an xsl:choose instruction can appear in the HTML canvas. This is the active branch. When you specify formatting or properties for a branch of an xsl:choose instruction, it applies to only the elements in that branch. When you move the cursor over a choose glyph, Stylus Studio displays a message that specifies which branch is the active branch.

Use the Choose Manager to define the test conditions in the xsl:choose instruction. Use the Properties window to change the active branch.

Choose Manager

To specify xsl:choose processing:

Figure 208. Choose Manager Dialog Box

Stylus Studio creates an xsl:choose instruction that wraps the placeholder or row that you selected.

Change active branch

To change the active branch:

Stylus Studio displays the properties for the xsl:choose instruction you clicked.

For a new xsl:choose instruction, the Choose Manager displays one test expression: true(). This is the initial, required, xsl:when instruction.

Specifying If Conditional Processing in the HTML Editor

To specify xsl:if conditional processing:

You can specify multiple xsl:if instructions on the same placeholder.

Instantiating Templates in the HTML Editor

To define a template in the WYSIWYG tab:

Stylus Studio creates a template that matches the node you dragged in. You can select the placeholder, and apply formatting. Stylus Studio adds this information to the template.

Calling a Named Template

If you have one or more named templates in your stylesheet, or if you want to define a named template, you can add an xsl:call-template instruction.

To call or create a named template in the WYSIWYG tab:

Specifying Properties and Attributes in the HTML Editor

The Properties window displays the properties for the location you click in the HTML canvas. The immediately visible properties are for the element that directly contains the location you clicked.

Figure 209. Properties Window Displays Selected HTML

In the Properties window, click the down arrow to display a list of the elements that enclose the element that directly contains the location you clicked. The elements are listed from innermost to outermost. Click an element to display its properties.