Creating Web Page Transformations

You must assign an identifier to each web page you add to a Design Studio project. The Cisco CTE 1400 uses an identifier to match a web page to the corresponding transformation rules in the configuration file. You identify a web page by creating an Identifier rule that consists of one of the following:

An element on the page, typically the title element
All or part of a page URL
A combination of an element and the page URL

You typically assign a unique identifier to a web page so that its transformation rules affect only that page. However, if you want more than one page to share the same transformation rules, you can apply the identifier of one page to another page.

To determine a unique and reliable identifier for one or a group of pages, you need to evaluate the page characteristics. For example, is the page URL always the same? Is the page title text static or generated? Is there some other element that uniquely identifies the page? Is the page static or is it dynamically generated?

Table 4-1 provides guidelines for choosing identifiers based on page characteristics.

Table 4-1 Guidelines for Choosing Identifiers

Page Characteristics	Identifier
Has a title or other element that uniquely distinguishes it from all other web pages.	Text of the element.
Has a unique URL.	URL.
Has an element that uniquely distinguishes it from other pages on the same site but may not be unique to all web pages.	Unique portion of the URL or a combination of the URL and the unique text of the element.
Is dynamically generated based on a POST¹ method.	Unique element such as title. (Dynamically generated pages typically have different content but the same URL.)
Is dynamically generated based on a POST method; an application server generates the same title for the pages.	Part of the URL plus the title element.

1 POST is a communication method used by the HTTP protocol to send data from a client to a server. The POST method is used as the interface between HTML form or isindex queries and server-side processing programs.

To identify a page, you create identifier rules as described in these sections:

Identifying a Page by Element Text

Before you create an identifier, you must first add the page to a project as described in the "Adding a Page to an HTML Project" section.

To create an identifier based on element text, perform these steps:

Step 1 Locate the page in the project tree and click Identifier Rules.

Step 2 In the XHTML source view, right-click the text of the element you want to use as an identifier.

In this example, "Cisco Worldwide Contacts," the text below the title element, is selected.

Step 3 Choose Tag Contains from the shortcut menu.

The Identify Page dialog box appears. It lists each element that is in the path to the text you selected.

Step 4 (Optional) Change the default rule name.

Step 5 If you want Design Studio to match the text exactly, click Done. Otherwise, continue with the next step.

In the above example, a web page that contains "Cisco Worldwide Contacts" as its title text will match this identifier.

Step 6 In the Path to Selected Element area, click the text that you want to configure.

The Configure Text Element dialog box appears.

The top two fields enable you to specify which text you want to use to identify the page.

Step 7 Complete the top two fields to specify the text you want the Cisco CTE 1400 to use in order to match a web page to this identifier. See Table 4-2 for your options.

Table 4-2 Specifying Text to Identify a Page

Text in the "text to search for" Field	Menu Item Selected	Element Text Searched by the CTE
Original text	equals	Exact original text string These settings are reflected in the preceding dialog box example: the CTE matches this identifier only to web pages that have title text that equals "Cisco Worldwide Contacts"
Original text	contains	Text string that contains the original text
Original text	any text	Any text string
Modified text	equals	Exact modified text string
Modified text	contains	Text string that contains the modified text

Step 8 Leave the Depth to Match option and the Position to Match option set to Exact unless you want to match against multiple depths or positions of the same element.

If you are using title element text for the identifier, you do not need to change these settings because only one title element is allowed for an HTML/XML page.
The need to use several occurrences of any element to identify a page is unlikely. If you want to use several occurrences, see "Applying Rules to Several Elements."
For information on manually configuring an element by editing its XPath expression, see the "Manually Configuring the XPath Expression of an Element" section.

Step 9 Click Done.

If you also want to identify the page by URL, see the "Identifying a Page by URL" section.

To begin adding transformation rules to the page, see the "Creating Transformation Rules" section.

Identifying a Page by URL

Before you can create an identifier, you must first add the page as described in the "Adding a Page to an HTML Project" section.

To create an identifier based on a URL, perform these steps:

Step 1 Locate the page in the project tree and click Identifier Rules.

Step 2 Right-click anywhere in the XHTML source view.

Step 3 Choose URL from the shortcut menu.

The Identify by URL dialog box appears.

Step 4 Review the URL and determine if any portion of it should be excluded, based on the following guidelines:

If the URL includes a "/" (such as www.fox.com/products) and also ends with "/" (such as www.fox.com/products/), exclude the "/" at the end.

When a URL includes "/" characters, the CTE considers the last "/" when matching transformation rules to the page. For example, if the URL identifier rule is www.fox.com/products/, the CTE applies the corresponding transformation rules only to a page requested as www.fox.com/products/, not to a page requested as www.fox.com/products.

However, if a URL does not include "/" characters other than one at the end, the CTE does not consider the ending "/" when matching rules. For example, if the URL identifier rule is www.fox.com:80/, the CTE applies the corresponding transformation rules to pages requested as www.fox.com or www.fox.com/.

When you browse to a web page, the URL that is returned often includes additional information, such as a query string (a question mark, "?", followed by a text string), such as http://www.fox.com?q=some_string . To match any query string, exclude the string that follows the equal sign (=).

Step 5 To match against the exact URL shown, click Done. Otherwise, continue with the next step.

Step 6 Select the portion of the URL that you do not want to match against, and then click Exclude.

Note Any string matches the excluded portion of a URL. Thus, if a URL is www.fox.com/index.html and you exclude index.html, any URL that starts with www.fox.com matches the identify rule.

Step 7 To re-include text marked as excluded, select the text and click Include.

Step 8 Click Done.

If you also want to identify the page by an element, see the "Identifying a Page by Element Text" section.

To begin adding transformation rules to the page, see the "Creating Transformation Rules" section.

Using an Identifier Rule for Multiple Pages

When you add a page that matches the identifier rules of another page, Design Studio displays "Passes Identifier Rules" in the lower-left pane. This message may mean that you need to return to the page that is noted in the Page field and change its identifier rules so that they are unique.

However, if you need to transform several pages in exactly the same way, you can use the same identifier rules for more than one page. When you apply the identifier rules of one page to another, the transformation rules are also applied. Applying the rules of one page to another is useful when you are working with pages created from a template.

The following procedures explain how to respond to the "Passes Identifier Rules" message, based on how you want to handle the identifier rules.

To add the page and then change the identifier rules for the page listed in the Page field (so they are unique), perform these steps:

Step 1 In the lower-left pane, click Add Page and create identifier rules for it as usual.

Step 2 Locate in the project tree the page whose identifier rules you want to change and click Identifier Rules.

Step 3 In the lower-left pane, right-click the identifier rule you want to change.

Step 4 Complete the dialog boxes and click Done.

For help with the dialog boxes, see the "Identifying a Page by Element Text" section and the "Identifying a Page by URL" section.

To apply the identifier rules to the new page, perform this step:

In the lower-left pane, click Apply Rules.

Design Studio uses the identifier rules and transformation rules for the page.

Creating Transformation Rules

To create transformation rules for a web page, you need to be familiar with the page's design and ongoing changes. Some of your content choices can have dependencies on page-specific characteristics such as the position of an element in the XHTML hierarchy. For example, if you indicate you want to include the first three occurrences of a particular element, you need to know that an application server is not dynamically changing the position of those elements.

The mechanics of creating rules are straightforward. You follow the same general steps to create each type of rule.

To create transformation rules, perform these general steps:

Step 1 Choose a device type in the project tree.

Note You can create and test transformation rules for all device types in Design Studio. The base model of the CTE 1400 supports multiple, simultaneous connections from IP phone and VoiceXML users. You must purchase license keys to support multiple, simultaneous connections of additional device types.

Step 2 Right-click an element in the XHTML source view.

