|
|
The following sections describe the basics of creating transformations in Design Studio:
You must assign an identifier to each web page that you add to a Design Studio project. The CTE 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 that you want to use as an identifier.
In this example, "Sample Contacts Page," 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 identify the page by matching the original text exactly, click OK. If you want the CTE to apply the transformation rules to a larger set of pages, continue with the next step to specify Boolean matches in the Path to Selected Element area.
When identifying a page by a text string, specify an exact match if you want the CTE to apply the transformation rules only to pages with the exact text string. In the above example, a web page that contains "Sample Contacts Page" as its title text will match this identifier.
Step 6 In the Path list, verify that the text you are using as an identifier is selected.
The Path to Selected Element area displays settings that enable you to indicate how you want the CTE to match the text when identifying pages.
Step 7 Complete the Text String Match area to specify the text that you want the CTE 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:
Step 9 Click OK.
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 Review the URL and determine if any portion of it should be excluded, based on the following guidelines:
When a URL includes "/" characters, the CTE considers the last "/" when matching transformation rules to the page. For example, if the URL identifier rule is www.fox.com/products/, the CTE applies the corresponding transformation rules only to a page requested as www.fox.com/products/, not to a page requested as www.fox.com/products.
However, if a URL does not include "/" characters other than one at the end, the CTE does not consider the ending "/" when matching rules. For example, if the URL identifier rule is www.fox.com:80/, the CTE applies the corresponding transformation rules to pages requested as www.fox.com or www.fox.com/.
Step 5 To match against the exact URL shown, click OK. Otherwise, continue with the next step.
Step 6 Select the portion of the URL that you do not want to match against, and then click Exclude.
 |
