|
|
The following sections describe how to work with web pages and specific HTML elements:
Before you create transformation rules for individual web pages, check all of the pages for patterns. If you find pages that follow the same pattern or template, you can use Design Studio to create transformation rules for one page and apply the rules to all like pages.
The following sections describe how to work with pages:
If a group of pages is created from a template and you want to perform the same transformation on each page, you can create a project for the pages and apply one set of transformation rules to each page in the project. If the page template subsequently changes, you only have one page to update in Design Studio, rather than many.
To transform template-based pages, perform these steps:
Each Configure dialog box allows you to apply a rule to the current page or to all pages in a project. By putting the template-based pages in a separate project, you can apply rules to all pages in that project.
Step 2 Add one of the template-based pages to the project.
Step 3 When you create page identifier rule(s), choose one or more identifiers that uniquely identify all pages in the project.
The identifiers need to match all template-based pages but do not need to match any other page types. Suppose that the URL and title elements for the pages have these characteristics:
To uniquely identify the template-based pages, use a combination of the URL (www.company.com/products) and title element (Product Line:).
Step 4 Apply the Select rule to the main content that you want to include.
Step 5 In the Configure: Select Rule dialog box, click the Project radio button to apply the Select rule to all pages in the project, configure the rule as needed, and click OK.
Step 6 Apply other rules to the page as needed. Be sure to click the Project radio button in each Configure dialog box.
Step 7 Click the Browse tab and browse to the next page that you want to include in this project.
If you have set up the identifier rules correctly, the lower-left pane of the Design Studio window indicates that the page passes the identifier rules of the first page that you added. If this does not occur, return to the first page and correct the identifier rules.
Step 8 Click Add to Configuration.
The rule that you applied to the first page also transforms the newly added page.
Step 9 Repeat Step 7 and Step 8 for each template-based 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 5-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 5-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 that you want to paginate.
Add the page that contains the link to the content that you want to paginate. Apply the Paginate Anchor rule to the link, specifying the number of links that you want to create and the text 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.
If the Paginate Anchor rule does not have the intended results, make sure that you are not inadvertently creating invalid HTML.
 |
