Design Studio Basics

This section guides you through a quick tour that explains how to use Design Studio to create transformation rules for one web page. The tour introduces the basics of Design Studio without getting into the details.

Note The tour takes about 10 minutes to complete.

The web page used in this example is a Cisco contacts page. Figure 3-1 shows how the original page looks. Figure 3-2 shows how the page looks after you have created transformation rules with Design Studio.

Figure 3-1 Original Cisco Contacts Page

Figure 3-2 Transformed Cisco Contacts Page

Notice that the transformed page omits most of the original content and includes only the contact information from the lower left corner of the original page. The transformed page includes the Cisco Technical Assistance Center (TAC) e-mail address.

Getting Started

Before you start creating the rules that transform the Cisco contacts page, you must first create a project in Design Studio. A project is a container for one or more web pages and helps you to organize your work.

If you want to follow these steps on your PC, start Design Studio as described in the "Starting Design Studio" section.

Step 1 From the Projects menu, choose Create Project.

The Create Project dialog box appears.

Step 2 In the Name of the project field, enter Quick Tour.

For this exercise, leave the HTML radio button selected.

Step 3 Click Done.

Design Studio adds the project name Quick Tour to the window.

Next, you will navigate from the Cisco home page to the Cisco contacts page. Then, you will add the Cisco contacts page to the Quick Tour project.

Step 1 In the Address field, enter www.cisco.com.

Design Studio displays the Cisco home page.

Step 2 Scroll to the bottom of the page, locate the "Corporate News and Information" heading, and click Contact Cisco.

The Cisco Worldwide Contacts page appears.

Step 3 Click Add Page to Project.

Design Studio adds the page to the project tree and displays it in the View Original tab which contains a browser view and an XHTML source view of the page.

Identifying the Page

After you add a page in Design Studio, you must specify an identifier for the page. The Cisco CTE 1400 uses an identifier to distinguish one web page from another. This identifier enables the CTE to determine which rules to apply to a web page. Typical identifiers are the text of the title element or the page URL.

Step 1 In the XHTML source view, scroll to the title element.

Step 2 Right-click the text Cisco Worldwide Contacts that follows the title element.

A shortcut menu appears.

Step 3 Choose Tag Contains from the shortcut menu.

The Identify Page dialog box appears.

For this exercise, do not change anything in the dialog box.

Step 4 Click Done.

Design Studio adds the identifier to the page and lists the rule in the lower-left pane.

Selecting Content

Now that you have added the Cisco contacts page and created an identifier for it, you can begin transforming the contents of the page. In this exercise, you select a portion of the page for display on wireless devices. The rest of the content on the original page will not be sent to wireless devices.

Step 1 In the Design Studio window, click HTML.

For this exercise, you will create rules only for HTML device types.

The Cisco contacts page appears in the Edit tab. The Edit tab must be visible in order for you to work with transformation rules.

The XHTML source view appears in the lower pane of the Edit tab. This area is where you create transformation rules.

In the introduction to this tour, Figure 3-2 showed how the transformed Cisco contacts page looks. The corporate headquarters information is included and the rest of the content is excluded. Next, you will select the corporate headquarters information.

Step 2 In the browser view, scroll down the page and click Corporate Headquarters.

Design Studio selects the text in both the browser and XHTML source views.

Tip Clicking an item in the browser view is a quick way to locate an element in the XHTML source view.

Step 3 Scroll up the XHTML source view until you can see the center element that is five lines above "Corporate Headquarters."

Step 4 Click the center element in the XHTML source view. The center element contains the elements that you will select for transformation in this tour.

Design Studio expands the highlighted area in the browser view.

Step 5 Right-click the center element in the XHTML source view.

A shortcut menu appears.

Step 6 Choose Select from the shortcut menu.

The Configure: Select Rule dialog box appears.

For this exercise, do not change anything in the dialog box.

Step 7 Click Done.

The browser view displays only the element you selected. In the XHTML source view, the Select icon (
) indicates that you selected this element.

You have now created your first transformation rule. The transformed page contains only the headquarter contact information.

Inserting Content

In this exercise, you will add the Cisco TAC e-mail address to the end of the contact information.

Step 1 In the browser view, click the last phone number.

Design Studio highlights the phone number in both views.

Step 2 In the XHTML source view, right-click the br element that follows the selected phone number.

You will add the e-mail address after the br element.

Step 3 Choose Insert from the shortcut menu.

The Configure: Tag Insert Rule dialog box appears.

For this example, do not change anything in the Configure Rule tab.

