Specifying Transformation Rules in HTML Files

Specifying Transformation Rules in HTML Files
Introduction
CTE XHTML Extensions
Using CTE XHTML Extensions in Source HTML

Specifying Transformations

Creating Dialable Numbers in HTML Content

Ignoring an Element in HTML Content

Hiding Device-Specific Content from Full Browsers
Managing Configuration Files When Using CTE XHTML Extensions

Merging the Default Configuration File on a CTE

Specifying Transformation Rules in HTML Files

The following sections describe how to specify web page transformations in your source HTML files rather than through Design Studio:

Introduction

The CTE 1400 transforms web pages according to transformation rules. You can create transformation rules by using the following:

Design Studio
CTE XHTML extensions in source HTML files

Note XHTML is the next generation of HTML and provides the benefit of extensibility. The CTE XHTML extensions are CTE-specific attributes that are used by the CTE to transform content.

When you use Design Studio to create transformation rules, you do not change the source HTML files. Instead, you create rules that are applied to a web page by the CTE when the web page is requested by a supported wireless device. Design Studio enables you to transform legacy content without having to modify the source files and enables you to transform content that you do not own. In addition, Design Studio can be used by anyone with a general understanding of HTML.

Rather than using Design Studio to create transformations, you can include CTE XHTML extensions in HTML files to indicate transformations for a particular device type. Typically, this method of specifying transformation rules is handled by an application developer during the initial implementation of a web page. An application developer includes XHTML extensions to indicate content that should be selected or clipped for a particular device type. If different transformations are required for the various device types, sections of the web page may need to be replicated for each device type.

As you plan the design and content of new web content, consider whether it will be more efficient to apply transformation rules through Design Studio or to build the rules into the content. One advantage of using the CTE XHTML extensions is that, when content changes, you do not have to return to Design Studio to update transformation rules.

The CTE has a default configuration file that enables it to interpret the XHTML extensions. The default configuration file is also provided with Design Studio as a backup in case the file is overwritten on the CTE. If you do use CTE XHTML extensions, we recommend that you not attempt to use Design Studio to specify additional transformation rules on the same content. Doing so can result in conflicting identifier rules or transformation rules. You can, however, create additional projects and merge them into the default configuration file on the CTE.

Note If you choose to use Design Studio to create additional transformations for pages that contain CTE XHTML extensions, be sure to add those pages to the project provided with the default configuration file.

CTE XHTML Extensions

The CTE XHTML extensions consist of element attributes that specify the following information:

A class attribute value that is unique to the CTE.
A rule attribute that specifies the transformation rule you want to apply.
A devices attribute that indicates the device types for which you want content transformed.

Additional attributes provide more information for some rules.

Note We recommend that you use the CTE XHTML extensions with div elements, except as noted in this publication. While it is possible to use the extensions with any element, a broader application of the extensions is not supported.

The CTE XHTML extensions consist of the element attributes and values noted in Table 8-1.

Table 8-1 CTE XHTML Extensions

Attribute	Values	Usage
class	transform_rule	Identifies content to be transformed for the specified device types. This content will also be visible to full browsers (such as Internet Explorer).
class	transform_rule_hide	Identifies content to be transformed for the specified device types. This content will be hidden from full browsers. You must define this value in an embedded or linked style sheet, as described in the "Hiding Device-Specific Content from Full Browsers" section.
rule	select	Selects the content enclosed in the div element. See also the retain_parents attribute in this table.
	clip	Clips the content enclosed in the div element.
	dialname	Identifies the label to be used for a dialable phone number. A div element with this rule must enclose text and must have a corresponding div rule="dialnumber" element.
	dialnumber	Identifies a dialable phone number. A div element with this rule must enclose text and must have a corresponding div rule="dialname" element. See also the prefix attribute in this table.
	imgalt	Replaces an image with its alternate text. A div element with this rule must enclose an img element or input type="image" element. If an input element is being used as an image map in the HTML, you cannot replace it with the alternate text. For more information on how the CTE and various types of wireless devices handle images, see the "Working with Images" section.
	retaintable	Retains a table as a table element. (By default, the CTE transforms a table element to a list for Palm and RIM devices and WAP phones.) Use this rule with a div or table element.
	ignore	Ignores the element only (not its text or descendants). Use rule="ignore" with the element you want to ignore. For example, to ignore a font element for IP phones, add the attributes in the font tag: <font ... class="transform_rule" rule="ignore" devices="ipt">
