|
|
The following sections describe how to use Design Studio to transform web applications for IP phones and how to preview transformation results:
 |
Note For complete information on using Design Studio, refer to the Design Studio User Guide or click Help in the Design Studio application window. |
The following sections describe the transformation rules that are specific to IP phones:
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 From the Dial Type drop-down menu, choose whether you want to allow users to add an access code or other numbers to the phone number before they dial it.
Step 7 (Optional) Enter a prefix for the phone number.
Step 8 Click the Label tab, and then click Select Label.
The Label Element dialog box appears.
Step 9 In the XHTML source view, select the text element that contains the label for the phone number.
Step 10 Click OK.
The Label tab displays the path to the element that contains the label.
Step 11 To apply the Dial Number rule only to this phone number, click OK. Otherwise, refer to the "Applying the Dial Number Rule to Several Elements" section in Chapter 5 of the Design Studio User Guide.
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, refer to the "Specifying a Rule Location on a Dynamically Generated Page" section in Chapter 4 of the Design Studio User Guide. |
By default, the CTE converts a series of links (a href elements) to a numbered list of links on 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 the links. Figure 2-1 shows a portion of a web page as viewed in a desktop browser. Figure 2-2 shows a portion of the default transformation, which breaks the content into multiple screens and includes the text that follows each link. Figure 2-3 shows the transformation when the Group rule is applied, which eliminates all content except for the links.
You must apply the Select rule to an element that contains the links you want to group. For example, if a table contains four cells, each with several links, you apply the Select rule to the table element and apply the Group rule to each td element in order to number all links. If you want to include just the links that are in one cell, you apply the Group rule only to the td element that contains those links.
To group links, perform these steps:
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, refer to the "Selecting Content" section in Chapter 4 of the Design Studio User Guide.
Step 3 In the XHTML source view, right-click an element that contains the links you want to group.
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 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, refer to the "Applying Rules to Several Elements" section in Chapter 5 of the Design Studio User Guide.
|
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, refer to the "Specifying a Rule Location on a Dynamically Generated Page" section in Chapter 4 of the Design Studio User Guide. |
Design Studio displays the results of the Group rule. The Group icon (
) shows where you applied the rule.
Step 8 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. |
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.
To specify the input type or label of a field, perform these steps:
Step 2 In the XHTML source view, right-click the input or textarea element that you want to change.
Design Studio allows you to apply an Input Type/Label rule only to input elements with an attribute of type="text" or type="password" or to textarea elements.
|
Note The input or textarea element must be part of an area that has a Select rule applied. The Input Type/Label rule does not select an input or textarea element for transformation. |
Step 3 Choose Input Type/Label from the shortcut menu.
The Configure: Input Type/Label Rule dialog box appears.
Step 4 (Optional) Change the rule name, perhaps using a brief description of its content, such as "Accept telephone numbers only."
Step 5 Choose whether to apply the rule to all pages in this project or just this page:
Step 6 From the Input Type drop-down menu, choose a type.
The input types are as follows:
|
Note If an input element has a type="password" attribute, user input will be echoed to the screen as asterisks. You can use any of the input types with an input type="password" element. |
Step 7 Optionally, specify a label of up to 15 characters that the IP phone will use as a prompt for the input field.
Step 8 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, refer to the "Applying Rules to Several Elements" section in Chapter 5 of the Design Studio User Guide
|
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, refer to the "Specifying a Rule Location on a Dynamically Generated Page" section in Chapter 4 of the Design Studio User Guide. |
Design Studio displays the results of the Input Type/Label rule. The Input Type/Label icon () shows where you applied the rule.
IP phones that are compatible with Cisco IP phone services include four Soft Keys, as shown in Figure 2-4. Soft Keys are used for navigation, to select menu items, and for other IP phone service 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.
You can define up to three Soft Keys per card in addition to the default Soft Keys. The CTE adds a More Soft Key that is used to display the additional Soft Keys.
|
Note The menu, text, image, and input objects correspond to the following Cisco IP
phone XML objects: CiscoIPPhoneMenu, CiscoIPPhoneText,
CiscoIPPhoneImage, and CiscoIPPhoneInput. The Soft Key rule creates the Cisco IP phone XML object SoftKeyItem, as well as the corresponding objects Name, URL, and Position. Due to an IP phone limitation, Soft Keys cannot be defined for input objects. |
The following sections explain how to define Soft Keys:
To create a Soft Key, you specify the label that will be used for the Soft Key and provide the URL the key will open or the phone number the key will dial. The CTE positions the Soft Key after the default Soft Keys on the card or cards that you specify. In addition to the default Soft Keys, you can specify three Soft Keys per card.
To create a Soft Key, perform these steps:
Step 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links.
Step 3 Click the Preview tab, review the cards, and determine where you want the Soft Key to appear.
Step 4 Click the Edit tab and locate an element that appears on a card you identified in the previous step.
Step 5 In the XHTML source view, right-click the element and choose Soft Key from the shortcut menu.
The Configure: Soft Key Rule dialog box appears.
Step 6 (Optional) Change the rule name, perhaps using a brief description of its content, such as "Dial Support Soft Key."
Step 7 Choose whether to apply the rule to all pages in this project or just this page:
Step 8 Click the Configure Soft Key tab.
Step 9 Enter a label for the Soft Key in the Soft Key Name text box.
Step 10 Choose where you want to locate the Soft Key:
Step 11 Select a protocol from the URI drop-down menu and enter the URL or the phone number to be dialed.
Step 12 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, click the Configure Rule tab and refer to the "Applying Rules to Several Elements" section in Chapter 5 of the Design Studio User Guide.
|
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, refer to the "Specifying a Rule Location on a Dynamically Generated Page" section in Chapter 4 of the Design Studio User Guide. |
The Soft Key icon () shows where you applied the rule.
Step 13 Click the Preview tab and review the Soft Keys. Make sure you verify that the label fits in the space provided on the IP phone.
To convert an a href element into a Soft Key, you can optionally specify a label for the key. By default, the text of the a href element is used as the label. The CTE positions the Soft Key after the default Soft Keys on the card or cards that you specify. In addition to the default Soft Keys, you can specify three Soft Keys per card.
To convert an a href element into a Soft Key, perform these steps:
Step 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links.
Step 3 In the XHTML source view, right-click the a href element that you want to convert.
Step 4 Choose Soft Key from the shortcut menu.
The Configure: Soft Key Rule dialog box appears.
Step 5 (Optional) Change the rule name, perhaps using a brief description of its content, such as "Convert News link to Soft Key."
Step 6 Choose whether to apply the rule to all pages in this project or just this page:
Step 7 Click the Configure Soft Key tab.
Step 8 Choose where you want to locate the Soft Key:
Step 9 Click Convert HREF into a Soft Key.
Step 10 To override the default Soft Key label (the text of the a href element), click Add Key Name to select it and 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 refer to the "Applying Rules to Several Elements" section in Chapter 5 of the Design Studio User Guide.
|
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, refer to the "Specifying a Rule Location on a Dynamically Generated Page" section in Chapter 4 of the Design Studio User Guide. |
The Soft Key icon () shows where you applied the rule.
Step 12 Click the Preview tab and review the Soft Keys. Make sure you verify that the label fits in the space provided on the IP phone.
To convert a phone number into a soft key, you specify whether you want to allow a user to edit the number and, optionally, a prefix for the number. The CTE positions the Soft Key after the default Soft Keys on the card or cards that you specify. In addition to the default Soft Keys, you can specify three Soft Keys per card.
To convert a phone number into a Soft Key, perform these steps:
Step 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links.
Step 3 In the XHTML source view, right-click the phone number that you want to convert.
Step 4 Choose Soft Key from the shortcut menu.
The Configure: Soft Key Rule dialog box appears.
Step 5 (Optional) Change the rule name, perhaps using a brief description of its content, such as "Soft Key to dial Customer Support."
Step 6 Choose whether to apply the rule to all pages in this project or just this page:
Step 7 Click the Configure Soft Key tab.
Step 8 Choose where you want to locate the Soft Key:
Step 9 Enter a label for the Soft Key in the Soft Key Name text box.
Step 10 Click Dial Number from Page, choose a Dial Type, and optionally specify a dial prefix.
Step 11 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, click the Configure Rule tab and refer to the "Applying Rules to Several Elements" section in Chapter 5 of the Design Studio User Guide.
|
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, refer to the "Specifying a Rule Location on a Dynamically Generated Page" section in Chapter 4 of the Design Studio User Guide. |
The Soft Key icon () shows where you applied the rule.
Step 12 Click the Preview tab and review the Soft Keys. Make sure you verify that the label fits in the space provided on the IP phone.
The CTE breaks a transformed web page into screens for an IP phone. You can use the Preview tab to view the content of each screen or card. For a card that contains an image or text, you can set a refresh interval so that the CTE refreshes the image or text with the next card after the interval elapses. When you set a refresh interval for a card, the user does not have to press a key in order to advance to the next screen. Setting a refresh interval for images and noncritical text can 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".
|
Note The Refresh rule specifies the Refresh setting for the HTTP header element, supported by the Cisco IP phone client. |
To refresh an IP phone card, perform these steps:
Step 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links.
Step 3 Click the Preview tab and find the card you want to refresh with the next card in the deck. Review the card for an element that you can use for the Refresh rule.
Step 4 Click the Edit tab and locate the element that you identified in the previous step.
For example, suppose that the card you want to refresh contains an image. The XHTML code is as follows:
Suppose that you have a Select rule on the td element. In this case, you can apply the Refresh rule to the img element. However, suppose that you have a Select rule on the td element and an IMG ALT rule on the img element. In this case, you will need to move the Select rule to the tr element and apply the Refresh rule to the td element. (If the tr element includes other content that you do not want in a transformed page, you will also need to clip those elements.)
Step 5 In the XHTML source view, right-click the element where you will apply the Refresh rule.
Step 6 Choose Refresh from the shortcut menu.
The Configure: Refresh Rule dialog box appears.
Step 7 (Optional) Change the rule name, perhaps using a brief description of its content, such as "Refresh card to News links."
Step 8 Choose whether to apply the rule to all pages in this project or just this page:
Step 9 In the Refresh After text box, specify the number of seconds that you want the current card to display before advancing to the next card.
A delay of "0" stops a previous refresh. For example, if you apply a Refresh rule at the top of a page, the rule applies to all subsequent cards up to the location where you apply a Refresh="0" rule. If you do not specify a Refresh rule on a page, the default delay is "0".
Step 10 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, refer to the "Applying Rules to Several Elements" section in Chapter 5 of the Design Studio User Guide.
|
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, refer to the "Specifying a Rule Location on a Dynamically Generated Page" section in Chapter 4 of the Design Studio User Guide. |
The Refresh icon () shows where you applied the rule.
Step 11 Click the Preview tab and review the resulting screens.
For IP phone device types, you can view the results of your transformation rules in the Design Studio window Preview tab. You should also test your transformations on an IP phone. To view a transformed URL on an IP phone, enter the URL to the page you want to preview. You must include the CTE IP address and port number, as shown in the following example:
http:// ip_address:port_number/http:// page_url
The Design Studio Preview tab, as shown in Figure 2-5, lists each card that corresponds to the web page you transformed and displays a simulator where you can view the page, the default Soft Keys added by the CTE, and any Soft Keys that you added.
The Cards area lists each card that results from your transformation of a web page. To view a card in the simulator, click the card icon. The following sections explain how the CTE transforms pages for IP phones and how you can work with the Preview tab to review and fine-tune a transformation:
When you click the Preview tab, Design Studio lists each card that results from the transformation of the current web page, as shown in Figure 2-6.
The cards are listed in the order in which the CTE will send them to an IP phone. If a card includes the Refresh rule, the Refresh icon displays beside the card icon, as shown in Figure 2-7.
To view a summary of the contents of a card in a pop-up window, point to a card icon, as shown in Figure 2-8.
The IP phone simulator shows an approximation of how a card will look when viewed on an actual IP phone. The IP phone simulator does not support navigation or the operation of the Soft Keys, except for the More key. You should test each card on an IP phone to verify the display of text and images, as well as the operation of links, input fields, and Soft Keys.
To view a card in the simulator, click the card icon in the Cards area. The simulator displays the card and its Soft Keys, as shown in Figure 2-9.
Notice the following about the display:
Posted: Fri Aug 22 14:00:59 PDT 2003
All contents are Copyright © 1992--2003 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.