Step 4 Click the Insert Element tab.

Step 5 In the Insert New Element area, click the After radio button to indicate you want to insert the e-mail address after the br element.

Step 6 In the HTML/XML Fragment text box, type tac@cisco.com.

The Insert Element tab should look like the following:

Step 7 Click Done.

Design Studio displays the e-mail address in the browser view. In the XHTML source view, the Insert icon (
) indicates that you added this element.

Saving, Publishing, and Previewing the Project

You have now transformed your first web page. Next, you will save your work and preview the page.

To save your work, perform these steps:

Step 1 From the File menu, choose Save Configuration.

Step 2 Enter QuickTour and click Save.

Design Studio saves your project in a configuration file named QuickTour.cte.

When you complete work on the projects in a configuration file and are ready to put the file into production, you must publish the configuration file to the Cisco CTE 1400. Only one configuration file can reside on a CTE at a time: The configuration file that you publish replaces the configuration file previously in effect on the CTE.

We recommend that you follow these guidelines when working with Design Studio configuration files:

Maintain on your PC separate folders for in-progress and published configuration files.
Archive on your PC each configuration file that you publish to the CTE. If someone accidentally overwrites the configuration file on the CTE, you can retrieve it from your PC.
After you complete work on a configuration file and want to put it into production, be sure to publish the configuration file to the CTE by using the File > Publish Configuration command in Design Studio.

To publish your transformation to the CTE, perform these steps:

Step 1 From the File menu, choose Publish Configuration.

Step 2 Wait until Design Studio displays a message that the configuration is uploaded.

Step 3 Click OK.

To preview the page you transformed and published, perform these steps:

Step 1 Open your default browser (either Internet Explorer or Netscape).

Step 2 Open the transformed page in your default browser, pointing the browser to the CTE IP address and port number and the page URL.

For example, if the CTE IP address is 10.0.0.2, enter the following:

http://10.0.0.2:80/http://www.cisco.com/warp/public/687/Directory.shtml

Design Studio applies your transformation rules to the Cisco contacts page and displays it in your default browser.

You have now completed the tour. For more information about transforming web page content, see the "Creating Web Page Transformations" section.

Design Studio Concepts

These sections explain the basic concepts you will encounter as you learn how to use Design Studio:

Transformation Rules

Transformation rules are instructions that the Cisco CTE 1400 uses to transform the original content of a web page into the content you want delivered to a wireless device. Design Studio converts the rules you create into XSL. The CTE uses XSLT to transform web pages according to the rules specified in XSL.

Configuration and Project Files

You use Design Studio to create transformation rules that you save in a configuration file. A configuration file has the following characteristics:

It resides on your PC and has a "cte" extension.
You can maintain multiple configuration files on your PC. For example, you can have one file for production and one for testing.
You work with only one configuration file at a time in Design Studio.
Only one configuration file can reside on a CTE at a time. When you are ready to put a configuration file into production, you must publish the file to a CTE. The new file then replaces the configuration file previously in effect on the CTE.

A configuration file includes one or more projects. A project has the following characteristics:

A project is similar to a folder: It has a name and helps you organize your work.
Although you can add any web page to a project, you can take advantage of Design Studio features by grouping related web pages in projects. For example, you can apply a transformation rule to all pages in a project.
You can add one or more projects to a configuration file.
When you publish a configuration file to the CTE, all projects in the configuration file are published. For example, if you create two projects, called "Intranet" and "Extranet," they are both included when the configuration file is published to the CTE (see Figure 3-3).

Figure 3-3 One Configuration File Per Server

XHTML Element Hierarchy

In the "A Quick Tour of Design Studio" section, you worked with the XHTML code for a sample web page. You located specific elements in the XHTML code and applied transformation rules to those elements. Although you can achieve simple transformations in Design Studio without understanding the hierarchical structure of the XHTML code, you need to understand some basic concepts to achieve more complex transformations.

XHTML is structured as a parental hierarchy. Each element is either a parent or a child element (see Figure 3-4).

Figure 3-4 Parent-Child Relationships in XHTML

Child elements are nested inside of a parent element. The nesting in XHTML can extend to many levels, where child elements are also parents of other child elements.

All levels nested under a particular parent element are considered descendants (see Figure 3-5). In that figure, the body element is a parent to the form element; the form element is a parent to the img element, and so on.

Figure 3-5 Descendant Elements

A child element has one or more ancestor elements. Figure 3-6 shows the ancestor elements for the br element.

Figure 3-6 Ancestor Elements