retain_ parents	true	Default value. Used with the rule="select" attribute. Retains the ancestor elements of the selected element. For example, if you select a td element and retain parents, the CTE includes the parent tr and table elements. Retaining parents impacts performance, so retain them only if they are needed.
retain_ parents	false	Used with the rule="select" attribute. Removes the parent elements. Be aware that removing parents can result in incorrect markup. For example, if you select a td element and choose to remove the parents, the transformed element may not have the required parent tr and table elements.
prefix	numeric_value	Used with the rule="dialnumber" attribute. Appends a prefix, such as "1" or "9" to the number specified with the rule="dialnumber" attribute.
devices	html	Applies the rule to HTML-based devices, such as Windows CE devices.
	ipt	Applies the rule to IP phones.
	palm	Applies the rule to Palm-based devices.
	rim	Applies the rule to RIM devices.
	vxml	Applies the rule to VoiceXML applications.
	wap	Applies the rule to WAP phones.

To specify a transformation in HTML code, you must include the class, rule, and devices attributes. The following sample HTML code illustrates the following:

Web page content that may be accessed through a wireless device (IP phones, Palm devices, and WAP phones) or through a full browser.
Retained table elements for Palm devices.
Ignored font element and dialable phone number for IP phones.
Redundant pieces of content.

Supporting multiple device types with different transformations can result in the creation and maintenance of redundant content. In such cases, it might be more efficient to create the rules using Design Studio.

<html>

<head>

  <title>Page Title</title>

<!-- The following style element can be embedded as shown, or referenced from an external style sheet as described in the "Hiding Device-Specific Content from Full Browsers" section on page 8-14.-->

  <style> 

    <!-- 

        .transform_rule_hide { 

           display: none; 

}

-->

  </style>

</head>

<body>

<!-- The following div element selects content for Palm devices. This content is also visible to full browsers. -->

  <div class="transform_rule" rule="select" retain_parents="false" devices="palm">

  <table class="transform_rule" rule="retaintable" devices="palm">

   <tr>

     <table class="transform_rule" rule="retaintable" devices="palm">

...

     </table>

   </tr>

   <tr>

     <form>

...

     </form>

   </tr>

    <tr>

     <table class="transform_rule" rule="retaintable" devices="palm">

...

     </table>

   </tr>

  </table>

  </div>

<!-- The following div element selects content for IP phones and WAP devices. This content is hidden from full browsers. -->

  <div class="transform_rule_hide" rule="select" retain_parents="false" devices="ipt,wap">

  <table>

   <tr>

     <form>

...

     </form>

   </tr>

<!-- The following div element clips content for WAP devices. -->

   <div class="transform_rule_hide" rule="clip" devices="wap">

     <tr>

...

     </tr>

   </div>

   <tr>

     <td>

       <font style="font-weight:bold" class="transform_rule_hide" rule="ignore" devices="ipt">

         <div class="transform_rule_hide" rule="dialname" devices="ipt">Call:</div>

       </font>

     </td>

     <td>

       <div class="transform_rule_hide" rule="dialnumber" prefix="1" devices="ipt">800-555-1234</div>

     </td>

   </tr>

  </table>

  </div>

</body>

</html>

Using CTE XHTML Extensions in Source HTML

The following sections describe how to use the CTE XHTML extensions to mark up source HTML for transformation by the CTE:

Specifying Transformations