Step 3 Choose a command from the shortcut menu.

Step 4 Complete the dialog boxes that appear.

Design Studio translates your instructions into a rule and displays the results of the rule in the browser view where you can see how the rule transforms the page.

Table 4-3 provides simple examples that introduce you to the effect of each transformation rule. Design Studio provides many options used to refine transformation rules, enabling you to set up sophisticated transformations.

Table 4-3 Transformation Rules

Transformation Rule Type	Purpose	Example
Select rule	Includes an element; you can also retain or remove the ancestor elements	Suppose that a web page contains this element hierarchy: html head body center image form image ... table To include the form, you apply the Select rule to the form element. The form element and any child elements will be included in the transformed content. If this is the first Select rule applied to a page, it results in the exclusion of all other elements. Thus, the image elements before and after form, as well as the table element, would not be included. If you choose to retain the ancestors of the form element, the resulting transformation is as follows: html head body center form For subsequent applications of the Select rule to the same page, selected elements are added back to the page. For example, to include the table element, apply the Select rule to it. The resulting transformation is as follows: html head body center form table For information on using the Select rule, see the "Selecting Content" section.
Select rule
Clip rule	Excludes an element	Suppose that you applied the Select rule to a form element, and form has the following child elements: form table tr [defines text you want to exclude] tr [defines input elements] To exclude the first tr element, you apply the Clip rule to it. The Clip rule excludes that tr element and any child elements. For information on using the Clip rule, see the "Clipping Content" section.
Ignore rule	Overrides a Select rule or Clip rule	Suppose that you want to include the text of a link, but not the link itself. The elements you want to work with are as follows: font a href=link text To keep the text and its formatting, apply the Select rule to the font element. To ignore the link, apply the Ignore rule to the a element. Use the Ignore rule, rather than the Clip rule, in order to affect only the a element and not its parent (font) or child (text) elements. For information on using the Ignore rule, see the "Ignoring Content" section.
Modify rule	Changes an element	The Modify rule enables you to change an element. For example, you might change the type of element from an hr element (horizontal rule) to a br element (line break). You can replace an element with XHTML/XML code or text; you can add, change, or remove element attributes. For information on using the Modify rule, see the "Modifying Content" section.
Insert rule	Adds an element or text	Suppose that you want to add some text, such as a copyright statement, to a page. The text already included for transformation is as follows: html head body center form font text hr To add the copyright statement after the hr element, select the hr element and apply the Insert rule to it. You can then specify that you want to add text after (or before) the horizontal rule. You can also insert blocks of HTML/XML code. For information on using the Insert rule, see the "Inserting Content" section.
Move rule	Enables you to relocate an element; useful for managing layout on very small screens	Suppose a web page contains an input field, followed by its label, as follows: formbegin table tr td input [the input field] tr td font [label for input field] formend When the web page displays on a small microbrowser screen, the input field and label display on two different pages. The input field displays at the bottom of a screen and the label displays at the top of the next screen. In this case, it would be better to display the label first, followed by the input field. The Move rule allows you to move the label before the input field. For information on using the Move rule, see the "Moving an Element Tag" section.
Retain Element rule	Retains a table as a table element, retains an img element, and retains a noscript element	By default, the CTE converts a table to a list for Palm and RIM devices and WAP phones. The CTE also drops images that are smaller than 20 pixels in both height and width for WAP and cHTML devices and IP phones. To retain a table or img element, select the element and apply the Retain Element rule. For information on using the Retain Element rule, see the "Retaining a Table Element" section and the "Retaining a Small Image" section. If JavaScript support is not enabled, Design Studio renders the contents of a noscript element. If JavaScript support is enabled and you want to render the contents of a noscript element, apply the Retain Element rule to the noscript element.
Frames rule	Uses noframes content or redirects a page to one of its frames	When you browse to a page that uses frames, Design Studio gives you the option of using the noframes element content or redirecting a page to one of its frames. For information on using the Frames rule, see the "Working with Frames" section.
Dial Number rule	Enables a user to dial a phone number by selecting it	Suppose that a web page you are transforming includes a company's customer support phone number. To enable a wireless user to dial the phone number by clicking it, select the phone number in the XHTML and apply the Dial Number rule to it. The Dial Number rule is supported by Cisco IP phones, WAP phones, and HDML devices. For information on using the Dial Number rule, see the "Adding a Dialable Phone Number" section.
IMG ALT rule	Replaces an image with its alternate text	Use the IMG ALT rule to replace an image with the alternate text of the img element. This is useful for images that are too large for display on a wireless device. For information on using the IMG ALT rule, see the "Working with Images" section.
Import XSL rule	Applies a custom rule to a node	Use the Import XSL rule to supplement or replace an xsl:template element in the XSLT style sheet. This advanced feature lets you create your own rules; for example, you can manipulate a string in a URL. For information on using the Import XSL rule, see the "Importing Custom XSL" section.
Paginate Anchor rule	Divides a web page into several pages	Suppose that a web page contains four categories of links. Rather than sending all four categories to a wireless device in one long page, you can manually paginate the page so that a device user sees four pages, each with one category of links. For information on using the Paginate Anchor rule, see the "Working with Pages" section.

Selecting Content

After you create identifier rules, you can work with the page content. To indicate that you want to include an element and its child elements in the transformation, create a Select rule.

The first Select rule you create for a page excludes all other elements. The subsequent Select rules you create add to your initial selection.

It is generally more efficient to begin your work by selecting the main element you want to include (perhaps a form or table). You can subsequently add other elements to your initial selection by going to the View Original tab.

To create a Select rule, perform these steps:

Step 1 In the project tree, click a device type for which you want to create a Select rule.

You will have a chance later to apply the rule to other device types.

Step 2 In the XHTML source view, right-click the element you want to include in a transformed page.

If you have trouble locating an element in the XHTML source view, click the content in the browser view. Design Studio highlights the corresponding element in the XHTML source view.

Step 3 Choose Select from the shortcut menu.

The Configure: Select Rule dialog box appears with a default name in the Rule Name field. Design Studio forms a unique name by combining the rule name, the name of the element or text to which you are applying the rule, and a number.

Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Select Search Form" or "Select Product Table."

A name helps you locate the rule later if you need to change it.

Step 5 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button if you know that this element appears on all of the pages in this project and you want to handle the element in the same way on all pages. For example, all of the pages that you want to transform might include a copyright statement. You can select the copyright statement on one page and apply that rule to all pages, rather than creating the same rule for each page.
Click the This Page radio button to apply the rule only to this page.

Step 6 Choose each device type to which you want to apply the rule.

This step enables you to apply one rule to multiple devices.

Step 7 Choose whether you want to include the immediate hierarchy above the element (retain the ancestors) or exclude it (remove the ancestors):

Click the Retain radio button if you want Design Studio to include the necessary hierarchy to maintain structurally correct markup. For example, if you select a td element and retain ancestors, Design Studio includes the parent tr and table elements. Retaining ancestors impacts performance, so retain ancestors only if they are needed.
Click the Remove radio button if you know that the hierarchy is not necessary to maintaining structurally correct markup. Be aware that removing ancestors can result in incorrect markup. For example, if you select a td element and choose to remove the ancestors, the transformed element may not have the required parent tr and table elements.

Note The Select rule always takes precedence over other rules. For example, if you select an element and retain ancestors, Design Studio disregards any Clip rules or Ignore rules that you apply to those ancestors.

Step 8 If you want the transformation rule to apply to this exact element and only to this element, click Done. Otherwise, see "Applying Rules to Several Elements."

Note If you are working with content on a dynamically generated page, you might need to use the Advanced setting in order to uniquely identify an element that does not have a static location on the page. For example, if you want to apply a rule to one of several tables and the tables do not always appear in the same location, use the Advanced setting to associate the table with a unique element that the CTE can use to locate the table. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-48.