Each element has a particular depth and position in the hierarchy. For elements that are nested, like the ones in Figure 3-6, each level is considered a different depth in the hierarchy. The first instance of an element at a given depth is considered the first position of that element. As shown in Figure 3-7, the a element appears at the same depth four times.

Figure 3-7 Element Depth and Position

Note Depth refers to the nesting that is represented along the x-axis. Position refers to the repetition of like elements along the y-axis.

As you work with Design Studio, you will see how you can use these concepts of ancestors, descendants, depth, and position to create a single transformation rule that affects not just one element, but many elements. By efficiently creating rules, you not only save development time in Design Studio, you also enable the Cisco CTE 1400 to work more efficiently.

Navigating the Design Studio Window

You can use the Design Studio window to track and organize the web pages you want to transform. The Design Studio window contains the major areas shown in Figure 3-8. The name of the current configuration file appears in the title bar of the Design Studio window. An * in the title bar indicates an unsaved file.

Figure 3-8 Design Studio Window

Note The numbers in Figure 3-8 refer to the following list.

1. Toolbars

2. View tabs

3. Project tree

4. Browser view

5. XHTML source view

6. Page and rule information

The following sections provide more information about the Design Studio window:

Using the Project Tree

The project tree provides two views of the current configuration file. The View by Page tab lists each project and its added pages (see Figure 3-9).

To work with the project tree, use these techniques:

Right-click the configuration file, a project, or a URL for a shortcut menu.
Click entries under a project folder to work with and view rules for the page.

Figure 3-9 View by Page Tab

The View by Device tab lists each device and its added pages (see Figure 3-10). Click entries under a URL to work with and view rules for the device type.

Figure 3-10 View by Device Tab

Viewing Page and Rule Information

The lower-left pane of the Design Studio window provides either page or rule information, based on the selection in the project tree. When you select a page in the project tree, the lower-left pane displays information about the page selected in the project tree (see Figure 3-11).

Figure 3-11 Page Information

When you select Identifier Rules or a device type in the project tree, the lower-left pane displays rule information (see Figure 3-12).

To work with rules, use these techniques:

Click a rule to locate the corresponding element in the browser or XHTML source views.
Click a rule and then click Edit or Delete to change the rule, or right-click a rule to view a shortcut menu.

Figure 3-12 Rule Information

Using the View Tabs

Click a view tab to see different views of a web page or an imported XSL style sheet, as explained in Table 3-1.

Table 3-1 View Tabs

Tab	Tab Contents
Browse	A transformed page that is browsable. Use this tab to browse a web site.
Edit	The following two views of a web page: A browser view As you apply transformation rules to a page, you immediately see the results reflected in this view. XHTML source view Design Studio converts web page content to XHTML and displays the tree structure of the XHTML. (XHTML is used as an intermediate format to ensure that well-formed documents are used for the transformation.) Use this tab to create transformation rules.
View Original	A browser view and XHTML source view of the web page without the transformation rules applied. Use this tab to refer to the original page.
Style Sheet	An imported XSL style sheet. This tab is visible only for XML projects after you import a style sheet. Use this tab to view a style sheet.

Finding Commands

Design Studio commands are available from the menu bar, tool bars, and shortcut menus. Use these techniques to locate a command:

Select an item in the project tree. The menu bar and tool bars change based on the type of item selected.
Right-click a configuration file, project, or page in the project tree to display a shortcut menu for the item.
Right-click a rule name in the lower-left pane or an element in the XHTML source view to display a shortcut menu.

Finding Text in the XHTML Source View

Design Studio provides a quick way for you to find a text string in the XHTML source view. This is particularly useful when you are trying to locate a particular attribute value or element type.

To find text in the XHTML source view, perform these steps:

Step 1 If you want to start the search in a particular location, select a starting point in the XHTML source view.

Step 2 Click the Find icon (
).

Step 3 In the Find dialog box, enter the text you want to locate and click Find.

Design Studio highlights the text in the XHTML source view.

Moving the Toolbars

You can move the toolbars, docking them to another location on the window or making them float over the window.

To dock a toolbar to a new location, perform these steps:

Step 1 Point to the toolbar.

Step 2 Hold down the left mouse button and drag the toolbar to another edge of the window.

Step 3 Release the mouse button.

To float a toolbar, perform these steps:

Step 1 Point to the toolbar.

Step 2 Hold down the left mouse button and drag the toolbar inside the window.

Step 3 Release the mouse button.

To return a floating toolbar to its original location, click its Close icon.

Table of Contents