Note Relative links (such as a href="#") and unclosed a elements are not supported. |
To create links to the page you want to paginate, perform these steps:
Step 2 In the XHTML source view, right-click the a href element that contains the link to the page that you want to paginate.
By paginating a link, you will create two or more links in addition to or instead of the original link.
Step 3 Choose Paginate Anchor from the shortcut menu.
The Configure: Paginate Anchor Rule dialog box appears.
Step 4 Choose each device type to which you want to apply the rule.
Step 5 In the Number of Manual Paginations text box, enter the total number of views that 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 6 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 inserted text will display on the transformed page and should uniquely identify each view of the destination page.
Step 7 Select the location for the inserted text as follows:
Step 8 In the text box for tab 1, enter the text for the first link.
For example, if you want the word "Headquarters" followed by a br element, type Headquarters<br/>.
Step 9 Click tab 2 and enter the text and any XHTML elements for the next link.
Step 10 Repeat Step 9 for each tab.
Step 11 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 that you paginated. An identifier rule, which you cannot edit or delete, displays for the paginated 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 5-13. |
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 that 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.
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.
Most query and results pages follow a similar pattern: A query page includes input elements and results pages can contain a variable number of results.
Suppose that a query form has the following general setup:
In the following example, you will include only the query form in the transformed page.
To transform the query page, perform these steps:
Step 2 Apply the Select rule to the table element that contains the query form.
Design Studio automatically selects the formbegin and formend elements.
Step 3 If the table contains elements that you do not want to include in the transformed page, apply the Clip or Ignore rules as appropriate.
Now you are ready to transform the results page. In this case, the results page is a list of links, each followed by a brief description of the link destination.
Suppose that the results page has the following general setup:
For this example, you want to include only the links, not the descriptions.
To transform the results page, perform these steps:
Step 2 Submit a query.
Step 3 Click Add to Configuration to add the results page to the project.
Step 4 Create unique identifier rules for the page.
Step 5 Right-click the first font element (corresponding to the descriptive text).
The easiest way to handle the page in this example is to clip the descriptive text and any other elements that you do not want in the transformed page.
Step 6 Choose Clip from the shortcut menu.
Step 7 In the Path to Selected Element area, click the last font element listed.
Because all descriptive text is contained in a font element, you only need to clip the first instance of the font element and apply it across other font elements as follows:
Step 8 From the Depth to Match drop-down menu, choose All Depths.
Step 9 From the Position to Match drop-down menu, choose All Positions.
Step 10 Click OK.
Step 11 Apply the Clip rule to other elements on the page that you do not want to include in the transformed 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.
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 that 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, click 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:
|
Note For a page containing an iframe element, Design Studio adds a link for the iframe element. When a device user clicks the link, the contents of the iframe displays on the device. |
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.
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.
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 devices that support tables, such as Palm and RIM devices and WML-based phones. You can retain a table element so that the CTE does not transform the table to a list on such devices. For more information, see the "Retaining Formatting" section.
You can also convert a table to a list for all devices. A list displays better than a table on most small microbrowser screens.
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.
By default, the CTE retains web page formatting. For example, for devices such as WML-based phones and Palm and RIM devices, table elements are retained as a table, rather than converted to a list. This behavior is controlled by the retainformat key in the DDF which is set to "yes".
You can toggle the retainformat setting by applying a Retain Element rule. Suppose that the retainformat key is set to "no" and you have a web page with the following nested tables:
If you apply the Retain Element rule to table1, it is retained as a table. If you also apply the Retain Element rule to table2, it is not retained, because the rule toggles the retainformat setting. If you also apply the Retain Element rule to table3, it is retained as a table.
|
Note If a device supports left-to-right scrolling, a retained table will be scrollable. |
To override the DDF retainformat setting, perform these steps:
Step 2 In the project tree, click a device type.
Step 3 In the XHTML source view, right-click the element for which you want to change the retainformat setting.
Step 4 Choose Retain Element from the shortcut menu.
The Configure: Retain Element Rule dialog box appears.
Step 5 (Optional) Change the rule name, perhaps using a brief description of its content, such as "Retain product 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 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see the "Applying Rules to Several Elements" section.
|
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 5-13. |
Design Studio displays the results of the Retain Element rule. The Retain Element icon (
) shows where you applied the rule.
The Retain Element rule that you applied toggles the value of the retainformat key. Apply the rule to another element if you want to toggle the value again on the same page.
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 5-13. |
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 img element that 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 the "Applying Rules to Several Elements" section.
|
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 5-13. |
Design Studio displays the results of the Retain Element rule. The Retain Element icon () shows where you applied the rule.
By default, the CTE prepends its IP address to links in transformed pages. When a device user selects a link on a transformed page, the request is directed to the CTE. You can turn off URL rewriting for individual links by using the Disable URL Rewrite rule.
You might want to disable URL rewriting for situations such as the following:
To disable URL rewriting for a link, perform these steps:
Step 2 In the XHTML source view, right-click the a href or area href element that contains the link that you do not want the CTE to rewrite.
Step 3 Choose Disable URL Rewrite from the shortcut menu.
The Disable URL Rewrite Rule dialog box appears.
Step 4 (Optional) Change the rule 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 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see the "Applying Rules to Several Elements" section.
|
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 5-13. |
Design Studio displays the results of the rule. The Disable URL Rewrite 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 "Example: Applying Rules to Dynamically Generated Content" section.
|
Note This feature is available only for XML- and WML-based IP phones, WAP phones, and HDML devices. |
XML- and WML-based IP phones, WAP phones, and HDML devices enable a user to initiate 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 Label drop-down menu, choose whether you want to display the label text with the phone number.
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 that contains 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 5-13. |
A Dial Number rule contains path information for both the dialable number and its label. When you create a Dial Number rule, as described in the "Adding a Dialable Phone Number" section, the Configure: Dial Number Rule dialog box includes the path to the phone number and label as shown in Figure 5-3.
You can apply the Dial Number rule to several phone numbers and labels. Suppose that you want to make all numbers in a directory listing dialable. You can do that with one Dial Number rule by applying the rule to several pairs of phone numbers and label elements.
To apply the Dial Number rule to several phone numbers, perform these steps:
Step 2 Specify how you want Design Studio to match other phone numbers that you want to be dialable.
For example, if all phone numbers that you want to be dialable have a common prefix, such as "(800)", choose Starts With from the Operation drop-down menu, change Match Text to "(800)", and choose All Positions from the Position to Match drop-down menu, as shown in the following example.
Step 3 Click OK.
To apply the Dial Number rule to the label for each dialable phone number, perform these steps:
|
Note This procedure assumes that you have already specified a label for the Dial Number rule when you created it. For more information, see the "Adding a Dialable Phone Number" section. |
The Label tab lists the path to the element that you selected for the label.
Step 2 In the Path to Selected Element area, click the text you chose for the label.
Step 3 Specify how you want Design Studio to match other labels.
Step 4 Click OK.
|
Note This feature is available only for XML- and WML-based IP phones and WAP phones. |
By default, the CTE converts a series of links (a href elements) to a numbered list of links on XML- and WML-based IP phones and WAP phones. A phone user can choose a link by using the keypad rather than by scrolling through the list. If a list of links contains other elements that you do not want to include in the transformation, apply the Group rule 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. If you apply rules inside of a group, be sure to apply them to the links; rules applied to other, dropped elements will not take effect.
Figure 5-4 shows a portion of a table as viewed in a desktop browser. Figure 5-5 and Figure 5-6 show the transformation if the Select rule was used to select the table. Figure 5-7 shows the transformation when the Group rule is applied to the table. The Group rule eliminates all content except for the links (Movies, Television, Games).
|
Note XML-based IP phones display links and text on separate pages. |
|
Note Some devices allow you to select a link by pressing a keypad number that corresponds to the link. On such devices, the links will be numbered. |
You must apply the Select rule to an element that contains the links that you want to group. For example, if a table contains four cells, each with several links, you might apply the Select rule to the table element and use the Group rule on one td element (applying it to all positions) in order to number all links. Alternatively, you might apply the Select rule to an element that contains the table and apply the Group rule to the table element.
To group links, perform these steps:
The Group rule is available only for XML- and WML-based IP phones and WAP phones.
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 that you want to group.
As you determine where to place a Group rule for WML-based devices, consider that each group that you create will be sent to the device as a separate screen. For XML-based 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 the "Applying Rules to Several Elements" section.
|
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 5-13. |
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 refine the transformation further 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. |
The CTE breaks pages into cards based on the requirements of a particular device and various DDF settings. You might encounter instances in which the automatic page break is not ideal. For example, two related elements might be separated. In such cases, you can apply the Force Card Break rule in order to force a card break so that related items appear together.
|
Note If you need to place a card break inside of elements that have a Group rule applied, be sure to apply the Force Card Break rule to a link because all other elements will be dropped. |
To force a page break, perform these steps:
Step 2 Determine where you want the break to occur by viewing the page in the Preview tab. If the Preview tab is not supported for your device type, check the page on a device.
Step 3 In the XHTML source view, right-click the element where you want the break to occur.
Step 4 Choose Force Card Break from the shortcut menu.
Step 5 In the Configure dialog box, click OK.
Design Studio inserts the break. The Force Card Break icon () shows where you applied the rule.
|
Note This feature is available only for XML-based IP phones. |
By default, an input or textarea element displayed on an IP phone that is 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 Page Transformations" 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.
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 the "Applying Rules to Several Elements" section.
|
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 5-13. |
Design Studio displays the results of the Input Type/Label rule. The Input Type/Label icon () shows where you applied the rule.
|
Note This feature is available only for XML-based IP phones. |
Some IP phones include Soft Keys, as shown in Figure 5-8. Soft Keys are used for navigation, to select menu items, and for other IP phone functions, such as to dial 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 Page Transformations" 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 that 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 the "Applying Rules to Several Elements" section.
|
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 5-13. |
The Soft Key icon () shows where you applied the rule.
Step 13 Click the Preview tab and review the Soft Keys. Verify that the label fits in the space provided on the IP phone.
When converting 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 then 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 the "Applying Rules to Several Elements" section.
|
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 5-13. |
The Soft Key icon () shows where you applied the rule.
Step 12 Click the Preview tab and review the Soft Keys. 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 the "Applying Rules to Several Elements" section.
|
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 5-13. |
The Soft Key icon () shows where you applied the rule.
Step 12 Click the Preview tab and review the Soft Keys. Verify that the label fits in the space provided on the IP phone.
|
Note This rule is available only for XML-based IP phones. Some devices, however, accept meta refresh elements. You can insert elements by using the Insert rule. |
The CTE breaks a transformed web page into screens. 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 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 Page Transformations" 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 that 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 that 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 the "Applying Rules to Several Elements" section.
|
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 5-13. |
The Refresh icon () shows where you applied the rule.
Step 11 Click the Preview tab and review the resulting screens.
Posted: Tue Jan 14 16:28:37 PST 2003
All contents are Copyright © 1992--2002 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.