If you have used Design Studio to specify transformation rules, you are familiar with choosing from a rich set of rules that are necessary for repurposing content designed for full browsers to content that is appropriate for microbrowser screens. However, designing content for delivery to wireless devices is a much different process and requires only a few transformation rules.

To include content for a wireless device, you select the content by enclosing it in a div element with the rule="select" attribute. You can make multiple selections on a page and you can nest selections. For example, you might want to include a large chunk of code for some devices but include only a small portion of that code for other devices.

To exclude content from an otherwise selected area, you clip the content by enclosing it in a div element with the rule="clip" attribute. For example, you might want to include an entire table for several devices but exclude some rows for one of the devices. For information about a similar operation, ignore, see the "Ignoring an Element in HTML Content" section.

Additional rules enable you to handle special cases such as retaining a table as a table element or replacing an image with its alternate text.

Table 8-2 contains sample HTML code for several types of transformations.

Table 8-2 HTML Code for Sample Transformations

Transformation	HTML Code
Select content for Palm devices and select a subset of the same content for IP phones. Retains parent elements.	... <div class="transform_rule" rule="select" retain_parents="true" devices="palm"> <table> ... <div class="transform_rule" rule="select" retain_parents="true" devices="ipt"> <form> ... </form> </div> <table> ... </table> </table> </div> ...
Select content for WAP and IP phones; clip some of the content for WAP phones. Removes parent elements.	... <div class="transform_rule" rule="select" retain_parents="false" devices="wap,ipt"> <table> ... <div class="transform_rule" rule="clip" devices="wap"> <form> ... </form> </div> <table> ... </table> </table> </div> ...
Retain a table as a table element for Palm and RIM devices. (By default, the CTE transforms a table element to a list for Palm and RIM devices and WAP phones.)	... <div class="transform_rule" rule="select" retain_parents="true" devices="palm,rim"> <table class="transform_rule" rule="retaintable" devices="palm,rim"> ... <table class="transform_rule" rule="retaintable" devices="palm,rim"> ... </table> </table> </div> ... Alternatively, you can achieve the same transformation as follows: ... <div class="transform_rule" rule="retaintable" devices="palm,rim" <table class="transform_rule" rule="select" retain_parents="true" devices="palm,rim"> ... <table> ... </table> </table> </div> ...
Replace an img element with its alternate text. For information on how the CTE and various types of wireless devices handle images, see the "Working with Images" section.	... <div class="transform_rule" rule="select" retain_parents="false" devices="palm,rim"> <table> ... <tr> <td> <div class="transform_rule" rule="imgalt" devices="palm,rim"> <img src="logo.gif" width="30" height="30" alt="Company Name" /> </div> </td> </tr> ... </table> </div> ...

Creating Dialable Numbers in HTML Content

Cisco IP phones, WAP phones, and HDML devices support the initiation of a phone call by clicking text in the microbrowser. The rule="dialname" and rule="dialnumber" attributes enable you to specify a phone number to be dialed when the user clicks a particular text string. The prefix="numeric_value" attribute enables you to specify a prefix to be dialed with the phone number.

To create a dialable number, you work with two text elements—the text that includes the phone number and the text you want to use as a label for the phone number. For example, in a directory listing you would use the text associated with a phone number as its label.

To create a dialable number in an HTML page, you must enclose the label for the phone number and the phone number in div elements, as shown in the following example:

...

   <td>

     <div class="transform_rule" rule="dialname" devices="ipt">

     Contact Number:

     </div>

   </td>

   <td>

     <div class="transform_rule" rule="dialnumber" prefix="1" devices="ipt">

     800-555-1234

     </div>

   </td>

Note You must specify the rule="dialname" and rule="dialnumber" attributes in pairs using div elements that enclose text.

Ignoring an Element in HTML Content

When you clip an element, any text or descendants of that element are also clipped. If you want to exclude an element, but retain the text of the element and any descendants, you ignore the element. For example, the following font element encloses text and a link:

<table>

