PRODUCTS

DOWNLOAD

BUY

LEARN

SUPPORT

COMPANY

Cart

< Previous | Next >

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

Inserting Contents in the HTML Editor

Displaying a Repeating Element in the HTML Editor

Adding Conditional Processing in the HTML Editor

Instantiating Templates in the HTML Editor

Specifying Properties and Attributes in the HTML Editor

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

placeholder - an element or attribute name in double angle brackets. It represents dynamic text.

marker - a small image to the left of a placeholder or table row. Hold the cursor over a marker to see the XSLT instruction it represents and the context in which it operates.

glyphs - pairs of images that specify choose, if, or repeat. The corresponding XSLT instruction operates on the text represented by the enclosed placeholder or element.

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:

Drag a repeating element from the XML source tree and drop it onto the HTML canvas. In the pop-up menu that appears, click xsl:for-each.

Click Insert Table

, drag and drop a repeating element onto a table cell, and click Make Repeating in the pop-up menu.

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.

To specify conditional processing on a single or repeating item, right-click the placeholder and select Conditional Processing from the pop-up menu.

To specify conditional processing for an entire row, right-click in the row, and select Conditional Processing (Table Row) from the pop-up menu.

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

Specifying If Conditional Processing in the HTML Editor

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:

1. Right click on the placeholder for which you want to define the xsl:choose instruction.

2. In the shortcut menu that appears, select Conditional Processing > Add Choose. Stylus Studio displays the Choose Manager dialog box.

Figure 208. Choose Manager Dialog Box

3. Click Copy to define a test condition, which must be an XPath expression. You can define as many conditions as you need. Each condition you add corresponds to an xsl:when instruction.

4. If you do not need it, select the true() condition and delete it.

5. To specify an xsl:otherwise instruction, add a condition and leave it blank.

6. Click OK.

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

Change active branch

To change the active branch:

1. In the HTML canvas, click a choose glyph for the active branch you want to change.

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

2. In the Properties window, click the when field.

3. Click the down arrow to display the drop-down menu.

4. Click the branch you want to be active.

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


Tip		Stylus Studio displays only what you can operate on based on the active conditional branch. In other words, if processing at a particular point cannot operate on certain elements, then those elements do not appear in the HTML canvas. If you make an `xsl:choose` branch active, and the XSLT processor cannot reach it, Stylus Studio displays a false() glyph.

Specifying If Conditional Processing in the HTML Editor

To specify xsl:if conditional processing:

1. Select the placeholder for which you want to define the xsl:if instruction.

2. In the pop-up menu that appears, select Conditional Processing > Add If. Stylus Studio displays the Input dialog box.

3. In the Test Condition field, specify an XPath expression. Stylus Studio evaluates it in the context of the placeholder to which you are adding the xsl:if instruction.

4. Click OK.

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:

1. Drag an element or attribute from the source tree and drop it on the HTML canvas.

2. In the pop-up menu that appears, click xsl:apply-templates.

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:

1. Do one of the following:

Right-click in the HTML canvas and select Add call-template from the pop-up menu. You can then drag contents to between the xsl:call-template glyphs.

Select a placeholder or element in the HTML canvas. Right-click to display the pop-up menu, and select Add call-template.

2. Click the name of the template you want to instantiate, or click Create new template to create a new named template.


Note		If you delete `xsl:apply-templates` glyphs, the corresponding template is still defined in the XSLT source. You must delete this definition in the source when you want to define new contents for the corresponding template in the HTML editor.

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.

< Previous | Next >