![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
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 Click the button beside 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 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 (=).
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.
Notice that the Clip rule is being applied to a cell inside of an included table.
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 select 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 In the XHTML source view, select the text element that contains the label for the phone number.
The text element appears in the Configure: Dial Rule dialog box in the Selected text field. You can edit the label.
Step 5 (Optional) Change the rule name, perhaps using a brief description of its content such as "Dial tech support."
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 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 9 Click a path element, complete the Configure Path Element dialog box, and click Done.
For help, see the "Applying Rules to Multiple Elements" section.
Step 10 Click the Name tab to configure the path for the text element that contains the label for the phone number.
Step 11 Click a path element, 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 the corresponding button.
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 the corresponding button.
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 creating the same rule for several matching elements throughout a page, you can create one rule and apply it to those elements. This feature simplifies your work and also results in more efficient operation for the Cisco CTE 1400.
![]() |
Note While you can apply a rule to multiple elements, you cannot apply more than one rule to an element (a node in the XHTML). |
By applying a rule to multiple elements on the same page, you expand the scope of the rule so that it affects matching elements based on the following:
When applying rules to multiple elements, be aware that the last rule added has the highest priority. If a previously added rule no longer takes effect, you need to delete it and reapply it.
For an introduction to the concepts of element depth and position, see the "XHTML Element Hierarchy" section.
These sections describe the options for applying rules to multiple elements:
Suppose a web page includes the following XHTML structure. The table element in bold and underlined is the element selected when you apply a command.
Table 4-4 shows how each Depth to Match setting applies to other table elements, given the above setup. The elements affected by the setting are in bold and underlined in the table.
Table 4-4 Effect of XHTML Depth Settings
|
Suppose a web page includes 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 Element Position to Match setting applies to other table elements, given the above setup. Assume that the Depth to Match setting is Exact. The elements affected by the setting are in bold and underlined in the table.
Table 4-5 Effect of Element Position Settings
|
By default, Design Studio handles element name, attributes, and text as follows:
You may need to change the default behavior discussed above. For example, when you create transformation rules for a page that is dynamically generated, you might not know at what depth or position an element might reside. However, you might know that a table element always has a particular datasrc attribute.
For an explanation of how to handle these situations, see the procedures in the "Configuring an Element" section and the "Configuring Element Text" section.
When you select an element in the XHTML source view and choose a command, the Configure dialog box for the command lists every ancestor element that is in the path of the selection (see Figure 4-2). Click the icon beside an element to configure a path element. Click the icon beside text to configure a text element.
The following procedure explains how to configure an element starting from the Configure Rule dialog box.
To configure an element, perform these steps:
The Configure Path Element dialog box appears. If the current element type does not have attributes, the Attributes area is hidden.
Step 2 Note that by default, Match Element Name is selected. Clear the default selection only if you do not want to apply the rule to an element based on its name.
Step 3 See Table 4-6 to determine how to set the Depth to Match and the Position to Match options.
Table 4-6 Choosing Depth and Position Options
|
For more information, see the "Applying Rules Based on Element Depth" section and the "Applying Rules Based on Element Position" section.
Step 4 In the Attributes area, all element attributes default to "ignored." To change how an attribute is handled, see Table 4-7.
Step 5 Click Done.
Consider the following scenario:
To apply a rule to the form element regardless of its position on the page, use the following settings in the Configure Path Element dialog box:
Depth to Match: All Depths
Position to Match: All Positions
datasrc Attribute Operation: equals
When you select element text in the XHTML source view and choose a command, the Configure dialog box for the command lists every ancestor element that is in the path of the text you selected (see Figure 4-2).
This procedure explains how to configure element text starting from a Configure dialog box.
To configure element text, perform these steps:
The Configure Text Element dialog box appears.
Step 2 Fill in the top two fields to specify the text you want the Cisco CTE 1400 to match against. See Table 4-8 for your options.
Step 3 Choose a Depth to Match option.
For help, see the "Applying Rules Based on Element Depth" section.
Step 4 Choose a Position to Match option.
For help, see the "Applying Rules Based on Element Position" section.
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:
Posted: Mon Aug 18 17:32:53 PDT 2003
All contents are Copyright © 1992--2003 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.