cc/td/doc/product/webscale/cte1400/rel2_0
hometocprevnextglossaryfeedbacksearchhelp
PDF

Table of Contents

Transformation Examples
Template-Based Pages
Query and Results Pages
Dynamically Generated Content
Elements that Change Positions
Links to PDF Files or Other Binary Data Files
Custom XSL Rules

Transformation Examples


The following sections describe how to transform typical web page constructions for delivery to wireless devices:

Other examples, including before and after configuration files, are available from Design Studio. Choose Help > Examples from the Design Studio window.

Template-Based Pages

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 wireless users in just one cell of the table, as follows:

table
    tr
        td
    tr
        td
        td    [this cell contains the content you want to keep]
    tr
        td
 

To transform these template-based product pages, perform these steps:


Step 1   Create a project for the product pages.

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 Done.

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 Page.

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.



Query and Results Pages

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:

body
...
    table
    formbegin
    table    [this table contains the query form]
    formend
...
 

For this example, you want to include only the query form on the transformed page.

To transform the query page, perform these steps:


Step 1   Add the query page to a project and create unique identifier rules for it.

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:

body
...
    table
    p
        a href   [a results link; you want to keep this]
       font      [descriptive text you want to clip]
    p
        a href   [the second results link]
       font
    p
        a href
       font
       blockquote
         p
             a href   [a sub-link, indented under the third result]
             font
...
 

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 1   Click the Browse tab.

Step 2   Enter a query.

The results page displays.

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.

The Configure Path Element dialog box displays.

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   In the Configure Path Element dialog box, choose the All Depths and the All Positions radio buttons.

Step 9   Click Done and click Done again.

Step 10   Apply the Clip rule to other elements on the page that you do not want to include in the transformed page.



Dynamically Generated Content

The following example explains how to work with a dynamically generated table with these characteristics:

Heading 1  Heading 2  Heading 3  Heading 4  Heading 5 

1a

1b

1c

1d

1e

2a

2b

2c

2d

2e

3a

3b

3c

3d

3e

4a

4b

4c

4d

4e

Suppose that the table has the following general setup:

table
    tr    [this row contains the column headings]
        th
        th
        th
        th    [Heading 4, to be clipped]
        th    [Heading 5, to be clipped]
    tr    [the first row containing dynamically generated text]
        td
        td
        td
        td    [cell 1d, to be clipped]
        td    [cell 1e, to be clipped]
    tr    [the second row containing dynamically generated text]
        td
        td
        td
        td    [cell 2d, to be clipped]
        td    [cell 2e, to be clipped]
...
 

To transform a dynamically generated table, perform these steps:


Step 1   Add the page to a project and create unique identifier rules for it.

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.

The Configure Path Element dialog box displays.

By applying this Clip rule to multiple depths and positions, you can clip all cells in the fourth and fifth columns.

Step 7   In the Configure Path Element dialog box, choose the All Depths radio button.

This step clips cells in each row for this column.

Step 8   Choose the Range radio button and enter 4 in the Min text box.

This step clips cells from columns 4 through 999.

Step 9   Click Done and click Done again.

Step 10   Apply the Clip rule to other elements on the page that you do not want to include in the transformed page.



Elements that Change Positions

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 Advanced setting 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 1   Add the page to a project and create unique identifier rules for it.

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   In the Retain or Remove all Ancestors area, click Remove.

Remove ancestors unless they are required for a transformation.

Step 6   In the Path to Selected Element area, click the last table element.

Step 7   In the Configure Path Element dialog box, click All Depths and All Positions.

Step 8   Click Done.

Step 9   Click the Advanced check box.

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 Done and then click Done again.



Links to PDF Files or Other Binary Data Files

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 1   Assuming that you have already added pages to a project, click a page name (by default, the URL) in the project tree.

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.

The Configure Path Element dialog box displays.

Step 9   Choose the All Depths and All Positions radio buttons.

Step 10   In the 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 11   Click the cell in the Operation column and then choose contains from the drop-down menu.

The Attributes area now indicates that this rule will match against a elements with an href value containing .pdf.

Step 12   Click Done and click Done again.




Note   If you divided your website pages across several projects, you need to perform the preceding procedure for each project.

Custom XSL Rules

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 1   In the page that contains the button you want to change, locate the input element for that button.

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:

<xsl:value-of select="@value"/> 
  

Leave the Use Default check box selected.

Step 5   Click Done.



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:

<a href="http://192.168.1.1:8080/wrong_page.html?session=12345"
  

The a element is changed to the following:

<a href="http://192.168.1.1:8080/dir/path/new_page.html?session=12345"
  

To create a custom XSL rule that changes a URL, perform these steps:


Step 1   In the page that contains the URL you want to fix, locate the a href element for that URL.

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:

<xsl:copy>
<xsl:attribute name="href">
<xsl:value-of select="concat('/dir/path/new_page.html?', substring-after(@href, '?'))"/>
</xsl:attribute>
</xsl:copy>
  

Note    The above XSL is specific to this example.

Leave the Use Default check box selected.

Step 5   Click Done.




hometocprevnextglossaryfeedbacksearchhelp
Posted: Mon Aug 18 18:58:37 PDT 2003
All contents are Copyright © 1992--2003 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.