Design Studio displays the results of the Select rule. In the XHTML source view, the Select icon (
) indicates that you selected this element.

When you apply a Select rule to an input element or a select element, Design Studio automatically applies the Select rule to the formbegin and formend elements. The formbegin and formend elements represent <form> and </form>, respectively. They are provided by Design Studio in order to maintain well-formed syntax.

Clipping Content

It is generally most efficient to select the major items you want included on a transformed page, and then remove from those items any child elements you do not want to include. For example, you might want to include a form but exclude some of its fields. To exclude content, use the Clip rule.

To create a Clip rule, perform these steps:

Step 1 In the project tree, click a device type for which you want to create a Clip rule.

You will have a chance later to apply the rule to other device types.

Step 2 In the XHTML source view, right-click the element you want to exclude from a transformed page.

If you have trouble locating an element in the XHTML source view, click the element in the browser view. Design Studio highlights the corresponding element in the XHTML source view.

Step 3 Choose Clip from the shortcut menu.

The Configure: Clip Rule dialog box appears with a default name in the Rule Name field. Design Studio forms a unique name by combining the rule name, the name of the element or text to which you are applying the rule, and a number.

Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Clip Footer."

A name helps you locate the rule later if you need to change it.

Step 5 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button if you know that this element appears on all of the pages in this project and you want to handle the element in the same way on all pages. For example, all of the pages that you want to transform might include a large logo image that you want to exclude. You can clip the image on one page and apply that rule to all pages, rather than creating the same rule for each page.
Click the This Page radio button to apply the rule only to this page.

Step 6 Choose each device type to which you want to apply the rule.

This step enables you to define one rule for multiple devices.

Step 7 If you want the Clip rule to apply to this exact element and only to this element, click Done. Otherwise, see "Applying Rules to Several Elements."

Design Studio displays the results of the Clip rule. In the XHTML source view, the Clip icon (
) indicates that you clipped this element.

Ignoring Content

After you apply a Select rule or Clip rule to an element, you can choose to ignore any descendant or parent of that element. For example, you might want to select a form but ignore some elements that control formatting. The Ignore rule applies only to an individual element (not its ancestors or descendants).

To create an Ignore rule, perform these steps:

Step 1 In the project tree, click a device type for which you want to create an Ignore rule.

You will have a chance later to apply the rule to other device types.

Step 2 In the XHTML source view, right-click the element you want to ignore on a transformed page.

If you have trouble locating an element in the XHTML source view, click the element in the browser view. Design Studio highlights the corresponding element in the XHTML source view.

Step 3 Choose Ignore from the shortcut menu.

Notice in the above example that the Ignore rule is being applied to the b element.

The Configure: Ignore Rule dialog box appears.

Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Ignore formatting."

Step 5 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button to ignore this element on all pages in this project.
Click the This Page radio button to ignore the element only on this page.

Step 6 Choose each device type to which you want to apply the rule.

Step 7 If you want the transformation rule to apply to this exact element and only to this element, click Done. Otherwise, see "Applying Rules to Several Elements."

Design Studio displays the results of the Ignore rule. In the XHTML source view, the Ignore icon (
) indicates that you ignored this element.

Modifying Content

The Modify rule gives you great flexibility in transforming content. You can change an element and its attributes as follows:

Replace an element with a different element and specify attributes for it.
Replace an element with an XHTML/XML fragment or text.
Add, change, or remove element attributes.

When choosing content to modify, be aware of content that might dynamically change, causing unintended results.

To modify an element, perform these steps:

Step 1 In the project tree, click a device type for which you want to create a Modify rule.

You will have a chance later to apply the rule to other device types.

Step 2 In the XHTML source view, right-click the element you want to modify for the transformed page.

Step 3 Choose Modify from the shortcut menu.

The Configure: Modify Element Rule dialog box appears.

Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Modify Button Name."

Step 5 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button to modify this element on all pages in this project.
Click the This Page radio button to modify this element only on this page.

Step 6 Choose each device type to which you want to apply the rule.

Step 7 Click the Modify Element tab.

Step 8 Change the element in any of the following ways:

To remove an attribute, click the Operation drop-down arrow and choose Remove from the menu.
To change an attribute, click the Operation drop-down arrow, choose a Modify option from the menu, and then enter the new name or value.
To add an attribute, click Add Attribute and enter the attribute name and its value.
To replace the element with another element, click the drop-down arrow and choose an element from the menu. Click Add Attribute to add attributes to it.
To replace the element with XHTML/XML or text, click XHTML/XML Fragment or Text and type the code or text in the text box.

Note If an attribute includes a URL, you must enter special characters by using XHTML character entity references. For example, use "&" for the "&" character. This use of XML is required because Design Studio and the CTE converts content into XHTML. All entity references must be the unnormalized value (that is, in the form of "&something;").

Step 9 If you want the transformation rule to apply to the original element and only to the original element, click Done. Otherwise, click the Configure Rule tab and see "Applying Rules to Several Elements."

Design Studio displays the results of the Modify rule. In the XHTML source view, the Modify icon (
) indicates that you modified this element. In the following example, the hr element was changed to a br element.

Inserting Content

In addition to working with the original content of a web page, you can also insert text and XHTML/XML elements. You can insert individual elements and specify attributes for them. You can also insert blocks of XHTML code, for example to create a list or table.

The code you insert must follow the established rules for well-formed XML. If you are unfamiliar with those rules, see the "Well-Formed XML" section.

To insert content, perform these steps:

Step 1 In the project tree, click a device type for which you want to create an Insert Tag rule.

You will have a chance later to apply the rule to other device types.

Step 2 Determine where you want to insert the element(s) or text.

Note You cannot insert an element on a node where a Select rule is applied; in addition, you cannot insert an element inside a clipped element.

Step 3 In the XHTML source view, right-click the element where you want to insert content.

Step 4 Choose Insert from the shortcut menu.

The Configure: Tag Insert Rule dialog box appears.

Step 5 (Optional) Change the rule name, perhaps using a brief description of its content such as "Insert Table."

Step 6 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button to insert the element in all pages in this project.
Click the This Page radio button to insert the element only on this page.

Step 7 Choose each device type to which you want to apply the rule.

Step 8 Click the Insert Element tab.

The Insert Element tab appears.

Step 9 In the Insert New Element area, choose a setting as follows:

Click the Before radio button to insert the element before the current selection.
Click the After radio button to insert the element after the current selection.
Click the As Child radio button to insert the element as a child element to the current selection. For example, use this setting to add a table row or cell to a table.
Click the As Parent radio button to insert the element as a parent element to the current selection. For example, use this setting to add a formatting element to existing text. You can insert only a single XHTML element as a parent element. You cannot insert an XHTML fragment as a parent element.

Step 10 In the Type of Element to Insert area, choose a setting as follows:

To insert HTML/XML code, type it in the HTML/XML Fragment text box.
To insert one element, click the Single HTML/XML Element radio button, click the drop-down arrow, and choose an element from the menu. Click Add to add attributes to it.

Note If an attribute includes a URL, you must enter special characters by using XHTML character entity references. For example, use "&" for the "&" character.

Design Studio displays the results of the Insert rule. In the XHTML source view, the Insert icon (
) indicates that you inserted an element at this location. In the following example, the HTML fragment www.cisco.com was inserted after the br element.

Step 11 If you want the transformation rule to apply to the original element and only to the original element, click Done. Otherwise, click the Configure Rule tab and see "Applying Rules to Several Elements."

Well-Formed XML

XML is much more strict than HTML about where tags are placed and how they are written. XML follows a set of rules for well-formed markup; when your code breaks a rule, an XML parser returns an error. Well-formed XML complies with the following rules (for more information about these rules and other rules, see an XML reference manual):

