|
|
The following sections describe how to use Design Studio to create rules used to transform web pages:
You must assign an identifier to each web page you add to a Design Studio project. The CTE 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:
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
|
| 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:
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 2 In the XHTML source view, right-click the text of the element you want to use as an identifier.
In this example, "Sample Contacts Page," 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 identify the page by matching the original text exactly, click OK. If you want the CTE to apply the transformation rules to a larger set of pages, continue with the next step to specify boolean matches in the Path to Selected Element area.
When identifying a page by a text string, specify an exact match if you want the CTE to apply the transformation rules only to pages with the exact text string. In the above example, a web page that contains "Sample Contacts Page" as its title text will match this identifier.
Step 6 In the Path list, verify that the text you are using as an identifier is selected.
The Path to Selected Element area displays settings that enable you to indicate how you want the CTE to match the text when identifying pages.
Step 7 Complete the Text String Match area to specify the text that you want the CTE 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
Step 8 Leave the Depth to Match option and the Position to Match option set to Exact.
Step 9 Click OK.
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.
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 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:
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/.
Step 5 To match against the exact URL shown, click OK. 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 OK.
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.
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 that they are unique), perform these steps:
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 OK.
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:
Design Studio uses the identifier rules and transformation rules for the page.
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 steps:
|
Note You can create and test transformation rules for all device types in Design Studio. The base model of the CTE supports multiple, simultaneous connections from IP phone 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
|
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.
|
Note If your site requires the head element, be sure to apply a Select rule to it. |
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:
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:
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:
|
Note The Select rule always takes precedence over other rules. For example, if you select an element and retain parent elements, Design Studio disregards any Clip rules or Ignore rules that you apply to those parent elements. |
Step 8 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button 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, click the Select Relative Path button 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-47. |
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.
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:
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:
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 OK. Otherwise, see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button 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, click the Select Relative Path button 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-47. |
Design Studio displays the results of the Clip rule. In the XHTML source view, the Clip icon (
) indicates that you clipped this element.
After you apply a Select rule or Clip rule to an element, you can choose to ignore any child 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 parent or child elements).
To create an Ignore rule, perform these steps:
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:
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 OK. Otherwise, see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button 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, click the Select Relative Path button 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-47. |
Design Studio displays the results of the Ignore rule. In the XHTML source view, the Ignore icon (
) indicates that you ignored this element.
The Modify rule gives you great flexibility in transforming content. You can change an element and its attributes as follows:
When choosing content to modify, be aware of content that might dynamically change, causing unintended results.
To modify an element, perform these steps:
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:
Step 6 Choose each device type to which you want to apply the rule.
Step 7 Click the Modify Element tab.
If you are modifying an element, the element name displays in the Single XHTML/XML Element area.
If you are modifying text, the text displays in the XHTML/XML Fragment or Text area.
Step 8 Change an element in any of the following ways:
|
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;"). |
Change text by typing code or text in the XHTML/XML Fragment or Text area.
Step 9 If you want the transformation rule to apply to the original element and only to the original element, click OK. Otherwise, see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
Design Studio displays the results of the Modify rule. In the XHTML source view, the Modify icon (
) indicates that you modified this element.
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, you can 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:
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.
You specify later whether to insert the content before or after the element you select.
Step 4 Choose Insert from the shortcut menu.
The Configure: 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:
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:
Step 10 In the Type of Element to Insert area, choose a setting as follows:
|
Note If an attribute includes a URL, you must enter special characters by using XHTML character entity references. For example, use "&" for the "&" character. |
Step 11 If you want the transformation rule to apply to the original element and only to the original element, click OK. Otherwise, see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
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 text Contacts: was inserted after the br element.
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):
To accommodate small microbrowser screens, the CTE breaks transformed pages into small chunks and sends one screenful of information 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 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 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 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 OK.
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:
Step 8 Choose each device type to which you want to apply the rule.
Step 9 In the Move Element area, select the location for the rule:
Step 10 To remove the element you are moving from its original location, keep the check box selected. To retain a copy of the source element in its original location, click the Remove Source Element check box to clear the check box.
Step 11 If you want the Move rule to apply to this exact element and only to this element, click OK. 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.
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:
Since web pages can contain more information than is reasonable to send to 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 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."
Rather than sending all of overview.html 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.
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:
By paginating a link, you will create two or more links in addition to or instead of the original link.
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.
For example, if you want to create a total of four links that point to four different views of one page, enter 4.
Step 5 Click the Insert Element tab.
The Insert Element tab appears.
Use the Insert Element tab to specify the text that you want to appear before, after, or instead of the existing link. The text you insert will display on the transformed page and should uniquely identify each view of the destination page.
Step 6 Select the location for the inserted text as follows:
Step 7 In the text box for tab 1, enter the text you want to display for the first link.
For example, if you want the word "Headquarters" followed by a br element, type Headquarters<br/>.
Step 8 Click tab 2 and enter the text and any XHTML elements for the next link.
Step 9 Repeat Step 8 for each tab.
Step 10 Click OK.
The text that you entered in each tab on the Insert Element tab displays in the HTML source view. The Paginate Anchor icon (
) indicates the anchor you paginated.
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
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 2 Click the Browse tab.
Step 3 Click a link you created.
Step 4 In the lower left pane, click Add to Configuration.
The Add Page to Project dialog box appears.
Step 5 Enter a descriptive page name and then click OK.
The Identifier Rules area lists an identifier rule for the page. That rule is created by Design Studio when you applied the Paginate Anchor rule.
Step 6 Create an identifier rule as described in the "Identifying a Page" section.
Step 7 In the project tree, click a device type you want to work with.
Step 8 Apply transformation rules to specify the content that you want to display when a user follows the link.
For example, you might want to select just the content that you want displayed. This view that you define will display when a user clicks the corresponding link.
Step 9 To define the view for the remaining links, repeat Step 3 through Step 8 for each link.
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.
Each of the Configure dialog boxes contains a Select Relative Path button 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:
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 OK.
Step 4 Complete the Configure dialog box as usual and then click OK.
When you navigate to a page that contains frames, Design Studio gives you the following choices:
To use the contents of the noframes element, perform these steps:
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:
Step 8 Choose each device type to which you want to apply the rule.
Step 9 Click OK.
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.
To redirect a page to one of its frames, perform these steps:
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 OK.
Design Studio displays the name of the page to which the page will be redirected.
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:
Suppose that a web page contains the following table:
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:
For more information, see the "Converting a Table to a List" section.
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 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:
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 OK. Otherwise, see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
Design Studio displays the results of the Retain Element rule. The Retain Element icon (
) shows where you applied the rule.
To convert a table to a list, you create rules to transform the table as follows:
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 2 In the XHTML source view, right-click the table element that 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 OK.
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 OK.
Step 11 In the XHTML source view, right-click the td element immediately below the tr element that 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 From the Depth to Match drop-down menu, choose All Depths.
Step 15 From the Position to Match drop-down menu, choose All Positions.
By applying this rule to all depths and positions, you ensure that all cells are included in the list.
Step 16 Click the Modify Element tab.
Step 17 From the Single HTML/XML Element menu, choose li.
Step 18 Click OK.
The table converts to a list. Depending on the structure of the table, you might need to ignore some tr elements to eliminate blank lines in the transformed table.
When transforming forms, consider the usability of the form on a 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 in a microbrowser. The following guidelines will help you handle those types of issues:
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:
It will be less confusing to a 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.
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 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 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.
The CTE converts GIF, JPEG, and BMP images into a format recognized by the requesting 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 or IP phones.
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.
You can use Design Studio to change how img elements and input elements are handled as follows:
To use alternate text instead of an image, perform these steps:
|
Note The img element must be part of an area that has a Select rule applied. The IMG ALT rule does not select an image for transformation. |
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 OK.
The IMG ALT icon (
) shows where you applied the rule.
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
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.
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 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:
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 OK. Otherwise, see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
Design Studio displays the results of the Retain Element rule. The Retain Element icon () shows where you applied the rule.
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:
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.
IP phones, WAP phones, and HDML devices support the initiation of a phone call by selecting text in the microbrowser. Use the Design Studio Dial Number rule to specify a phone number to be dialed when the user selects a particular text string. By default, a phone number cannot be edited by the phone user; you can allow a phone user to change a phone number.
While creating the Dial Number rule, 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 add a dialable phone number, perform these steps:
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.
|
Note The phone number must be part of an area that has a Select rule applied. The Dial Number rule does not select the phone number for transformation. |
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:
Step 6 Choose each device type to which you want to apply the rule.
Step 7 From the Dial Type drop-down menu, choose whether you want to allow users to add an access code or other numbers to the phone number before dialing it.
Step 8 (Optional) Enter a prefix for the phone number.
Step 9 Click the Label tab and then click Select Label.
The Label Element dialog box appears.
Step 10 In the XHTML source view, select the text element that contains the label for the phone number.
Step 11 Click OK.
The Label tab displays the path to the element containing the label.
Step 12 To apply the Dial Number rule only to this phone number, click OK. 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 and its label. If you enter a prefix, it is included on the transformed page.
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
By default, the CTE converts a series of a href elements as a numbered list of links on IP phones. A phone user can then choose a link by using the keypad rather than by scrolling through the list. If a list of a href elements contains other elements that you do not want to include in the transformation, apply the Group rule in order to remove all but the a href elements.
The Group rule operates on an element and all of its child elements, eliminating all elements other than a href elements. Figure 4-3 shows a portion of a web page as viewed in a desktop browser. Figure 4-4 shows a portion of the default transformation, which breaks the content into multiple screens and includes the text that follows each link. Figure 4-5 shows the transformation when the Group rule is applied, which eliminates all content except for the links.
You must apply the Select rule to an element that contains the links you want to group. For example, if a table contains four cells, each with several links, you apply the Select rule to the table element and apply the Group rule to each td element in order to number all links. If you want to include just the links that are in one cell, you apply the Group rule only to the td element that contains those links.
To group links, perform these steps:
The Group rule is valid only for IP phones and WAP devices.
Step 2 Apply a Select rule to an element that contains the links to be grouped.
For example, if the links are all contained in td elements, consider selecting the parent tr or table element. For information on creating a Select rule, see the "Selecting Content" section.
Step 3 In the XHTML source view, right-click an element that contains the links you want to group.
As you determine where to place a Group rule for WAP devices, consider that each group that you create will be sent to the device as a separate screen. For IP phones, consecutive groups will appear on the same card. The IP phone will paginate the content of a group as needed.
Step 4 Choose Group from the shortcut menu.
The Configure: Group Rule dialog box appears.
Step 5 (Optional) Change the rule name, perhaps using a brief description of its content such as "News links."
Step 6 Choose whether to apply the rule to all pages in this project or just this page:
Step 7 Choose each device type to which you want to apply the rule.
Step 8 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
Design Studio displays the results of the Group rule. The Group icon (
) shows where you applied the rule.
Step 9 If you applied a Group rule for IP phones, click the Preview tab and review the resulting screens and Soft Keys. You might want to further refine the transformation by using rules such as Soft Keys or Refresh.
After you create a Group rule, you can change the grouped links as follows:
|
Note Do not apply a Select rule inside of grouped links. A Select rule overrides the Group rule and removes the grouped links from the transformed page. |
By default, an input or textarea element displayed on an IP phone compatible with Cisco IP phone services will accept any ASCII character supported by the phone. You can limit the type of characters accepted as input by applying an Input Type/Label rule on an input or textarea element. For example, you can specify that an input field will accept only numbers or will accept only uppercase letters. By limiting the type of characters that can be entered in a field, you can reduce the number of keystrokes required for a user to complete the field.
|
Note The Input Type/Label rule sets the value of the Cisco IP phone XML object InputFlags. If an input element includes the attribute type="password", InputFlags is set to P plus the type specified with the Input Type/Label rule. |
You can also use the Input Type/Label rule to specify a label for an input element. An IP phone will use the label as a prompt for the input field.
For more information on how the CTE handles input fields on IP phones, see the "Previewing Transformations for IP Phones" section.
To specify the input type or label of a field, perform these steps:
Step 2 In the XHTML source view, right-click the input or textarea element that you want to change.
Design Studio allows you to apply an Input Type/Label rule only to input elements with an attribute of type="text" or type="password" or to textarea elements.
|
Note The input or textarea element must be part of an area that has a Select rule applied. The Input Type/Label rule does not select an input or textarea element for transformation. |
Step 3 Choose Input Type/Label from the shortcut menu.
The Configure: Input Type/Label Rule dialog box appears.
Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Accept telephone numbers only."
Step 5 Choose whether to apply the rule to all pages in this project or just this page:
Step 6 From the Input Type drop-down menu, choose a type.
The input types are as follows:
|
Note If an input element has a type="password" attribute, user input will be echoed to the screen as asterisks. You can use any of the input types with an input type="password" element. |
Step 7 Optionally, specify a label of up to 15 characters that the IP phone will use as a prompt for the input field.
Step 8 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
Design Studio displays the results of the Input Type/Label rule. The Input Type/Label icon () shows where you applied the rule.
IP phones compatible with Cisco IP phone services include four Soft Keys, as shown in Figure 4-6. Soft Keys are used for navigation, to select menu items, and for other IP phone service functions such as dialing a number.
When an IP phone user requests a web page, the CTE breaks the content into a series of screens, or cards, and adds Soft Keys, which are used for navigation, to the cards. The additional Soft Keys vary based on the type of object on the card: menu, text, image, or input. For an explanation of the default Soft Keys added by the CTE, see the "Previewing Transformations for IP Phones" section.
You can define up to three Soft Keys per card in addition to the default Soft Keys. The CTE adds a More Soft Key that is used to display the additional Soft Keys.
|
Note The menu, text, image, and input objects correspond to the following Cisco IP
phone XML objects: CiscoIPPhoneMenu, CiscoIPPhoneText,
CiscoIPPhoneImage, and CiscoIPPhoneInput. The Soft Key rule creates the Cisco IP phone XML object SoftKeyItem as well as the corresponding objects Name, URL, and Position. Due to an IP phone limitation, Soft Keys cannot be defined for input objects. |
The following sections explain how to define Soft Keys:
To create a Soft Key, you specify the label that will be used for the Soft Key and provide the URL the key will open or the phone number the key will dial. The CTE positions the Soft Key after the default Soft Keys on the card or cards that you specify. In addition to the default Soft Keys, you can specify three Soft Keys per card.
To create a Soft Key, perform these steps:
Step 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links.
Step 3 Click the Preview tab, review the cards, and determine where you want the Soft Key to appear.
Step 4 Click the Edit tab and locate an element that appears on a card you identified in the previous step.
Step 5 In the XHTML source view, right-click the element and choose Soft Key from the shortcut menu.
The Configure: Soft Key Rule dialog box appears.
Step 6 (Optional) Change the rule name, perhaps using a brief description of its content such as "Dial Support Soft Key."
Step 7 Choose whether to apply the rule to all pages in this project or just this page:
Step 8 Click the Configure Soft Key tab.
Step 9 Enter a label for the Soft Key in the Soft Key Name text box.
Step 10 Choose where you want to locate the Soft Key:
Step 11 Select a protocol from the URI drop-down menu and enter the URL or the phone number to be dialed.
Step 12 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, click the Configure Rule tab and see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
The Soft Key icon () shows where you applied the rule.
Step 13 Click the Preview tab and review the Soft Keys. Make sure you verify that the label fits in the space provided on the IP phone.
To convert an a href element into a Soft Key, you can optionally specify a label for the key. By default, the text of the a href element is used as the label. The CTE positions the Soft Key after the default Soft Keys on the card or cards that you specify. In addition to the default Soft Keys, you can specify three Soft Keys per card.
To convert an a href element into a Soft Key, perform these steps:
Step 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links.
Step 3 In the XHTML source view, right-click the a href element that you want to convert.
Step 4 Choose Soft Key from the shortcut menu.
The Configure: Soft Key Rule dialog box appears.
Step 5 (Optional) Change the rule name, perhaps using a brief description of its content such as "Convert News link to Soft Key."
Step 6 Choose whether to apply the rule to all pages in this project or just this page:
Step 7 Click the Configure Soft Key tab.
Step 8 Choose where you want to locate the Soft Key:
Step 9 Click Convert HREF into a Soft Key.
Step 10 To override the default Soft Key label (the text of the a href element), click Add Key Name to select it and enter a label in the Soft Key Name text box.
Step 11 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, click the Configure Rule tab and see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
The Soft Key icon () shows where you applied the rule.
Step 12 Click the Preview tab and review the Soft Keys. Make sure you verify that the label fits in the space provided on the IP phone.
To convert a phone number into a soft key, you specify whether you want to allow a user to edit the number and, optionally, a prefix for the number. The CTE positions the Soft Key after the default Soft Keys on the card or cards that you specify. In addition to the default Soft Keys, you can specify three Soft Keys per card.
To convert a phone number into a Soft Key, perform these steps:
Step 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links.
Step 3 In the XHTML source view, right-click the phone number that you want to convert.
Step 4 Choose Soft Key from the shortcut menu.
The Configure: Soft Key Rule dialog box appears.
Step 5 (Optional) Change the rule name, perhaps using a brief description of its content such as "Soft Key to dial Customer Support."
Step 6 Choose whether to apply the rule to all pages in this project or just this page:
Step 7 Click the Configure Soft Key tab.
Step 8 Choose where you want to locate the Soft Key:
Step 9 Enter a label for the Soft Key in the Soft Key Name text box.
Step 10 Click Dial Number from Page, choose a Dial Type, and optionally specify a dial prefix.
Step 11 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, click the Configure Rule tab and see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
The Soft Key icon () shows where you applied the rule.
Step 12 Click the Preview tab and review the Soft Keys. Make sure you verify that the label fits in the space provided on the IP phone.
The CTE breaks a transformed web page into screens for an IP phone. You can use the Preview tab to view the content of each screen or card. For a card that contains an image or text, you can set a refresh interval so that the CTE refreshes the image or text with the next card after the interval elapses. When you set a refresh interval for a card, the user does not have to press a key in order to advance to the next screen. Setting a refresh interval for images and noncritical text can thus improve the user experience without eliminating content.
By default, the refresh interval for a web page is "0", which means that a phone user must specify an action to advance to the next card. If a card has a refresh value other than "0", each subsequent card inherits that refresh value. The IP phone will refresh each card until it encounters a card with a refresh value of "0".
For an explanation of how the Preview tab indicates a card that has the Refresh rule, see the "Previewing Transformations for IP Phones" section.
|
Note The Refresh rule specifies the Refresh setting for the HTTP header element, supported by the Cisco IP phone client. |
To refresh an IP phone card, perform these steps:
Step 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links.
Step 3 Click the Preview tab and find the card you want to refresh with the next card in the deck. Review the card for an element that you can use for the Refresh rule.
Step 4 Click the Edit tab and locate the element that you identified in the previous step.
For example, suppose that the card you want to refresh contains an image. The XHTML code is as follows:
Suppose that you have a Select rule on the td element. In this case, you can apply the Refresh rule to the img element. However, suppose that you have a Select rule on the td element and an IMG ALT rule on the img element. In this case, you will need to move the Select rule to the tr element and apply the Refresh rule to the td element. (If the tr element includes other content that you do not want in a transformed page, you will also need to clip those elements.)
Step 5 In the XHTML source view, right-click the element where you will apply the Refresh rule.
Step 6 Choose Refresh from the shortcut menu.
The Configure: Refresh Rule dialog box appears.
Step 7 (Optional) Change the rule name, perhaps using a brief description of its content such as "Refresh card to News links."
Step 8 Choose whether to apply the rule to all pages in this project or just this page:
Step 9 In the Refresh After text box, specify the number of seconds that you want the current card to display before advancing to the next card.
A delay of "0" stops a previous refresh. For example, if you apply a Refresh rule at the top of a page, the rule applies to all subsequent cards up to the location where you apply a Refresh="0" rule. If you do not specify a Refresh rule on a page, the default delay is "0".
Step 10 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see "Applying Rules to Several Elements."
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 4-47. |
The Refresh icon () shows where you applied the rule.
Step 11 Click the Preview tab and review the resulting screens.
While many websites use client-side JavaScript to handle tasks such as validation of form input, most devices are unable to run JavaScript. To enable websites to make JavaScript-dependent content available to users, the CTE provides transparent JavaScript emulation, 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 user can accomplish tasks such as the following:
The following sections describe the CTE JavaScript support:
By default, JavaScript support is enabled for a CTE. If the sites you are transforming do not include JavaScript, you can use the CTE Administrative Interface to disable JavaScript support, as described in the "Specifying Content and Management Settings" section of the CTE 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:
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 user to return to the same form if a submit fails.
4. The JavaScript engine modifies the page as follows:
<a href="javascript:method();">) to "Submit" buttons.5. The JavaScript engine sends the page to the device.
When the user 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 device or sends a new request to the application server.
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
|
The CTE handles all of the transformations that are 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, Design Studio displays the JavaScript as it appears in the original web page, as shown in Figure 4-7.
|
Note Transformations created with JavaScript support enabled will likely not be valid if you subsequently disable JavaScript support. For example, a web page that was transformed with JavaScript support enabled will include the extra "Change" buttons if you later disable JavaScript support. However, if you browse to the same page (as if adding a new page), the extra "Change" buttons will not be present. |
However, when you enable JavaScript support, Design Studio transforms the JavaScript as shown in Figure 4-8. In the browser view, notice the additional "Change" buttons; in the XHTML source view, notice that the JavaScript has been replaced with XHTML.
Design Studio users do not need to apply any rules in order for JavaScript to operate correctly on devices. However, you can apply transformation rules to a page that contains JavaScript in order to perform the following:
|
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". |
If a form does not have a Submit button, insert the following tag:
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:
Consider, for example, if a list of 50 items is practical to send to a microbrowser screen. If possible, eliminate some of the choices.
|
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:
To replace a pop-up window with a link, perform these steps:
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.
Table 4-5 lists the JavaScript features that the CTE currently does not support.
Table 4-5 Unsupported JavaScript Features
|
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:
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.
The following sections describe how to import custom XSL:
To import a custom XSL template rule on a node, perform these steps:
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:
Step 5 Choose each device type to which you want to apply the rule.
Step 6 Click the Import XSL tab.
Step 7 To change the XSL template for just this node, leave the Use Default <xsl:template> check box selected.
If you clear the check box, the XSL template that you enter replaces the entire default style sheet for the page.
Step 8 Type the XSL statements for the rule you are creating.
Step 9 Click OK.
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.
To make a set of XML pages available to 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 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 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:
Step 6 Click the Import XSL tab.
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 OK.
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. |
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-9.
To set up a VoiceXML transformation, perform these steps:
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.
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:
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 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:
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.
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.
To edit a transformation rule, perform these steps:
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:
Step 5 Complete the dialog boxes as described in the "Creating Transformation Rules" section.
To delete a transformation rule, perform these steps:
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:
|
Note After you update a configuration file, you must publish it to a CTE for the changes to take effect. |
Posted: Mon Aug 18 18:34:53 PDT 2003
All contents are Copyright © 1992--2003 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.
