|
|
The following sections describe how to transform typical web page constructions for delivery to devices:
Other examples, including before and after configuration files, are available from Design Studio. Choose Help > Examples from the Design Studio window.
Before you create transformation rules for individual web pages, check all of the pages for patterns. You might find that each page that contains a particular type of information follows the same pattern or template. You can use Design Studio to create transformation rules for one page and apply the rules to all like pages. If the page template changes, you only have one page to update, rather than many.
Suppose that a site has 20 pages, each describing a different product. Each page is set up as a table, with the content you want to provide to devices users in just one cell of the table, as follows:
To transform these template-based product pages, perform these steps:
Step 2 Add a product page to the project.
Step 3 When you create page identifier rule(s), choose one or more identifiers that uniquely identify all product pages.
Keep in mind that the identifier(s) need to match all product pages but not match any other page types. Suppose that the URL and title elements for the pages have these characteristics:
To uniquely identify the product pages, use a combination of the URL (www.company.com/products) and title element (Product Line:).
Step 4 To transform the content, right-click the td element that you want to keep and choose Select from the shortcut menu.
Step 5 In the Configure: Select Rule dialog box, click the Project radio button.
In this case, you want to apply the Select rule to the td element on all pages that you add to this project.
Step 6 Choose the device types that you want to include in this rule and click OK.
Step 7 Click the Browse tab and browse to the next product page that you want to include in this project.
If you have set up the identifier rules correctly, the lower-left pane of the Design Studio window indicates that the page passes the identifier rules of the first page you added. If this does not occur, you need to return to the first page and correct the identifier rules.
Step 8 Click Add to Configuration.
Step 9 For the page you just added, click a device type in the project tree.
You now see that the rule you applied to the first page is also transforming this page.
Step 10 Repeat Step 7 and Step 8 for each product page.
Most query and results pages follow a similar pattern: A query includes input elements and results pages can contain a variable number of results.
Suppose that a web page containing a query form has the following general setup:
For this example, you want to include only the query form on the transformed page.
To transform the query page, perform these steps:
Step 2 Apply the Select rule to the table element that contains the query form.
Design Studio automatically selects the formbegin and formend elements.
Step 3 If the table contains elements you do not want to include in the transformed page, apply the Clip or Ignore rules as appropriate.
Now you are ready to transform the results page. In this case, the results page is a list of links, each followed by a brief description of the link destination.
Suppose that the results page has the following general setup:
For this example, you want to include only the links, not the descriptions, on the transformed page.
To transform the results page, perform these steps:
Step 2 Enter a query.
Step 3 Add the results page to the project and create unique identifier rules for it.
The easiest way to handle this page is to clip the descriptive text and any other elements that you do not want in the transformed page.
Step 4 Right-click the first font element (corresponding to the descriptive text).
Step 5 Choose Clip from the shortcut menu.
Step 6 In the Configure: Clip Rule dialog box, choose the device types you want to include in this rule.
Step 7 In the Path to Selected Element area, click the last font element listed.
Because all the descriptive text is contained in a font element, you only need to clip the first instance of the font element and apply it as follows:
Step 8 From the Depth to Match drop-down menu, choose All Depths.
Step 9 From the Position to Match drop-down menu, choose All Positions.
Step 10 Click OK.
Step 11 Apply the Clip rule to other elements on the page that you do not want to include in the transformed page.
The following example explains how to work with a dynamically generated table with these characteristics:
Suppose that the table has the following general setup:
To transform a dynamically generated table, perform these steps:
Step 2 Clip the th elements for Heading 4 and Heading 5.
Step 3 Right-click the td element that corresponds to cell 1d.
Step 4 Choose Clip from the shortcut menu.
Step 5 In the Configure: Clip Rule dialog box, choose the device types you want to include in this rule.
Step 6 In the Path to Selected Element area, click the last td element listed.
By applying this Clip rule to multiple depths and positions, you can clip all cells in the fourth and fifth columns.
Step 7 From the Depth to Match drop-down menu, choose All Depths.
This step clips cells in each row for this column.
Step 8 From the Position to Match drop-down menu, choose Range and enter 4 in the Min text box.
This step clips cells from columns 4 through 999.
Step 9 Click OK.
Step 10 Apply the Clip rule to other elements on the page that you do not want to include in the transformed page.
Suppose that you are working with a page that contains four tables whose order dynamically changes. You want the transformed page to include only one of the four tables. To uniquely identify the table you want to select, you use the Select Relative Path button to choose some text that appears only in the table you want to select.
To identify an element that changes positions, perform these steps:
Step 2 Locate the table element for the table that you want to appear in the transformed page.
Step 3 Right-click the table element and choose Select from the shortcut menu.
Step 4 In the Configure: Select Rule dialog box, choose the device types that you want to include in this rule.
Step 5 Click Drop All Parent Elements to select it.
Drop parent elements unless they are required for a transformation.
Step 6 In the Path to Selected Element area, click the last table element.
Step 7 From the Depth to Match drop-down menu, choose All Depths.
Step 8 From the Position to Match drop-down menu, choose All Positions.
Step 9 Click the Select Relative Path button.
The Relative Path Element dialog box appears.
Step 10 In the browser view, click a text string that is unique to the table.
The text you clicked appears in the Relative Path Element dialog box.
Step 11 Click OK and then click OK again.
A website might have links to PDF files, Word documents, or other binary data files on many pages. You can clip those links from all pages by creating one Clip rule.
To create one rule that clips all PDF links, perform these steps:
Step 2 If the page contains a PDF link, skip to the next step. Otherwise, open a different page.
Step 3 In the project tree, click a device type for the page you want to work with.
Step 4 In the XHTML source view, right-click an a element that contains a reference to a PDF file.
The tag will look similar to the following: <a href="filename.pdf">
Step 5 Choose Clip from the shortcut menu.
Step 6 In the Configure: Clip Rule dialog box, click the Project radio button.
In this case, you want to apply the Clip rule to all pages in this project.
Step 7 Choose the device types that you want to include in this rule.
Step 8 In the Path to Selected Element area, click the last a element listed.
Step 9 From the Depth to Match drop-down menu, choose All Depths.
Step 10 From the Position to Match drop-down menu, choose All Positions.
Step 11 In the Element Attributes area, double-click the filename in the Value column and then delete everything up to the .pdf.
The Value column should now contain only .pdf.
Step 12 Click the cell in the Operation column and then choose Contains from the drop-down menu.
The Element Attributes area now indicates that this rule will match against a elements with an href value containing .pdf.
Step 13 Click OK.
 |
Note If you divided your website pages across several projects, you need to perform the preceding procedure for each project. |
By importing custom XSL, you can create your own rules in Design Studio. The following examples contain the custom XSL needed to change a button to text and to change a URL.
To create a custom XSL rule that changes a button to text, perform these steps:
Step 2 Right-click the input element and choose Import XSL from the shortcut menu.
Step 3 In the Configure: Import XSL Rule dialog box, click the Import XSL tab.
Step 4 Type the following in the text box:
Leave the Use Default check box selected.
Step 5 Click OK.
This next example contains a custom XSL rule that changes a URL by replacing a filename with a path and different filename. The a element that is changed in this example is as follows:
The a element is changed to the following:
To create a custom XSL rule that changes a URL, perform these steps:
Step 2 Right-click the a element and choose Import XSL from the shortcut menu.
Step 3 In the Configure: Import XSL Rule dialog box, click the Import XSL tab.
Step 4 Type the following in the text box:
Leave the Use Default check box selected.
Step 5 Click OK.
Posted: Mon Aug 18 16:27:54 PDT 2003
All contents are Copyright © 1992--2003 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.