Cart
|
Home > Online Product Documentation > Table of Contents > Making a Static Web Page Dynamic Using the WYSIWYG Editor Making a Static Web Page Dynamic Using the WYSIWYG EditorIn Making a Static Web Page Dynamic by Editing XSLT, you learned how to use the XSLT Editor's XSLT Source tab to build a Web page that displays dynamic content. This section provides step-by-step instructions for using the Stylus Studio XSLT WYSIWYG editor to convert a static Web page that displays information about one video into a dynamic Web page that displays information about many videos. Before You BeginBefore starting this part of the tutorial, you must import an HTML file as described in Importing a Sample HTML File, with the following changes: When you are done, your copy of Stylus Studio should look something like this:
After you perform step 11 in that topic, return here, and start with Making Repeating Table Rows in the WYSIWYG Editor. Making Repeating Table Rows in the WYSIWYG EditorThis topic is part of a sequence that starts with Importing a Sample HTML File. In the Preview window, you can see that the information for one video appears in a row of a table. You want to make this a repeating row and have each row contain information for a different video. To create repeating rows in the HTML canvas:
1. Click the
WYSIWYG tab.
2. In the source tree pane, expand the
result and
videos nodes.
3. Drag the
video repeating element to the
Title table cell, which contains
Enemy of the State.
4. In the pop-up menu that appears, click
Make repeating.
Stylus Studio displays a looping marker to the left of the table row to indicate that it is a repeating row. If you move the cursor over the marker, Stylus Studio displays the information that the marker represents an
5. Click
Preview Result
. The result document now displays multiple rows. Each row contains information for the same movie: Enemy of the State.
Now that the XSLT describes a table with repeating rows, our next task is to make each of the rows' columns dynamic, that is, to ensure that each row displays information for a different movie. Making Contents Dynamic in the WYSIWYG EditorThis topic is part of a sequence that starts with Importing a Sample HTML File. To create dynamic contents in the HTML canvas:
1. In the HTML canvas, select the title
Enemy of the State.
2. In the source tree pane, expand the
video node and drag and drop the
title element on the selected text.
3. In the pop-up menu that appears, click
xsl:value-of.
Stylus Studio removes the text for Enemy of the State and replaces it with the <<title>> placeholder.
4. Move the cursor over the
<<title>> placeholder and then shift it slowly over the value-of marker (
) to the left.
Stylus Studio displays the information that the marker represents an
5. Click
Preview Result
.
The result document now displays a different video title in each row. If you want, you can select the title placeholder, apply some formatting and preview the results. Every title in the result document will have the formatting you specified.
7. Click
Preview Result
. Each row now contains information for a different video. However, the video image in each row is still the same.
Rendering Images as Dynamic Content in the WYSIWYG EditorThis topic is part of a sequence that starts with Importing a Sample HTML File. The image for each movie is still the same. For this part of the XSLT, you will use the XSLT Source tab:
1. Click the
XSLT Source tab.
2. In the
Preview window, click the video image to backmap to the instruction that generates it in the
XSLT Source tab.
Stylus Studio displays the XSLT Source tab, and flags the line that contains the instruction. As you can see, the stylesheet uses an image ID.
3. In the string
"images/video/id1244100.gif", select
id1244100.
4. Type
{@id} to replace the selected text. This specifies an attribute value template.
5. Click
Preview Result
.
Each row now contains the correct image for the video described in that row.
6. Click the
WYSIWYG tab.
As you can see, there is now a placeholder where the original image was.
7. Click the image's placeholder.
In the Properties window, Stylus Studio displays the properties for the image. If you scroll down to the src property, you can see that the value is images/video/{@id}.gif.
8. Scroll the result document towards the bottom and examine the VHS and DVD prices. As you can see, some of the prices are missing the decimal places.
9. In the result document, click on the price for a VHS video.
Stylus Studio backmaps to
10. Replace
"vhs" with
"format-number(vhs, '##.00')". This ensures that every VHS price is formatted with two decimal places.
11. In the
XSLT Source tab, scroll down about eight lines, and repeat the previous step for the DVD price. That is replace
select= "dvd" with
select="format-number(dvd, '##.00')".
12. Click
Preview Result
. Each price now includes two decimal places. However, small circles appear when no VHS tapes or DVDs are available for sale. The next topic describes how to use conditional processing to remove these circles.
13. Click the
WYSIWYG tab. Stylus Studio displays
<<format-number()>> as the placeholder for the VHS and DVD prices.
Using Conditional If Processing in the WYSIWYG EditorThis topic is part of a sequence that starts with Importing a Sample HTML File. In the current videos result document, there are small circles when no VHS tapes or DVDs are available.
These circles appear when the XSLT processor tries to process an empty string with
To remove these small circles:
1. In the
WYSIWYG tab, select the
<<format-number()>> that is the placeholder for the VHS price.
2. Right-click the selected placeholder.
3. In the pop-up menu, select
Conditional Processing >
Add If. Stylus Studio displays the
Input dialog box.
4. In the
Input dialog box, type
vhs in the
Test Condition field. This tests whether there are any
vhs elements.
5. Repeat
step 1 through
step 4, but this time select the DVD price placeholder, and specify
dvd as the test condition.
6. Click
Preview Result
. The small circles no longer appear. Instead, nothing appears when there are no VHS tapes or DVDs for a particular video.
|
XML PRODUCTIVITY THROUGH INNOVATION ™