XML is case sensitive. For any one element, you must use consistent capitalization in the opening and closing tags. For example, <form> and </form> are well-formed tags; <form> and </Form> are not well-formed tags.
All elements must have closing tags. For example, you must always follow <br> with </br>, or you can use one tag that both opens and closes the empty element, <br/>.
XML does not allow overlapping tags. For example, XML does not allow a construction such as <strong><em>some text</strong></em>. When an element (<em>) starts inside of another element (<strong>), it must also end inside that element. For this example, the correct syntax is <strong><em>some text</em></strong>.
Attribute values must be enclosed in single or double quotation marks.

Moving an Element Tag

To accommodate small microbrowser screens, the Cisco CTE 1400 breaks transformed pages into small chunks and sends one screenful of information to the device at a time. As a result, information that originally was grouped, such as an input field and its label, can display on different screens. If an input field precedes its label in the web page, the wireless device might display an unlabeled input field at the bottom of a screen and the corresponding label at the top of the next screen. It will be less confusing to a wireless user to see the label first, followed by the input field. To handle this and similar situations, use the Move rule to move an element.

You might also find this rule useful as a shortcut. For example, rather than doing a series of selects, clips, and ignores just to include one line of text inside of a table, it might be easier to move the line you want to keep and clip the table.

To move an element tag, perform these steps:

Step 1 In the project tree, click a device type for which you want to create a Move rule.

Step 2 In the XHTML source view, right-click the element you want to move (the source element).

Step 3 Choose Move from the shortcut menu.

The Move Destination dialog box appears.

Step 4 In the XHTML source view, select the destination element (the location where you are moving the source element).

The destination element must already be selected for transformation. That is, the destination element must be a selected node or a child of a selected node.

The selected tag displays in the Move Destination dialog box.

Note The location where you move the element tag must be a part of the content selected for transformation and must be a valid location for the element type. If the location is invalid, a Move rule is applied to the element but it has no effect.

Step 5 Click Done.

The Configure: Move Rule dialog box appears.

Step 6 (Optional) Change the rule name, perhaps using a brief description of its content such as "Move input field label."

Step 7 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button to move the element on all pages in this project.
Click the This Page radio button to move the element only on this page.

Step 8 Choose each device type to which you want to apply the rule.

Step 9 In the Move tag area, select the location for the rule:

Click Before to move the source element before the destination element.
Click After to move the source element after the destination element.

Step 10 To keep a copy of the element in its original location, click the Remove Source Element check box to clear it.

Step 11 If you want the Move rule to apply to this exact element and only to this element, click Done. Otherwise, see the "Applying the Move Rule to Several Elements" section.

Design Studio displays the results of the Move rule. In the XHTML source view, the Move icon (
) displays in the source location.

Adding a Dialable Phone Number

Cisco IP phones, WAP phones, and HDML devices support the initiation of a phone call by clicking text in the microbrowser. Use the Design Studio Dial Number rule to specify a phone number to be dialed when the user clicks a particular text string.

While creating the Dial Number rule, 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 add a dialable phone number, perform these steps:

Step 1 In the project tree, click a device type for which you want to create a Dial Number rule.

Step 2 In the XHTML source view, right-click the text element where you want to apply the Dial Number rule.

You must select a text element that includes the phone number.

Step 3 Choose Dial Number from the shortcut menu.

The Configure: Dial Number rule dialog box appears.

Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Dial tech support."

Step 5 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button to add the dialable number to all pages in this project.
Click the This Page radio button to add the dialable number only to this page.

Step 6 Choose each device type to which you want to apply the rule.

Step 7 (Optional) Enter a prefix for the phone number.

Step 8 Click the Label tab and then click Select Label.

The Label Element dialog box appears.

Step 9 In the XHTML source view, select the text element that contains the label for the phone number.

Step 10 Click Done.

The Label tab of the Configure: Dial Number rule dialog box contains the path to the element containing the label.

Step 11 To apply the Dial Number rule only to this phone number, click Done. Otherwise, see the "Applying the Dial Number Rule to Several Elements" section.

Design Studio displays the results of the Dial Number rule. The Dial Number icon (
) indicates a dialable phone number.

Working with Pages

The following sections describe how to divide one web page into several web pages and how to locate an element on a dynamically generated page:

Dividing a Web Page into Several Pages

Since web pages can contain more information than is reasonable to send to a device with a microbrowser, you can use Design Studio to manually paginate a web page, effectively creating multiple views of the page. For example, if a page contains four categories of links, you can "divide" the page into four smaller pages, each containing one category of links.

To paginate a page, you apply a Paginate Anchor rule to the link that points to the content you want to divide. By paginating an anchor, you are creating several links where there was originally just one link. Each link corresponds to a different view of the content. You define those views by using transformation rules.

Suppose that that a page contains the text "Overview," which is linked to overview.html as shown in Figure 4-1. The page overview.html contains three categories of information with the headings "Features," "Solutions," and "Technology."

Figure 4-1 Before Pagination

Rather than sending all of overview.html to a wireless device at once, you want to break the information into three chunks. Design Studio enables you to replace the "Overview" link with three links and then define the content that should appear when a user follows those links.

In this example, you might replace "Overview" with three links using the headings "Features," "Solutions," and "Technology." Design Studio creates a link from each heading to overview.html as shown in Figure 4-2. You then define how overview.html should appear when a user follows the links from "Features" or the other headings.

Figure 4-2 After Pagination

The general process for manually paginating a page is as follows:

1. Create links to the page you want to paginate.

Add the page that contains the link to the content you want to paginate. Apply the Paginate Anchor rule to the link, specifying the number of links you want to create and the text you want to appear for each link.

2. Define how the content should appear for each link.

Use the Browse tab to follow a link you created. Add the page to the project and then create identifier and transformation rules for it.

To create links to the page you want to paginate, perform these steps:

Step 1 In the XHTML source view, right-click the a href element that contains the link to the page you want to paginate.

Step 2 Choose Paginate Anchor from the shortcut menu.

The Configure: Paginate Anchor Rule dialog box appears.

Step 3 Choose each device type to which you want to apply the rule.

Step 4 In the Number of Manual Paginations text box, enter the total number of views you want to create for the destination page.

Step 5 Click the Insert Element tab.

The Insert Element tab appears.

Use the Insert Element tab to specify the text you want to appear before, after, or instead of the existing link. The text you insert should uniquely identify each view of the destination page.

Step 6 Select the location for the inserted text as follows:

To put the inserted text before the existing link, select Before Anchor's Children.
To put the inserted text after the existing link, select After Anchor's Children.
To replace the existing link, select Replace all Children.

Step 7 In the text box for tab 1, enter the text you want to display for the link.

For example, if you want the word "Overview" followed by a br element, type Overview<br/>.

Step 8 Click tab 2 and enter the text and any XHTML elements for the link.

Step 9 Repeat Step 8 for each tab.

Step 10 Click Done.

The Paginate Anchor icon (
) indicates the anchor you paginated.

After you create the links, you define how the page is to be transformed for each view.

To define a view of a page, perform these steps:

Step 1 Verify that the links you just created are visible in the Design Studio window. If they are not visible, click in the project tree the page that contains the links.

Step 2 Click the Browse tab.

Step 3 Click a link you created.

The destination page appears.

Step 4 Click Add Page to Project.

The Identifier Rules area already lists an identifier rule for the page. That rule is created by Design Studio when you applied the Paginate Anchor rule.

Step 5 Create an identifier rule as described in the "Identifying a Page" section.

Step 6 In the project tree, click a device type you want to work with.

Step 7 Apply transformation rules to specify the content you want to display when a user follows the link.

