cc/td/doc/product/webscale/cte1400/rel2_5
hometocprevnextglossaryfeedbacksearchhelp
PDF

Table of Contents

Design Studio Basics
Design Studio Concepts
Navigating the Design Studio Window
Design Studio Workflow
Working with Configuration Files and Projects

Design Studio Basics


The following sections include information to help you understand Design Studio basics:

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 CTE uses to transform the original content of a web page into the content you want delivered to a 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:

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


Figure 3-1   One Configuration File Per Server


XHTML Element Hierarchy

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 (shown as a node on the tree) is either a parent or a child element (see Figure 3-2).


Figure 3-2   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. In Figure 3-3, 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-3   Nested Elements


Each element has a particular depth and position in the hierarchy. For elements that are nested, 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-4, the a element appears at the same depth four times.


Figure 3-4   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 parent/child elements, 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 reduce the CTE workload.

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-5. 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-5   Design Studio Window



Note   The numbers in Figure 3-5 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 lists for a configuration file each project and its added pages (see Figure 3-6).


Figure 3-6   Project Tree


To work with the project tree, use these techniques:

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-7).


Figure 3-7   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-8).

To work with rules, use these techniques:


Figure 3-8   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 website.

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 the View Original tab to view the untransformed web page. The View Original tab is particularly useful for finding content that is no longer visible in the Edit tab. You can apply transformation rules from the View Original tab. Be sure to return to the Edit tab to view changes.

Preview

An IP phone simulator view.

Use this tab to view the IP phone screens that result from a web page transformation.

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:

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 feature 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.

Design Studio Workflow

Figure 3-9 summarizes the workflow for creating transformation rules in Design Studio and publishing them to the CTE.


Figure 3-9   Rule Creation and Publishing Overview



Note   The numbers in Figure 3-9 refer to the following process.

The Design Studio workflow is as follows:


Step 1   You create a configuration file in Design Studio.

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 CTE. You can test the transformations using simulators and devices.



Working with Configuration Files and Projects

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:

Creating a Configuration File and HTML Project

When you start Design Studio, the Design Studio window lists the ten most recently opened configuration files. You begin work by creating a new configuration file or opening a configuration file that is on your computer or on the CTE.

To create a configuration file, perform these steps:


Step 1   In the Design Studio window, click New Configuration. Alternatively, from the File menu, choose New Configuration.

Design Studio creates a configuration file named "Unnamed Configuration" and displays the Create Project dialog box.


A configuration file can contain one or more projects, which you use to group related web pages. For more information on projects, see the "Configuration and Project Files" section.

Step 2   Enter a name to identify the project.

For example, you might identify a project by its general content such as "Customer Support Pages."

Step 3   Click the HTML radio button.

For information on creating XML projects, see "Working with XML Projects."

Step 4   Click OK.

After you create an HTML project, add web pages to it as described in the "Adding a Page to an HTML Project" section.



Opening and Saving a Configuration File

To open a configuration file that resides on your computer, perform this step:


Tip To view the path to a configuration file listed in the Design Studio window, point to the configuration filename.

If a configuration file is already open, Design Studio closes it after prompting you to save changes.

To open the configuration file currently loaded on a CTE, perform these steps:


Step 1   If you are not already connected to the CTE where the file is loaded, connect to the device as described in the "Connecting to a Different CTE" section.

Step 2   In the Design Studio window, click Get Configuration From CTE.

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 1   From the File menu, choose Save Configuration or Save As Configuration.

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 CTE, you must publish it as described in the "Publishing a Configuration File to a CTE" 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~.



Adding an HTML Project to a Configuration File

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:


Step 1   Verify that the correct configuration file is open.

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, you might identify a project by its general content such as "Customer Support Pages."

Step 4   Click the HTML radio button.

Step 5   Click OK.

After you create an HTML project, add web pages to it as described in the "Adding a Page to an HTML Project" section.



Deleting a Project

To delete a project, perform these steps:


Step 1   Right-click the project name in the project tree.

Step 2   Choose Remove Project from the shortcut menu.

Step 3   Click Yes to confirm the deletion.



Adding a Page to an HTML Project

To add a page to an HTML project, perform these steps:


Step 1   In the project tree, click a project.

Step 2   Type the web page URL in the Address field and press Enter.


Design Studio opens the requested page in the Browse tab.

If the requested page does not appear, the CTE 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 to Configuration.

The Add Page to Project dialog box displays.

Step 4   Select a project name from the Project drop-down menu.

Step 5   Optionally enter a name for the page.

The page URL displays as the page name unless you enter a name. You might want to enter a name to help you identify the page contents.

Step 6   Click OK.

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.



Handling Page Redirects

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.


Note   Redirects from HTTP to HTTPS are not secure in Design Studio.


To follow the redirect, perform these steps:


Step 1   When the Redirection message displays, click Yes.

Step 2   Add the page that displays to your project, if you want.

When a 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 1   When the Redirection message displays, click No.

Step 2   Add the page.

When a user requests the page that contains the redirect, the page containing the redirect displays. The page request is not redirected.



Renaming a Page

By default, the name displayed for a page in the project tree is the page URL unless you enter a name when you add the page. You might find that changing a page name to something descriptive will help you more easily locate the page later.

To rename a page, perform these steps:


Step 1   Right-click the page name in the project tree.

Step 2   Choose Rename Page from the shortcut menu.

Step 3   In the Change Name dialog box, type a page name and click OK.

The new page name appears in the project tree.



To look up the URL of a page after you change the page name, perform these steps:


Step 1   Click Identifier Rules under the page name in the project tree.

Step 2   Right-click the browser view or the XHTML source view.

Step 3   Choose URL from the shortcut menu.

The URL of the page displays in the Identify by URL dialog box.



Displaying Page Information

To display the owner and creation date of a page, perform these steps:


Step 1   Right-click the page name in the project tree.

Step 2   Choose Page Info from the shortcut menu.

Information about the page displays in a dialog box.

Step 3   Click OK.



Deleting a Page

To delete a page from a project, perform these steps:


Step 1   Right-click the page name in the project tree.

Step 2   Choose Remove Page from Project from the shortcut menu.

Step 3   Click Yes to confirm the deletion.




hometocprevnextglossaryfeedbacksearchhelp
Posted: Mon Aug 18 16:30:06 PDT 2003
All contents are Copyright © 1992--2003 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.