Note Any string matches the excluded portion of a URL. Thus, if a URL is www.fox.com/index.html and you exclude index.html, any URL that starts with www.fox.com matches the identify rule. |
Step 7 To re-include text marked as excluded, select the text and click Include.
Step 8 Click OK.
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 is noted in the Page field and change its identifier rules so that they are unique.
However, if you need to transform several pages in exactly the same way, you can use the same identifier rules for more than one page. When you apply the identifier rules of one page to another, the transformation rules are also applied. Applying the rules of one page to another is useful when you are working with pages created from a template.
|
Note When you use the same identifier rules for multiple pages, the pages also inherit any transformation rule conflicts. |
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 that they are unique), perform these steps:
Step 2 Locate in the project tree the page whose identifier rules that 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 OK.
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 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 that 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 steps:
Step 2 Right-click an element in the XHTML source view.
Step 3 Choose a command from the shortcut menu.
Step 4 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
|
|
1 This feature is available only for WAP phones and Cisco IP phones. For information on Cisco IP phones, go to the Design Studio Help menu and choose Device Help. 2 This feature is available only for Cisco IP phones. For information on Cisco IP phones, go to the Design Studio Help menu and choose Device Help. |
To edit a transformation rule, perform these steps:
Step 2 In the project tree, locate the page that you want to change.
Step 3 For that page, click the device type that 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 that you want to change.
Step 3 For that page, click the device type that 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. |
You can copy all transformation rules from one device type to another. This feature is useful when you upgrade Design Studio to support additional device types.
|
Note When you copy rules, Design Studio replaces the entire set of rules on the target device with the rules from the source device. Any rules previously on the target device are removed. |
To copy all rules from one device to another, perform these steps:
Step 2 From the Tools menu, choose Map New Devices.
Step 3 In the Open dialog box, choose the project that you want to update, and click Open.
The project that you choose should be the project to which you will copy rules.
Step 4 In the From Device area of the Device Mapping dialog box, select the device that has the transformation rules that you want to copy.
Step 5 In the To Device(s) area, select each device to which you want to copy the rules.
If a device already has rules defined, those rules will be replaced with the new rule set.
Step 6 Click Map.
Step 7 Open the configuration file and verify that the rules have the intended results for each device.
The following sections describe how to create basic transformation rules in Design Studio:
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 created for a page excludes all other elements. Subsequent Select rules add to the initial selection.
|
Note If your site requires the head element, be sure to apply a Select rule to it. |
It is generally more efficient to begin your work by selecting the main element that you want to include (perhaps a form or table). You can subsequently add other elements to your initial selection by going to the View Original tab.
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 that 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.
Step 7 Choose whether you want to include the immediate hierarchy above the element:
|
Note The Select rule always takes precedence over other rules. For example, if you select an element and retain parent elements, Design Studio disregards any Clip rules or Ignore rules that you apply to those parent elements. |
Step 8 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see the "Applying Rules to Several Elements" section.
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For example, if you want to apply a rule to one of several tables and the tables do not always appear in the same location, click the Select Relative Path button to associate the table with a unique element that the CTE can use to locate the table. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 5-14. |
Design Studio displays the results of the Select rule. In the XHTML source view, the Select icon (
) indicates that you selected this element.
When you apply a Select rule to an input element or a select element, Design Studio automatically applies the Select rule to the formbegin and formend elements. 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 that you want included on a transformed page, and then remove from those items any child elements that you do not want to include. For example, you might want to include a form but exclude some of its fields. To exclude content, 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.
Step 7 If you want the Clip rule to apply to this exact element and only to this element, click OK. Otherwise, see the "Applying Rules to Several Elements" section.
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For example, if you want to apply a rule to one of several tables and the tables do not always appear in the same location, click the Select Relative Path button to associate the table with a unique element that the CTE can use to locate the table. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 5-14. |
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 a Clip rule to an element, you can choose to ignore any child or parent 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 parent or child elements).
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 that 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 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.
Step 7 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see the "Applying Rules to Several Elements" section.
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For example, if you want to apply a rule to one of several tables and the tables do not always appear in the same location, click the Select Relative Path button to associate the table with a unique element that the CTE can use to locate the table. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 5-14. |
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 rule gives you great flexibility in transforming content. You can change an element and its attributes as follows:
If a Modify rule causes unintended results, check for the following:
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 that you want to modify for the transformed page.
Step 3 Choose Modify from the shortcut menu.
The Configure: Modify Element 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.
Step 7 Click the Modify Element tab.
If you are modifying an element, the element name displays in the Single XHTML/XML Element area.
If you are modifying text, the text displays in the XHTML/XML Fragment or Text area.
Step 8 Change an element in any of the following ways:
|
Note If an attribute includes a URL, you must enter special characters by using XHTML character entity references. For example, use "&" for the "&" character. This use of XML is required because Design Studio and the CTE converts content into XHTML. All entity references must be the unnormalized value (that is, in the form of "&something;"). |
Change text by typing code or text in the XHTML/XML Fragment or Text area.
Step 9 If you want the transformation rule to apply to the original element and only to the original element, click OK. Otherwise, see the "Applying Rules to Several Elements" section.
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 5-14. |
Design Studio displays the results of the Modify rule. In the XHTML source view, the Modify icon (
) indicates that you modified this 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, you can create a list or table.
|
Note Some devices have buttons that you can program by inserting HTML elements on a page. Refer to the developer documentation provided with a device for information on the elements used to program device buttons. |
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. The code you insert must also result in valid HTML.
To insert content, perform these steps:
Step 2 Determine where you want to insert the element(s) or text.
|
Note You cannot insert an element on a node where a Select rule is applied; 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.
You specify later whether to insert the content before or after the element you select.
Step 4 Choose Insert from the shortcut menu.
The Configure: 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.
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:
|
Note If an attribute includes a URL, you must enter special characters by using XHTML character entity references. For example, use "&" for the "&" character. |
Step 11 If you want the transformation rule to apply to the original element and only to the original element, click OK. Otherwise, see the "Applying Rules to Several Elements" section.
|
Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button in order to uniquely identify an element that does not have a static location on the page. For more information, see the "Specifying a Rule Location on a Dynamically Generated Page" section 5-14. |
Design Studio displays the results of the Insert rule. In the XHTML source view, the Insert icon (
) indicates that you inserted an element at this location. In the following example, the text Contacts: was inserted after the br element.
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, refer to an XML reference manual):
To accommodate small microbrowser screens, the CTE breaks transformed pages into small chunks and sends one screenful of information 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 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 user to see the label first, followed by the input field. To handle this and similar situations, use the Move rule to move an element.
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.
If a Move rule does not have the intended results, make sure that you are not inadvertently creating invalid HTML.
To move an element tag, perform these steps:
Step 2 In the XHTML source view, right-click the element that you want to move (the source element).
Step 3 Choose Move from the shortcut menu.
The Move 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 destination element must already be selected for transformation. That is, the destination element must be a selected node or a child of a selected node.
The selected tag displays in the Move Destination dialog box.
|
Note The location where you move the element tag must be a part of the content selected for transformation and must be a valid location for the element type. If the location is invalid, a Move rule is applied to the element but it has no effect. |
Step 5 Click OK.
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 Element area, select the location for the rule:
Step 10 To remove the element that you are moving from its original location, keep the check box selected. To retain a copy of the source element in its original location, click the Remove Source Element check box to clear the check box.
Step 11 If you want the Move rule to apply to this exact element and only to this element, click OK. Otherwise, see the "Applying the Move Rule to Several Elements" section.
Design Studio displays the results of the Move rule. In the XHTML source view, the Move icon (
) displays in the source location.
The rules area (lower left pane of the Design Studio window) displays all rules that have been applied to a selected device. When two or more rules display in red, those rules are in conflict because they are applied to the same node. When a rule displays in gray, the rule is not currently taking effect and is considered a "dead" rule.
The following sections describe how to work with conflicting and dead rules:
Although Design Studio allows some combinations of transformation rules to be applied to a node, other combinations are flagged as conflicting rules. For example, suppose that you applied the Clip rule to all images on a web page and then later decided to apply the Image Alt rule to one of the images. A node with the Clip rule would then also have an Image Alt rule applied to it. The rules area would display the Clip rule and the Image Alt rule in red to indicate the rule conflict. This rule conflict may be intentional (you want to use only two rules to clip all but one image and use the alternate text for that image), or perhaps a mistake (you forgot that you had clipped all images).
Rule conflicts also occur in the following situations:
When you see rules displayed in red in the rules area, verify that the rules are operating as you intended. If the rule conflict is intentional and you are satisfied with the resulting transformation, you do not need to change the rules.
When you allow rules to conflict, be aware that Design Studio applies the rules as follows:
1. A Select rule always takes precedence.
2. If the two rules that conflict are the same type of rule, the most specific rule takes precedence. For example, a rule that is configured to match the exact depth and position of an element is more specific than a rule configured to match all depths. A rule applied to a page is more specific than a rule applied to all projects.
3. If two rules are equally specific, the last rule listed in the rules area takes precedence.
|
Note To reorder two rules in the rules area, click the first of the two rules and click Delete. From the Edit menu, choose Undo. The rule you deleted is added to the end of the rules list. |
If the rule conflict is unintentional, review the rules and determine how you need to change the rules to achieve the intended transformation.
To quickly navigate between conflicting rules, perform these steps:
Design Studio selects the corresponding element or text in the browser view and the XHTML source view.
Step 2 To locate another rule that is applied to the same element or text, right-click the selected rule in the rules area.
Step 3 Choose Rule Conflicts from the shortcut menu and then choose a rule name from the submenu.
Design Studio selects the corresponding element or text in the browser view and the XHTML source view.
A dead rule, displayed in gray in the rules area, is a rule that has no effect on the current page. A dead rule might be the expected result of a transformation. For example, suppose that you applied one set of rules to a series of web pages. The first web page has a Next button; the second and following web pages have Next and Previous buttons. You applied a Select rule to the Previous button. When the first web page displays, the Select rule is dead because the first web page does not have a Previous button. However, the Select rule works for the remaining web pages. In this case, the "dead" rule is working as you intended.
When you discover a dead rule, determine if it is acceptable for the rule to not take effect in some cases. If the rule should always take effect, edit the rule or apply additional rules as needed.
The following sections describe how to apply rules to several elements:
|
Note For a general introduction to the concepts of element depth and position, see the "XHTML Element Hierarchy" section. |
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 specify how you want the rule applied throughout the page. This feature simplifies the development and maintenance of configuration files and also results in more efficient operation for the CTE.
The Configure Rule dialog box for most rules contains a Path to Selected Element area, as shown in Figure 4-1. 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 is the tag or text element selected in the XHTML source view when you chose a rule.
To apply a rule to several 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. You can further define the scope of a rule by selecting an element that is relative to the one you are configuring, as described in the "Using a Relative Path to Specify a Rule Location" section.
If an element occurs more than once in the path to a selected element, the repetition is indicated by the icon 
, as shown in Figure 4-1. When you want to apply a rule to several elements and see that an item in the element path is repeated, consider if configuring the repeated element will give you the intended results.
After you select a tag or text in the Path to Selected Element area, the dialog box displays settings for configuring a path element (Figure 4-2) or a text element (Figure 4-3).
To expand the scope of a rule, you change the default settings. By default, a rule matches the tag name or text element and applies only to the selected element; attribute values are ignored.
When you apply a rule, you typically match against the element name, such as form, or the element text. 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.
|
Note When applying rules to several 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. |
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. For example, perhaps you want to match on a particular attribute rather than an 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.
You can choose to skip an element that is in the path to the element you are transforming. By skipping an element, you allow a rule to apply higher in the tree hierarchy. This step might be necessary for dynamic content in which formatting elements (font, b) may or may not be present. Skipping an element is also useful for tables whose structure can vary.
Suppose that you are working with a document that includes the following dynamic content:
Assume that on the dynamically generated page, the b element may not be present around "Hello" and that you want to apply a rule to "Hello." By skipping the b element, you allow the rule to apply to "Hello" whether or not the b element is present. In addition to skipping the b element, you should also use the Any Descendant setting for the rule on the text element "Hello." Using the Any Descendant setting with the Skip This Element setting is typical usage.
To skip an element, perform these steps:
Step 2 Choose the rule from the shortcut menu.
Step 3 In the Configure dialog box, click the element that may or may not appear in dynamically generated content.
Step 4 Click Skip This Element to select it.
In the following example, the small element is the optional element.
Step 5 In the Path to Selected Element area, click the last element listed (the element on which you are applying the rule).
Step 6 From the Depth to Match drop-down menu, choose Any Descendant.
The Any Descendant setting allows the element to be matched whether it is at its current depth or one depth higher.
Step 7 Change other settings in the Configure: Rule dialog box as needed and then click OK.
To configure element text, 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. 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 that 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 that a web page includes the following XHTML structure:
The second table element is a descendant of the first table element. There are tables at three different depths.
Suppose that 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 more information, see the following sections:
|
Note When applying rules to several 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. |
Position refers to the sequence of a tag or text element along the y-axis in the XHTML. Suppose that 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 that 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 Position to Match setting applies to other table elements, given the setup in this section. Assume that the 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
|
|
Note When applying rules to several 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. |
For more information, see the following sections:
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
|
Choosing depth and position settings that reflect your intended results may require some experimentation. If you are unsure how to achieve a particular result, follow these suggestions:
The following example explains how to work with a dynamically generated table with these characteristics:
Suppose that the table has the following general setup:
To transform the dynamically generated table, perform these steps:
Step 2 Clip the th elements for Heading 4 and Heading 5.
Step 3 Right-click the td element that corresponds to cell 1d.
Step 4 Choose Clip from the shortcut menu.
Step 5 In the Path to Selected Element area, click the last td element listed.
By applying this Clip rule to multiple depths and positions, you can clip all cells in the fourth and fifth columns.
Step 6 From the Depth to Match drop-down menu, choose All Depths.
This step clips cells in each row for this column.
Step 7 From the Position to Match drop-down menu, choose Range and enter 4 in the Min text box.
This step clips cells from columns 4 through 999.
Step 8 Click OK.
Step 9 Apply the Clip rule to other elements on the page that you do not want to include in the transformed page.
Suppose that you are working with a page that contains four tables whose order dynamically changes. You want the transformed page to include only one of the four tables. To uniquely identify the table that you want to select, you use the Select Relative Path button to choose some text that appears only in that table.
To identify an element that changes positions, perform these steps:
Step 2 Locate the table element for the table that you want to appear in the transformed page.
Step 3 Right-click the table element and choose Select from the shortcut menu.
Step 4 Click Drop All Parent Elements to select it.
Drop parent elements unless they are required for a transformation.
Step 5 In the Path to Selected Element area, click the last table element.
Step 6 From the Depth to Match drop-down menu, choose All Depths.
Step 7 From the Position to Match drop-down menu, choose All Positions.
Step 8 Click the Select Relative Path button.
The Relative Path Element dialog box appears.
Step 9 In the browser view, click a text string that is unique to the table.
The text you clicked appears in the Relative Path Element dialog box.
Step 10 Click OK and then click OK again.
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 Configure the a element as follows:
Match Element Name: selected
Depth to Match: All Depths
Position to Match: Range Min = 1 and Range Max = 2
Step 5 Click OK.
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 Configure the br element as follows:
Match Element Name: selected
Depth to Match: All Depths
Position to Match: Range Min = 1 and Range Max = 2
Step 10 Click OK.
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 Configure the table element as follows:
Match Element Name: selected
Depth to Match: Exact
Position to Match: All Positions
Step 8 Click OK.
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 that has the Modify icon () and choose 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 Configure the td element as follows:
Match Element Name: selected
Depth to Match: Exact
Position to Match: All Positions
Step 12 Click OK.
In the browser view, the borders are removed from the tables in both columns.
A website might have links to PDF files, Word documents, or other binary data files on many pages. You can clip those links from all pages with one Clip rule.
To create one rule that clips all PDF links, perform these steps:
Step 2 If the page does not contain a PDF link, open a different page.
Step 3 In the project tree, click a device type for the page you want to work with.
Step 4 In the XHTML source view, right-click an a element that contains a reference to a PDF file.
The tag will look similar to the following: <a href="filename.pdf">
Step 5 Choose Clip from the shortcut menu.
Step 6 In the Configure: Clip Rule dialog box, click the Project radio button.
In this case, you want to apply the Clip rule to all pages in this project.
Step 7 In the Path to Selected Element area, click the last a element listed.
Step 8 From the Depth to Match drop-down menu, choose All Depths.
Step 9 From the Position to Match drop-down menu, choose All Positions.
Step 10 In the Element Attributes area, double-click the filename in the Value column and then delete everything up to the .pdf.
The Value column should now contain only .pdf.
Step 11 Click the cell in the Operation column and then choose Contains from the drop-down menu.
The Element Attributes area now indicates that this rule will match against a elements with an href value containing .pdf.
Step 12 Click OK.
|
Note If you divided your website pages across several projects, you need to perform the preceding procedure for each project. |
Each of the Configure dialog boxes contains a Select Relative Path button that enables you to specify a second node that the CTE can use in determining where to apply a rule. When you specify a relative path, you limit the scope of a rule.
Suppose that a page includes many a href elements (links) and that you want to include only the links that follow an li element. You would create a Select rule on the first link and specify that you want to apply it to all positions. You also specify the li element as the relative path element, so that the transformation selects only the links that follow an li element.
When working with a dynamically generated page, you will likely need to use relative paths, as described in "Specifying a Rule Location on a Dynamically Generated Page" section.
To specify a rule location, perform these steps:
The Relative Path Element dialog box appears.
Step 2 In the XHTML source view, click an element that can be used by the CTE to locate where to apply the rule.
Step 3 Complete the Configure dialog box and then click OK.
The relative path element is added to the path tree.
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 based on how you want to apply a rule. For an example, see the "Example: Applying a Rule to All Occurrences of an Element with a Specified Attribute" section.
Table 4-8 Changing How an Attribute is Matched
|
Consider the following scenario:
To apply a rule to the form element regardless of its position on the page, configure the form element as follows:
Match Element Name: selected
Depth to Match: All Depths
Position to Match: All Positions
datasrc Attribute Operation: Equals
A Move rule contains path information for both the source element that you are moving and its destination. When you create a Move rule, as described in the "Moving an Element Tag" section, the Configure: Move Rule dialog box shows the path that is common to the source element and its destination, followed by two folders named Source and Destination. The Source folder lists the path to the element that you are moving. The Destination folder lists the path to the element where you are relocating the element as shown in Figure 4-4.
You can apply the Move rule to several source elements and to several destinations. Suppose that you are working with a page that contains several input fields followed by a label and you want to move each label so that it displays in front of the input field. You can do that with one Move rule by applying the rule to several source and destination elements.
To move or copy several elements, perform these steps:
The Source tab lists the full path to the element that you selected.
Step 2 In the Path to Selected Element area, click the element you are moving.
Step 3 Specify how you want Design Studio to match the elements that you want to move.
For example, if you are moving all a elements that appear in a table, click the first a element and then choose All Positions from the Position to Match drop-down menu.
|
Note Design Studio does not allow you to change the depth setting of the first element listed for the Source. Because the depth of that root element is relative to the Destination Path, Design Studio must retain the depth setting of the element in order to track the XPath of the element. |
Step 4 Click OK.
To move or copy to several locations, perform these steps:
Step 2 In the Path to Selected Element area, click the element before or after which you are moving the source element.
Step 3 Specify how you want Design Studio to match against several destination elements.
For example, if you are moving one or more source elements after several input elements, click the first input element and then choose the appropriate position and depth settings.
Step 4 Click OK.
Posted: Mon Aug 18 15:30:10 PDT 2003
All contents are Copyright © 1992--2003 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.