For example, you might want to select just the content you want displayed. This view that you define will display when a user clicks the corresponding link.

Step 8 To define the view for the remaining links, repeat Step 3 through Step 7 for each link.

Specifying a Rule Location on a Dynamically Generated Page

When you apply a rule to a node, Design Studio includes in the rule the relative location of the node. Thus, if you apply the Select rule to the fourth table on a page, the Select rule will affect only the fourth table, not some other table. That method of locating rules always works for static web pages, but does not always work for dynamically generated pages. For example, when you create a rule for a dynamically generated page, the table that is currently in the fourth position might change positions. When that occurs, the CTE will not have enough information to determine where to apply the rule.

The various Configure dialog boxes contain an Advanced setting that enables you to specify a second node that the CTE can use in determining where to apply a rule. For example, perhaps the particular table you want to select contains a unique image or follows a particular text element. You can specify the image or text element as a way to locate the rule.

To specify a rule location on a dynamically generated page, perform these steps:

Step 1 In the Configure dialog box for the rule you are creating, select the Advanced check box.

The Relative Path Element dialog box appears.

Step 2 In the XHTML source view, click an element that can be used by the CTE to locate where to apply the rule.

For example, if the table you are transforming always includes a particular image, select the img element.

Step 3 Click Done.

Step 4 Complete the Configure dialog box as usual and then click Done.

Working with Frames

When you navigate to a page that contains frames, Design Studio gives you the following choices:

You can add the page to the project and use the default page.
You can use the content of the noframes element as described in the "Using the Contents of the noframes Element" section. When a wireless device user requests the page that contains frames, the contents of the noframes element appears.
You can redirect the page to one of its frames as described in the "Redirecting a Page to One of its Frames" section. When a wireless device user requests the page that contains frames, the contents of the specified frame appears.

Using the Contents of the noframes Element

To use the contents of the noframes element, perform these steps:

Step 1 When you navigate to a page and see the "This Page Contains Frames" message (similar to the following), click Add Page to Project to add the page to your project.

Step 2 Create an identifier for the page.

Step 3 In the project tree, click a device type for which you want to create a Frames rule.

Step 4 Right-click the XHTML source view.

Step 5 Choose Frames from the shortcut menu.

The Configure: Frames Rule dialog box appears.

Step 6 (Optional) Change the rule name, perhaps using a brief description of its content such as "NoFrames Content for Home Page."

Step 7 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button to use the noframes content for all pages in this project.
Click the This Page radio button to use the noframes content only on this page.

Step 8 Choose each device type to which you want to apply the rule.

Step 9 Click Done.

The contents of the noframes element appears in the browser and XHTML source views. The Frames icon (
) indicates that you applied the Frames rule to the noframes element.

Note If you want, you can apply other transformation rules to the content of the noframes element.

Redirecting a Page to One of its Frames

To redirect a page to one of its frames, perform these steps:

Step 1 When you navigate to a page and see the "This Page Contains Frames" message, click Add Page to Project to add the page to your project.

Step 2 Create an identifier for the page.

Step 3 In the project tree, click a device type for which you want to create a Frames rule.

Step 4 Right-click the XHTML source view.

Step 5 Choose Frames from the shortcut menu.

Step 6 Choose whether to apply the rule to all pages in this project or just this page.

Step 7 Click Redirect to frame.

Step 8 From the drop-down menu, choose the destination frame name.

Step 9 Choose each device type to which you want to apply the rule.

Step 10 Click Done.

Design Studio displays the name of the page to which the page will be redirected.

Working with Tables

By default, the CTE transforms a table element to a list for Palm and RIM devices and WAP phones only. You can change the default behavior in the following ways:

Retain the table element so that the Cisco CTE 1400 does not transform the table to a list on Palm and RIM devices and WAP phones. For more information, see the "Retaining a Table Element" section.
Convert the table to a list for all devices. A list displays better than a table on small microbrowser screens.

Suppose that a web page contains the following table:

1a	1b	1c
2a	2b	2c
3a	3b	3c

By using four Ignore and Modify rules, you can convert a table of any number of columns and rows to a list. The table cells list by rows, as follows:

1a
1b
1c
2a
2b
2c
3a
3b
3c

For more information, see the "Converting a Table to a List" section.

Retaining a Table Element

When you retain a table element, the CTE does not transform the table to a list on Palm and RIM devices and WAP phones. If a device supports left-to-right scrolling, the retained table will be scrollable.

To retain a table element, perform these steps:

Step 1 In the project tree, click a device type for which you want to create a Retain Element rule.

Step 2 In the XHTML source view, right-click the table element you want to retain as a table.

Step 3 Choose Retain Element from the shortcut menu.

The Configure: Retain Element Rule dialog box appears.

Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Retain product table."

Step 5 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button to retain the table element on all pages in this project.
Click the This Page radio button to retain the table element only on this page.

Step 6 Choose each device type to which you want to apply the rule.

Step 7 If you want the transformation rule to apply to this exact element and only to this element, click Done. Otherwise, see "Applying Rules to Several Elements."

Design Studio displays the results of the Retain Element rule. The Retain Element icon (
) shows where you applied the rule.

Converting a Table to a List

To convert a table to a list, you create rules to transform the table as follows:

Ignore the table element.
Modify tr elements to ul elements.
Modify td elements to li elements.

Regardless of the number of rows and columns in a table, you need only four rules to convert it to a list.

For the following procedure, assume that a table has three columns and a variable number of rows.

The XHTML source view of the table is as follows:

To convert the table to a list by rows, perform these steps:

Step 1 In the project tree, click a device type for which you want to convert a table to a list.

Step 2 In the XHTML source view, right-click the table element you want to convert.

Step 3 Choose Ignore from the shortcut menu.

You ignore the table element because you are converting it to a list.

Step 4 Choose each device type to which you want to apply the rule.

Step 5 Click Done.

Step 6 In the XHTML source view, right-click the first tr element after the table element.

Step 7 Choose Modify from the shortcut menu.

Step 8 Click the Modify Element tab.

Step 9 From the Single HTML/XML Element menu, choose ul.

Step 10 Click Done.

Step 11 In the XHTML source view, right-click the td element immediately below the tr element you just modified.

Step 12 Choose Modify from the shortcut menu.

Step 13 In the Path to Selected Element area, scroll down to the last td element listed and click it.

Step 14 Click the All Depths and All Positions radio buttons, and click Done.

By applying this rule to all depths and positions, you ensure that all cells are included in the list.

Step 15 Click the Modify Element tab.

Step 16 From the Single HTML/XML Element menu, choose li.

Step 17 Click Done.

The XHTML source view shows the icons for the Ignore and Modify rules you created.

At this point, the table converts to a list. However, the second and following tr elements cause blank lines to appear in the list. Ignore the remaining tr elements.

Step 18 In the XHTML source view, right-click the second tr element in the table.

Step 19 Choose Ignore from the shortcut menu.

Step 20 In the Path to Selected Element area, scroll down to the last tr element listed and click it.

Step 21 Click the All Positions radio button, click Done, and then click Done again.

The XHTML source view now shows the four rules you created.

Working with Forms

When transforming forms for delivery to wireless devices, consider the usability of the form on the device. For example, a drop-down menu with 50 items will be difficult to use on a microbrowser and should be shortened if possible. You should also consider the information needed by an application server to process the form. The application server may need information provided by fields that you do not want displayed on a microbrowser screen. The following guidelines will help you handle those types of issues:

Reduce the number of choices in a Select object or drop-down menu.
Change a text box to a drop-down menu to improve usability on a wireless device.
Although some desktop browsers interpret the Enter key as a Submit button, most wireless devices require a button click to submit a form. If a form does not have a Submit button, insert the following tag:

<input type="submit" name="fformnumberzs">

where formnumber is the same number that appears for other elements in that same form in the XHTML. For example, if the XHTML shows form number "1" for other elements, insert the following tag:

<input type="submit" name="f1zs">

If an input field precedes its label in the web page, the wireless device might display an unlabeled input field at the bottom of a screen and the corresponding label at the top of the next screen.

It will be less confusing to a wireless user to see the label first, followed by the input field. To handle this and similar situations, use the Move rule to rearrange the elements.

If you do not want to include the entire form in a transformation, determine whether the application server needs a particular element before you choose to exclude it from the selection.

The default setting of a checkbox, radio button, or Select object may be required by an application server to process the form. You can pass the default to the application server, but hide the element from the wireless device user, by changing the type attribute of the element to "hidden".

Suppose that a form includes a Select object, input box, and Submit button. You want to include in the transformed form only the input box and the Submit button; you do not want the user to change the default value of the Select object. If you apply the Select rule to the input box and the Submit button, the Select object will not be submitted to the application server and the form will not work. To submit the default value of the Select object, but hide it from the wireless device user, change the type attribute of the Select object to "hidden".

For information about forms that use JavaScript, see the "Working with JavaScript" section.

Working with Images

The CTE converts GIF, JPEG, and BMP images into a format recognized by the requesting wireless device. However, if an image is smaller than 20 pixels in both width and height, the CTE does not send it to WAP or cHTML devices.

Some WAP phones do not support the display of images, so the CTE does not send images to them. In those cases, if an img element or input element (type="image") has an alt attribute, the CTE sends the alternate text instead of the image. If an input element (type="image") does not have an alt attribute, the CTE sends the word "Submit" as the default alternate text.

Note If an input element is being used as an image map in the HTML, the IMG ALT rule does not work.

You can use Design Studio to change how img elements and input elements are handled as follows:

If an img element has alternate text you want to send instead of the image, use the IMG ALT rule. For more information, see the "Using Alternate Text Instead of an Image" section.
To not send a particular image or its alternate text to wireless devices, clip the image. For example, you might choose to clip images to save space on the microbrowser screen or to reduce the download time of a page.
For WAP phones that do not support images, if an input element uses an image (type="image") instead of a submit button (type="submit") and an alt attribute is not specified, the CTE sends a button labeled "Submit." You can change the label by using the Modify rule to add an alt attribute to the input element. This feature is useful if a form has several Submit buttons.
To retain a small image, apply the Retain Element rule to the img element as described in the "Retaining a Small Image" section.

Using Alternate Text Instead of an Image

To use alternate text instead of an image, perform these steps:

Step 1 In the XHTML source view, right-click the img element that has the alternate text you want to use instead of the image.

Step 2 Choose IMG ALT from the shortcut menu.

The Configure: IMG ALT Rule dialog box appears.

Step 3 Choose whether to apply the rule to all pages in this project or just this page.

Step 4 Choose each device type to which you want to apply the rule.

Step 5 Click Done.

The IMG ALT icon (
) shows where you applied the rule.

You can apply the IMG ALT rule to several elements, such as to all images on a page. In the Configure: IMG ALT Rule dialog box, click the img element in the Path to Selected Element area, and then change the depth and position settings.

Retaining a Small Image

By default, the CTE does not send to WAP or cHTML devices or IP phones images that are smaller than 20 pixels in both width and height.

To retain an img element, perform these steps:

Step 1 In the project tree, click a device type for which you want to create a Retain Element rule.

Step 2 In the XHTML source view, right-click the small img element you want to retain.

Step 3 Choose Retain Element from the shortcut menu.

The Configure: Retain Element Rule dialog box appears.

Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Retain spacer image."

Step 5 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button to retain the img element on all pages in this project.
Click the This Page radio button to retain the img element only on this page.

Step 6 Choose each device type to which you want to apply the rule.

Step 7 If you want the transformation rule to apply to this exact element and only to this element, click Done. Otherwise, see "Applying Rules to Several Elements."

Design Studio displays the results of the Retain Element rule. The Retain Element icon (
) shows where you applied the rule.

Working with Dynamically Generated Pages

Dealing with dynamically generated content requires that you understand how a page is constructed, how it changes, and how to uniquely identify the information you want to retain. For example, you can ask yourself: Does the page consist of a variable number of tables that may not always appear in the same location? If so, and you want to select just one table, you need to apply the Select rule to the table and use the Advanced setting to specify an element that Design Studio can use to locate the table.

To identify the page on which dynamically generated content appears, use the Tag Contains identifier rule to specify the contents of an element that uniquely identifies the generated page.

To handle dynamically generated content, configure one or more elements that are in the path of a selected element. The way in which the content changes determines how you should configure elements, as follows:

If text changes, match on any text or on only the text that remains static.
If an element's position changes, try matching on all positions of the element. If that does not provide the intended results, also match on all depths or try manually configuring the element.
If the content structure changes, try skipping tags. For example, if tables are nested at different depths when they are dynamically generated, skip the extra tags.
If an element does not have a static location on the page, you might need to use the Advanced setting in order to uniquely identify the element. For example, if you want to apply a rule to one of several tables and the tables do not always appear in the same location, use the Advanced setting to associate the table with a unique element that the CTE can use to locate the table. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section.

When you test your transformation rules on dynamically generated pages, be sure to follow as many different paths through the content as possible to ensure that the rules handle all possible generated content.

For an example of how to handle dynamically generated content, see the "Dynamically Generated Content" section.

Working with JavaScript

While many websites use client-side JavaScript to handle tasks such as validation of form input, most wireless devices are unable to run JavaScript. To enable websites to make JavaScript-dependent content available to wireless users, the Cisco CTE 1400 provides transparent JavaScript emulation to wireless devices, acting as a proxy server for the devices. The emulation is done without any intervention by the Design Studio or CTE user.

The CTE support for JavaScript provides access to JavaScript-dependent form manipulation, event processing, browser redirection, and cookie handling. This means that a device user can accomplish tasks such as the following:

Fill in and submit a form.
Receive validation regarding information entered into a form.
Reset form content.
Click a button or link to achieve the above tasks or to load a document on the device.

The following sections describe the CTE JavaScript support:

CTE Processing of JavaScript

By default, JavaScript support is enabled for a CTE. If the sites you are transforming do not include JavaScript, you can use the Cisco CTE 1400 Administrative Interface to disable JavaScript support, as described in the "Specifying Content and Management Settings" section of the Cisco CTE 1400 Configuration Note. When JavaScript support is enabled for a CTE, each page that the CTE transforms requires additional memory even if the page does not contain JavaScript. By disabling JavaScript support when you do not need it, you improve the performance of the CTE.

When JavaScript support is enabled for a CTE, the CTE JavaScript engine handles a request for an HTML page as described in the following list.

1. The JavaScript engine searches for JavaScript located in these places:

script elements
Files referenced by <script src="filename"> tags
onclick, onsubmit, and other event handler attributes
<a href="javascript:method();"> tags.

2. The JavaScript engine runs the JavaScript.

The JavaScript might perform actions such as modify form elements, cause the browser to retrieve another page, and submit a form to the application server.

3. The JavaScript engine caches the page.

By keeping the page in a cache, the CTE enables a wireless user to return to the same form if a submit fails.

4. The JavaScript engine modifies the page as follows:

Wraps the entire document in a form element.
Changes regular and reset buttons to "Submit" buttons.
Changes text in links containing JavaScript
(<a href="javascript:method();">) to "Submit" buttons.
Changes images in links containing JavaScript to image "Submit" buttons.
Changes the name attribute of form elements.
Changes the value attributes of check boxes and radio buttons.
Adds a "Change" button to drop-down menus with onchange events.