...

    <td>

      <font style="font-weight:bold">

        some text

        <a href="index.html">Click here

        </a>

      </font>

    </td>

...

</table>

To include the text and link in the transformation, but ignore the font element, use the rule="ignore" attribute with the font element as follows:

<div class="transform_rule" rule="select" retain_parents="false" devices="ipt">

  <table>

...

      <td>

        <font style="font-weight:bold" class="transform_rule" rule="ignore" devices="ipt">

          some text

          <a href="index.html">Click here

          </a>

        </font>

      </td>

...

  </table>

</div>

Hiding Device-Specific Content from Full Browsers

By default, full browsers such as Internet Explorer and Netscape Navigator render all web page content, including the content enclosed in elements with the attribute class="transform_rule". If a web page contains content intended for full browsers as well as device-specific content, you can hide the device-specific content from full browsers as follows:

Use the attribute class="transform_rule_hide" when you specify the CTE XHTML extensions.
Include a declaration for transform_rule_hide either in a style element in the HTML page or in an external style sheet that you reference from a link element in the HTML page.

To embed a declaration for transform_rule_hide in an HTML page, include the following code within the head element:

<style>

  <!-- 

    .transform_rule_hide { 

      display: none; 

}

-->

</style>

To put a declaration for transform_rule_hide in an external style sheet, include the following code within the head element of the HTML page:

<link 

rel="stylesheet" 

type="text/css" 

href="filename.css" 

/>

where filename.css includes the following declaration for transform_rule_hide:

.transform_rule_hide { 

display: none; 

}

Managing Configuration Files When Using CTE XHTML Extensions

The CTE has a default configuration file that enables it to process CTE XHTML extensions included in a web page. The default configuration file includes a project named "Default Transformations" that defines all rules needed to process the extensions. A backup default configuration file is also provided with Design Studio in case the "Default Transformations" project is overwritten on the CTE.

Whether you use just the CTE XHTML extensions or both the extensions and Design Studio determines how you should manage the configuration file on a CTE:

If a CTE is used only to process web pages that include CTE XHTML extensions, all you need to do is verify that the pages work as you expect. If none of the transformations work, the default configuration file has likely been overwritten on the CTE. In that case, you need to follow the steps in the "Merging the Default Configuration File on a CTE" section.
If a CTE is used to process web pages that include CTE XHTML extensions and web pages that are transformed using rules created in Design Studio, you must merge any configuration files created in Design Studio with the default configuration file on the CTE. The configuration files that you create in Design Studio must not use the project name "Default Transformations."

If you download the configuration file from the CTE to Design Studio, you will see the "Default Transformations" project. While it is possible for you to make modifications to the default rules, such changes are not supported.

Merging the Default Configuration File on a CTE

The CTE XHTML extensions will not work unless the configuration file on the CTE contains the "Default Transformations" project provided with the default configuration file. If the default configuration file on a CTE is overwritten by a configuration file created in Design Studio, you need to merge the default file with the file currently on the CTE.

To merge the default configuration file on a CTE, perform these steps:

Step 1 Start Design Studio as described in the "Starting Design Studio" section.

Step 2 Insert the Design Studio CD into your CD-ROM drive.

Step 3 From the Design Studio File menu, choose Open.

Step 4 In the Open dialog box, navigate to the Design Studio CD and to the file backups\default.cte.

Step 5 Click Open.

Step 6 From the File menu, choose Publish Configuration.

Step 7 In the File Upload dialog box, click Merge.

Step 8 Wait until Design Studio displays a message that the configuration file is uploaded.

Step 9 Click OK.

Table of Contents

Specifying Transformation Rules in HTML Files

Introduction

CTE XHTML Extensions

Using CTE XHTML Extensions in Source HTML

Specifying Transformations

Creating Dialable Numbers in HTML Content

Ignoring an Element in HTML Content

Hiding Device-Specific Content from Full Browsers

Managing Configuration Files When Using CTE XHTML Extensions

Merging the Default Configuration File on a CTE