The CTE transforms web pages according to transformation rules. You can create transformation rules by using the following:
Design Studio
CTE XHTML extensions in source HTML/XML 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 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. 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. If different transformations are required for the various device types, sections of the web page may need to be replicated for each device.
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.
A special configuration file, extensions.tcf, is required for the CTE to interpret the XHTML extensions. The extensions.tcf file is provided on the Design Studio CD. If you use CTE XHTML extensions, we recommend that you do 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.
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 configuration file extensions.tcf.
CTE XHTML Extensions
Most CTE XHTML extensions consist of element attributes that specify the following information:
A class attribute value that is unique to the CTE.
A devices attribute that indicates the device types for which you want content transformed.
A rule attribute that specifies the transformation rule that you want to apply.
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.
Table 9-1 summarizes the XHTML extensions used with div elements and Table 9-2 (on) lists the XHTML attributes used on other elements.
Table 9-1 CTE XHTML Extensions Used with DIV Elements
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).
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.
For the IP phone values supported by your licenses, view the device's class value in the DDF Editor. If a class value is not specified, use the protocol value.
Applies the rule to the specified devices. A value is not valid if your license does not include the device type.
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.
ignore
Ignores the element only (not its text or child elements). Use rule="ignore" with the element that you want to ignore. For example, to ignore a font element for IP phones, add the attributes in the font tag:
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.
Identifies the label and number to be used for a dialable phone number. This feature is available only for WAP phones and Cisco IP phones. For information on Cisco IP phones, go to the Design Studio Help menu and choose Device Help.
See also the prefix attribute in this table.
cardbreak
Forces a card break. Useful for keeping two related elements together. You can also use the cardbreak extension outside of a div element as follows:
Default value. Used with the rule="select" attribute. Retains the parent 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.
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.
Refreshes the card after the number of seconds specified. A refresh of "0" means that the card will not refresh or that a refresh set earlier in the card deck will stop.
Include <refresh_timer="interval"/> anywhere on the card you want to refresh. You can also use the meta refreshelement, as described in the "Refreshing a Card" section.
1 This feature is available only for Cisco IP phones and devices that support meta refreshelements. For information on Cisco IP phones, go to the Design Studio Help menu and choose Device Help.
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 variety of devices or through a full browser. Device types shown in these examples are generic, such as device1.
Retained table elements for one device type.
Ignored font element and dialable phone number for one device type.
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.
<!-- The following div element selects content for device1. This content is also visible to full browsers. Assuming that the DDF retainformat value is "false," the first retainformat attribute toggles retainformat to "true" and the second retainformat attribute toggles retainformat to "false."-->
By default, the CTE prepends its IP address to links on transformed pages so that page requests are directed to the CTE. You can disable this behavior by adding the rule="noproxy" attribute to a link.
A dial URI, such as Dial:555-555-1234 or EditDial:9-555-555-1234. Dial indicates a number that the user cannot change; EditDial indicates a number that the user can change, such as by adding a prefix or access code. (Available for XML-based IP phones only.)
The child of the softkeyitem element, name, is the soft key label text.
The _keypad_mode and _input_label attributes are extensions to the input and textarea elements.
The _keypad_mode attribute specifies the input type for an input field. The _keypad_mode attribute corresponds to the Cisco IP phone XML object InputFlag, with the following values:
A (plain ASCII text; the default) T (telephone number) N (numeric) E (equation) U (uppercase) L (lowercase) P (password; used with any of the other InputFlag attributes, such as "AP")
The optional _input_label attribute specifies the prompt that an IP phone will display for the input field. A label can be up to 15 characters.
Suppose that a web page contains an input field for zip code and a text area for a tracking identifier. The input and textarea elements might appear as follows:
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 applications designed for full browsers to content that is appropriate for microbrowser screens. However, if you are creating an application specifically for delivery to devices, the development process is much different and requires only a few transformation rules.
To include content, 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.
By default, the CTE retains web page formatting. For example, for devices such as WML-based phones and Palm and RIM devices, table elements are retained as a table, rather than converted to a list. This behavior is controlled by the retainformat key in the DDF which defaults to "yes".
Use the retainformat attribute as follows:
Retain a table as a table element. Use this rule with a div or table element.
Retain an img element. (By default, the CTE drops images that are smaller than 20 pixels in both height and width for WAP and cHTML devices and IP phones.) Use this rule with a div or img element.
Retain other elements, such as font and pre, that would be ignored as the result of the DDF retainformat key.
Override the DDF retainformat="no" key for an entire page: Put the retainformat="true" attribute on the body element.
Change the value of the retainformat key more than once on a page. Each time you use the retainformat attribute, the value toggles.
For XML-based IP phones, a card is automatically dropped if it does not contain an alphanumeric character. For example, if the source HTML contains a link, followed by a comma and another link, the card containing the comma will be dropped. There might be cases in which you want to retain the card that contains the comma. For example, a card might contain an image that incorporates the comma. To retain the card with the comma, enclose the comma with a span element, as follows: <span class="transform_rule" rule="retainformat" devices="devices">,</span>
Table 9-3 contains sample HTML code for several types of transformations.
Table 9-3 HTML Code for Sample Transformations
Transformation
HTML Code
Select content for one device and select a subset of the same content for a second device.
Note This feature is available only for WAP phones and Cisco IP phones. For
information on Cisco IP phones, go to the Design Studio Help menu and choose
Device Help.
Some devices support the initiation of a phone call by selecting text in the microbrowser. The rule="dialname" and rule="dialnumber" attributes enable you to specify a phone number to be dialed when the user selects 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 that 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:
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 child elements of that element are also clipped. If you want to exclude an element, but retain the text of the element and any child elements, 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:
Note This feature is available only for Cisco IP phones. For information on Cisco IP
phones, go to the Design Studio Help menu and choose Device Help.
For XML-based IP phones, you can add up to three soft keys per card with the softkeyitem element. You specify which cards are to display the soft key, the URL or phone number for the soft key, and a label. For example, to add a soft key to card3 that opens the link http://www.fox.com , use the following syntax:
Specifying an Input Field Type and Label for an IP Phone
Note This feature is available only for Cisco IP phones. For information on Cisco IP
phones, go to the Design Studio Help menu and choose Device Help.
Cisco IP phones accept any ASCII character supported by the phone in an input field. You can add the _keypad_mode attribute to input type="text | password" or textarea elements to restrict the input type. For example, you can restrict the input type to a telephone number or uppercase letters, thus reducing the number of keystrokes required for a user to complete the field. Use the _input_label attribute if you want to specify a prompt for an input field.
See Table 9-2 for more information about the _keypad_mode and _input_label attributes.
Refreshing a Card
By default, a user must specify an action to move from one card to the next. For devices that support the meta refresh element, you can specify a refresh interval after which the display advances to the next card. The refresh interval that you specify (refresh_timer="interval") applies to the current card and each subsequent card for the web page until a refresh interval of "0" is encountered. Specify the refresh interval in seconds.
You can also specify a refresh interval by including a meta refresh element (meta http-equiv="refresh" content="interval; URL=http:// url") in the head element. In this case, the refresh applies to each card associated with the web page. Typically, you would use this method if a web page transforms to one card. For example, you might display an image and then refresh it to a menu; or you might rotate the display between a menu and a list of headlines.
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
To enable the CTE to process CTE XHTML extensions, a special configuration file, extensions.tcf, must be merged with the configuration file published to the CTE. extensions.tcf defines all rules needed to process the extensions. It is provided on the Design Studio CD and is also available in the Design Studio installation directory in studio/class/docs/extensions.tcf.
The method you use to manage a configuration file is based on whether you use just the CTE XHTML extensions or both the extensions and Design Studio, as follows:
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 extensions.tcf configuration file on the CTE. The configuration files that you create in Design Studio must not use the project name "Default Transformations."
While it is possible for you to make modifications to the rules in extensions.tcf, such changes are not supported.
Merging the Extensions Configuration File on a CTE
The CTE XHTML extensions will not work unless the configuration file on the CTE contains the project in the configuration file named extensions.tcf. You must merge extensions.tcf with the file currently on the CTE.
To merge the extensions.tcf configuration file on a CTE, perform these steps:
Step 2 Insert the Design Studio CD into your CD-ROM drive.
If you are sure that the file on your PC in the Design Studio installation directory, studio/class/docs/extensions.tcf, has not been modified, you can open it instead of the file on the Design Studio CD.
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\extensions.tcf.
Step 5 Click Open.
Step 6 From the File menu, choose Publish Configuration.
Step 7 In the File Upload dialog box, click Merge.
If you select Upload ScreenTop Pages, the ScreenTop will be overwritten.
Step 8 Wait until Design Studio displays a message that the configuration file is uploaded.