5. The JavaScript engine sends the page to the wireless device.

When the user of a wireless device clicks a button, the JavaScript engine sets the form to the proper values, determines which events were triggered, and runs the event handler script. Depending on the result of that processing, the JavaScript engine then sends content to the wireless device or sends a new request to the application server.

JavaScript Features Supported by the CTE

When emulating JavaScript, the CTE acts like a Netscape 4.7 client. Thus, the CTE does not support JavaScript that is specific to Internet Explorer, such as document.all or VBScript.

Table 4-4 lists the JavaScript features that the CTE supports.

Table 4-4 Supported JavaScript Features

Feature Type	CTE Processing
Form manipulation	The CTE transforms JavaScript related to form manipulation so that wireless device users can enter values into input fields and submit input. The CTE supports input from the following: Buttons: regular, image, submit, and reset Text boxes: regular, text areas, password, and hidden Drop-down menus and Select objects Checkboxes and radio buttons The CTE handles the processing required before submitting the input fields. The CTE adds a "Change" button beside a drop-down menu. A wireless device user must click the "Change" button after making a menu selection. The CTE requires that a wireless user submit or verify a form by clicking a button. The CTE does not support input fields that upload files.
Event processing	The CTE handles the processing required to determine the next event in response to a user action such as the following: Clicking a button or link Submitting or resetting a form Selecting from a drop-down menu Loading a document The CTE transforms HTML elements that trigger a JavaScript event into a "Submit" button. Elements that might be transformed include the following: reset buttons, regular buttons, links with onclick events, links with href attributes that contain JavaScript code. (As mentioned in "Form manipulation," the CTE also adds "Change" buttons.) The CTE does not support the following types of events: input focus, blur, and image mouseover events.
Browser redirection	The CTE allows script-based retrieving of new pages.
Cookie handling	The CTE allows script-based reading and writing of cookies.

Guidelines for Design Studio Users

The CTE handles all of the transformations required to support JavaScript-based forms. Because the CTE transforms any HTML element that triggers a JavaScript event into a button labeled "Change" or "Submit," you will see more buttons in the Design Studio browser view.

When you disable JavaScript support for a CTE, Design Studio displays the JavaScript as it appears in the original web page, as shown in Figure 4-3.

Figure 4-3 Page Displayed with JavaScript Disabled

However, when you enable JavaScript support for a CTE, Design Studio transforms the JavaScript as shown in Figure 4-4. In the browser view, notice the additional "Change" buttons; in the XHTML source view, notice that the JavaScript has been replaced with XHTML tags.

Figure 4-4 Page Displayed with JavaScript Enabled

Design Studio users do not need to apply any rules in order for JavaScript to operate correctly on wireless devices. However, you can apply transformation rules to a page that contains JavaScript in order to perform the following:

Clip unneeded elements in a form. For example, you might clip a button.

Note Clipping, ignoring, or not including a checkbox, radio button, or Select object makes those objects appear unselected to an application server. If you need to make them appear selected to the application server, but do not want them to be visible on the transformed page, do not clip them. Instead, modify the object so that its type attribute is set to "hidden".

Add a Submit button to a form.

If a form does not have a Submit button, insert the following tag:

<input type="submit" name="fformnumberzs">

where formnumber is the same number that appears for other elements in that same form in the XHTML. For example, if the XHTML shows form number "1" for other elements, insert the following tag:

<input type="submit" name="f1zs">

Modify the label of a button from "Change" or "Submit."
Move a button or other elements in a form.
Reduce the number of choices in a Select object or drop-down menu.

Consider, for example, if a list of 50 items is practical to send to a wireless device. If possible, eliminate some of the choices.

Change a text box to a drop-down menu to improve usability on a wireless device.
If a page contains JavaScript that opens a pop-up window, you can replace the unsupported pop-up window with a link. For more information, see the "Replacing a Pop-Up Window with a Link" section.

Note When working in Design Studio on a page that contains JavaScript, note that the operation of JavaScript is state dependent and Design Studio might not return the correct state when you navigate to the Browse tab. If you click the Browse tab to return to a page you worked on in the same session, be sure to click the

(reload) button to retrieve the page from the CTE cache.

If you need to apply transformation rules to JavaScript-based forms, follow these guidelines to ensure that the CTE can correctly transform and process the JavaScript:

Do not change the name attribute of the elements in a form. Design Studio assigns and uses name attributes to track elements.
Do not change the value attribute of check boxes and radio buttons. Design Studio assigns and uses value attributes to track the state of check boxes and radio buttons.

Replacing a Pop-Up Window with a Link

To replace a pop-up window with a link, perform these steps:

Step 1 View the source HTML in Netscape or Internet Explorer.

Step 2 Search for "window.open" and copy the referenced URL.

Note If window.open calls a function, search for the function and copy the URL referenced in its associated a element.

Step 3 Use Design Studio to insert a link, using the URL you copied.

JavaScript Features Not Supported by the CTE

Table 4-5 lists the JavaScript features that the CTE currently does not support.

Table 4-5 Unsupported JavaScript Features

Feature Type

Unsupported Actions

Dynamic HTML

Dynamically write new content to a browser window (document.write).
Dynamically manipulate cascading style sheets (document.tag, classes, IDs).
Dynamically manipulate layers (document.layer).
Show or hide page elements.
Change images during a mouse rollover.
Collapse sidebars.

Frame and window manipulation

Manipulate values and objects in multiple browser frames or other windows.
Open and close new windows.
Retrieve new content for a given window.

Other

Use of JavaScript that is specific to Internet Explorer, such as document.all and VBScript.

When the CTE encounters unsupported syntax, it ceases to run the current script. Subsequent scripts will run.

Use a history object to move through browser history.
Use the back button. If a wireless device user clicks the back button, the user must then reload the page so that the CTE has the latest information to continue processing the JavaScript.
Display alerts, prompts, and confirmations.

If a device user enters invalid information into a field, the CTE does not submit the form. Instead, the CTE clears the invalid field. The user can then reenter the field and submit the form.

For prompts and confirmations, the CTE returns "true" unless the script explicitly returns "false" (in which case the event stops running).

Include external script files.

Importing Custom XSL

In addition to using the rich set of transformation rules provided with Design Studio, you can also apply a custom rule to an element or a custom XSL template to a page. This advanced feature enables you to supplement or replace the default XSL template in the XSLT style sheet created by Design Studio.

When you apply a rule such as Select or Move, Design Studio writes an xsl:template element for the rule. You can choose, instead, to create your own rule by modifying or replacing an xsl:template element. The default XSL template provided by Design Studio is associated with a particular node or set of nodes. If you override the default, the XPath pattern in the xsl:template match= statement determines on which nodes the rule is applied.

Importing a custom XSL template rule is useful in cases such as the following:

To perform advanced string manipulation on text or on element attributes.

For example, you might need to reorder something in a URL or you might need to remove part of the beginning and the end of a URL.

To modify dynamically generated content.
To use several custom XSL style sheets for XML pages.

The following sections describe how to import custom XSL:

Importing a Custom XSL Template Rule on a Node

To import a custom XSL template rule on a node, perform these steps:

Step 1 In the XHTML source view, right-click the node where you want to apply a custom XSL template rule.

Step 2 Choose Import XSL from the shortcut menu.

The Configure: XSL Import Rule dialog box appears.

Step 3 (Optional) Change the rule name, perhaps using a brief description of its content such as "Custom rule: manipulate URL."

Step 4 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button to apply the style sheet to all pages in this project.
Click the This Page radio button to apply the style sheet only to this page.

Step 5 Choose each device type to which you want to apply the rule.

Step 6 Click the Import XSL tab.

The Import XSL tab appears.

Step 7 To change the XSL template for just this node, leave the Use Default <xsl:template> check box selected.

