|
|
The following sections describe how to use Design Studio to create rules used to transform web pages:
Figure 4-1 summarizes the workflow for creating transformation rules in Design Studio and publishing them to the Cisco CTE 1400.
 |
Note The numbers in Figure 4-1 refer to the following process. |
The Design Studio workflow is as follows:
Step 2 You add a project to the configuration file.
Step 3 You add a web page to the project and create identifier and transformation rules for the page.
Step 4 When you finish adding pages and creating transformation rules, you save the configuration and then publish it to a Cisco CTE 1400. You can then test the transformations using simulators and wireless devices.
For general information on configuration files and projects, see the "Configuration and Project Files" section. These sections describe how to work with configuration files and projects:
When you start Design Studio, it opens a blank configuration file. You can begin adding projects to it as described in the "Creating an HTML Project" section.
To create a configuration file, perform this step:
If you have changed but not saved the current configuration file, Design Studio prompts you to save it.
To open a configuration file, perform these steps:
Step 2 Navigate to the file and click Open.
If a configuration file is already open, Design Studio closes it after prompting you to save changes.
To save a configuration file, perform these steps:
Step 2 If prompted, enter a filename and click Save.
Design Studio saves the configuration file on your computer using the name you provide. To upload a configuration file to the Cisco CTE 1400, you must publish it as described in the "Publishing a Configuration File to a Cisco CTE 1400" section.
If a file you save already exists, Design Studio saves the old version to a backup file named filename~. For example, Design Studio retains the previous version of site_cfg.cte, using the filename site_cfg.cte~.
An HTML project contains HTML pages that you want to transform for delivery to wireless devices. You use Design Studio to create the rules that transform HTML pages. When planning how to divide your work into projects, consider that you can apply a rule to all HTML pages in a project.
|
Note You can also work with XML projects in Design Studio, as described in "Working with XML Projects." |
To create an HTML project, perform these steps:
The name of the current configuration file appears in the title bar of the Design Studio window.
Step 2 From the Projects menu, choose Create Project.
The Create Project dialog box appears.
Step 3 Enter a name to identify the project, for example, "Company extranet."
Step 4 Click the HTML radio button.
Step 5 Click Done.
After you create an HTML project, add web pages to it as described in the "Adding a Page to an HTML Project" section.
To delete a project, perform these steps:
Step 2 Choose Remove Project from the shortcut menu.
Step 3 Click Yes to confirm the deletion.
To add a page to an HTML project, perform these steps:
Step 2 Enter the web page URL in the Address field.
Design Studio opens the requested page in the Browse tab.
If the requested page does not appear, the Cisco CTE 1400 server or the server for the web page may not be running.
If the page information pane (lower-left portion of window) includes the message "Passes Identifier Rules," see the "Using an Identifier Rule for Multiple Pages" section.
If a Redirection message displays, see the "Handling Page Redirects" section.
Step 3 In the lower-left pane, click Add Page to Project.
Design Studio adds the page to the project and displays it in the View Original tab.
To continue working with the page, create identifier rules for it as described in the "Identifying a Page" section.
When a web page includes a redirect request (a meta element containing http-equiv:"refresh"), Design Studio displays a Redirection message and allows you to choose between the following options:
Follow the redirect if there is no or unneeded content on the page that redirects.
Do not follow the redirect if the page is redirected to itself. If the page containing the redirect has content you want to keep, add the page and modify the redirect tags to another link.
To follow the redirect, perform these steps:
Step 2 Add the page that displays to your project, if you want.
When a wireless device user requests the page that contains the redirect, the page you added displays.
If the Redirection message displays after you add the page, the redirect link points to the same page. Do not follow the link, or modify the link to another destination.
To add the page that contains the redirect, perform these steps:
Step 2 Add the page.
When a wireless device user requests the page that contains the redirect, the page containing the redirect displays. The page request is not redirected.
To delete a page from a project, perform these steps:
Step 2 Choose Remove Page from Project from the shortcut menu.
Step 3 Click Yes to confirm the deletion.
You must assign an identifier to each web page you add to a Design Studio project. The Cisco CTE 1400 uses an identifier to match a web page to the corresponding transformation rules in the configuration file. You identify a web page by creating an Identifier rule that consists of one of the following:
You typically assign a unique identifier to a web page so that its transformation rules affect only that page. However, if you want more than one page to share the same transformation rules, you can apply the identifier of one page to another page.
To determine a unique and reliable identifier for one or a group of pages, you need to evaluate the page characteristics. For example, is the page URL always the same? Is the page title text static or generated? Is there some other element that uniquely identifies the page? Is the page static or is it dynamically generated?
Table 4-1 provides guidelines for choosing identifiers based on page characteristics.
Table 4-1 Guidelines for Choosing Identifiers
|
| 1 POST is a communication method used by the HTTP protocol to send data from a client to a server. The POST method is used as the interface between HTML form or isindex queries and server-side processing programs. |
To identify a page, you create identifier rules as described in these sections:
Before you create an identifier, you must first add the page to a project as described in the "Adding a Page to an HTML Project" section.
To create an identifier based on element text, perform these steps:
Step 2 In the XHTML source view, right-click the text of the element you want to use as an identifier.
In this example, "Cisco Worldwide Contacts," the text below the title element, is selected.
Step 3 Choose Tag Contains from the shortcut menu.
The Identify Page dialog box appears. It lists each element that is in the path to the text you selected.
Step 4 (Optional) Change the default rule name.
Step 5 If you want Design Studio to match the text exactly, click Done. Otherwise, continue with the next step.
In the above example, a web page that contains "Cisco Worldwide Contacts" as its title text will match this identifier.
Step 6 In the Path to Selected Element area, click the text you want to configure.
The Configure Text Element dialog box appears.
The top two fields enable you to specify which text you want to use to identify the page.
Step 7 Complete the top two fields to specify the text you want the Cisco CTE 1400 to use in order to match a web page to this identifier. See Table 4-2 for your options.
Table 4-2 Specifying Text to Identify a Page
Step 8 Leave the Depth to Match option and the Position to Match option set to Exact unless you want to match against multiple depths or positions of the same element.
Step 9 Click Done.
If you also want to identify the page by URL, see the "Identifying a Page by URL" section.
To begin adding transformation rules to the page, see the "Creating Transformation Rules" section.
Before you can create an identifier, you must first add the page as described in the "Adding a Page to an HTML Project" section.
To create an identifier based on a URL, perform these steps:
Step 2 Right-click anywhere in the XHTML source view.
Step 3 Choose URL from the shortcut menu.
The Identify by URL dialog box appears.
Step 4 To match against the exact URL shown, click Done. Otherwise, continue with the next step.
Step 5 Select the portion of the URL you do not want to match against, and then click Ignore.
When you browse to a web page, the URL that is returned often includes additional information. In the above example, the URL returned includes the port number of the server (:80). The URL returned might also include a query string (a question mark, "?", followed by a text string), such as http://www.fox.com?q=some_string . To match any query string, ignore the string that follows the equal sign (=).
|
Note Any string matches the ignored portion of a URL. Thus, if a URL is www.fox.com/index.html and you ignore index.html, any URL that starts with www.fox.com matches the identify rule. |
Step 6 To re-include text marked as ignored, select the text and click Select.
Step 7 Click Done.
If you also want to identify the page by an element, see the "Identifying a Page by Element Text" section.
To begin adding transformation rules to the page, see the "Creating Transformation Rules" section.
When you add a page that matches the identifier rules of another page, Design Studio displays "Passes Identifier Rules" in the lower-left pane. This message may mean that you need to return to the page that was noted in the Page field and change its identifier rules so that they are unique. Alternatively, you might want to use the same identifier rules for more than one page.
The following procedures explain how to respond to the "Passes Identifier Rules" message, based on how you want to handle the identifier rules.
To add the page and then change the identifier rules for the page listed in the Page field (so they are unique), perform these steps:
Step 2 Locate in the project tree the page whose identifier rules you want to change and click Identifier Rules.
Step 3 In the lower-left pane, right-click the identifier rule you want to change.
Step 4 Complete the dialog boxes and click Done.
For help with the dialog boxes, see the "Identifying a Page by Element Text" section and the "Identifying a Page by URL" section.
To apply the identifier rules to the new page, perform this step:
Design Studio uses the identifier rules and transformation rules for the page.
To ignore the page in the browser view and navigate to a different page, perform these steps:
Step 2 Enter a different URL in the Address field, or navigate to a page in the Browse tab.
To create transformation rules for a web page, you need to be familiar with the page's design and ongoing changes. Some of your content choices can have dependencies on page-specific characteristics such as the position of an element in the XHTML hierarchy. For example, if you indicate you want to include the first three occurrences of a particular element, you need to know that an application server is not dynamically changing the position of those elements.
The mechanics of creating rules are straightforward. You follow the same general steps to create each type of rule.
To create transformation rules, perform these general steps:
Step 2 Choose a command from the shortcut menu.
Step 3 Complete the dialog boxes that appear.
Design Studio translates your instructions into a rule and displays the results of the rule in the browser view where you can see how the rule transforms the page.
Table 4-3 provides simple examples that introduce you to the effect of each transformation rule. Design Studio provides many options used to refine transformation rules, enabling you to set up sophisticated transformations.
Table 4-3 Transformation Rules
|
After you create identifier rules, you can work with the page content. To indicate that you want to include an element and its child elements in the transformation, create a Select rule.
The first Select rule you create for a project excludes all other elements. The subsequent Select rules you create add to your initial selection.
It is generally more efficient to begin your work by selecting the main element you want to include (perhaps a form or table). You can subsequently add other elements to your initial selection.
To create a Select rule, perform these steps:
You will have a chance later to apply the rule to other device types.
Step 2 In the XHTML source view, right-click the element you want to include in a transformed page.
If you have trouble locating an element in the XHTML source view, click the content in the browser view. Design Studio highlights the corresponding element in the XHTML source view.
Step 3 Choose Select from the shortcut menu.
The Configure: Select Rule dialog box appears with a default name in the Rule Name field. Design Studio forms a unique name by combining the rule name, the name of the element or text to which you are applying the rule, and a number.
Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Select Search Form" or "Select Product Table."
A name helps you locate the rule later if you need to change it.
Step 5 Choose whether to apply the rule to all pages in this project or just this page:
Step 6 Choose each device type to which you want to apply the rule.
This step enables you to apply one rule to multiple devices. If a device already has a rule applied in this location, a Conflicting Rules dialog box displays your options.
Step 7 Choose whether you want to include the immediate hierarchy above the element (retain the ancestors) or exclude it (remove the ancestors):
|
Note The Select rule always takes precedence over other rules. For example, if you select an element and retain ancestors, Design Studio disregards any Clip rules or Ignore rules that you apply to those ancestors. |
Step 8 If you want the transformation rule to apply to this exact element and only to this element, click Done. Otherwise, see the "Applying Rules to Multiple Elements" section.
Design Studio displays the results of the Select rule. In the XHTML source view, the Select icon (
) indicates that you selected this element.
Step 9 If you selected an input element or a select element in step 2, you must locate the formbegin and formend elements in the XHTML source view and apply the Select rule to them.
The formbegin and formend elements represent <form> and </form>, respectively. They are provided by Design Studio in order to maintain well-formed syntax.
It is generally most efficient to select the major items you want included on a transformed page, and then remove from those items any child elements you do not want to include. For example, you might want to include a form but exclude some of its fields. To exclude content, you use the Clip rule.
To create a Clip rule, perform these steps:
You will have a chance later to apply the rule to other device types.
Step 2 In the XHTML source view, right-click the element you want to exclude from a transformed page.
If you have trouble locating an element in the XHTML source view, click the element in the browser view. Design Studio highlights the corresponding element in the XHTML source view.
Step 3 Choose Clip from the shortcut menu.
The Configure: Clip Rule dialog box appears with a default name in the Rule Name field. Design Studio forms a unique name by combining the rule name, the name of the element or text to which you are applying the rule, and a number.
Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Clip Footer."
A name helps you locate the rule later if you need to change it.
Step 5 Choose whether to apply the rule to all pages in this project or just this page:
Step 6 Choose each device type to which you want to apply the rule.
This step enables you to define one rule for multiple devices. If a device already has a rule applied in this location, a Conflicting Rules dialog box displays your options.
Step 7 If you want the Clip rule to apply to this exact element and only to this element, click Done. Otherwise, see the "Applying Rules to Multiple Elements" section.
Design Studio displays the results of the Clip rule. In the XHTML source view, the Clip icon (
) indicates that you clipped this element.
After you apply a Select rule or Clip rule to an element, you can choose to ignore any descendant of that element. For example, you might want to select a form but ignore some elements that control formatting. The Ignore rule applies only to an individual element (not its ancestors or descendants).
To create an Ignore rule, perform these steps:
You will have a chance later to apply the rule to other device types.
Step 2 In the XHTML source view, right-click the element you want to ignore on a transformed page.
If you have trouble locating an element in the XHTML source view, click the element in the browser view. Design Studio highlights the corresponding element in the XHTML source view.
Step 3 Choose Ignore from the shortcut menu.
Notice in the above example that the Ignore rule is being applied to the b element.
The Configure: Ignore Rule dialog box appears.
Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Ignore formatting."
Step 5 Choose whether to apply the rule to all pages in this project or just this page:
Step 6 Choose each device type to which you want to apply the rule.
If a device already has a rule applied in this location, a Conflicting Rules dialog box displays your options.
Step 7 If you want the transformation rule to apply to this exact element and only to this element, click Done. Otherwise, see the "Applying Rules to Multiple Elements" section.
Design Studio displays the results of the Ignore rule. In the XHTML source view, the Ignore icon (
) indicates that you ignored this element.
The Modify Tag rule gives you great flexibility in transforming content. You can change the attributes of an element. You can even replace an element with a different element and specify attributes for it. When choosing content to modify, be aware of content that might dynamically change, causing unintended results.
|
Note You cannot use the Modify Tag rule to replace an element with text. To achieve that result, clip the element, and then insert the text. For example, you might want to clip a logo image and insert text. |
To modify an element, perform these steps:
You will have a chance later to apply the rule to other device types.
Step 2 In the XHTML source view, right-click the element you want to modify for the transformed page.
Step 3 Choose Modify from the shortcut menu.
The Configure: Tag Modify Rule dialog box appears.
Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Modify Button Name."
Step 5 Choose whether to apply the rule to all pages in this project or just this page:
Step 6 Choose each device type to which you want to apply the rule.
If a device already has a rule applied in this location, a Conflicting Rules dialog box displays your options.
Step 7 Click the Modify Element tab.
Step 8 Change the element in any of the following ways:
Step 9 If you want the transformation rule to apply to the original element and only to the original element, click Done. Otherwise, click the Configure Rule tab and see the "Applying Rules to Multiple Elements" section.
Design Studio displays the results of the Modify rule. In the XHTML source view, the Modify icon (
) indicates that you modified this element. In the following example, the hr element was changed to a br element.
In addition to working with the original content of a web page, you can also insert text and XHTML/XML elements. You can insert individual elements and specify attributes for them. You can also insert blocks of XHTML code, for example to create a list or table.
The code you insert must follow the established rules for well-formed XML. If you are unfamiliar with those rules, see the "Well-Formed XML" section.
To insert content, perform these steps:
You will have a chance later to apply the rule to other device types.
Step 2 Determine where you want to insert the element(s) or text.
The element you choose to insert before or after must be contained within the descendants of an element marked with the Select rule.
|
Note You cannot insert an element where a Select rule is in effect; in addition, you cannot insert an element inside a clipped element. |
Step 3 In the XHTML source view, right-click the element where you want to insert content.
Step 4 Choose Insert from the shortcut menu.
The Configure: Tag Insert Rule dialog box appears.
Step 5 (Optional) Change the rule name, perhaps using a brief description of its content such as "Insert Table."
Step 6 Choose whether to apply the rule to all pages in this project or just this page:
Step 7 Choose each device type to which you want to apply the rule.
If a device already has a rule applied in this location, a Conflicting Rules dialog box displays your options.
Step 8 Click the Insert Element tab.
The Insert Element tab appears.
Step 9 In the Insert New Element area, choose a setting as follows:
Step 10 In the Type of Element to Insert area, choose a setting as follows:
Design Studio displays the results of the Insert rule. In the XHTML source view, the Insert icon (
) indicates that you inserted an element at this location. In the following example, the HTML fragment www.cisco.com was inserted after the br element.
Step 11 If you want the transformation rule to apply to the original element and only to the original element, click Done. Otherwise, click the Configure Rule tab and see the "Applying Rules to Multiple Elements" section.
XML is much more strict than HTML about where tags are placed and how they are written. XML follows a set of rules for well-formed markup; when your code breaks a rule, an XML parser returns an error. Well-formed XML complies with the following rules (for more information about these rules and other rules, see an XML reference manual):
To accommodate small microbrowser screens, the Cisco CTE 1400 breaks transformed pages into small chunks and sends one screenful of information to the device at a time. As a result, information that originally was grouped, such as an input field and its label, can display on different screens. If an input field precedes its label in the web page, the wireless device might display an unlabeled input field at the bottom of a screen and the corresponding label at the top of the next screen. It will be less confusing to a wireless user to see the label first, followed by the input field. To handle this and similar situations, use the Move rule to reorder the label and input field.
You might also find this rule useful as a shortcut. For example, rather than doing a series of selects, clips, and ignores just to include one line of text inside of a table, it might be easier to move the line you want to keep and clip the table.
To move an element tag, perform these steps:
Step 2 In the XHTML source view, right-click the element you want to move (the source element).
Step 3 Choose Move from the shortcut menu.
The Move Tag: Select Destination dialog box appears.
Step 4 In the XHTML source view, select the destination element (the location where you are moving the source element).
The selected tag displays in the Move Tag: Select Destination dialog box.
Step 5 Click Done.
The Configure: Move Rule dialog box appears.
Step 6 (Optional) Change the rule name, perhaps using a brief description of its content such as "Move input field label."
Step 7 Choose whether to apply the rule to all pages in this project or just this page:
Step 8 Choose each device type to which you want to apply the rule.
Step 9 In the Move tag area, select the location for the rule:
Step 10 If you want the transformation rule to apply to this exact element and only to this element, click Done. Otherwise, see the "Applying Rules to Multiple Elements" section.
Design Studio displays the results of the Move rule. In the XHTML source view, the Move icon (
) displays in the destination location.
Cisco IP phones, WAP phones, and HDML devices support the initiation of a phone call by clicking text in the microbrowser. Use the Design Studio Dial rule to specify a phone number to be dialed when the user clicks a particular text string.
While creating the Dial rule, you work with two text elements—the text that includes the phone number and the text you want to use as a label for the phone number.
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 rule.
You must select a text element that includes the phone number.
Step 3 Choose Dial Number from the shortcut menu.
The Configure: Dial 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 (Optional) Enter a prefix for the phone number.
Step 8 Click the Name tab.
Step 9 In the XHTML source view, select the text element that contains the label for the phone number.
The text element and its path elements appear in the Configure: Dial Rule dialog box.
Step 10 To configure the path of the text element that contains the label for the phone number, click the path element, complete the Configure Path Element dialog box, and click Done.
For help, see the "Applying Rules to Multiple Elements" section.
Step 11 To apply the Dial rule only to this phone number, click Done to complete this procedure. To apply the rule to multiple phone numbers, continue with the next steps.
Step 12 Click the Phone # tab.
Step 13 Select the path element you want to configure, complete the Configure Path Element dialog box, and click Done.
For help, see the "Applying Rules to Multiple Elements" section.
Design Studio displays the results of the Dial rule. In the XHTML source view, the Dial icon (
) indicates a dialable phone number.
When you navigate to a page that contains frames, Design Studio gives you the choice of transforming the individual frames or using the content of the noframes element, as described in the following procedures. Alternatively, you can return to the page that contains the link to the page with frames and use the Modify rule to change the destination of the link so that it bypasses the page with frames.
To work with the individual frames, perform these steps:
For example, in the above example, click either toc or main.
Step 2 Click Add Page to Project.
Design Studio creates a page for the frame. You can now work with the page that contains the contents of the frame.
Step 3 Create an identifier and then create transformation rules for the page.
Step 4 To work with another frame, click the Browse tab and then click the 
icon.
Step 5 Click a link for the frame you want to transform and repeat steps 2 and 3 for the page.
To use the contents of the noframes element, perform these steps:
Step 2 Create an identifier for the page.
Step 3 In the project tree, click a device type for which you want to create a No Frames rule.
Step 4 Right-click the XHTML source view.
Step 5 Choose No Frames from the shortcut menu.
The Configure: No Frames Rule dialog box appears.
Step 6 (Optional) Change the rule name, perhaps using a brief description of its content such as "No Frames 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 Done.
The contents of the noframes element appears in the browser and XHTML source views.
Step 10 If you want, you can apply other transformation rules to the content of the noframes element.
By default, the CTE transforms a table element to a list for Palm and RIM devices and WAP phones only. You can change the default behavior in the following ways:
Suppose that a web page contains the following table:
By using four Ignore and Modify Tag 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.
To retain a table element, perform these steps:
Step 2 In the XHTML source view, right-click the table element you want to retain as a table.
Step 3 Choose Retain Table from the shortcut menu.
Step 4 (Optional) Change the rule name, perhaps using a brief description of its content such as "Retain product table."
Step 5 Choose whether to apply the rule to all pages in this project or just this page:
Step 6 Choose each device type to which you want to apply the rule.
Step 7 If you want the transformation rule to apply to this exact element and only to this element, click Done. Otherwise, see the "Applying Rules to Multiple Elements" section.
Design Studio displays the results of the Retain Table rule.
To convert a table to a list, you create rules to transform the table as follows:
Regardless of the number of rows and columns in a table, you need only four rules to convert it to a list.
For the following procedure, assume that a table has three columns and a variable number of rows.
The XHTML source view of the table is as follows:
To convert the table to a list by rows, perform these steps:
Step 2 In the XHTML source view, right-click the table element you want to convert.
Step 3 Choose Ignore from the shortcut menu.
You ignore the table element because you are converting it to a list.
Step 4 Choose each device type to which you want to apply the rule.
Step 5 Click Done.
Step 6 In the XHTML source view, right-click the first tr element after the table element.
Step 7 Choose Modify from the shortcut menu.
Step 8 Click the Modify Element tab.
Step 9 From the Select the HTML/XML Element menu, choose ul.
Step 10 Click Done.
Step 11 In the XHTML source view, right-click the td element immediately below the tr element you just modified.
Step 12 Choose Modify from the shortcut menu.
Step 13 In the Path to Selected Element area, scroll down to the last td element listed and click it.
Step 14 Select the All Depths and All Positions radio buttons, and click Done.
By applying this rule to all depths and positions, you ensure that all cells are included in the list.
Step 15 Click the Modify Element tab.
Step 16 From the Select the HTML/XML Element menu, choose li.
Step 17 Click Done.
The XHTML source view shows the icons for the Ignore and Modify rules you created.
At this point, the table converts to a list. However, the second and following tr elements cause blank lines to appear in the list. Ignore the remaining tr elements.
Step 18 In the XHTML source view, right-click the second tr element in the table.
Step 19 Choose Ignore from the shortcut menu.
Step 20 In the Path to Selected Element area, scroll down to the last tr element listed and click it.
Step 21 Select the All Depths and All Positions radio buttons, click Done, and then click Done again.
The XHTML source view now shows the four rules you created.
The Cisco CTE 1400 converts GIF, JPEG, and BMP images into a format recognized by the requesting wireless device. WAP phones do not support the display of images, so the CTE does not send images to them. For WAP phones, 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:
The following example describes how to use the Modify rule to change an img element so that alternate text is used instead of an image.
To use alternate text instead of an image, perform these steps:
Step 2 In the Configure Rule tab, choose how you want to apply the rule.
For information on using this tab, see the "Modifying Content" section.
Step 3 Click the Modify Element tab.
In this example, the img element has four attributes defined.
Step 4 Delete the height, width, and src attributes. To delete an attribute, select it and click Delete.
Deleting the height and width attributes improves the formatting.
Step 5 To add the alt attribute, click Add, enter alt as the Name, and enter the alternate text as the Value.
Step 6 Click Done.
Rather than recreating the same rule for several elements on a page, you can create one rule and apply it to those elements. For example, if you want to change every hr element to a br element, you select the first br element, choose the Modify rule, and use the techniques described in this section to apply the rule throughout the page. This feature simplifies the development and maintenance of configuration files and also results in more efficient operation for the Cisco CTE 1400.
|
Note When applying rules to multiple elements, be aware that the Select rule always
takes precedence and that the last rule added has the highest priority. If a
previously added rule no longer takes effect, delete and reapply the rule. While you can apply a rule to multiple elements, you cannot apply more than one rule to an element (a node in the XHTML). |
The Configure Rule dialog box for most types of rules contains a Path to Selected Element area, as shown in Figure 4-2. To apply a rule to more than one element on a page, you configure at least one of the elements in the list.
The Path to Selected Element area lists every tag (enclosed in angle brackets) and text element that is in the path to the element to which you are applying a rule. The last item in the list (such as "Cisco Systems, Inc." above) is the tag or text element selected in the XHTML source view when you chose a rule. To apply a rule to multiple elements, you typically start by configuring the last path element in the list. In some cases, you must configure more than one path element to achieve the intended result.
After you select a tag or text in the Path to Selected Element area, a dialog box similar to the one in Figure 4-3 appears.
To expand the scope of the rule, you change the default settings in the Configure Path Element dialog box. By default, a rule matches the tag name or text element and applies only to the selected element; attribute values are ignored.
You can apply a rule to additional elements by changing the element name, depth, position, and attributes settings as described in the following sections:
|
Note For a general introduction to the concepts of element depth and position, see the "XHTML Element Hierarchy" section. |
When you apply a rule, you typically match against the element name, such as form, or the element text, such as the text string "Cisco Systems, Inc." shown in Figure 4-2. For example, when you select a form element to clip, you often want the clip rule to apply only to that form element and not to all elements. If you are applying a rule to text, you often want the rule to apply only to the selected text string.
You typically choose to not match by element name only if the information you want to match is always at a particular position in the XHTML but is not associated with a particular element. To not match by element name, clear the Match Element Name option in the Configure Path Element dialog box.
For information on how to work with the interaction between the element name and position setting, see the "Applying Rules Based on Position" section.
When you select a text element in the Path to Selected Element area, the Configure Text Element dialog box (Figure 4-4) displays the selected text.
At the top of the dialog box, you specify the text that an element must contain in order for the rule to apply to the element. By default, a rule applies only to text elements with the exact string, such as "Cisco Worldwide Contacts" shown in Figure 4-4. You can choose to apply a rule more broadly, such as to any text element that contains the original string. Table 4-4 describes the text to specify and menu item to select based on the text you want to match (as a condition for applying a rule).
Depth refers to how an element is nested along the x-axis in the XHTML. Suppose a web page includes the following XHTML structure:
The second table element is a descendent of the first table element. There are tables at three different depths.
Suppose you want to use one rule to remove the borders from several tables. Your web page contains the following XHTML structure. The table element in bold and underlined is the element selected when you apply a command.
Table 4-5 shows how each Depth to Match setting applies to other table elements, given the setup in this section. The elements affected by the depth settings are in bold and underlined in Table 4-5.
Table 4-5 Effect of XHTML Depth Settings
|
For information on how the depth and position settings interact, see the "How the Depth and Position Settings Interract" section.
Position refers to the sequence of a tag or text element along the y-axis in the XHTML. Suppose a web page includes the following XHTML structure:
The four table elements are in positions one through four, provided you are matching on the element name table. If you are not matching on element name, all tag types are included in the count: The four table elements are in positions one, two, four, and five. The form element is in position three. Text elements are not included in the tag count; tags are not included in the text element count.
Suppose you want to use one rule to clip several rows from all tables. Your web page contains the following XHTML structure. The table element in bold and underlined is the element selected when you apply a command.
Table 4-6 shows how each Element Position to Match setting applies to other table elements, given the setup in this section. Assume that Match Element Name setting is selected and that the Depth to Match setting is Exact. The elements affected by the position settings are in bold and underlined in Table 4-6.
Table 4-6 Effect of Element Position Settings
|
The depth and position settings work together, providing you with precise control over how narrowly or broadly a rule is applied. Table 4-7 describes how to set the Depth to Match and the Position to Match options based on how you want to apply a rule.
Table 4-7 Choosing Depth and Position Options
|
Consider the following scenario:
To include all but the first two link/text/break combinations in each table, perform these steps to configure the a element and the br element:
Step 2 Choose Clip from the shortcut menu.
Step 3 In the Configure: Clip Rule dialog box, scroll to the end of the Path to Selected Element list and click the a element.
Step 4 In the Configure Path Element dialog box, set the options as follows:
Match Element Name: selected
Depth to Match: All Depths
Position to Match: Range Min = 1 and Range Max = 2
Step 5 Click Done and then click Done again.
Step 6 In the XHTML source view, right-click the br element that immediately follows the a element you just worked with.
Step 7 Choose Clip from the shortcut menu.
Step 8 In the Configure: Clip Rule dialog box, scroll to the end of the Path to Selected Element list and click the br element.
Step 9 In the Configure Path Element dialog box, set the options as follows:
Match Element Name: selected
Depth to Match: All Depths
Position to Match: Range Min = 1 and Range Max = 2
Step 10 Click Done and then click Done again.
Consider the following scenario:
To apply the Modify rule to the nested tables (which are contained in two columns), you must configure the table and td elements so that the rule will iterate across the columns.
To configure the table element and the td element, perform these steps:
Step 2 Choose Modify from the shortcut menu.
Step 3 Click the Modify Element tab.
Step 4 Change the value of "border" to 0.
Step 5 Click the Configure Rule tab.
Step 6 Scroll to the end of the Path to Selected Element list and click the table element.
Step 7 In the Configure Path Element dialog box, set the options as follows:
Match Element Name: selected
Depth to Match: Exact
Position to Match: All Positions
Step 8 Click Done.
In the browser view, the borders are removed only from the tables in the left-most column.
Step 9 In the XHTML source view, right-click the table element with the Modify icon () and select Edit Rule from the shortcut menu.
Step 10 In the Path to Selected Element area, click the td element that immediately precedes the last table element.
Step 11 In the Configure Path Element dialog box, set the options as follows:
Match Element Name: selected
Depth to Match: Exact
Position to Match: All Positions
Step 12 Click Done and then click Done again.
In the browser view, the borders are removed from the tables in both columns.
By default, the CTE ignores the values of element attributes. For example, if the CTE finds a form element at a specified depth and position, it applies a rule to the form regardless of attribute values. However, you might want to specify that a rule applies only to forms with a particular method or target attribute. In addition, when you create transformation rules for a page that is dynamically generated, you might not know at what depth or position an element resides. However, you might know that the table elements you want to apply the rule to always have a particular datasrc attribute.
Table 4-8 describes how to set the attributes area in the Configure Path Element dialog box, based on how you want to apply a rule.
Consider the following scenario:
To apply a rule to the form element regardless of its position on the page, set the options in the Configure Path Element dialog box as follows:
Match Element Name: selected
Depth to Match: All Depths
Position to Match: All Positions
datasrc Attribute Operation: equals
|
Note This feature is intended only for users familiar with XSL. |
You can manually configure an element by editing its XPath expression. This feature provides more flexibility in node selection when applying a rule. Table 4-9 contains the XPath expression to use to achieve various results.
Table 4-9 XPath Expression Examples
|
| 1 If the text you want to configure contains special characters, particularly single or double quotation marks, be sure to enter the text in the text field and click Reload to retrieve the XPath expression provided by Design Studio. You must include any text variables provided by Design Studio in your XPath expression. |
For more information about XPath pattern matching, see http://www.w3.org/TR/xpath.
To manually configure an XPath expression, perform these steps:
Step 2 Choose Manually Configure Element.
Step 3 Click Reload to view the current XPath expression for the node.
Step 4 Edit the XPath configuration in the text box.
Design Studio alerts you if you enter invalid syntax for the XPath.
Step 5 Click Done.
To edit a transformation rule, perform these steps:
Step 2 In the project tree, locate the page you want to change.
Step 3 For that page, click the device type you want to change.
Step 4 Use any of these methods to edit a rule:
Step 5 Complete the dialog boxes as described in the "Creating Transformation Rules" section.
To delete a transformation rule, perform these steps:
Step 2 In the project tree, locate the page you want to change.
Step 3 For that page, click the device type you want to change.
Step 4 Use any of these methods to delete a rule:
|
Note After you update a configuration file, you must publish it to a CTE for the changes to take effect. |
Posted: Mon Aug 18 17:10:20 PDT 2003
All contents are Copyright © 1992--2003 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.
