|
|
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.
A configuration file can include a default set of transformation rules for any page that does not have an associated identifier rule. By including a default set of transformation rules, you can transform all proxied pages that do not have identifier rules without having to include those pages in a project and individually apply identifier and transformation rules to them.
To transform pages by using a set of default rules, perform these steps:
Step 2 Add to the end of the project a page that you want to transform using a default set of transformation rules.
 |
Note The default set of transformation rules must be defined on the last page of the last project of a configuration file. Otherwise, the default rules will not apply to any page. |
Step 3 Do not create any identifier rules for the added page.
Step 4 Create the default set of transformation rules for the added page.
Step 5 Save and publish the configuration file.
Step 6 Test the default transformation by using a supported device to request pages that do not have associated identifier rules.
Those pages should reflect the default transformation.
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-14. |
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 (frame or iframe elements) or opens windows, Design Studio displays the contents of each frame or window sequentially in a single document. The frames are ordered according to their position in the source document. Window content is added to the end of the page, along with a Close button or link.
Suppose that a web page contains three frames (Links, Contents, Articles) and a link that opens a new window (Help), as shown below:
Design Studio and the CTE render that page as follows.
Note the following about the rendering of frame and window contents:
The order in which a window's contents are rendered is not affected by JavaScript calls or user actions that bring the window to the front in the original web page.
You can select and modify frames and window content as you would for a page that does not have frames or windows. For example, if you want to redirect a page to one of its frames, apply a Select rule to just that frame. If you want to include some of the contents of two different frames, apply Select rules to the content you want to include. For guidelines, see the "Guidelines for Transforming Frames and Window Content" section .
|
Note The Frames rule is deprecated as of release 3. If your configuration file contains a Frames rule and you upgrade the file to release 3, redirects defined by the Frames rule will continue to work. If the Frames rule was set to use the noframes portion of the page, the rule will no longer have any effect. We recommend that you do not apply new Frames rules, as they might not be supported in future releases. |
The Design Studio XHTML source view includes frame information enclosed in document-summary, document-set, document-frame, and document-body tags, as shown in the following example.
Those tags are used as follows:
When transforming a page that contains frames or that contains code to open new windows, follow these guidelines:
Work with frames or window content that you want to transform just as you would with any other page. For example, to improve usability on microbrowsers, consider using the Paginate Anchor rule to paginate selected links.
Each frame and window referenced from a page is associated with a unique URL which is referenced in the document-body tag. Applying a Tag Contains identifier rule to the document-body tag and setting its url attribute operation to "Equals" is usually sufficient to distinguish one frameset from another. You can also identify a frame or window by some other unique content, just as you might for some pages.
An additional identifier is needed when you include a window, in order to correctly associate your transformation rules to the particular state of the page (that is, whether a window is open or closed). The document-summary tag contains an _open_windows attribute that indicates the number of windows open based on the current state of the document. When you first open a page, the _open_windows attribute is "1". When you open a window, the _open_windows attribute changes to "2". Because your transformed page will contain content that is present whether or not the additional window is opened, you need to identify the page using both values of the _open_windows attribute.
To identify a page containing frames or windows, perform these steps:
Step 2 In the XHTML source view, right-click the document-body tag for the frame or window that you want to include.
Step 3 Choose Tag Contains from the shortcut menu.
Step 4 From the Operation drop-down menu for the url attribute, choose Equals.
Step 5 Click OK.
Step 6 If the page contains a window that you will include in the transformation, create another identifier rule that will reflect the state of the windows (open or closed): In the XHTML source view, right-click the document-summary tag.
Step 7 Choose Tag Contains from the shortcut menu.
Step 8 From the Operation drop-down menu for the _open_windows attribute, choose Equals.
Your transformation rules will operate on the content, provided that the device user has not opened a window.
Step 10 To make the transformation rules also work on the content if a window is opened:
b. Click the link that opens the window.
c. Click the Edit tab. Notice in the XHTML source view that the document-summary _open_windows attribute is now set to "2".
Some devices, such as Palm and RIM devices and some WML-based phones, support tables. For those devices, you can choose whether to retain a table as a table element or to have the CTE transform the table element to a list. 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.
The Retain Format rule toggles the value of the DDF retainformat key. One use of the Retain Format rule is to retain a table as a table element. You can also use the Retain Format rule to retain small images on some devices, as described in the "Retaining a Small Image" section.
For devices that support tables, the CTE determines how to transform a table, as follows:
You can toggle the retainformat setting by applying a Retain Format 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 Format rule to table1, it is retained as a table. If you also apply the Retain Format rule to table2, it is not retained, because the rule toggles the retainformat setting. If you also apply the Retain Format 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 Format from the shortcut menu.
The Configure: Retain Format 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-14. |
Design Studio displays the results of the Retain Format rule. The Retain Format icon (
) shows where you applied the rule.
The Retain Format 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:
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 check box, 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 devices 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-14. |
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 images that are smaller than 20 pixels in both width and height to WAP or cHTML devices or IP phones.
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 Format from the shortcut menu.
The Configure: Retain Format 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-14. |
Design Studio displays the results of the Retain Format rule. The Retain Format 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-14. |
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 WAP phones and Cisco IP phones. For information on Cisco IP phones, go to the Design Studio Help menu and choose Device Help. |
WAP phones and Cisco IP phones 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-14. |
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 WAP phones and Cisco IP phones. For information on Cisco IP phones, go to the Design Studio Help menu and choose Device Help. |
By default, the CTE converts a series of links (a href elements) to a numbered list of links on WAP phones and Cisco IP 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 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:
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-14. |
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, click the Preview tab and review the resulting screens and navigation. You might want to refine the transformation further.
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.
The CTE automatically handles line breaks for Cisco IP phone text cards and for WML devices. For WML devices, the CTE removes line breaks (br elements) that do not enclose text or structural elements. To force a line break, you can either modify a br element to include the _force attribute or you can insert a br element.
Step 2 Create a line break as follows:
Step 3 Check the transformed page to verify the line break.
|
Note This feature is available only for Cisco IP phones and some WAP devices. For information on Cisco IP phones, go to the Design Studio Help menu and choose Device Help. |
By default, an input type="text", input type="password", or textarea element will accept any ASCII character supported by the device. You can limit the type of characters accepted as input by applying an Input Type/Label rule on the 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 an input element label, which an IP phone will use as a prompt for the input field.
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 (Optional) 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-14. |
Design Studio displays the results of the Input Type/Label rule. The Input Type/Label icon () shows where you applied the rule.
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 to the cards. The additional soft keys vary based on the type of object on the card: menu, text, image, or input.
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 for XML-based IP phones. The procedure for other types of IP phones differ. For more information, go to the Design Studio Help menu and choose Device Help.
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-14. |
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 for XML-based IP phones, 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-14. |
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 for XML-based IP phones, 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-14. |
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.
Many device types, including WAP phones, support page refresh, which automatically advances the display to a specified URL with no user intervention. For example, you could send a logo to the device, display it for a few seconds, and then automatically refresh the display with a menu; or you could rotate the display between a menu and a list of headlines.
Page refresh is controlled through a meta refresh element that you insert in a head element. For Cisco IP phones, Design Studio includes a Refresh rule that inserts a meta refresh element. The Refresh rule specifies the Refresh setting for the HTTP header element, supported by the Cisco IP phone client. For other device types that support refresh, you can insert a meta refresh element by using the Insert rule.
|
Note The Refresh rule is available only for Cisco IP phones. Many other devices also support the insertion of a meta refresh element. For information on Cisco IP phones, go to the Design Studio Help menu and choose Device Help. |
The following procedure describes how to use the Refresh rule. For information on manually inserting a meta refresh element, see the "Inserting a Meta Refresh Element" section.
To refresh a page, perform these steps:
Step 2 In the XHTML source view, right-click the element where you will apply the Refresh rule.
Step 3 Choose Refresh from the shortcut menu.
The Configure: Refresh Rule dialog box appears.
Step 4 (Optional) Change the rule name, perhaps using a brief description of its content, such as "Refresh card to News links."
Step 5 Choose whether to apply the rule to all pages in this project or just this page:
Step 6 In the Refresh After text box, specify the number of seconds that you want the current page to display before advancing to the next page.
By default, the refresh interval for a web page is "0", which means that a user must specify an action to advance to the next page.
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-14. |
The Refresh icon () shows where you applied the rule.
Step 8 Click the Preview tab and review the resulting screens.
Some IP and WAP phones support the insertion of a meta refresh element in the head element. For more information on refresh, see the "Refreshing the Display" section.
To refresh a meta refresh element, perform these steps:
Step 2 Locate the head element near the top of the XHTML view.
Step 3 Right-click the head element and choose Insert from the shortcut menu.
Step 4 Click the Insert Element tab.
Step 5 In the Insert New Element area, click As Child.
Step 6 In the XHTML/XML Fragment text box, enter the following:
interval is the number of seconds that you want this page to display before advancing to the specified URL.
Step 7 Click OK.
Posted: Mon Aug 18 15:32:27 PDT 2003
All contents are Copyright © 1992--2003 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.