Step 8 Type the XSL statements for the rule you are creating.

Step 9 Click Done.

Design Studio validates the XSL and displays an error message if the XSL is not well formed or includes unsupported elements such as xsl:keys and xsl:call-template.

For examples of custom XSL rules, see the "Custom XSL Rules" section.

Using Several XSL Style Sheets for a Project

To make a set of XML pages available to wireless device users, you import into Design Studio one or more XSL style sheets that you created in another application. Design Studio and the CTE use an imported XSL style sheet to transform the XML pages.

If your XML pages have only one XSL style sheet, you can create an XML project, as described in the "Working with XML Projects" section. If your XML pages have several XSL style sheets to support different wireless device protocols, you create an HTML project and import a style sheet for each protocol by replacing the default <xsl:template> element.

To use several XSL style sheets with one project, perform these steps:

Step 1 In the project tree, select the device type that corresponds to a style sheet you want to import.

Step 2 Right-click in the XHTML source view or the browser view.

Step 3 Choose Import XSL from the shortcut menu.

The Configure: XSL Import Rule dialog box appears.

Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Custom rule: manipulate URL."

Step 5 Choose whether to apply the rule to all pages in this project or just this page:

Click the Project radio button to apply the style sheet to all pages in this project.
Click the This Page radio button to apply the style sheet only to this page.

Step 6 Click the Import XSL tab.

The Import XSL tab appears.

Step 7 Clear the Use Default <xsl:template> check box.

Step 8 Open the XSL style sheet in a text editor such as Notepad.

Step 9 Copy all xsl:template elements in the style sheet.

Step 10 Paste the copied text into the XSL Import Rule dialog box.

Step 11 Click Done.

Design Studio validates the XSL and displays an error message if the XSL is not well formed or includes unsupported elements such as xsl:keys and xsl:call-template.

Step 12 Apply transformation rules as needed.

Step 13 Repeat Steps 1 through 12 for another device type.

Note In the XSL Import Rule dialog box, be sure to clear the check box for the previously configured device type.

Previewing VoiceXML Support

Design Studio contains a preview of VoiceXML support. This preview enables you to create a transformation for one static web page that a caller can then access by phone through the BeVocal or Tellme VoiceXML service providers. When a caller dials the number you set up with a VoiceXML service provider, the service provider sends a request for the page through the CTE. The CTE transforms the page to VoiceXML and delivers the page to the service provider, which then reads the page to the caller, as shown in Figure 4-5.

Figure 4-5 Processing a VoiceXML Request

To set up a VoiceXML transformation, perform these steps:

Step 1 Contact BeVocal or Tellme to set up an account and a portal for the web page.

The service provider will ask you to specify a username, password, IP address, and port number. The service provider will give you a phone number for your VoiceXML portal.

Step 2 Create a project in Design Studio and add the web page you want to transform to VoiceXML.

Note The page must be available on the Internet. VoiceXML service providers cannot access intranet content.

Step 3 Specify a page identifier for the page.

Step 4 In the project tree, select VoXML.

Step 5 Use Design Studio transformation rules to select the content you want callers to hear when they request the page from BeVocal or Tellme.

Note All Configure dialog boxes now include VoiceXML in the list of Device Types. Be sure to choose VoiceXML in the Device Type list when you configure the rules.

The content you select must contain static content; dynamic content is currently not supported. You can include links, but a caller will not be able to select and follow links in this preview release of VoiceXML.

Step 6 Save the configuration file and publish it to the CTE.

Step 7 Dial the phone number for the VoiceXML portal to hear the transformed content.

Working with Conflicting or Dead Rules

The rules area (lower left pane of the Design Studio window) displays all rules that have been applied to a selected device. When two or more rules display in red, those rules are in conflict because they are applied to the same node. When a rule displays in gray, the rule is not currently taking effect and is considered a "dead" rule.

The following sections describe how to work with conflicting and dead rules:

Resolving Conflicting Rules

Although Design Studio allows some combinations of transformation rules to be applied to a node, other combinations are flagged as conflicting rules. For example, suppose that you applied the Clip rule to all images on a web page and then later decided to apply the Image Alt rule to one of the images. A node with the Clip rule would then also have an Image Alt rule applied to it. The rules area would display the Clip rule and the Image Alt rule in red to indicate the rule conflict. This rule conflict may be intentional (you want to use only two rules to clip all but one image and use the alternate text for that image), or perhaps a mistake (you forgot that you had clipped all images).

Rule conflicts also occur in the following situations:

When there is a rule on an ancestor of a node that has a manually configured XPath expression.
When there is a rule on the parent of the source or destination path of a Move rule.

When you see rules displayed in red in the rules area, verify that the rules are operating as you intended. If the rule conflict is intentional and you are satisfied with the resulting transformation, you do not need to change the rules.

When you allow rules to conflict, be aware that Design Studio applies the rules as follows:

1. A Select rule always takes precedence.

2. If the two rules that conflict are the same type of rule, the most specific rule takes precedence. For example, a rule that is configured to match the exact depth and position of an element is more specific than a rule configured to match all depths. A rule applied to a page is more specific than a rule applied to all projects.

3. If two rules are equally specific, the last rule listed in the rules area takes precedence.

Note To reorder two rules in the rules area, click the first of the two rules and click Delete. From the Edit menu, select Undo. The rule you deleted is added to the end of the rules list.

If the rule conflict is unintentional, review the rules and determine how you need to change the rules to achieve the intended transformation.

To quickly navigate between conflicting rules, perform these steps:

Step 1 In the rules area, select a rule that is displayed in red.

Design Studio selects the corresponding element or text in the browser view and the XHTML source view.

Step 2 To locate another rule that is applied to the same element or text, right-click the selected rule in the rules area.

Step 3 Choose Rule Conflicts from the shortcut menu and then choose a rule name from the submenu.

Design Studio selects the corresponding element or text in the browser view and the XHTML source view.

Note If the rule conflict is resolvable, the submenu contains Resolve Conflict.

Evaluating Dead Rules

A dead rule, displayed in gray in the rules area, is a rule that has no effect on the current page. A dead rule might be the expected result of a transformation. For example, suppose that you applied one set of rules to a series of web pages. The first web page has a Next button; the second and following web pages have Next and Previous buttons. You applied a Select rule to the Previous button. When the first web page displays, the Select rule is dead because the first web page does not have a Previous button. However, the Select rule works for the remaining web pages. In this case, the "dead" rule is working as you intended.

When you discover a dead rule, determine if it is acceptable for the rule to not take effect in some cases. If the rule should always take effect, edit the rule or apply additional rules as needed.

Editing Transformation Rules

To edit a transformation rule, perform these steps:

Step 1 Verify that the correct configuration file is open.

Step 2 In the project tree, locate the page you want to change.

Step 3 For that page, click the device type you want to change.

Step 4 Use any of these methods to edit a rule:

In the XHTML source view, right-click the element whose rule you want to edit and choose Edit Rule from the shortcut menu.
In the Rules pane, click the rule you want to edit and click Edit, or right-click a rule and choose Edit Rule from the shortcut menu.

Step 5 Complete the dialog boxes as described in the "Creating Transformation Rules" section.

To delete a transformation rule, perform these steps:

Step 1 Verify that the correct configuration file is open.

Step 2 In the project tree, locate the page you want to change.

Step 3 For that page, click the device type you want to change.

Step 4 Use any of these methods to delete a rule:

In the XHTML source view, right-click the element whose rule you want to delete and choose Delete Rule from the shortcut menu.
In the Rules pane, click the rule you want to delete and click Delete, or right-click a rule and choose Delete Rule from the shortcut menu.

Note After you update a configuration file, you must publish it to a CTE for the changes to take effect.

Table of Contents