Design Studio User Guide Release 2.1 (Service Pack)

16-300271 Issue 2.1 April 2006 Copyright 2004-2006, Avaya Inc. Such intrusions may be either to/through synchronous (time- All Rights Reserved multiplexed and/or circuit-based) or asynchronous (character-, message-, or packet-based) equipment or interfaces for reasons of: Notice • Utilization (of capabilities special to the accessed equipment) Every effort was made to ensure that the information in this document • Theft (such as, of intellectual property, financial assets, or toll was complete and accurate at the time of printing. However, facility access) information is subject to change. • Eavesdropping (privacy invasions to humans) Warranty • Mischief (troubling, but apparently innocuous, tampering) • Harm (such as harmful tampering, data loss or alteration, Avaya Inc. provides a limited warranty on this product. Refer to your regardless of motive or intent) sales agreement to establish the terms of the limited warranty. In Be aware that there may be a risk of unauthorized intrusions addition, Avaya’s standard warranty language as well as information associated with your system and/or its networked equipment. Also regarding support for this product, while under warranty, is available through the following Web site: http://www.avaya.com/support. realize that, if such an intrusion should occur, it could result in a variety of losses to your company (including but not limited to, Trademarks human/data privacy, intellectual property, material assets, financial DEFINITY is a registered trademark of Avaya, Inc. MultiVantage is a resources, labor costs, and/or legal costs). trademark of Avaya, Inc. Windows, Windows 2000, and Windows NT Responsibility for Your Company’s Telecommunications Security are trademarks or registered trademarks of Microsoft Corporation. The final responsibility for securing both this system and its Preventing Toll Fraud networked equipment rests with you - Avaya’s customer system administrator, your telecommunications peers, and your managers. “Toll fraud” is the unauthorized use of your telecommunications system by an unauthorized party (for example, a person who is not a Base the fulfillment of your responsibility on acquired knowledge and resources from a variety of sources including but not limited to: corporate employee, agent, subcontractor, or is not working on your company's behalf). Be aware that there may be a risk of toll fraud • Installation documents associated with your system and that, if toll fraud occurs, it can result • System administration documents in substantial additional charges for your telecommunications • Security documents services. • Hardware-/software-based security tools • Shared information between you and your peers Avaya Fraud Intervention • Telecommunications security experts If you suspect that you are being victimized by toll fraud and you need To prevent intrusions to your telecommunications equipment, you and technical assistance or support, in the United States and Canada, call your peers should carefully program and configure: the Technical Service Center's Toll Fraud Intervention Hotline at • Your Avaya-provided telecommunications systems and their 1-800-643-2353. interfaces Disclaimer • Your Avaya-provided software applications, as well as their underlying hardware/software platforms and interfaces Avaya is not responsible for any modifications, additions or deletions • Any other equipment networked to your Avaya products to the original published version of this documentation unless such modifications, additions or deletions were performed by Avaya. TCP/IP Facilities Customer and/or End User agree to indemnify and hold harmless Customers may experience differences in product performance, Avaya, Avaya's agents, servants and employees against all claims, reliability and security depending upon network configurations/design lawsuits, demands and judgments arising out of, or in connection with, and topologies, even when the product performs as warranted. subsequent modifications, additions or deletions to this documentation to the extent made by the Customer or End User. Standards Compliance How to Get Help Avaya Inc. is not responsible for any radio or television interference caused by unauthorized modifications of this equipment or the For additional support telephone numbers, go to the Avaya support substitution or attachment of connecting cables and equipment other Web site: http://www.avaya.com/support. If you are: than those specified by Avaya Inc. The correction of interference • Within the United States, click the Escalation Management link. caused by such unauthorized modifications, substitution or attachment Then click the appropriate link for the type of support you need. will be the responsibility of the user. Pursuant to Part 15 of the Federal • Outside the United States, click the Escalation Management link. Communications Commission (FCC) Rules, the user is cautioned that Then click the International Services link that includes telephone changes or modifications not expressly approved by Avaya Inc. could numbers for the international Centers of Excellence. void the user’s authority to operate this equipment.

Providing Telecommunications Security To order copies of this and other documents: Telecommunications security (of voice, data, and/or video Call: Avaya Publications Center communications) is the prevention of any type of intrusion to (that is, Voice 1.800.457.1235 or 1.207.866.6701 either unauthorized or malicious access to or use of) your company's FAX 1.800.457.1764 or 1.207.626.7269 telecommunications equipment by some party. Write: Globalware Solutions Your company's “telecommunications equipment” includes both this 200 Ward Hill Avenue Avaya product and any other voice/data/video equipment that could be Haverhill, MA 01835 USA accessed via this Avaya product (that is, “networked equipment”). Attention: Avaya Account Management An “outside party” is anyone who is not a corporate employee, agent, E-mail: [email protected] subcontractor, or is not working on your company's behalf. Whereas, a For the most current versions of documentation, go to the Avaya “malicious party” is anyone (including someone who may be support Web site: http://www.avaya.com/support otherwise authorized) who accesses your telecommunications equipment with either malicious or mischievous intent. Contents

Preface ix Audience ix Organization ix Conventions x Related Documentation xi

CHAPTER 1 Overview 1 Introduction 1 Design Studio Features 3 Understanding How the Application Gateway Works 5 Supported Formats 8 Understanding Microbrowser Limitations 11

CHAPTER 2 Design Studio Administration 13 Starting Design Studio 13 Changing your Password 14 Connecting to a Different Application Gateway 14 Configuring Device Definitions 15 Changing a Device Definition 22 Adding a Device Definition 23 Importing Device Definitions 26 Installing the Openwave Mobile Browser Simulator 26 Installing the Go.Web Simulator 28

CHAPTER 3 Design Studio Basics 31 Design Studio Concepts 31 Transformation Rules 31 Configuration and Project Files 32 XHTML Element Hierarchy 33

Design Studio User Guide iii Contents

Navigating the Design Studio Window 35 Using the Project Tree 36 Viewing Page and Rule Information 37 Using the View Tabs 38 Finding Commands 39 Finding Text in the XHTML Source View 39 Design Studio Workflow 40 Working with Configuration Files and Projects 41 Creating a Configuration File and HTML Project 41 Opening and Saving a Configuration File 43 Adding an HTML Project to a Configuration File 44 Deleting a Project 44 Adding a Page to an HTML Project 45 Handling Page Redirects 46 Renaming a Page 47 Displaying Page Information 47 Deleting a Page 48

CHAPTER 4 Transformation Basics 49 Identifying a Page 49 Identifying a Page by Element Text 51 Identifying a Page by URL 54 Using an Identifier Rule for Multiple Pages 56 Creating Transformation Rules 58 Editing Transformation Rules 65 Copying Rules from One Device to Another 66 Performing Basic Transformations 67 Selecting Content 67 Clipping Content 71 Ignoring Content 74 Modifying Content 77 Inserting Content 82 Well-Formed XML 86 Moving an Element Tag 87

iv Design Studio User Guide Contents

Working with Conflicting or Dead Rules 90 Resolving Conflicting Rules 90 Evaluating Dead Rules 92 Applying Rules to Several Elements 93 Introduction 93 Applying Rules Based on Element Name or Text 96 Applying Rules Based on Depth 101 Applying Rules Based on Position 102 How the Depth and Position Settings Interact 104 Example: Applying Rules to Elements that Change Positions 105 Example: Applying a Rule to a Range of Positions 106 Example: Applying a Rule to Several Nested Tables 107 Example: Clipping Links to Binary Data Files Across a Project 108 Using a Relative Path to Specify a Rule Location 109 Applying Rules Based on Element Attribute Values 111 Example: Applying a Rule to All Occurrences of an Element with a Specified Attribute 112 Applying the Move Rule to Several Elements 112

CHAPTER 5 Working with Pages and Elements 115 Working with Pages 115 Transforming Template-Based Pages 116 Transforming Pages Using a Default Set of Transformation Rules 117 Dividing a Web Page into Several Pages 118 Transforming Query and Results Pages 124 Working with Dynamically Generated Pages 127 Specifying a Rule Location on a Dynamically Generated Page 128 Example: Applying Rules to Dynamically Generated Content 129 Working with Frames and Windows 131 Guidelines for Transforming Frames and Window Content 133 Creating Identifier Rules on Pages with Frames or Windows 134 Selecting Frames or Redirecting a Page to a Frame 137

Design Studio User Guide v Contents

Working with Tables 139 Retaining Formatting 139 Converting a Table to a List 142 Working with Forms 145 Working with Images 146 Using Alternate Text Instead of an Image 147 Retaining a Small Image 148 Disabling URL Rewriting for a Link 149 Adding a Dialable Phone Number 151 Applying the Dial Number Rule to Several Elements 154 Grouping Links 157 Forcing a Card Break 161 Forcing a Line Break 161 Specifying the Input Type for IP Phone Input Fields 162 Defining Soft Keys 164 Creating a Soft Key on XML-Based IP Phones 164 Converting a Link into a Soft Key 167 Converting a Phone Number into a Soft Key 169 Refreshing a Page 172 Inserting a Meta Refresh Element 174

CHAPTER 6 Working with XML, XPath, and XSL 177 Manually Configuring the XPath Expression of an Element 177 Working with XML Projects 179 Creating an XML Project 180 Adding a Page to an XML Project 181 Updating an XSL Style Sheet 182 Importing Custom XSL 182 Importing a Custom XSL Template Rule on a Node 183 Examples of Custom XSL 185 Using Several XSL Style Sheets for a Project 188

vi Design Studio User Guide Contents

CHAPTER 7 Publishing, Previewing, and Testing Your Work 191 Publishing a Configuration File to an Application Gateway 191 Previewing Page Transformations 193 Working with the Cards Area 194 Using the Preview Tab 195 Testing a Transformation Using a Simulator or Browser 196 Using the Openwave Mobile Browser Simulator 197 Using the Go.Web Simulator 198 Using a Browser 200

CHAPTER 8 Customizing the Application Menu 201 Application Menu Workflow 202 Opening the Application Menu Editor 203 Changing Application Menu Page Titles 204 Adding Links to an Application Menu Page 205 Adding and Removing an Application Menu Image 207 Changing the Application Menu Page Layout 208 Adding and Deleting Application Menu Pages 209 Creating an Application Menu Page 210 Adding an Existing Page to an Application Menu 211 Deleting a Page from the Application Menu 213 Previewing the Application Menu 213 Saving and Publishing the Application Menu 213

CHAPTER 9 Specifying Transformation Rules in HTML Files 215 Introduction 215 Application Gateway XHTML Extensions 217 Using Application Gateway XHTML Extensions in Source HTML 224 Specifying Basic Transformations 224 Creating Dialable Numbers in HTML Content 228 Ignoring an Element in HTML Content 229 Creating a Soft Key for an IP Phone 230 Specifying an Input Field Type and Label for an IP Phone 230 Refreshing a Card 231

Design Studio User Guide vii Contents

Hiding Device-Specific Content from Full Browsers 231 Managing Configuration Files When Using Application Gateway XHTML Extensions 232 Merging the Extensions Configuration File on an Application Gateway 233

APPENDIX A Troubleshooting Design Studio 235 Design Studio Hangs or Will Not Connect to an Application Gateway 235 Simulator Does Not Work 236 General Issues when Using Design Studio 236 Unexpected Transformation Results 239

I NDEX 243

viii Design Studio User Guide Preface

This preface describes who should read the Design Studio User Guide, how it is organized, and its document conventions.

Audience This user guide is intended for web masters and other individuals who work with website content. Although you need a basic understanding of HTML and XML in order to work with Design Studio, you do not need to know the mark-up languages used for devices.

Organization This guide is organized as follows:

Chapter Title Description Chapter 1 Overview Provides an overview to Design Studio and the Application Gateway. Chapter 2 Design Studio Describes how to start Design Studio, change your Administration password, connect to an Application Gateway, configure device definitions, and install companion third-party applications. Chapter 3 Design Studio Basics Includes information to help you get started using Design Studio. Describes Design Studio workflow and how to create a project and add pages to it. Chapter 4 Transformation Basics Describes how to use Design Studio to identify pages, create basic transformation rules, and apply one rule to many elements based on element position, depth, and attributes.

Design Studio User Guide ix Conventions

Chapter Title Description Chapter 5 Working with Pages Describes how to use Design Studio to transform and Elements applications or web pages. Chapter 6 Working with XML Describes how to use Design Studio to manually and XSL configure an XPath expression, work with XML projects, and import an XSL style sheet. Chapter 7 Publishing, Describes how to publish a configuration file to the Previewing, and Application Gateway, preview pages in Design Testing Your Work Studio, and test pages in simulators and browsers. Chapter 8 Customizing the Describes how to use Design Studio to customize Application Menu the Application Menu. Chapter 9 Specifying Describes how to specify transformation rules in Transformation Rules source HTML code rather than in Design Studio by in HTML Files using Application Gateway XHTML extensions. Appendix A Troubleshooting Describes how to solve commonly encountered Design Studio problems in Design Studio.

Conventions This guide uses the following conventions:

Convention Description boldface font Commands and HTML element names are in boldface. boldface screen Information you must enter is in boldface screen font font.

x Design Studio User Guide Related Documentation

Related Documentation For additional information about Design Studio, refer to these documents: • Design Studio Getting Started Guide • Application Gateway Release Notes Examples, tutorials, help, tips, and information on IP phones are available from the Design Studio window. For information about HTML and XML, refer to the following sources: • www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html • www.w3.org/MarkUp/Guide • www.w3.org/XML/1999/XML-in-10-points • www.oreilly.com

Design Studio User Guide xi Related Documentation

xii Design Studio User Guide Chapter 1

Overview

The following topics provide an overview of the Design Studio application and the Application Gateway: • Introduction, page 1 • Design Studio Features, page 3 • Understanding How the Application Gateway Works, page 5 • Supported Formats, page 8 • Understanding Microbrowser Limitations, page 11

Introduction The Application Gateway Design Studio application creates transformation instructions that convert large-screen web applications into a format appropriate for devices with microbrowser screens. Design Studio supports IP phones and a wide variety of mobile and wireless devices, including Personal Digital Assistants (PDAs) such as Palm, Pocket PC, and Research in Motion (RIM) devices. The devices supported in your version of Design Studio and the Application Gateway vary based on your product license. The real-time conversion of web applications and content does the following: • Uses your existing application and web content. • Eliminates the need for you to create additional sites dedicated to device content or to rewrite business applications. • Keeps the content served to devices current with your website.

Design Studio User Guide 1 Chapter 1 Overview Introduction

• Minimizes the additional space required to support content for devices. • Can be set up quickly and easily, requiring a minimum of technical expertise. Typically, microbrowsers are constrained by display size, data input features, and download time. You can leverage applications developed for PC access by indicating in Design Studio how you want the application to appear when delivered to small-screen devices. Design Studio creates content transformation instructions, referred to as transformation rules, based on your decisions. Depending on the applications that you want to transform and the devices that you want to support, you can choose to create transformation rules for all or just a few of a website’s pages. The Application Gateway is an appliance that handles requests for web pages from devices and interprets the transformation rules to convert HTML/XML pages into device-compatible formats. The Application Gateway handles web pages as noted in Table 1.

Table 1 How the Application Gateway Handles Applications and Web Pages

With Without Transformation Transformation Application Gateway Operation Rules Rules Transforms the content according to rules created in Design Studio. Converts the content to the mark-up language appropriate for the device. Supports content that uses any standard encoding and transcodes content to the formats required by supported devices: UTF-8, 7-bit ASCII (characters 0–127), or Shift_JIS encoding.

2 Design Studio User Guide Chapter 1 Overview Design Studio Features

Table 1 How the Application Gateway Handles Applications and Web Pages (continued)

With Without Transformation Transformation Application Gateway Operation Rules Rules Prepends the IP address of the Application Gateway to links in transformed pages (unless you choose to disable URL rewriting for that link). When a device user selects a link, the request is directed through the Application Gateway. Breaks the content into chunks that are sized appropriately for the display area of the device and adds device-appropriate navigation links. Passes all content possible to the device. If the device does not support a particular type of content, such as a video clip, the Application Gateway strips that content from the file sent to the device.

Design Studio Features Design Studio simplifies the task of transforming applications as follows: • Provides an intuitive point-and-click interface for specifying the content to include, exclude, or modify for delivery to devices. Application Gateway XHTML extensions also enable you to specify content transformations in your source HTML files. For more information, see “Specifying Transformation Rules in HTML Files,” page 215. • Allows you to work with an Extensible HTML (XHTML) source so that you do not have to learn a variety of markup formats. Design Studio converts an HTML document into a well-formed XHTML document so that it can be represented as a hierarchical tree structure.

Design Studio User Guide 3 Chapter 1 Overview Design Studio Features

• Translates your decisions into rules in Extensible Stylesheet Language (XSL) format. The Application Gateway uses XSL Transformations (XSLTs) to transform web applications according to your rules. • Includes static page previews for several device types, so you can see how web page content is chunked into cards and displayed on microbrowser screens. Also works with simulators so you can see how a transformed application works on devices.

4 Design Studio User Guide Chapter 1 Overview Understanding How the Application Gateway Works

• Enables you to edit device definitions that determine how the Application Gateway transcodes a site for a device. For example, the Application Gateway uses device specifications to determine how to handle the images it sends to a device. You can use Design Studio to tune those specifications and to create and import device definitions. For more information, see “Configuring Device Definitions,” page 15. • Saves rules in a configuration file that you publish to an Application Gateway. Design Studio also includes the Application Menu editor, which enables you to customize portal pages for phone users.

Understanding How the Application Gateway Works The Application Gateway appliance uses rules uploaded from Design Studio to fulfill requests from devices. Figure 1 shows the path for a user request for application content in an organization with IP phones.

Figure 1 Application Gateway Connected to a Server Load Balancer (IP Phones)

The example configuration shown includes a server load balancer. Your site might differ. For example, your Application Gateway might be connected to a router, an application server, or a switch that is set up to direct requests according to browser type or requested URLs.

Design Studio User Guide 5 Chapter 1 Overview Understanding How the Application Gateway Works

Note The numbers in Figure 1 refer to the following process.

6 Design Studio User Guide Chapter 1 Overview Understanding How the Application Gateway Works

The path a request takes is as follows: 1. An IP phone user requests application content. The IP phone PBX transmits the request to a server load balancer. 2. The server load balancer that receives the request evaluates the request header. The server load balancer directs requests from IP phones to the Application Gateway. 3. The Application Gateway terminates the request and then, acting as a proxy, sends a request to the server load balancer for the application content. 4. When the Application Gateway receives the application content, it uses the rules in the configuration file to transform the content. It also uses the DDF to determine how to handle content for the particular device. 5. The Application Gateway sends the transformed content to the server load balancer for forwarding to the IP phone.

Figure 2 shows the path for a user request for application content from wireless users.

Figure 2 Application Gateway Connected to a Server Load Balancer (Wireless Devices)

Note The numbers in Figure 2 refer to the following process.

Design Studio User Guide 7 Chapter 1 Overview Supported Formats

The path a request takes is as follows: 1. A user requests a URL. A wireless carrier transmits the request to a communications tower, through the Wireless Application Protocol (WAP) carrier gateway, and to the Internet. 2. The server load balancer that receives the request evaluates the request header. The server load balancer directs HTML/XML requests to the application server farm and directs requests from devices to the Application Gateway. 3. The Application Gateway terminates the request and then, acting as a proxy, sends a request to the server load balancer for the application content. 4. When the Application Gateway receives the content, it uses the rules in the configuration file to transform the content. It also uses the DDF to determine how to handle content for the particular device. 5. The Application Gateway sends the transformed content to the server load balancer for forwarding to the device.

Supported Formats The Application Gateway and Design Studio support the formats most commonly used for websites and microbrowser devices. Website content in the following formats is supported: • HTML versions 4.0, 3.2, and 2.0 • cHTML versions 4.0, 3.2, and 2.0 • HDML version 3.0 • i-mode version 1.1 (preliminary testing completed) • XHTML versions 1.1 and 1.0 • XML version 1.0 • WML version 1.1 • XSL version 1.0 • GIF, JPEG, BMP, and WBMP image formats • The formats required for supported IP phones

8 Design Studio User Guide Chapter 1 Overview Supported Formats

The Application Gateway and Design Studio support web pages that use any standard encoding; they transcode web pages to the formats required by supported devices: UTF-8, 7-bit ASCII, and Shift_JIS encoding. Microbrowsers do not support all content types. Thus, the Application Gateway does not transform the following: • Binary data, such as video and PDF files • Java applets, plug-ins, and custom objects The Application Gateway passes that content to a device without transforming it. Table 2 lists the destination devices supported by the Application Gateway. Your license determines which devices your Application Gateway supports.

Table 2 Supported Devices

Category Vendor and Model Compatible Models1 cHTML(1) Casio Cassiopeia EM-500 Compaq iPAQ iPAQ Hewlett-Packard Jornada Jornada 525, Jornada 545, Jornada 720 Liberate Liberate Digital TV Microsoft Mobile Explorer Palm PocketLink cHTML(2) Research in Motion Blackberry and Blackberry RIM models HTML and various Desktop browsers, Web TV, Windows CE XHTML devices i-mode various Phones using the NTT DoCoMo i-mode service IP phones various Refer to device-specific topics available from the Design Studio Help menu. Palm HTML Handspring Visor (all models), Blazer, Treo 600 Blazer 3.0 Palm AvantGo, EudoraWeb, PQA, Vagabond, WebBrowser Sony CLIÉ CLIÉ PEG-S300

Design Studio User Guide 9 Chapter 1 Overview Supported Formats

Table 2 Supported Devices (continued)

Category Vendor and Model Compatible Models1 WML version Alcatel OneTouch 301, 311, 501, 511, 512, 715 1.1 Audiovox CDM-9000 CDM-9000 (WAP-enabled phones) Benefon (Benefon Q) Benefon Q Hitachi Hitachi SH-P300 Kyocera QCP3035 LG A7110, G4010, G4050, GB-1 (L1300), GB-2 (L1200), L1400 Microsoft Mobile Explorer Mitsubishi Trium Eclipse, Trium M 320 Motorola Many models including A, C, P7, T1/2, and V series (refer to DDF Editor for complete list) Nokia 6210, 7110, 9110, 9210, SU-7, and many others (refer to DDF Editor for complete list) Panasonic Many models including G, GD, GU, and X series (refer to DDF Editor for complete list) Philips Azalis, Xenium 9@9 SAGEM myX-3, myX-5, 3xxx Samsung Many models including A500, SGH-N100, X427 (refer to DDF Editor for complete list) Sanyo (all models) SCP-4500 Sharp TQ-GX1, TQ-GX10, TQ-GX12 Siemens Many models including C56, IC35i, and S series (refer to DDF Editor for complete list) Sony-Ericsson Many models including A, P, R S, T, and Z series (refer to DDF Editor for complete list) 1. The DDF Editor contains user agents for the latest device set.

The devices licensed for your Application Gateway are listed in the Design Studio project tree under Transformation Rules. To add support for additional protocols, you must purchase licenses.

10 Design Studio User Guide Chapter 1 Overview Understanding Microbrowser Limitations

Understanding Microbrowser Limitations Most microbrowsers are constrained by display size, navigation, and download time, as described in the following sections. Consider these factors as you choose content for delivery to devices. For information on issues specific to IP phones, go to the Design Studio Help menu and choose Device Help.

Display Size

Web pages are typically optimized for a 800 x 600 screen resolution; they display reasonably at a 640 x 480 resolution. While some microbrowser devices have a 640 x 320 screen resolution, many devices have a much more limited display size. The amount of web content that you select for display on a device impacts the usability of the content.

Navigation

A well-designed website uses few clicks to access important content. That same design may not work well on some devices; two or three clicks might be inconvenient to a microbrowser user.

Download Time

When the page to be served to a device exceeds the amount of text that can display in the microbrowser, the Application Gateway breaks up the page into chunks, serves the first chunk, waits for a request to serve the next chunk, serves the second chunk, and so on. Large amounts of text take longer to download and require the user to issue requests for the next “page” of content. Depending on the device, the user may request the continuation of a page by spinning a trackwheel, pressing a key, or selecting a button.

Design Studio User Guide 11 Chapter 1 Overview Understanding Microbrowser Limitations

12 Design Studio User Guide Chapter 2

Design Studio Administration

The Design Studio application is provided with the Application Gateway on a CD-ROM. Instructions for installing Design Studio are included in the Design Studio Getting Started Guide. Additional third-party components, not included with the Design Studio installation, can be used to view the results of your transformations in PC-based simulators. The following topics describe how to administer Design Studio and install companion third-party applications: • Starting Design Studio, page 13 • Changing your Password, page 14 • Connecting to a Different Application Gateway, page 14 • Configuring Device Definitions, page 15 • Installing the Openwave Mobile Browser Simulator, page 26 • Installing the Go.Web Simulator, page 28

Starting Design Studio To start Design Studio, you need the following login information from the administrator who set up the Application Gateway: • Your username and password • Application Gateway IP address and upload port number

Note Design Studio is intended for use by one user at a time. Do not attempt to use multiple instances of Design Studio from one installation.

Design Studio User Guide 13 Chapter 2 Design Studio Administration Changing your Password

To start Design Studio: 1 From the Windows Start menu, choose Program Files > Avaya > AG > Design Studio. The Log in dialog box appears. 2 Enter your username and password. 3 Enter the IP address of the Application Gateway. 4 If necessary, change the upload port number. The default upload port is 9005. You might need to change the port number if your firewall redirects ports. Contact your Application Gateway administrator if you do not know which port to use. 5 Click OK. If you cannot connect to an Application Gateway, verify that your computer has a network connection to a running Application Gateway. Contact your Application Gateway administrator for help.

Changing your Password You can change your password for Design Studio if you know your current password. If you forget your password, your Application Gateway administrator can create a new password for you.

To change your password for Design Studio: 1 From the File menu, choose Change Password. 2 Enter your current password. 3 Enter the new password twice. 4 Click OK.

Connecting to a Different Application Gateway When you log in to Design Studio, you connect to a specified Application Gateway. You can later connect to a different Application Gateway without leaving Design Studio. For example, you might need to switch between two Application Gateways used for testing.

14 Design Studio User Guide Chapter 2 Design Studio Administration Configuring Device Definitions

To connect to an Application Gateway: 1 From the File menu, choose Connect to AG. 2 Complete the Log In dialog box as described in “Starting Design Studio,” page 13.

If authentication fails, contact your Application Gateway administrator. The problem might be that either your username and password are not set in the Application Gateway or you are not specifying the correct credentials.

Configuring Device Definitions The Application Gateway determines how to transcode a site for a particular device based on settings in a Device Definition File (DDF). For example, the Application Gateway uses the specifications in a DDF to determine how to handle the images it sends to a device. You can use Design Studio to tune those specifications. Design Studio also enables you to import a DDF and either replace the current DDF or merge changes into it. A DDF specifies device information such as the following: • Image type supported by the device • Maximum image size • Protocol supported by the device, such as cHTML, Palm HTML, or WML • User agent for the device

Design Studio User Guide 15 Chapter 2 Design Studio Administration Configuring Device Definitions

Note When requesting information from a server, a device identifies itself to the server by a user agent, which consists of two strings containing the vendor name and model number. The Application Gateway looks up the user agent in the DDF file to determine which set of specifications to use when transcoding pages for the device. Some devices use a unique user agent; others use a generic user agent. If a device uses a generic user agent, the Application Gateway bases the transcoding on the protocol specified for the device.

Table 3 describes the main keys and values contained in the DDF files. For more information, see the information provided in the Edit DDF window.

Table 3 Keys and Values in Device Definition Files

Key1 Value2 Notes name A unique string of up Required. Identifies the device in the Edit DDF to 127 characters. window. protocol Depends on the Required. Determines which encoder the Application devices supported by Gateway uses to transcode data for the device. your product license. Unsupported values are ignored by the Application Values include the Gateway. following: chtml, html, palm, voxml, wml

Use the Edit DDF window to look up valid values for your installation.

16 Design Studio User Guide Chapter 2 Design Studio Administration Configuring Device Definitions

Table 3 Keys and Values in Device Definition Files (continued)

Key1 Value2 Notes useragent Either the entire user Required. Identifies the device to the Application agent string that the Gateway. A more general useragent key matches more device presents in the devices. For example, the useragent “*Phone*” HTTP protocol or a matches all devices that include “Phone” in their user portion of that string agent string. The useragent “Phone123” matches only represented with a devices that include “Phone123” in their user agent regular expression. string. Suppose that you want to define several models of “Phone” and all but one of the models (“Phone123”) have the same device definition. To handle the models with the same definition, create the useragent “*Phone*” and include the filteragent “Phone123” in its definition. The filteragent key excludes “Phone123” devices from the “*Phone*” definition. Create a useragent “Phone123” to define the specific settings for that device. Separate useragent values with the “|” character. If the element string contains parentheses, precede them with a backslash (\) to create a proper regular expression. For example, the expression ^.*(Mozilla/2.0 \(compatible; Elaine/3.0\)).*$ is correct. filteragent Either the entire user Identifies a particular device that is to be excluded from agent string that the the devices that match a useragent key. To specify device presents in the definitions for the excluded device, create a useragent HTTP protocol or a key for the device, as described in the preceding portion of that string example. represented with a Be sure to include “ICE” as a filteragent so that Design regular expression. Studio browses correctly. If the element string contains parentheses, precede them with a backslash (\) to create a proper regular expression. For example, the expression ^.*(Mozilla/2.0 \(compatible; Elaine/3.0\)).*$ is correct.

Design Studio User Guide 17 Chapter 2 Design Studio Administration Configuring Device Definitions

Table 3 Keys and Values in Device Definition Files (continued)

Key1 Value2 Notes accept Either the entire Enables the Application Gateway to determine a match Accept tag that the for unregistered devices that are not otherwise device presents in the identified through the useragent or filteragent keys. HTTP header or a portion of that string represented with a regular expression. encoding See Table 4 on Required. Specifies the encoding format required by page 2-21 for values. the device. Defaults to “plain”—ASCII characters 128 and above are converted into spaces; ASCII characters below 128 are passed through, except for the following: “&” is converted to & “<” is converted to < “>” is converted to >

18 Design Studio User Guide Chapter 2 Design Studio Administration Configuring Device Definitions

Table 3 Keys and Values in Device Definition Files (continued)

Key1 Value2 Notes specific Subkeys and their The subkeys under the specific key vary based on values are described device type. See the Edit DDF window for a list of under “Notes.” specific subkeys that are available for a particular device. The specific subkeys include the following: softkeys, expressed as the number of soft keys on the device. Only for phones that support soft keys, this subkey determines which navigation links the Application Gateway adds to a device. If a phone has one or no soft keys, the Application Gateway adds Page Up and Page Down links on all cards except for the last card, where it adds Page Up and Top links. If a browser has a Back button and one or no soft keys, the Application Gateway adds a Page Down link to each card except for the last card where it adds a Top link. audio, the output audio formats that are supported by the device. This subkey is currently not supported. retainformat, either "yes" or "no". This subkey is set to "no" on some devices to limit horizontal scrolling and thus improve usability. When set to "no", retainformat forces elements against the left margin and overrides the effects of a pre element. A Design Studio user can toggle this setting by using the Retail Format rule. The DDF editor allows you to add subkeys to the specific key. This feature is to accommodate future subkeys.

Design Studio User Guide 19 Chapter 2 Design Studio Administration Configuring Device Definitions

Table 3 Keys and Values in Device Definition Files (continued)

Key1 Value2 Notes geometry Subkeys and their The geometry subkeys are related to the display values are described characteristics of a device: under “Notes.” colordepth, expressed as a number of colors. Use "1" to create grayscale images (the default for WBMP images). For JPEG images, this value is ignored. convert-inputs, either "yes" or "no". For devices that support images, but not input type="image" elements, this key converts input elements to type="submit". enabled, either "yes" or "no". For WML devices only, determines whether images are transcoded. height and width, expressed in number of pixels. An image that exceeds these values is scaled. localsrc, either "yes" or "no". For WML devices only, specifies whether a device contains hard-coded images. max, expressed in bytes. For WML devices only, specifies the maximum image size that a WML device can handle regardless of the image height or width. If the image exceeds this size after conversion, it is dropped. type (of image preferred for the device), such as "wbmp" and force. The Application Gateway uses type and force to determine how to handle images, as follows: If force is "yes", images are converted to the specified type. If force is "no", the Application Gateway compares the image type that is specified in the Accept field in the HTTP request header to the image content-type requested by the application server. If the two types match, the image is sent without conversion. Otherwise, the image is converted to the specified type. 1. You cannot edit or delete any of the keys listed in this column. 2. The value of the filteragent key is the only value that you can delete. You can edit all values.

20 Design Studio User Guide Chapter 2 Design Studio Administration Configuring Device Definitions

Table 4 Output Encoding Formats

Language Encoding Value Armenian ARMSCII-8 Chinese EUC-CN, HZ, GBK, GB18030, EUC-TW, BIG5, CP950, BIG5-HKSCS, ISO-2022-CN, ISO-2022-CN-EXT European ASCII, ISO-8859-(1, 2, 3, 4, 5, 7, 9, 10, 13, 14, 15, 16), KO18-R, KO18-U, KO18-RU, CP (850, 866, 1250, 1251, 1252, 1253, 1254, 1257), Mac (Roman, Central Europe, Iceland, Croatian, Romania, Cyrillic, Ukraine, Greek, Turkish) Full Unicode UTF-8, UCS-2, UCS-2BE, UCS-2LE, UCS-4, UCS-4BE, UCS-4LE, UTF-16, UTF-16BE, UTF-16LE, UTF-32, UTF-32BE, UTF-32LE, UTF-7 Georgian Georgian-Academy, Georgian-PS Japanese EUC-JP, SHIFT-JIS, CP932, ISO-2022-JP-2, ISO-2022-JP-1 Korean EUC-KR, CP949, ISO-2022-KR, JOHAB Laotian MuleLao-1, CP1133 Platform-specific HP-ROMAN8, NEXTSTEP Semitic ISO-8859-6, ISO-8859-8, CP1255, CP1256, CP862, Mac (Hebrew, Arabic) Thai TIS-620, CP874, MacThai Vietnamese VISCII, TCVN, CP1258

The following sections describe how to work with a DDF file: • Changing a Device Definition, page 22 • Adding a Device Definition, page 23

Design Studio User Guide 21 Chapter 2 Design Studio Administration Configuring Device Definitions

Changing a Device Definition

You ordinarily will not need to change a DDF unless you want to make changes such as the following: • Reduce the color depth setting of images so that pages download faster. • Change the default image size to prevent images from being clipped.

To change a device definition: 1 From the File menu in the Design Studio window, choose Edit DDF. The Edit DDF window opens. Your product license determines the device list.

Note The devices listed in your Edit DDF window will differ from the above examples.

2 In the left pane of the Edit DDF window, click the device type that you want to change. 3 In the right pane of the Edit DDF window, scroll to the value that you want to change and right-click it.

22 Design Studio User Guide Chapter 2 Design Studio Administration Configuring Device Definitions

4 Choose Edit Value from the shortcut menu. For information on keys and values, see Table 3. 5 In the Edit Value dialog box, type the new value and click OK. 6 To save the DDF on your computer, choose Save DDF Locally from the File menu. 7 To publish the DDF to the Application Gateway, choose Upload from the File menu. 8 To return to Design Studio, choose Return to Studio from the File menu.

Adding a Device Definition

Note The product you have licensed may not include support for adding device definitions.

Design Studio User Guide 23 Chapter 2 Design Studio Administration Configuring Device Definitions

You add a device definition to support a new device that is not included in the DDF or to uniquely define a device that is already listed in the useragent element for a device type. For example, the useragent element for WAP devices lists several types of devices. You could remove “Ericsson” from that list and create a device definition just for Ericsson.

To add a device definition: 1 From the File menu in the Design Studio window, choose Edit DDF. The Edit DDF window opens. 2 From the Edit menu in the Edit DDF window, choose an option: • Choose Add New Device to create an empty device definition. • Choose Add New WML Device to create a device definition based on a WML device type. • Choose Add New HTML Device to create a device definition based on an HTML device type. • Choose Copy Device to create a device definition by copying another definition. The new device displays at the end of the device list in the left pane. 3 In the right pane of the Edit DDF window, right-click the value New Device or the new device name.

24 Design Studio User Guide Chapter 2 Design Studio Administration Configuring Device Definitions

4 Choose Edit Value from the shortcut menu. 5 In the Edit Value dialog box, type the name of the device and click OK. 6 Scroll to a value you want to change, right-click it, and choose Edit Value from the shortcut menu. 7 In the Edit Value dialog box, type the new value and click OK. For information on keys and values, see Table 3. 8 Repeat Step 6 and Step 7 for each value you want to change. 9 If you are defining a device that is already listed in the useragent element of another device type, select that device type in the left pane of the Edit DDF window and remove the device from the useragent element. 10 To save the DDF on your computer, choose Save DDF Locally from the File menu. 11 To publish the DDF to the Application Gateway, choose Upload from the File menu. 12 To return to Design Studio, choose Return to Studio from the File menu.

Design Studio User Guide 25 Chapter 2 Design Studio Administration Installing the Openwave Mobile Browser Simulator

Importing Device Definitions

You will need to import device definitions in the following situations: • If you are notified that updated device definitions are available for download. • If you change device definitions and want to make those changes available to other Design Studio users.

To import device definitions: 1 From the File menu in the Design Studio window, choose Import DDF. 2 In the Import DDF dialog box, choose the type of import: • Choose Merge to add the device definitions to your file. • Choose Overwrite to replace your file with the device definitions. You will be prompted to save a backup copy of your current definitions. 3 In the Open dialog box, navigate to the file that you want to import and click Open. 4 To make the new definitions available to the Application Gateway, choose Upload from the File menu.

Installing the Openwave Mobile Browser Simulator The Openwave Mobile Browser Simulator enables you to view on your PC how your transformed web pages will appear on many wireless phones.

To download and install the Openwave Simulator: 1 In a web browser, go to the following URL: http://developer.openwave.com 2 Navigate to the Openwave Software Development Kit (SDK) downloads area. 3 Download the SDK version that you want to support to your PC. 4 After the download completes, double-click the .exe file that you downloaded. 5 Follow the instructions in the installation wizard. 6 Click Finish.

26 Design Studio User Guide Chapter 2 Design Studio Administration Installing the Openwave Mobile Browser Simulator

You will be asked to restart your computer to complete the installation.

We recommend that you put a shortcut to the Openwave Simulator on your desktop for convenient access when you are using Design Studio.

To create a shortcut to the simulator application file: 1 In a Windows file browser, navigate to the Openwave installation directory. By default, that directory is C:\Program Files\Openwave\SDK version. 2 Right-click the OWHost.exe file. 3 From the menu, choose Create Shortcut. Windows creates a shortcut named “Shortcut to OWHost.exe.” 4 Drag the shortcut to your desktop.

Design Studio User Guide 27 Chapter 2 Design Studio Administration Installing the Go.Web Simulator

To configure the Openwave Simulator: 1 Double-click the shortcut that you created to OWHost.exe. 2 In the Openwave SDK window, choose Device Settings from the Simulator menu. 3 Click Proxy 1: Auto provisioned gateway. 4 Click OK.

For information on using the simulator to preview transformations, see “Using the Openwave Mobile Browser Simulator,” page 197.

Installing the Go.Web Simulator The Go.Web Simulator enables you to view on your PC how your transformed web pages will appear on RIM devices.

To download and install the Go.Web Simulator: 1 In a web browser, go to the following URL: http://www.goamerica.com 2 Click the link to the Developer Zone. You will be asked to sign in. 3 Complete the sign-in information. 4 Download the Go.Web Simulator. 5 After the download completes, double-click the .exe file that you downloaded. 6 Follow the instructions in the installation wizard. The last page of the installation wizard gives you the option of starting the Go.Web Simulator. 7 Click the option to start the Go.Web Simulator and click Finish. The simulator window opens. The Go.Web Simulator is ready for use with Design Studio. We recommend that you put a shortcut to the Go.Web Simulator on your desktop for convenient access when you are using Design Studio.

28 Design Studio User Guide Chapter 2 Design Studio Administration Installing the Go.Web Simulator

To create a shortcut to the simulator application file: 1 In a Windows file browser, navigate to the GoWebSimulator installation directory. By default, that directory is C:\Program Files\GoAmerica\GoWebSimulator version. 2 Right-click the SimGoWeb.exe file. 3 From the menu, choose Create Shortcut. Windows creates a shortcut named “Shortcut to SimGoWeb.exe.” 4 Drag the shortcut to your desktop.

For information on using the simulator to preview transformations, see “Using the Go.Web Simulator,” page 198.

Design Studio User Guide 29 Chapter 2 Design Studio Administration Installing the Go.Web Simulator

30 Design Studio User Guide Chapter 3

Design Studio Basics

The following topics include information to help you understand Design Studio basics: • Design Studio Concepts, page 31 • Navigating the Design Studio Window, page 35 • Design Studio Workflow, page 40 • Working with Configuration Files and Projects, page 41

Design Studio Concepts These topics explain the basic concepts you will encounter as you learn how to use Design Studio: • Transformation Rules, page 31 • Configuration and Project Files, page 32 • XHTML Element Hierarchy, page 33

Transformation Rules

Transformation rules are instructions that the Application Gateway uses to transform the original content of an application or web page into the content that you want delivered to a device. Design Studio converts the rules into XSL. The Application Gateway uses XSLT to transform web pages according to the rules specified in XSL.

Design Studio User Guide 31 Chapter 3 Design Studio Basics Design Studio Concepts

Configuration and Project Files

You use Design Studio to create transformation rules and to customize the Application Menu. You save your work in a configuration file. A configuration file has the following characteristics: • It resides on your PC and has a “tcf” extension by default. You can specify any extension for configuration files. • 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 an Application Gateway at a time. • Several users can work on the same site simultaneously. When you publish each user’s work, you can merge the configuration file with the one currently loaded on the Application Gateway. • To test a configuration file, publish it to the Application Gateway that you use for testing. The new file replaces the configuration file previously in effect on the Application Gateway. • To put a configuration file into production, publish it to the Application Gateway that you use for production. The new file replaces or merges with the configuration file previously in effect on the Application Gateway.

Note A configuration file provided with Design Studio, extensions.tcf, is required if you use Application Gateway XHTML extensions. For more information, see “Managing Configuration Files When Using Application Gateway XHTML Extensions,” page 232.

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.

32 Design Studio User Guide Chapter 3 Design Studio Basics Design Studio Concepts

• You can add one or more projects to a configuration file. • When you publish a configuration file to the Application Gateway, 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 Application Gateway (see Figure 3). You choose whether to also publish the Application Menu.

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

Figure 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. In Figure 5, the body element is a parent to the form element; the form element is a parent to the img element and so on.

Design Studio User Guide 33 Chapter 3 Design Studio Basics Design Studio Concepts

Figure 5 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 6, the a element appears at the same depth four times.

Figure 6 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 Application Gateway workload.

34 Design Studio User Guide Chapter 3 Design Studio Basics Navigating the Design Studio Window

Navigating the Design Studio Window You can use the Design Studio window to track and organize the web pages that you want to transform. The Design Studio window contains the major areas shown in Figure 7. 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 7 Design Studio Window

Note The numbers in Figure 7 refer to the following list.

1. Toolbars 2. View tabs 3. Project tree or Application Menu 4. Browser view 5. XHTML source view 6. Page and rule information

Design Studio User Guide 35 Chapter 3 Design Studio Basics Navigating the Design Studio Window

The following topics provide more information about the Design Studio window: • Using the Project Tree, page 36 • Viewing Page and Rule Information, page 37 • Using the View Tabs, page 38 • Finding Commands, page 39 • Finding Text in the XHTML Source View, page 39

Using the Project Tree

By default, the Project Tree tab lists for a configuration file each project and its added pages (see Figure 8). Click the App. Menu tab to display the Application Menu editor, described in “Customizing the Application Menu,” page 201.

Figure 8 Project Tree

Note Through this document, the devices listed in the project tree might differ from the above generic example.

To work with the project tree, use these techniques: • Right-click the name of a configuration file, project, or page (by default, the page URL) to display a shortcut menu. • Click a project folder to choose a project location for a page. • Click Identifier Rules to create rules that identify a page by URL and/or some text on the page, such as the text of the title element. • Click a device type to begin creating a transformation rule. When you define a transformation rule, you can choose to apply it to additional device types (if your license supports more than one device).

36 Design Studio User Guide Chapter 3 Design Studio Basics Navigating the Design Studio Window

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

Figure 9 Page Information

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

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 10 Rule Information

Design Studio User Guide 37 Chapter 3 Design Studio Basics Navigating the Design Studio Window

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

Table 5 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 A browser view and XHTML source view of the web page Original 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 A static page preview, available for most device types. Use this tab to view how transformed application screens are chunked into cards. 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.

38 Design Studio User Guide Chapter 3 Design Studio Basics Navigating the Design Studio Window

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 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: 1 If you want to start the search in a particular location, select a starting point in the XHTML source view. 2 Click the Find icon ( ). 3 In the Find dialog box, enter the text that you want to locate and click Find. Design Studio highlights the text in the XHTML source view.

Design Studio User Guide 39 Chapter 3 Design Studio Basics Design Studio Workflow

Design Studio Workflow Figure 11 summarizes the workflow for creating transformation rules in Design Studio and publishing them to the Application Gateway.

Figure 11 Rule Creation and Publishing Overview

Note The numbers in Figure 11 refer to the following process.

The Design Studio workflow is as follows: 1 You create a configuration file in Design Studio. 2 You add a project to the configuration file. 3 You add a web page to the project and create identifier and transformation rules for the page. 4 When you finish adding pages and creating transformation rules, you save the configuration and then publish it to an Application Gateway. You can test the transformations using simulators and devices.

40 Design Studio User Guide Chapter 3 Design Studio Basics Working with Configuration Files and Projects

Working with Configuration Files and Projects For general information on configuration files and projects, see “Configuration and Project Files,” page 32. These topics describe how to work with configuration files and projects: • Creating a Configuration File and HTML Project, page 41 • Opening and Saving a Configuration File, page 43 • Adding an HTML Project to a Configuration File, page 44 • Deleting a Project, page 44 • Adding a Page to an HTML Project, page 45 • Renaming a Page, page 47 • Displaying Page Information, page 47 • Deleting a Page, page 48

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 Application Gateway.

To create a configuration file: 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.

Design Studio User Guide 41 Chapter 3 Design Studio Basics Working with Configuration Files and Projects

A configuration file can contain one or more projects, which you use to group related web pages. For more information on projects, see “Configuration and Project Files,” page 32. 2 Enter a name to identify the project. For example, you might identify a project by its general content, such as “Customer Support Pages.” 3 Click the HTML radio button. For information on creating XML projects, see Chapter 6, “Working with XML, XPath, and XSL.” 4 Click OK. After you create an HTML project, add web pages to it as described in “Adding a Page to an HTML Project,” page 45.

42 Design Studio User Guide Chapter 3 Design Studio Basics Working with Configuration Files and Projects

Opening and Saving a Configuration File

To open a configuration file that resides on your computer: • If the name of the project that you want to open is listed in the Design Studio window, click the project name. Otherwise, click Open Configuration, navigate to the file, and click Open. If you are prompted to convert the file to the latest release, refer to the Release Notes for information. If a configuration file is already open, Design Studio closes it after prompting you to save changes.

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

To open the configuration file currently loaded on an Application Gateway: 1 If you are not already connected to the Application Gateway where the file is loaded, connect to the device as described in “Connecting to a Different Application Gateway,” page 14. 2 In the Design Studio window, click Get Configuration From Gateway. If a configuration file is already open, Design Studio closes it after prompting you to save changes, then opens the published configuration.

To save a configuration file: 1 From the File menu, choose Save Configuration or Save As Configuration. 2 If prompted, enter a filename and click Save. Design Studio saves the configuration file on your computer using the name that you provide. The configuration file contains your transformation rules, as well as any changes made to the default Application Menu. To upload a configuration file to the Application Gateway, you must publish it as described in “Publishing a Configuration File to an Application Gateway,” page 191.

Design Studio User Guide 43 Chapter 3 Design Studio Basics Working with Configuration Files and Projects

If a file you save already exists, Design Studio saves the old version to a backup file named filename~.

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 Chapter 6, “Working with XML, XPath, and XSL.”

To create an HTML project: 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. 2 From the Projects menu, choose Create Project. The Create Project dialog box appears. 3 Enter a name to identify the project. For example, you might identify a project by its general content, such as “Customer Support Pages.” 4 Click the HTML radio button. 5 Click OK. After you create an HTML project, add web pages to it as described in “Adding a Page to an HTML Project,” page 45.

Deleting a Project

To delete a project: 1 Right-click the project name in the project tree. 2 Choose Remove Project from the shortcut menu. 3 Click Yes to confirm the deletion.

44 Design Studio User Guide Chapter 3 Design Studio Basics Working with Configuration Files and Projects

Adding a Page to an HTML Project

To add a page to an HTML project: 1 In the project tree, click a project. 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 Application Gateway 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 “Using an Identifier Rule for Multiple Pages,” page 56. If a Redirection message displays, see “Handling Page Redirects,” page 46. 3 In the lower-left pane, click Add to Configuration. The Add Page to Project dialog box displays. 4 Select a project name from the Project drop-down menu. 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. 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 “Identifying a Page,” page 49.

Design Studio User Guide 45 Chapter 3 Design Studio Basics Working with Configuration Files and Projects

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 (skipping the page that redirects). Follow the redirect if there is no or unneeded content on the page that redirects. • Do not follow the redirect (so you can add 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: 1 When the Redirection message displays, click Yes. 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: 1 When the Redirection message displays, click No. 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.

46 Design Studio User Guide Chapter 3 Design Studio Basics Working with Configuration Files and Projects

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: 1 Right-click the page name in the project tree. 2 Choose Rename Page from the shortcut menu. 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: 1 Click Identifier Rules under the page name in the project tree. 2 Right-click the browser view or the XHTML source view. 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: 1 Right-click the page name in the project tree. 2 Choose Page Info from the shortcut menu. Information about the page displays in a dialog box. 3 Click OK.

Design Studio User Guide 47 Chapter 3 Design Studio Basics Working with Configuration Files and Projects

Deleting a Page

To delete a page from a project: 1 Right-click the page name in the project tree. 2 Choose Remove Page from Project from the shortcut menu. 3 Click Yes to confirm the deletion.

48 Design Studio User Guide Chapter 4

Transformation Basics

The following topics describe the basics of creating transformations in Design Studio: • Identifying a Page, page 49 • Creating Transformation Rules, page 58 • Editing Transformation Rules, page 65 • Performing Basic Transformations, page 67 • Working with Conflicting or Dead Rules, page 90 • Applying Rules to Several Elements, page 93

Identifying a Page You must assign an identifier to each web page that you add to a Design Studio project. The Application Gateway 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: • An element on the page, typically the title element • All or part of a page URL • A combination of an element and the page URL 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?

Design Studio User Guide 49 Chapter 4 Transformation Basics Identifying a Page

Table 6 provides general guidelines for choosing identifiers based on page characteristics.

Table 6 Guidelines for Choosing Identifiers

Page Characteristics Identifier Has a title or other element that Text of the element. uniquely distinguishes it from all other web pages. Has a unique URL. URL. Has an element that uniquely Unique portion of the URL or a distinguishes it from other pages combination of the URL and the on the same site but may not be unique text of the element. unique to all web pages. Is dynamically generated based on Unique element such as title. a POST1 method. (Dynamically generated pages typically have different content but the same URL.) Is dynamically generated based on Part of the URL plus the title a POST method; an application element. server generates the same title for the pages. 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 topics: • Identifying a Page by Element Text, page 51 • Identifying a Page by URL, page 54 • Using an Identifier Rule for Multiple Pages, page 56 For additional information about creating an identifier rule for a particular type of content (such as template-based pages, dynamically generated pages, frames, and windows), refer to the entry “Identifier rule” in the Index.

50 Design Studio User Guide Chapter 4 Transformation Basics Identifying a Page

Identifying a Page by Element Text

Before you create an identifier, you must first add the page to a project as described in “Adding a Page to an HTML Project,” page 45.

To create an identifier based on element text: 1 Locate the page in the project tree and click Identifier Rules.

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.

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.

Design Studio User Guide 51 Chapter 4 Transformation Basics Identifying a Page

4 Optionally, change the default rule name. 5 If you want Design Studio to identify the page by matching the original text exactly, click OK. If you want the Application Gateway 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 Application Gateway 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. 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 Application Gateway to match the text when identifying pages.

52 Design Studio User Guide Chapter 4 Transformation Basics Identifying a Page

7 Complete the Text String Match area to specify the text that you want the Application Gateway to use in order to match a web page to this identifier. See Table 7 for your options. 8 Leave the Depth to Match option and the Position to Match option set to Exact: • The need to use several occurrences of an element to identify a page is unlikely. • If you are using title element text for the identifier, you do not need to change these settings because only one title element is allowed for an HTML/XML page. • For information on manually configuring an element by editing its XPath expression, see “Manually Configuring the XPath Expression of an Element,” page 177. 9 Click OK.

If you also want to identify the page by URL, see “Identifying a Page by URL,” page 54. To begin adding transformation rules to the page, see “Creating Transformation Rules,” page 58.

Design Studio User Guide 53 Chapter 4 Transformation Basics Identifying a Page

Table 7 Specifying Text to Identify a Page

Text in the Match Operation Text Field Selected Element Text Matched Original text Equals Exact original text string These settings are reflected in the preceding dialog box example. This identifier matches only to web pages that have the exact title text “Sample Contacts Page.” Original text Contains Text string that contains the original text Original text Any text Any text string Modified text Equals Exact modified text string Modified text Contains Text string that contains the modified text

Identifying a Page by URL

Before you can create an identifier, you must first add the page as described in “Adding a Page to an HTML Project,” page 45.

To create an identifier based on a URL: 1 Locate the page in the project tree and click Identifier Rules.

2 Right-click anywhere in the XHTML source view. 3 Choose URL from the shortcut menu. The Identify by URL dialog box appears.

54 Design Studio User Guide Chapter 4 Transformation Basics Identifying a Page

4 Review the URL and determine if any portion of it should be excluded, based on the following guidelines: • If the URL includes a "/" (such as www.site.com/products) and also ends with "/" (such as www.site.com/products/), exclude the "/" at the end. When a URL includes "/" characters, the Application Gateway considers the last "/" when matching transformation rules to the page. For example, if the URL identifier rule is www.site.com/products/, the Application Gateway applies the corresponding transformation rules only to a page requested as www.site.com/products/, not to a page requested as www.site.com/products. However, if a URL does not include "/" characters other than one at the end, the Application Gateway does not consider the ending "/" when matching rules. For example, if the URL identifier rule is www.site.com:80/, the Application Gateway applies the corresponding transformation rules to pages requested as www.site.com or www.site.com/. • When you browse to a web page, the URL that is returned often includes additional information, such as a query string (a question mark, "?", followed by a text string), such as http://www.site.com?q=some_string. To match any query string, exclude the string that follows the equal sign (=). 5 To match against the exact URL shown, click OK. Otherwise, continue with the next step. 6 Select the portion of the URL that you do not want to match against, and then click Exclude.

Design Studio User Guide 55 Chapter 4 Transformation Basics Identifying a Page

Note Any string matches the excluded portion of a URL. Thus, if a URL is www.site.com/index.html and you exclude index.html, any URL that starts with www.site.com matches the identify rule.

7 To re-include text marked as excluded, select the text and click Include. 8 Click OK.

If you also want to identify the page by an element, see “Identifying a Page by Element Text,” page 51. To begin adding transformation rules to the page, see “Creating Transformation Rules,” page 58.

Using an Identifier Rule for Multiple Pages

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.

56 Design Studio User Guide Chapter 4 Transformation Basics Identifying a 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 that they are unique): 1 In the lower-left pane, click Add Page and create identifier rules for it as usual.

2 Locate in the project tree the page whose identifier rules that you want to change and click Identifier Rules. 3 In the lower-left pane, right-click the identifier rule you want to change. 4 Complete the dialog boxes and click OK. For help with the dialog boxes, see “Identifying a Page by Element Text,” page 51 and “Identifying a Page by URL,” page 54.

To apply the identifier rules to the new page: • In the lower-left pane, click Apply Rules. Design Studio uses the identifier rules and transformation rules for the page.

Design Studio User Guide 57 Chapter 4 Transformation Basics Creating Transformation Rules

Creating Transformation Rules 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: 1 Click a device type in the project tree.

Note The devices listed are based on your product license.

2 Right-click an element in the XHTML source view. 3 Choose a command from the shortcut menu. 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 8 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.

58 Design Studio User Guide Chapter 4 Transformation Basics Creating Transformation Rules

Table 8 Transformation Rules

Transformatio n Rule Type Purpose Example Select rule Includes an Suppose that a web page contains this element hierarchy: element; you html can also drop head body the parent center elements image form image ... table To include the form, you apply the Select rule to the form element. The form element and any child elements will be included in the transformed content. If this is the first Select rule applied to a page, it results in the exclusion of all other elements. Thus, the image elements before and after the form element, as well as the table element, would not be included. If you choose to retain the parents of the form element, the resulting transformation is as follows: html head body center form For subsequent applications of the Select rule to the same page, selected elements are added back to the page. For example, to include the table element, apply the Select rule to it. The resulting transformation is as follows: html head body center form table For more information, see “Selecting Content,” page 67.

Design Studio User Guide 59 Chapter 4 Transformation Basics Creating Transformation Rules

Table 8 Transformation Rules (continued)

Transformatio n Rule Type Purpose Example Clip rule Excludes an Suppose that you applied the Select rule to a form element, element which has the following child elements: form table tr [defines text you want to exclude] tr [defines input elements] To exclude the first tr element, you apply the Clip rule to it. The Clip rule excludes that tr element and any child elements. For more information, see “Clipping Content,” page 71. Ignore rule Overrides a Suppose that you want to include the text of a link, but not the Select rule or link itself. The elements that you want to work with are as Clip rule follows: font a href=link text To keep the text and its formatting, apply the Select rule to the font element. To ignore the link, apply the Ignore rule to the a element. Use the Ignore rule, rather than the Clip rule, in order to affect only the a element and not its parent (font) or child (text) elements. For more information, see “Ignoring Content,” page 74. Modify rule Changes an The Modify rule enables you to change an element. For element example, you might change the type of element from an hr element (horizontal rule) to a br element (line break). You can replace an element with XHTML/XML code or text; you can add, change, or remove element attributes. For more information, see “Modifying Content,” page 77.

60 Design Studio User Guide Chapter 4 Transformation Basics Creating Transformation Rules

Table 8 Transformation Rules (continued)

Transformatio n Rule Type Purpose Example Insert rule Adds an Suppose that you want to add some text, such as a copyright element or statement, to a page. The text already included for text transformation is as follows: html head body center form font text hr To add the copyright statement after the hr element, select the hr element and apply the Insert rule to it. You can then specify that you want to add text after (or before) the horizontal rule. You can also insert blocks of HTML/XML code. For more information, see “Inserting Content,” page 82. Move rule Enables you Suppose a web page contains an input field, followed by its to relocate an label, as follows: element; table useful for tr td managing input [the input field] layout on tr td very small font [label for input field] screens When the web page displays on a small microbrowser screen, the input field and label display on two different pages. The input field displays at the bottom of a screen and the label displays at the top of the next screen. In this case, it would be better to display the label first, followed by the input field. The Move rule allows you to move the label before the input field. For more information, see “Moving an Element Tag,” page 87.

Design Studio User Guide 61 Chapter 4 Transformation Basics Creating Transformation Rules

Table 8 Transformation Rules (continued)

Transformatio n Rule Type Purpose Example Retain Format Toggles the By default, the Application Gateway retains web page rule DDF formatting. For example, for devices such as WML-based retainformat phones and Palm and RIM devices, table elements are key retained as a table, rather than converted to a list. This behavior is controlled by the retainformat key in the DDF which is set to "yes". You can toggle the retainformat setting for an element by applying a Retain Format rule. For more information, see “Retaining Formatting,” page 139 and “Retaining a Small Image,” page 148. IMG ALT rule Replaces an Use the IMG ALT rule to replace an image with the alternate image with its text of the img element. This is useful for images that are too alternate text large for display on a microbrowser screen. For more information, see “Working with Images,” page 146. Import XSL Applies a Use the Import XSL rule to supplement or replace an rule custom rule xsl:template element in the XSLT style sheet. This advanced to a node feature lets you create your own rules; for example, you can manipulate a string in a URL. For more information, see “Importing Custom XSL,” page 182. Paginate Divides a web Suppose that a web page contains four categories of links. Anchor rule page into Rather than sending all of the content in one long page, you several pages can manually paginate the page so that a user sees four pages, each with one category of links. For more information, see “Working with Pages,” page 115. Disable URL Disables URL By default, the Application Gateway prepends its IP address Rewrite rule rewriting for to links on transformed pages so that page requests are a link directed to the Application Gateway. You can disable this behavior by applying a Disable URL Rewrite rule to a link. For more information, see “Disabling URL Rewriting for a Link,” page 149.

62 Design Studio User Guide Chapter 4 Transformation Basics Creating Transformation Rules

Table 8 Transformation Rules (continued)

Transformatio n Rule Type Purpose Example Dial Number Enables a user Suppose that a web page you are transforming includes a rule to dial a phone number. To enable a user to dial the phone number by phone selecting text in the microbrowser, select the phone number in number by the XHTML and apply the Dial Number rule to it. 1 selecting it For more information, see “Adding a Dialable Phone Number,” page 151. Group rule Groups links Suppose that a web page includes a list of links that you want and to include for transformation, as follows: eliminates table elements tr td other than the font a href a href link text elements font inside of the a href 2 link text group font a href link text You first apply a Select rule to the element that contains the links that you want to group. Then you apply a Group rule inside of the selected area to the element that contains the links that you want to group. In the example, you might apply a Select rule to the tr element and apply the Group rule to the td element. The Group rule transforms the elements as follows: • Clips all elements except for the a href elements and their link text. In the above example, if you apply the Group rule to the tr element, then the tr, td, and font elements are clipped. • Displays the links as a single-spaced list that is numbered. A phone user can follow a link by entering the corresponding number. For more information, see “Grouping Links,” page 157.

Design Studio User Guide 63 Chapter 4 Transformation Basics Creating Transformation Rules

Table 8 Transformation Rules (continued)

Transformatio n Rule Type Purpose Example Force Card Breaks a page Use the Force Card Break rule to fine tune the layout. For Break rule to a new card example, use the rule to keep an image with related text. For more information, see “Forcing a Card Break,” page 161. Input Type Specifies the Use the Input Type rule to specify the input type of an input rule input type of element: plain text, telephone number, number, equation, an input uppercase, and lowercase. element2 For more information, see “Specifying the Input Type for IP Phone Input Fields,” page 162. Soft Key rule Defines Soft Use the Soft Key rule to define a soft key. Keys1 For more information, see “Defining Soft Keys,” page 164. Refresh rule Specifies a Suppose that you want to display an advertisement, splash screen to be screen, or message on IP phones. You use the Refresh rule to refreshed specify the card you want to refresh and the refresh interval. after a Note The Application Gateway uses the information that defined you specify to create an HTTP header with a Refresh delay2 setting.

For more information, see “Refreshing a Page,” page 172. 1. This feature is available only for some IP phones. For information on the IP phones you have licensed, go to the Design Studio Help menu and choose Device Help. 2. This feature is available only for WAP phones and some IP phones. For information on the IP phones you have licensed, go to the Design Studio Help menu and choose Device Help.

64 Design Studio User Guide Chapter 4 Transformation Basics Editing Transformation Rules

Editing Transformation Rules

To edit a transformation rule: 1 Verify that the correct configuration file is open. 2 In the project tree, locate the page that you want to change. 3 For that page, click the device type that you want to change. 4 Use any of these methods to edit a rule: • In the XHTML source view, right-click the element whose rule you want to edit and choose Edit Rule from the shortcut menu. • In the Rules pane, click the rule that you want to edit and click Edit, or right-click a rule and choose Edit Rule from the shortcut menu. 5 Complete the dialog boxes as described in “Creating Transformation Rules,” page 58.

To delete a transformation rule: 1 Verify that the correct configuration file is open. 2 In the project tree, locate the page that you want to change. 3 For that page, click the device type that you want to change. 4 Use any of these methods to delete a rule: • In the XHTML source view, right-click the element whose rule you want to delete and choose Delete Rule from the shortcut menu. • In the Rules pane, click the rule that you want to delete and click Delete, or right-click a rule and choose Delete Rule from the shortcut menu.

Note After you update a configuration file, you must publish it to an Application Gateway for the changes to take effect.

Design Studio User Guide 65 Chapter 4 Transformation Basics Copying Rules from One Device to Another

Copying Rules from One Device to Another 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: 1 In the Design Studio window, close any open configuration files. 2 From the Tools menu, choose Map New Devices. 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. 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. 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. 6 Click Map. 7 Open the configuration file and verify that the rules have the intended results for each device.

66 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

Performing Basic Transformations The following topics describe how to create basic transformation rules in Design Studio: • Selecting Content, page 67 • Clipping Content, page 71 • Ignoring Content, page 74 • Modifying Content, page 77 • Inserting Content, page 82 • Moving an Element Tag, page 87

Selecting Content

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: 1 In the project tree, click the device type for which you want to create a Select rule.

You will have a chance later to apply the rule to other device types.

Design Studio User Guide 67 Chapter 4 Transformation Basics Performing Basic Transformations

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

68 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

4 Optionally, 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. 5 Choose how to apply the rule: • Click the Project radio button if you know that this element appears on all of the pages in this project and you want to handle the element in the same way on all pages. For example, all of the pages that you want to transform might include a copyright statement. You can select the copyright statement on one page and apply that rule to all pages, rather than creating the same rule for each page. • Click the This Page radio button to apply the rule only to this page.

Design Studio User Guide 69 Chapter 4 Transformation Basics Performing Basic Transformations

6 Choose each device type to which you want to apply the rule. This step enables you to apply one rule to multiple devices. 7 Choose whether you want to include the immediate hierarchy above the element: • Clear the Drop All Parent Elements check box if you want Design Studio to include the necessary hierarchy to maintain structurally correct markup. For example, if you select a td element and retain parent elements, Design Studio includes the parent tr and table elements. Retaining parent elements impacts performance, so you should retain parents only if they are needed. • Select the Drop All Parent Elements check box if you know that the hierarchy is not necessary to maintaining structurally correct markup. Be aware that removing parents can result in incorrect markup. For example, if you select a td element and choose to remove the parent elements, the transformed element may not have the required parent tr and table elements.

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.

8 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 Application Gateway can use to locate the table. For more information, see “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

70 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

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

and

, respectively. They are provided by Design Studio in order to maintain well-formed syntax.

Clipping Content

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: 1 In the project tree, click a device type for which you want to create a Clip rule.

You will have a chance later to apply the rule to other device types.

Design Studio User Guide 71 Chapter 4 Transformation Basics Performing Basic Transformations

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

72 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

4 Optionally, 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. 5 Choose how to apply the rule: • Click the Project radio button if you know that this element appears on all of the pages in this project and you want to handle the element in the same way on all pages. For example, all of the pages that you want to transform might include a large logo image that you want to exclude. You can clip the image on one page and apply that rule to all pages, rather than creating the same rule for each page. • Click the This Page radio button to apply the rule only to this page. 6 Choose each device type to which you want to apply the rule. This step enables you to define one rule for multiple devices.

Design Studio User Guide 73 Chapter 4 Transformation Basics Performing Basic Transformations

7 If you want the Clip rule to apply to this exact element and only to this element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 Application Gateway can use to locate the table. For more information, see “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

Design Studio displays the results of the Clip rule. In the XHTML source view, the Clip icon ( ) indicates that you clipped this element.

Ignoring Content

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

74 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

To create an Ignore rule: 1 In the project tree, click a device type.

You will have a chance later to apply the rule to other device types. 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. 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. 4 Optionally, change the rule name, perhaps using a brief description of its content, such as “Ignore formatting.”

Design Studio User Guide 75 Chapter 4 Transformation Basics Performing Basic Transformations

5 Choose how to apply the rule: • Click the Project radio button to ignore this element on all pages in this project. • Click the This Page radio button to ignore the element only on this page. 6 Choose each device type to which you want to apply the rule. 7 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 Application Gateway can use to locate the table. For more information, see “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

Design Studio displays the results of the Ignore rule. In the XHTML source view, the Ignore icon ( ) indicates that you ignored this element.

76 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

Modifying Content

The Modify rule gives you great flexibility in transforming content. You can change an element and its attributes as follows: • Replace an element with a different element and specify attributes for it. • Replace an element with an XHTML/XML fragment or text. • Add, change, or remove element attributes. If a Modify rule causes unintended results, check for the following: • Content that dynamically changes and thus invalidates the Modify rule. • Invalid HTML structure that results from moving an element. For example, moving a td element outside of a table element.

To modify an element: 1 In the project tree, click a device type.

You will have a chance later to apply the rule to other device types. 2 In the XHTML source view, right-click the element that you want to modify for the transformed page. 3 Choose Modify from the shortcut menu.

Design Studio User Guide 77 Chapter 4 Transformation Basics Performing Basic Transformations

The Configure: Modify Element Rule dialog box appears. 4 Optionally, change the rule name, perhaps using a brief description of its content, such as “Modify Button Name.” 5 Choose how to apply the rule: • Click the Project radio button to modify this element on all pages in this project. • Click the This Page radio button to modify this element only on this page. 6 Choose each device type to which you want to apply the rule. 7 Click the Modify Element tab. If you are modifying an element, the element name displays in the Single XHTML/XML Element area.

78 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

If you are modifying text, the text displays in the XHTML/XML Fragment or Text area.

Design Studio User Guide 79 Chapter 4 Transformation Basics Performing Basic Transformations

8 Change an element in any of the following ways: • By default, an element’s attributes are retained. To remove an attribute, click the Operation drop-down arrow and choose Remove from the menu. • To change an attribute, click the Operation drop-down arrow, choose a Modify option from the menu, and then enter the new name or value. – Choose Modify Value to specify a different value for an attribute. – Choose Modify Name to specify a different name (but retain the attribute value). Suppose a table element references a background image and you want to include the background image but not the table. In that case, you modify the table element to an img element and change the attribute name background to src.

80 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

– Choose Modify Both to change the attribute name and value. This step is the same as ignoring the existing attribute and adding a new attribute. • To add an attribute, click Add Attribute and enter the attribute name and its value. • To replace the element with another element, click the drop-down arrow and choose an element from the menu. Click Add Attribute to add attributes to it. • To replace the element with XHTML/XML or text, click the XHTML/XML Fragment or Text radio button and type the code or text in the XHTML/XML Fragment or Text area.

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 Application Gateway 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. 9 If you want the transformation rule to apply to the original element and only to the original element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

Design Studio displays the results of the Modify rule. In the XHTML source view, the Modify icon ( ) indicates that you modified this element.

Design Studio User Guide 81 Chapter 4 Transformation Basics Performing Basic Transformations

Inserting Content

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 “Well-Formed XML,” page 86. The code you insert must also result in valid HTML.

To insert content: 1 In the project tree, click a device type.

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.

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. 4 Choose Insert from the shortcut menu.

82 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

The Configure: Insert Rule dialog box appears. 5 Optionally, change the rule name, perhaps using a brief description of its content, such as “Insert Table.” 6 Choose how to apply the rule: • Click the Project radio button to insert the element in all pages in this project. • Click the This Page radio button to insert the element only on this page. 7 Choose each device type to which you want to apply the rule. 8 Click the Insert Element tab. The Insert Element tab appears.

Design Studio User Guide 83 Chapter 4 Transformation Basics Performing Basic Transformations

9 In the Insert New Element area, choose a setting as follows: • Click the Before radio button to insert the element before the current selection. • Click the After radio button to insert the element after the current selection. • Click the As Child radio button to insert the element as a child element to the current selection. For example, use this setting to add a table row or cell to a table.

84 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

• Click the As Parent radio button to insert the element as a parent element to the current selection. For example, use this setting to add a formatting element to existing text. You can insert only a single XHTML element as a parent element. You cannot insert an XHTML fragment as a parent element. 10 In the Type of Element to Insert area, choose a setting as follows: • To insert HTML/XML code, type it in the HTML/XML Fragment text box. • To insert one element, click the Single HTML/XML Element radio button, click the drop-down arrow, and choose an element from the menu. Click Add to add attributes to it; click Delete to remove an attribute.

Note If an attribute includes a URL, you must enter special characters by using XHTML character entity references. For example, use "&" for the "&" character.

11 If you want the transformation rule to apply to the original element and only to the original element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

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.

Design Studio User Guide 85 Chapter 4 Transformation Basics Performing Basic Transformations

Well-Formed XML 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): • XML is case sensitive. For any one element, you must use consistent capitalization in the opening and closing tags. For example,

and

are well-formed tags;

and

are not well-formed tags. • All elements must have closing tags. For example, you must always follow
with
, or you can use one tag that both opens and closes the empty element,
. • XML does not allow overlapping tags. For example, XML does not allow a construction such as some text. When an element () starts inside of another element (), it must also end inside that element. For this example, the correct syntax is some text. • Attribute values must be enclosed in single or double quotation marks.

86 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

Moving an Element Tag

To accommodate small microbrowser screens, the Application Gateway 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: 1 In the project tree, click a device type. 2 In the XHTML source view, right-click the element that you want to move (the source element). 3 Choose Move from the shortcut menu.

The Move Destination dialog box appears.

Design Studio User Guide 87 Chapter 4 Transformation Basics Performing Basic Transformations

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.

5 Click OK. The Configure: Move Rule dialog box appears.

88 Design Studio User Guide Chapter 4 Transformation Basics Performing Basic Transformations

6 Optionally, change the rule name, perhaps using a brief description of its content, such as “Move input field label.” 7 Choose how to apply the rule: • Click the Project radio button to move the element on all pages in this project. • Click the This Page radio button to move the element only on this page. 8 Choose each device type to which you want to apply the rule.

Design Studio User Guide 89 Chapter 4 Transformation Basics Working with Conflicting or Dead Rules

9 In the Move Element area, select the location for the rule: • Click Before to move the source element before the destination element. • Click After to move the source element after the destination element. 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. 11 If you want the Move rule to apply to this exact element and only to this element, click OK. Otherwise, see “Applying the Move Rule to Several Elements,” page 112. Design Studio displays the results of the Move rule. In the XHTML source view, the Move icon ( ) displays in the source location.

Working with Conflicting or Dead Rules 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 topics describe how to work with conflicting and dead rules: • Resolving Conflicting Rules, page 90 • Evaluating Dead Rules, page 92

Resolving Conflicting 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

90 Design Studio User Guide Chapter 4 Transformation Basics Working with Conflicting or Dead Rules

(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 there is a rule on a parent element of a node that has a manually configured XPath expression. • When there is a rule on the parent of the source or destination path of a Move rule. 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: 1 In the rules area, click a rule that is displayed in red. Design Studio selects the corresponding element or text in the browser view and the XHTML source view.

Design Studio User Guide 91 Chapter 4 Transformation Basics Working with Conflicting or Dead Rules

2 To locate another rule that is applied to the same element or text, right-click the selected rule in the rules area. 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.

Note If the rule conflict is resolvable, the submenu contains Resolve Conflict.

Evaluating Dead Rules

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.

92 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

Applying Rules to Several Elements The following topics describe how to apply rules to several elements: • Introduction, page 93 • Applying Rules Based on Element Name or Text, page 96 • Applying Rules Based on Depth, page 101 • Applying Rules Based on Position, page 102 • Using a Relative Path to Specify a Rule Location, page 109 • Applying Rules Based on Element Attribute Values, page 111 • Applying the Move Rule to Several Elements, page 112

Note For a general introduction to the concepts of element depth and position, see “XHTML Element Hierarchy,” page 33.

Introduction

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 Application Gateway. The Configure Rule dialog box for most rules contains a Path to Selected Element area, as shown in Figure 12. To apply a rule to more than one element on a page, you configure at least one of the elements in the list.

Design Studio User Guide 93 Chapter 4 Transformation Basics Applying Rules to Several Elements

Figure 12 Path to Selected Element Area

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 “Using a Relative Path to Specify a Rule Location,” page 109. 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 13. 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.

94 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

Figure 13 Repeated Element in the Path to Selected Element

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 14) or a text element (Figure 15).

Figure 14 Configure Path Element

Design Studio User Guide 95 Chapter 4 Transformation Basics Applying Rules to Several Elements

Figure 15 Configure Text Element

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.

Applying Rules Based on Element Name or Text

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.

96 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

Element Name 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 “Applying Rules Based on Position,” page 102. 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: table tr td b Hello

tr td b World

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.

Design Studio User Guide 97 Chapter 4 Transformation Basics Applying Rules to Several Elements

To skip an element: 1 In the XHTML source view, right-click the element on which you want to apply a rule. 2 Choose the rule from the shortcut menu. 3 In the Configure dialog box, click the element that may or may not appear in dynamically generated content. 4 Click Skip This Element to select it. In the following example, the small element is the optional element.

5 In the Path to Selected Element area, click the last element listed (the element on which you are applying the rule).

98 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

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. 7 Change other settings as needed and then click OK.

Design Studio User Guide 99 Chapter 4 Transformation Basics Applying Rules to Several Elements

Element Text 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 9 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).

Table 9 Specifying Text to Match

Match Text Operation Text to Match Against Field Menu Setting Exact original text string original text Equals Text strings that contain the original text original text Contains Any text string original text Any Text Exact modified text string modified text Equals Text strings that contain the modified modified text Contains text Text strings that do not equal the variable text Not Equal specified text string Text strings that do not contain the variable text Not Contain specified text string Text strings that start with the specified variable text Starts With text string

100 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

Applying Rules Based on Depth

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: table table table table

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 table table table table table table table

Table 10 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 10.

Table 10 Effect of XHTML Depth Settings

Exact All Depths Any Descendant table table table table table table table table table table table table table table table table table table table table table table table table The Application Gateway The Application Gateway The Application Gateway applies the rule only to this applies the rule to tables at all applies the rule to this table table. depths. and its descendant table.

Design Studio User Guide 101 Chapter 4 Transformation Basics Applying Rules to Several Elements

For more information, see the following topics: • How the Depth and Position Settings Interact, page 104 • Applying the Move Rule to Several Elements, page 112

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.

Applying Rules Based on Position

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: table text element1 table form table text element2 table

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 table table table form table table table

102 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

table table table

Table 11 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 11.

Table 11 Effect of Element Position Settings

Exact Range (2-3) All Positions table table table table table table table table table table table table form form form table table table table table table table table table table table table table table table table table table The Application Gateway The Application Gateway The Application Gateway applies the rule only to this applies the rule only to the applies the rule to all tables at table. second and third tables at this this depth. depth. To achieve the results shown, To achieve the results shown, you may need to configure you may need to configure more than one path element. more than one path element.

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 topics: • How the Depth and Position Settings Interact, page 104 • Example: Applying Rules to Elements that Change Positions, page 105

Design Studio User Guide 103 Chapter 4 Transformation Basics Applying Rules to Several Elements

• Example: Applying a Rule to a Range of Positions, page 106 • Example: Applying a Rule to Several Nested Tables, page 107 • Example: Clipping Links to Binary Data Files Across a Project, page 108 • Using a Relative Path to Specify a Rule Location, page 109 • Applying Rules Based on Element Attribute Values, page 111 • Applying the Move Rule to Several Elements, page 112

How the Depth and Position Settings Interact The depth and position settings work together, providing you with precise control over how narrowly or broadly a rule is applied. Table 12 describes how to set the Depth to Match and the Position to Match options based on how you want to apply a rule.

Table 12 Choosing Depth and Position Options

Depth to Match Position to To Apply a Rule to Setting Match Setting This exact element only Exact Exact This position of the element at all All Depths Exact depths This element and matching Any Descendant Exact descendant elements This depth of the element at all Exact All Positions positions Every occurrence of the element All Depths All Positions All positions of this element and Any Descendant All Positions matching descendant elements Several positions of this element at Exact Range this depth Several positions of this element at All Depths Range all depths Several positions of this element and Any Descendant Range matching descendant elements

104 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

Choosing depth and position settings that have your intended results may require some experimentation. If you are unsure how to achieve a particular result: • Test the position settings first, followed by the depth settings. • If changing just a depth or position setting does not work, then try combinations of those settings. • If a page has certain characteristics, such as a particularly flat hierarchy, rule iteration might not be possible by setting the depth or position settings. In such cases, you can insert an XPath expression to define the nodes you want to affect, as described in “Manually Configuring the XPath Expression of an Element,” page 177.

Example: Applying Rules to Elements that Change Positions 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: 1 Add the page to a project and create unique identifier rules for it. 2 Locate the table element for the table that you want to appear in the transformed page. 3 Right-click the table element and choose Select from the shortcut menu. 4 Click Drop All Parent Elements to select it. Drop parent elements unless they are required for a transformation. 5 In the Path to Selected Element area, click the last table element. 6 From the Depth to Match drop-down menu, choose All Depths. 7 From the Position to Match drop-down menu, choose All Positions. 8 Click the Select Relative Path button. The Relative Path Element dialog box appears.

Design Studio User Guide 105 Chapter 4 Transformation Basics Applying Rules to Several Elements

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. 10 Click OK and then click OK again.

Example: Applying a Rule to a Range of Positions Consider the following scenario: • Your XHTML includes several tables with the following structure: table a href="link" text element br [the above link/text/break pattern is repeated n times] table a href="link" text element br [the above link/text/break pattern is repeated n times]

• You want to clip the first two link/text/break combinations in each table at any depth.

To include all but the first two link/text/break combinations in each table configure the a element and the br element: 1 In the XHTML source view, right-click the first occurrence of the a element that you want to clip. 2 Choose Clip from the shortcut menu. 3 In the Configure: Clip Rule dialog box, scroll to the end of the Path to Selected Element list and click the a element. 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 5 Click OK. 6 In the XHTML source view, right-click the br element that immediately follows the a element you just worked with. 7 Choose Clip from the shortcut menu.

106 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

8 In the Configure: Clip Rule dialog box, scroll to the end of the Path to Selected Element list and click the br element. 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 10 Click OK.

Example: Applying a Rule to Several Nested Tables Consider the following scenario: • Your XHTML includes nested tables with the following structure: table tr td table table table td table table table

• You want to remove the borders of the nested tables. 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: 1 In the XHTML source view, right-click the first nested table element. 2 Choose Modify from the shortcut menu. 3 Click the Modify Element tab. 4 Change the value of “border” to 0. 5 Click the Configure Rule tab. 6 Scroll to the end of the Path to Selected Element list and click the table element.

Design Studio User Guide 107 Chapter 4 Transformation Basics Applying Rules to Several Elements

7 Configure the table element as follows: Match Element Name: selected Depth to Match: Exact Position to Match: All Positions 8 Click OK. In the browser view, the borders are removed only from the tables in the left-most column. 9 In the XHTML source view, right-click the table element that has the Modify icon ( ) and choose Edit Rule from the shortcut menu. 10 In the Path to Selected Element area, click the td element that immediately precedes the last table element. 11 Configure the td element as follows: Match Element Name: selected Depth to Match: Exact Position to Match: All Positions 12 Click OK. In the browser view, the borders are removed from the tables in both columns.

Example: Clipping Links to Binary Data Files Across a Project 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: 1 Assuming that you have already added pages to a project, click a page name (by default, the URL) in the project tree. 2 If the page does not contain a PDF link, open a different page. 3 In the project tree, click a device type for the page you want to work with. 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:

108 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

5 Choose Clip from the shortcut menu. 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. 7 In the Path to Selected Element area, click the last a element listed. 8 From the Depth to Match drop-down menu, choose All Depths. 9 From the Position to Match drop-down menu, choose All Positions. 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. 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. 12 Click OK.

Note If you divided your website pages across several projects, you need to perform the preceding procedure for each project.

Using a Relative Path to Specify a Rule Location

Each of the Configure dialog boxes contains a Select Relative Path button that enables you to specify a second node that the Application Gateway 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,” page 128.

Design Studio User Guide 109 Chapter 4 Transformation Basics Applying Rules to Several Elements

To specify a rule location: 1 In the Configure dialog box for the rule you are creating, click the Select Relative Path button. The Relative Path Element dialog box appears.

2 In the XHTML source view, click an element that can be used by the Application Gateway to locate where to apply the rule. 3 Click OK. 4 Complete the Configure dialog box and then click OK. The relative path element is added to the path tree.

110 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

Applying Rules Based on Element Attribute Values

By default, the Application Gateway ignores the values of element attributes. For example, if the Application Gateway 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 13 describes how to set the attributes area based on how you want to apply a rule. For an example, see “Example: Applying a Rule to All Occurrences of an Element with a Specified Attribute,” page 112.

Table 13 Changing How an Attribute is Matched

Value to Match Against Task The exact value of an attribute • Click the Operation drop-down arrow for the attribute and choose Equals. A portion of the value • Click the Operation drop-down arrow for the attribute and choose Contains. A different value for an attribute • Select the value of the attribute and change it. Then, click the Operation drop-down arrow for the attribute and choose either Equals, Contains, Not Equal, or Not Contain. An attribute with a value that starts • Select the value of the attribute with the specified text string and change it. Then, click the Operation drop-down arrow for the attribute and choose Starts With.

Design Studio User Guide 111 Chapter 4 Transformation Basics Applying Rules to Several Elements

Example: Applying a Rule to All Occurrences of an Element with a Specified Attribute Consider the following scenario: • You want to transform a page that is dynamically generated. • You want to include only one of several form elements in the transformed page. • You know that the location of the form changes. • The datasrc attribute value of the form is unique for the page. 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

Applying the Move Rule to Several Elements

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 “Moving an Element Tag,” page 87, 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 16.

112 Design Studio User Guide Chapter 4 Transformation Basics Applying Rules to Several Elements

Figure 16 Path to Source and Destination Folders

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: 1 In the Configure: Move Rule dialog box, click the Source tab. The Source tab lists the full path to the element that you selected. 2 In the Path to Selected Element area, click the element you are moving. 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.

Design Studio User Guide 113 Chapter 4 Transformation Basics Applying Rules to Several Elements

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 its XPath.

4 Click OK.

To move or copy to several locations: 1 In the Configure: Move Rule dialog box, click the Destination tab. 2 In the Path to Selected Element area, click the element before or after which you are moving the source element. 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. 4 Click OK.

114 Design Studio User Guide Chapter 5

Working with Pages and Elements

The following topics describe how to work with web pages and specific HTML elements: • Working with Pages, page 115 • Working with Dynamically Generated Pages, page 127 • Working with Frames and Windows, page 131 • Working with Tables, page 139 • Working with Forms, page 145 • Working with Images, page 146 • Disabling URL Rewriting for a Link, page 149 • Adding a Dialable Phone Number, page 151 • Grouping Links, page 157 • Forcing a Card Break, page 161 • Forcing a Line Break, page 161 • Specifying the Input Type for IP Phone Input Fields, page 162 • Defining Soft Keys, page 164 • Refreshing a Page, page 172

Working with Pages Before you create transformation rules for individual web pages, check all of the pages for patterns. If you find pages that follow the same pattern or template, you can use Design Studio to create transformation rules for one page and apply the rules to all like pages.

Design Studio User Guide 115 Chapter 5 Working with Pages and Elements Working with Pages

The following topics describe how to work with pages: • Transforming Template-Based Pages, page 116 • Transforming Pages Using a Default Set of Transformation Rules, page 117 • Dividing a Web Page into Several Pages, page 118 • Transforming Query and Results Pages, page 124

Transforming Template-Based Pages

If a group of pages is created from a template and you want to perform the same transformation on each page, you can create a project for the pages and apply one set of transformation rules to each page in the project. If the page template subsequently changes, you only have one page to update in Design Studio, rather than many.

To transform template-based pages: 1 Create a project for the template-based pages. Each Configure dialog box allows you to apply a rule to the current page or to all pages in a project. By putting the template-based pages in a separate project, you can apply rules to all pages in that project. 2 Add one of the template-based pages to the project. 3 When you create page identifier rule(s), choose one or more identifiers that uniquely identify all pages in the project. The identifiers need to match all template-based pages but do not need to match any other page types. Suppose that the URL and title elements for the pages have these characteristics: • The URL for all template-based pages starts with www.company.com/products • Other types of pages are also at www.company.com/products • The title element for all template-based pages includes the string “Product Line:” To uniquely identify the template-based pages, use a combination of the URL (www.company.com/products) and title element (Product Line:). 4 Apply the Select rule to the main content that you want to include.

116 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Pages

5 In the Configure: Select Rule dialog box, click the Project radio button to apply the Select rule to all pages in the project, configure the rule as needed, and click OK. 6 Apply other rules to the page as needed. Be sure to click the Project radio button in each Configure dialog box. 7 Click the Browse tab and browse to the next page that you want to include in this project. If you have set up the identifier rules correctly, the lower-left pane of the Design Studio window indicates that the page passes the identifier rules of the first page that you added. If this does not occur, return to the first page and correct the identifier rules. 8 Click Add to Configuration. The rule that you applied to the first page also transforms the newly added page. 9 Repeat Step 7 and Step 8 for each template-based page.

Transforming Pages Using a Default Set of Transformation Rules

A configuration file can include a default set of transformation rules for any page that does not have an associated identifier rule. By including a default set of transformation rules, you can transform all proxied pages that do not have identifier rules without having to include those pages in a project and individually apply identifier and transformation rules to them.

To transform pages by using a set of default rules: 1 Open the configuration file and scroll down to the last project in the file. 2 Add to the end of the project a page that you want to transform using a default set of transformation rules.

Note The default set of transformation rules must be defined on the last page of the last project of a configuration file. Otherwise, the default rules will not apply to any page.

3 Do not create any identifier rules for the added page.

Design Studio User Guide 117 Chapter 5 Working with Pages and Elements Working with Pages

4 Create the default set of transformation rules for the added page. 5 Save and publish the configuration file. 6 Test the default transformation by using a supported device to request pages that do not have associated identifier rules. Those pages should reflect the default transformation.

Dividing a Web Page into Several Pages

Since web pages can contain more information than is reasonable to send to a microbrowser, you can use Design Studio to manually paginate a web page, effectively creating multiple views of the page. For example, if a page contains four categories of links, you can “divide” the page into four smaller pages, each containing one category of links. To paginate a page, you apply a Paginate Anchor rule to the link that points to the content you want to divide. By paginating an anchor, you are creating several links where there was originally just one link. Each link corresponds to a different view of the content. You define those views by using transformation rules. Suppose that a page contains the text “Overview,” which is linked to overview.html as shown in Figure 17. The page overview.html contains three categories of information with the headings “Features,” “Solutions,” and “Technology.”

118 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Pages

Figure 17 Before Pagination

Rather than sending all of overview.html at once, you want to break the information into three chunks. Design Studio enables you to replace the “Overview” link with three links and then define the content that should appear when a user follows those links. In this example, you might replace “Overview” with three links using the headings “Features,” “Solutions,” and “Technology.” Design Studio creates a link from each heading to overview.html as shown in Figure 18. You then define how overview.html should appear when a user follows the links from “Features” or the other headings.

Figure 18 After Pagination

Design Studio User Guide 119 Chapter 5 Working with Pages and Elements Working with Pages

The general process for manually paginating a page is as follows: 1. Create links to the page that you want to paginate. Add the page that contains the link to the content that you want to paginate. Apply the Paginate Anchor rule to the link, specifying the number of links that you want to create and the text for each link. 2. Define how the content should appear for each link. Use the Browse tab to follow a link you created. Add the page to the project and then create identifier and transformation rules for it. If the Paginate Anchor rule does not have the intended results, make sure that you are not inadvertently creating invalid HTML.

Note Relative links (such as a href="#") and unclosed a elements are not supported.

To create links to the page you want to paginate: 1 In the project tree, click a device type. 2 In the XHTML source view, right-click the a href element that contains the link to the page that you want to paginate. By paginating a link, you will create two or more links in addition to or instead of the original link. 3 Choose Paginate Anchor from the shortcut menu.

The Configure: Paginate Anchor Rule dialog box appears.

120 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Pages

4 Choose each device type to which you want to apply the rule. 5 In the Number of Manual Paginations text box, enter the total number of views that you want to create for the destination page. For example, if you want to create a total of four links that point to four different views of one page, enter 4. 6 Click the Insert Element tab. The Insert Element tab appears.

Design Studio User Guide 121 Chapter 5 Working with Pages and Elements Working with Pages

Use the Insert Element tab to specify the text that you want to appear before, after, or instead of the existing link. The inserted text will display on the transformed page and should uniquely identify each view of the destination page. 7 Select the location for the inserted text as follows: • To replace the existing link, choose Replace all Children. • To put the inserted text before the existing link, choose Before Anchor’s Children. • To put the inserted text after the existing link, choose After Anchor’s Children. 8 In the text box for tab 1, enter the text for the first link. For example, if you want the word “Headquarters” followed by a br element, type Headquarters
.

122 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Pages

9 Click tab 2 and enter the text and any XHTML elements for the next link.

10 Repeat Step 9 for each tab. 11 Click OK. The text that you entered in each tab on the Insert Element tab displays in the HTML source view. The Paginate Anchor icon ( ) indicates the anchor that you paginated. An identifier rule, which you cannot edit or delete, displays for the paginated page.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

After you create the links, you define how the page is to be transformed for each view.

To define a view of a page: 1 Verify that the links you just created are visible in the Design Studio window. If they are not visible, click in the project tree the page that contains the links. 2 Click the Browse tab.

Design Studio User Guide 123 Chapter 5 Working with Pages and Elements Working with Pages

3 Click a link that you created. The destination page appears. 4 In the lower left pane, click Add to Configuration. The Add Page to Project dialog box appears.

5 Enter a descriptive page name and then click OK. The Identifier Rules area lists an identifier rule for the page. That rule is created by Design Studio when you applied the Paginate Anchor rule. 6 Create an identifier rule as described in “Identifying a Page,” page 49. 7 In the project tree, click a device type. 8 Apply transformation rules to specify the content that you want to display when a user follows the link. For example, you might want to select just the content that you want displayed. This view that you define will display when a user clicks the corresponding link. 9 To define the view for the remaining links, repeat Step 3 through Step 8 for each link.

Transforming Query and Results Pages

Most query and results pages follow a similar pattern: A query page includes input elements and results pages can contain a variable number of results. Suppose that a query form has the following general setup: body ... table formbegin table [this table contains the query form]

124 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Pages

formend ...

In the following example, you will include only the query form in the transformed page.

To transform the query page: 1 Add the query page to a project and create unique identifier rules for it. 2 Apply the Select rule to the table element that contains the query form. Design Studio automatically selects the formbegin and formend elements. 3 If the table contains elements that you do not want to include in the transformed page, apply the Clip or Ignore rules as appropriate.

Now you are ready to transform the results page. In this case, the results page is a list of links, each followed by a brief description of the link destination. Suppose that the results page has the following general setup: body ... table p a href [a results link; you want to keep this] font [descriptive text you want to clip] p a href [the second results link] font p a href font blockquote p a href [a sub-link, indented under the third result] font ...

For this example, you want to include only the links, not the descriptions.

Design Studio User Guide 125 Chapter 5 Working with Pages and Elements Working with Pages

To transform the results page: 1 Click the Browse tab. 2 Submit a query. The results page displays. 3 Click Add to Configuration to add the results page to the project. 4 Create unique identifier rules for the page. 5 Right-click the first font element (corresponding to the descriptive text). The easiest way to handle the page in this example is to clip the descriptive text and any other elements that you do not want in the transformed page. 6 Choose Clip from the shortcut menu. 7 In the Path to Selected Element area, click the last font element listed. Because all descriptive text is contained in a font element, you only need to clip the first instance of the font element and apply it across other font elements as follows: • To all depths—When you apply the Clip rule to all depths, you will also clip the font element that is included in the blockquote element at a different depth. • To all positions—When you apply the Clip rule to all positions, you will clip the font element for each result down the page. 8 From the Depth to Match drop-down menu, choose All Depths. 9 From the Position to Match drop-down menu, choose All Positions. 10 Click OK. 11 Apply the Clip rule to other elements on the page that you do not want to include in the transformed page.

126 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Dynamically Generated Pages

Working with Dynamically Generated Pages Dealing with dynamically generated content requires that you understand how a page is constructed, how it changes, and how to uniquely identify the information you want to retain. For example, you can ask yourself: Does the page consist of a variable number of tables that may not always appear in the same location? If so, and you want to select just one table, you need to apply the Select rule to the table and use the Advanced setting to specify an element that Design Studio can use to locate the table. To identify the page on which dynamically generated content appears, use the Tag Contains identifier rule to specify the contents of an element that uniquely identifies the generated page. To handle dynamically generated content, configure one or more elements that are in the path of a selected element. The way in which the content changes determines how you should configure elements, as follows: • If text changes, match on any text or on only the text that remains static. • If an element’s position changes, try matching on all positions of the element. If that does not provide the intended results, also match on all depths or try manually configuring the element. • If the content structure changes, try skipping tags. For example, if tables are nested at different depths when they are dynamically generated, skip the extra tags. • If an element does not have a static location on the page, you might need to use the Advanced setting in order to uniquely identify the element. 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, use the Advanced setting to associate the table with a unique element that the Application Gateway can use to locate the table. For more information, see “Specifying a Rule Location on a Dynamically Generated Page,” page 128. When you test your transformation rules on dynamically generated pages, be sure to follow as many different paths through the content as possible to ensure that the rules handle all possible generated content. For an example of how to handle dynamically generated content, see “Example: Applying Rules to Dynamically Generated Content,” page 129.

Design Studio User Guide 127 Chapter 5 Working with Pages and Elements Working with Dynamically Generated Pages

Specifying a Rule Location on a Dynamically Generated Page

When you apply a rule to a node, Design Studio includes in the rule the relative location of the node. Thus, if you apply the Select rule to the fourth table on a page, the Select rule will affect only the fourth table, not some other table. That method of locating rules always works for static web pages but does not always work for dynamically generated pages. For example, when you create a rule for a dynamically generated page, the table that is currently in the fourth position might change positions. When that occurs, the Application Gateway will not have enough information to determine where to apply the rule. Each of the Configure dialog boxes contains a Select Relative Path button that enables you to specify a second node that the Application Gateway can use in determining where to apply a rule. For example, perhaps the particular table that you want to select contains a unique image or follows a particular text element. You can specify the image or text element as a way to locate the rule.

To specify a rule location on a dynamically generated page: 1 In the Configure dialog box for the rule you are creating, click the Select Relative Path button. The Relative Path Element dialog box appears.

2 In the XHTML source view, click an element that can be used by the Application Gateway to locate where to apply the rule. For example, if the table you are transforming always includes a particular image, click the img element.

128 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Dynamically Generated Pages

3 Click OK. 4 Complete the Configure dialog box as usual and then click OK.

Example: Applying Rules to Dynamically Generated Content

The following example explains how to work with a dynamically generated table with these characteristics: • The first row of the table contains column headings. • The table contains a variable number of rows. • The table contains a variable number of columns. You want to retain only the first three columns.

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 1a 1b 1c 1d 1e 2a 2b 2c 2d 2e 3a 3b 3c 3d 3e 4a 4b 4c 4d 4e

Suppose that the table has the following general setup: table tr [this row contains the column headings] th th th th [Heading 4, to be clipped] th [Heading 5, to be clipped] tr [the first row containing dynamically generated text] td td

Design Studio User Guide 129 Chapter 5 Working with Pages and Elements Working with Dynamically Generated Pages

td td [cell 1d, to be clipped] td [cell 1e, to be clipped] tr [the second row containing dynamically generated text] td td td td [cell 2d, to be clipped] td [cell 2e, to be clipped] ...

To transform the dynamically generated table: 1 Add the page to a project and create unique identifier rules for it. 2 Clip the th elements for Heading 4 and Heading 5. 3 Right-click the td element that corresponds to cell 1d. 4 Choose Clip from the shortcut menu. 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. 6 From the Depth to Match drop-down menu, choose All Depths. This step clips cells in each row for this column. 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. 8 Click OK. 9 Apply the Clip rule to other elements on the page that you do not want to include in the transformed page.

130 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Frames and Windows

Working with Frames and Windows Design Studio enables you to work with pages that contain frames (frame or iframe elements) or that open windows. You can use the Frames and Windows rule to either select the frames and windows to be included in the transformed page or to redirect the page to one of its frames or windows. You can use other Design Studio rules to further transform the included frames and windows. Design Studio provides two views of a page that contains frames or opens windows. The Browse tab displays frames similarly to how they appear in a desktop browser. For example, frames that display side-by-side in a desktop browser will display side-by-side in the Browse tab. If you use the Frames and Windows rule to eliminate some frames from a page, the Browse tab will show a blank area where the removed frames originally displayed. The Edit and Original View tabs display the contents of each frame or window sequentially in a single document. The frames are ordered according to their position in the source document. Within a frameset, frames are displayed sequentially. Window content is added to the end of the page, along with a Close button or link. Suppose that a web page contains three frames (Links, Contents, Articles) and a link that opens a new window (Help), as shown below:

Design Studio displays that page in the Edit and View Original tabs as follows.

Design Studio User Guide 131 Chapter 5 Working with Pages and Elements Working with Frames and Windows

Note the following about the rendering of frame and window contents: • In the original web page, the frame titled “Contents” appears at the top of the page. When viewed in the Edit and View Original tabs, the “Contents” section appears after the end of the “Links” section. Design Studio and the Application Gateway order frames based on their position in the source code. • In the original web page, clicking the link “Help” results in the creation of a new window. When viewed in the Edit and View Original tabs, clicking the link “Help” adds the contents of the Help window and a Close button or link to the end of the rendered page. The order in which a window’s contents are rendered is not affected by user actions that bring the window to the front in the original web page.

132 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Frames and Windows

Guidelines for Transforming Frames and Window Content

The Design Studio XHTML source view includes frame information enclosed in document-summary, document-set, document-frame, and document-body tags, as shown in the following example.

Those tags are used as follows: • The document-summary tag is useful as an identifier for popup windows. For more information, see Creating Identifier Rules on Pages with Frames or Windows, page 134. You cannot apply a transformation rule to this tag. • The document-set and document-frame tags are used by Design Studio to manage frames. You cannot apply transformation rules to these tags. • The document-body tag is useful as an identifier for frames and windows. For more information, see Creating Identifier Rules on Pages with Frames or Windows, page 134. You cannot apply a transformation rule to this tag. When transforming a page that contains frames or that contains code to open new windows, follow these guidelines: • When you need to refer to the original page layout and operation, go to the Browse tab. • To locate the start of a frameset in the Edit tab, choose Edit > Find and search for document-set. To locate the start of a frame or window, search for document-body. • Use the Frames and Windows rule to choose the frames to display or to redirect the page to a particular frame, as described in “Selecting Frames or Redirecting a Page to a Frame,” page 137.

Design Studio User Guide 133 Chapter 5 Working with Pages and Elements Working with Frames and Windows

• Work with frames or window content that you want to transform just as you would with any other page. For example, to improve usability on microbrowsers, consider using the Paginate Anchor rule to paginate selected links, as described in Dividing a Web Page into Several Pages, page 118.

Creating Identifier Rules on Pages with Frames or Windows

Each frame and window referenced from a page is associated with a unique URL which is referenced in the document-body tag. Applying a Tag Contains identifier rule to the document-body tag and setting its url attribute operation to "Equals" is generally sufficient to distinguish one frameset from another. You can also identify a frame or window by some other unique content, just as you might for some pages. An additional identifier is needed when you include a window, in order to correctly associate your transformation rules to the state of the page (that is, whether a window is open). The document-summary tag contains an _open_windows attribute that indicates the number of windows open. When you first open a page, the _open_windows attribute is "1". When you open a window, the _open_windows attribute changes to "2". Because your transformed page will contain content that is present whether or not the additional window is opened, you need to identify the page using both values of the _open_windows attribute.

To identify a page containing frames or windows: 1 After you add the page to your project, locate the page in the project tree and click Identifier Rules. 2 In the XHTML source view, right-click the document-body tag for the frame or window that you want to include. 3 Choose Tag Contains from the shortcut menu. 4 From the Operation drop-down menu for the url attribute, choose Equals.

134 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Frames and Windows

5 Click OK. 6 If the page contains a window that you will include in the transformation, create another identifier rule that will reflect the state of the windows (open or closed): In the XHTML source view, right-click the document-summary tag. 7 Choose Tag Contains from the shortcut menu. 8 From the Operation drop-down menu for the _open_windows attribute, choose Equals.

Design Studio User Guide 135 Chapter 5 Working with Pages and Elements Working with Frames and Windows

9 Click OK. Your transformation rules will operate on the content, provided that the device user has not opened a window. 10 To make the transformation rules also work if a window is opened: a. Click the Browse tab and then click the link that opens the window. b. Click the Edit tab. Notice in the XHTML source view that the document-summary _open_windows attribute is now set to "2". c. Repeat steps 6 through 9.

136 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Frames and Windows

Selecting Frames or Redirecting a Page to a Frame

The Frames and Windows rule enables you to quickly select the frames, by name, that you want to include in a transformed page. Alternatively, you can choose to redirect a page to one of its frames.

To select the frames to include in a transformed page: 1 In the project tree, click a device type. 2 In the XHTML source view, right-click the page and choose Frames and Windows from the shortcut menu. The Configure: Frames and Windows dialog box appears. 3 Choose each device type to which you want to apply the rule. 4 From the menu, choose Show Frames or Windows.

5 Select the check box for each frame or window that you want to include. 6 Click OK. 7 To review the selected frames, go to the Browse tab.

Design Studio User Guide 137 Chapter 5 Working with Pages and Elements Working with Frames and Windows

To redirect a page to a frame or window: 1 In the project tree, click a device type. 2 In the XHTML source view, right-click the page and choose Frames and Windows from the shortcut menu. The Configure: Frames and Windows dialog box appears. 3 Choose each device type to which you want to apply the rule. 4 From the menu, choose Redirect to frame or window.

5 Click the frame or window name that you want to display when the page URL is requested. 6 Click OK. The Edit tab displays a message and the URL that will display when the page is redirected.

138 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Tables

Working with Tables Some devices, such as Palm and RIM devices and some WML-based phones, support tables. For those devices, you can choose whether to retain a table as a table element or to have the Application Gateway transform the table element to a list. For more information, see “Retaining Formatting,” page 139. You can also convert a table to a list for all devices. A list displays better than a table on most small microbrowser screens. Suppose that a web page contains the following table:

1a 1b 1c 2a 2b 2c 3a 3b 3c

By using four Ignore and Modify rules, you can convert a table of any number of columns and rows to a list. The table cells list by rows, as follows: 1a 1b 1c 2a 2b 2c 3a 3b 3c

For more information, see “Converting a Table to a List,” page 142.

Retaining Formatting

The Retain Format rule toggles the value of the DDF retainformat key. One use of the Retain Format rule is to retain a table as a table element. You can also use the Retain Format rule to retain small images on some devices, as described in “Retaining a Small Image,” page 148.

Design Studio User Guide 139 Chapter 5 Working with Pages and Elements Working with Tables

For devices that support tables, the Application Gateway determines how to transform a table, as follows: • If the DDF for the device includes the retainformat key, the Application Gateway retains the table if the key is set to "yes" and converts the table to a list if the key is set to "no". • If the DDF for the device does not include the retainformat key, the Application Gateway retains the table. You can toggle the retainformat setting by applying a Retain Format rule. Suppose that the retainformat key is set to "no" and you have a web page with the following nested tables: table1 table2 table3

If you apply the Retain Format rule to table1, it is retained as a table. If you also apply the Retain Format rule to table2, it is not retained, because the rule toggles the retainformat setting. If you also apply the Retain Format rule to table3, it is retained as a table.

Note If a device supports left-to-right scrolling, a retained table will be scrollable.

To override the DDF retainformat setting: 1 Check the value of the DDF retainformat key for each device type that you support. You need to apply a Retain Format rule only if you want to change the setting for a particular element, or toggle the setting on a page. 2 In the project tree, click a device type. 3 In the XHTML source view, right-click the element for which you want to change the retainformat setting. 4 Choose Retain Format from the shortcut menu.

140 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Tables

The Configure: Retain Format Rule dialog box appears.

5 Optionally, change the rule name, perhaps using a brief description of its content, such as “Retain product table.”

Design Studio User Guide 141 Chapter 5 Working with Pages and Elements Working with Tables

6 Choose how to apply the rule: • Click the Project radio button to apply the rule to all pages in this project. • Click the This Page radio button to apply the rule only to this page. 7 Choose each device type to which you want to apply the rule. 8 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

Design Studio displays the results of the Retain Format rule. The Retain Format icon ( ) shows where you applied the rule.

The Retain Format rule that you applied toggles the value of the retainformat key. Apply the rule to another element if you want to toggle the value again on the same page.

Converting a Table to a List

To convert a table to a list, you create rules to transform the table as follows: • Ignore the table element. • Modify tr elements to ul elements. • Modify td elements to li elements. Regardless of the number of rows and columns in a table, you need only four rules to convert it to a list.

142 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Tables

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: 1 In the project tree, click a device type. 2 In the XHTML source view, right-click the table element that you want to convert. 3 Choose Ignore from the shortcut menu. You ignore the table element because you are converting it to a list. 4 Choose each device type to which you want to apply the rule. 5 Click OK. 6 In the XHTML source view, right-click the first tr element after the table element. 7 Choose Modify from the shortcut menu. 8 Click the Modify Element tab. 9 From the Single HTML/XML Element menu, choose ul. 10 Click OK.

Design Studio User Guide 143 Chapter 5 Working with Pages and Elements Working with Tables

11 In the XHTML source view, right-click the td element immediately below the tr element that you just modified. 12 Choose Modify from the shortcut menu. 13 In the Path to Selected Element area, scroll down to the last td element listed and click it. 14 From the Depth to Match drop-down menu, choose All Depths. 15 From the Position to Match drop-down menu, choose All Positions.

By applying this rule to all depths and positions, you ensure that all cells are included in the list. 16 Click the Modify Element tab. 17 From the Single HTML/XML Element menu, choose li. 18 Click OK. The table converts to a list. Depending on the structure of the table, you might need to ignore some tr elements to eliminate blank lines in the transformed table.

144 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Forms

Working with Forms When transforming forms, consider the usability of the form on a device. For example, a drop-down menu with 50 items will be difficult to use on a microbrowser and should be shortened if possible. You should also consider the information needed by an application server to process the form. The application server may need information provided by fields that you do not want displayed in a microbrowser. The following guidelines will help you handle those types of issues: • Reduce the number of choices in a Select object or drop-down menu. • Change a text box to a drop-down menu to improve usability on a microbrowser screen. • Form controls must be wrapped in a form element. • 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 rearrange the elements. • If you do not want to include the entire form in a transformation, determine whether the application server needs a particular element before you choose to exclude it from the selection. The default setting of a check box, radio button, or Select object may be required by an application server to process the form. You can pass the default to the application server, but hide the element from the user, by changing the type attribute of the element to "hidden". Suppose that a form includes a Select object, input box, and Submit button. You want to include in the transformed form only the input box and the Submit button; you do not want the user to change the default value of the Select object. If you apply the Select rule to the input box and the Submit button, the Select object will not be submitted to the application server and the form will not work. To submit the default value of the Select object, but hide it from the device user, change the type attribute of the Select object to "hidden".

Design Studio User Guide 145 Chapter 5 Working with Pages and Elements Working with Images

• For some IP phones, you can specify the input type of input or textarea elements. For example, you can limit the acceptable input to a telephone number or to uppercase letters. For more information, see “Specifying the Input Type for IP Phone Input Fields,” page 162. • For WAP devices, input fields that are created with textarea elements are automatically transformed to input elements. • For WAP devices, the Application Gateway considers check boxes and radio buttons to be in an unselected state even if an input element includes the checked attribute. Device users must select a check box or radio button in order for the Application Gateway to recognize it as selected.

Working with Images The Application Gateway converts GIF, JPEG, and BMP images into a format recognized by the requesting device. However, if an image is smaller than 20 pixels in both width and height, the Application Gateway does not send it to WAP or cHTML devices or IP phones. Some devices do not support the display of images, so the Application Gateway does not send images to them. In those cases, if an img element or input element (type="image") has an alt attribute, the Application Gateway sends the alternate text instead of the image. If an input element (type="image") does not have an alt attribute, the Application Gateway 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: • If an img element or an input element (type="image") has alternate text that you want to send instead of the image, use the IMG ALT rule. For more information, see “Using Alternate Text Instead of an Image,” page 147.

Note If an input element is being used as an image map in the HTML, the IMG ALT rule does not work.

146 Design Studio User Guide Chapter 5 Working with Pages and Elements Working with Images

• To exclude a particular image or its alternate text, clip the image. For example, you might choose to clip images to save space on the microbrowser screen or to reduce the download time of a page. • For WAP phones that do not support images, if an input element uses an image (type="image") instead of a submit button (type="submit") and an alt attribute is not specified, the Application Gateway sends a button labeled “Submit.” You can change the label by using the Modify rule to add an alt attribute to the input element. This feature is useful if a form has several Submit buttons. • To retain a small image, apply the Retain Format rule to the img element as described in “Retaining a Small Image,” page 148.

Using Alternate Text Instead of an Image

To use alternate text instead of an image: 1 In the XHTML source view, right-click the img element with the alternate text that you want to use instead of the image.

Note The img element must be part of an area that has a Select rule applied. The IMG ALT rule does not select an image.

2 Choose IMG ALT from the shortcut menu. The Configure: IMG ALT Rule dialog box appears. 3 Choose how to apply the rule. 4 Choose each device type to which you want to apply the rule. 5 Click OK. The IMG ALT icon ( ) shows where you applied the rule.

Note If you are working with content on a dynamically generated page, you might need to click the Select Relative Path button to uniquely identify an element that does not have a static location on the page. For more information, see “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

Design Studio User Guide 147 Chapter 5 Working with Pages and Elements Working with Images

You can apply one IMG ALT rule to multiple elements. In the Configure: IMG ALT Rule dialog box, click the img element in the Path to Selected Element area, and then change the depth and position settings.

Retaining a Small Image

By default, the Application Gateway does not send images that are smaller than 20 pixels in both width and height to WAP or cHTML devices or IP phones.

To retain an img element: 1 In the project tree, click a device type. 2 In the XHTML source view, right-click the img element that you want to retain. 3 Choose Retain Format from the shortcut menu.

The Configure: Retain Format Rule dialog box appears. 4 Optionally, change the rule name, perhaps using a brief description of its content, such as “Retain spacer image.” 5 Choose how to apply the rule: • Click the Project radio button to retain the img element on all pages in this project. • Click the This Page radio button to retain the img element only on this page. 6 Choose each device type to which you want to apply the rule.

148 Design Studio User Guide Chapter 5 Working with Pages and Elements Disabling URL Rewriting for a Link

7 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

Design Studio displays the results of the Retain Format rule. The Retain Format icon ( ) shows where you applied the rule.

Disabling URL Rewriting for a Link By default, the Application Gateway prepends its IP address to links in transformed pages. When a device user selects a link on a transformed page, the request is directed to the Application Gateway. You can turn off URL rewriting for individual links by using the Disable URL Rewrite rule. You might want to disable URL rewriting for situations such as the following: • If a link points to another Application Gateway. By turning off URL rewriting, you enable the second Application Gateway to take over the session. • If a link points to a site that performs browser detection and delivers device-appropriate content.

To disable URL rewriting for a link: 1 In the project tree, click a device type. 2 In the XHTML source view, right-click the a href or area href element that contains the link that you do not want the Application Gateway to rewrite. 3 Choose Disable URL Rewrite from the shortcut menu.

Design Studio User Guide 149 Chapter 5 Working with Pages and Elements Disabling URL Rewriting for a Link

The Disable URL Rewrite Rule dialog box appears. 4 Optionally, change the rule name. 5 Choose how to apply the rule: • Click the Project radio button to apply the rule to all pages in this project. • Click the This Page radio button to apply the rule only on this page. 6 Choose each device type to which you want to apply the rule. 7 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

Design Studio displays the results of the rule. The Disable URL Rewrite icon ( ) shows where you applied the rule.

150 Design Studio User Guide Chapter 5 Working with Pages and Elements Adding a Dialable Phone Number

Adding a Dialable Phone Number

Note This feature is available only for some IP phones. For more information on the IP phones that you have licensed, go to the Design Studio Help menu and choose Device Help.

Some IP phones enable a user to initiate a phone call by selecting text in the microbrowser. Use the Design Studio Dial Number rule to specify a phone number to be dialed when the user selects a particular text string. By default, a phone number cannot be edited by the phone user; you can allow a phone user to change a phone number. While creating the Dial Number rule, you work with two text elements—the text that includes the phone number and the text that you want to use as a label for the phone number. For example, in a directory listing, you would use the text associated with a phone number as its label.

To add a dialable phone number: 1 In the project tree, click a device type. 2 In the XHTML source view, right-click the text element where you want to apply the Dial Number rule. You must select a text element that includes the phone number.

Note The phone number must be part of an area that has a Select rule applied. The Dial Number rule does not select the phone number for transformation.

3 Choose Dial Number from the shortcut menu.

Design Studio User Guide 151 Chapter 5 Working with Pages and Elements Adding a Dialable Phone Number

The Configure: Dial Number Rule dialog box appears. 4 Optionally, change the rule name, perhaps using a brief description of its content, such as “Dial tech support.” 5 Choose how to apply the rule: • Click the Project radio button to add the dialable number to all pages in this project. • Click the This Page radio button to add the dialable number only to this page. 6 Choose each device type to which you want to apply the rule. 7 From the Dial Label drop-down menu, choose whether you want to display the label text with the phone number. 8 Optionally, enter a prefix for the phone number. 9 Click the Label tab, and then click Select Label. The Label Element dialog box appears.

10 In the XHTML source view, select the text element that contains the label for the phone number.

152 Design Studio User Guide Chapter 5 Working with Pages and Elements Adding a Dialable Phone Number

11 Click OK. The Label tab displays the path to the element that contains the label.

12 To apply the Dial Number rule only to this phone number, click OK. Otherwise, see “Applying the Dial Number Rule to Several Elements,” page 154. Design Studio displays the results of the Dial Number rule. The Dial Number icon ( ) indicates a dialable phone number and its label. If you enter a prefix, it is included on the transformed page.

Design Studio User Guide 153 Chapter 5 Working with Pages and Elements Adding a Dialable Phone Number

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

Applying the Dial Number Rule to Several Elements

A Dial Number rule contains path information for both the dialable number and its label. When you create a Dial Number rule, as described in “Adding a Dialable Phone Number,” page 151, the Configure: Dial Number Rule dialog box includes the path to the phone number and label as shown in Figure 19.

154 Design Studio User Guide Chapter 5 Working with Pages and Elements Adding a Dialable Phone Number

Figure 19 Path to Phone Number and Label

You can apply the Dial Number rule to several phone numbers and labels. Suppose that you want to make all numbers in a directory listing dialable. You can do that with one Dial Number rule by applying the rule to several pairs of phone numbers and label elements.

To apply the Dial Number rule to several phone numbers: 1 In the Path to Selected Element area, click the phone number that you want to be dialable. 2 Specify how you want Design Studio to match other phone numbers that you want to be dialable. For example, if all phone numbers that you want to be dialable have a common prefix, such as "(800)", choose Starts With from the Operation drop-down menu, change Match Text to "(800)", and choose All Positions from the Position to Match drop-down menu, as shown in the following example.

Design Studio User Guide 155 Chapter 5 Working with Pages and Elements Adding a Dialable Phone Number

3 Click OK.

To apply the Dial Number rule to the label for each dialable phone number: 1 In the Configure: Dial Number Rule dialog box, click the Label tab.

Note This procedure assumes that you have already specified a label for the Dial Number rule when you created it. For more information, see “Adding a Dialable Phone Number,” page 151.

The Label tab lists the path to the element that you selected for the label. 2 In the Path to Selected Element area, click the text you chose for the label. 3 Specify how you want Design Studio to match other labels. 4 Click OK.

156 Design Studio User Guide Chapter 5 Working with Pages and Elements Grouping Links

Grouping Links

Note This feature is available only for WAP phones and some IP phones. For more information on the IP phones you have licensed, go to the Design Studio Help menu and choose Device Help.

By default, the Application Gateway converts a series of links (a href elements) to a numbered list of links on WAP phones and some IP phones. A phone user can choose a link by using the keypad rather than by scrolling through the list. If a list of links contains other elements that you do not want to include in the transformation, apply the Group rule to remove all but the a href elements. The Group rule operates on an element and all of its child elements, eliminating all elements other than a href elements. If you apply rules inside of a group, be sure to apply them to the links; rules applied to other dropped elements will not take effect. Figure 20 shows a portion of a table as viewed in a desktop browser. Figure 21 shows the transformation if the Select rule was used to select the table. Figure 22 shows the transformation when the Group rule is applied to the table. The Group rule eliminates all content except for the links (Movies, Television, Games).

Figure 20 Original Table in Desktop Browser

Design Studio User Guide 157 Chapter 5 Working with Pages and Elements Grouping Links

Figure 21 Table Selected for WAP Phones

Figure 22 Table with Group Rule Applied

Note Some devices allow you to select a link by pressing a keypad number that corresponds to the link. On such devices, the links will be numbered.

You must apply the Select rule to an element that contains the links that you want to group. For example, if a table contains four cells, each with several links, you might apply the Select rule to the table element and use the Group rule on one td element (applying it to all positions) in order to number all links. Alternatively, you might apply the Select rule to an element that contains the table and apply the Group rule to the table element.

158 Design Studio User Guide Chapter 5 Working with Pages and Elements Grouping Links

To group links: 1 In the project tree, click a device type. 2 Apply a Select rule to an element that contains the links to be grouped. For example, if the links are all contained in td elements, consider selecting the parent tr or table element. For information on creating a Select rule, see “Selecting Content,” page 67. 3 In the XHTML source view, right-click an element that contains the links that you want to group. As you determine where to place a Group rule for WML-based devices, consider that each group that you create will be sent to the device as a separate screen. For XML-based IP phones, consecutive groups will appear on the same card. The IP phone will paginate the content of a group as needed. 4 Choose Group from the shortcut menu.

The Configure: Group Rule dialog box appears. 5 Optionally, change the rule name, perhaps using a brief description of its content, such as “News links.” 6 Choose how to apply the rule: • Click the Project radio button to add the Group rule to all pages in this project. • Click the This Page radio button to add the Group rule only to this page. 7 Choose each device type to which you want to apply the rule.

Design Studio User Guide 159 Chapter 5 Working with Pages and Elements Grouping Links

8 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

Design Studio displays the results of the Group rule. The Group icon ( ) shows where you applied the rule. 9 If you applied a Group rule, click the Preview tab and review the resulting screens and navigation. You might want to refine the transformation further.

After you create a Group rule, you can change the grouped links as follows: • Insert content before or after an a href element. • Move content from the grouped area so that it is included in the transformed page. • Clip a link. • Modify a link. For example, you can change a label or URL.

Note Do not apply a Select rule inside of grouped links. A Select rule overrides the Group rule and removes the grouped links from the transformed page.

160 Design Studio User Guide Chapter 5 Working with Pages and Elements Forcing a Card Break

Forcing a Card Break The Application Gateway breaks pages into cards based on the requirements of a particular device and various DDF settings. You might encounter instances in which the automatic page break is not ideal. For example, two related elements might be separated. In such cases, you can apply the Force Card Break rule in order to force a card break so that related items appear together.

Note If you need to place a card break inside of elements that have a Group rule applied, be sure to apply the Force Card Break rule to a link because all other elements will be dropped.

To force a page break: 1 In the project tree, click a device type. 2 Determine where you want the break to occur by viewing the page in the Preview tab. If the Preview tab is not supported for your device type, check the page on a device. 3 In the XHTML source view, right-click the element where you want the break to occur. 4 Choose Force Card Break from the shortcut menu. 5 In the Configure dialog box, click OK. Design Studio inserts the break. The Force Card Break icon ( ) shows where you applied the rule.

Forcing a Line Break For WML devices, the Application Gateway removes line breaks (br elements) that do not enclose text or structural elements. To force a line break, you can either modify a br element to include the _forced attribute or you can insert a br element.

To force a line break: 1 Determine in the transformed page where you want the break to appear and then find the corresponding location in the XHTML source view.

Design Studio User Guide 161 Chapter 5 Working with Pages and Elements Specifying the Input Type for IP Phone Input Fields

2 Create a line break as follows: • If an empty br element is in the XHTML source, use the Modify rule to add the attribute _forced="true" or _forced="". • To add a break, use the Insert rule to insert
. 3 Check the transformed page to verify the line break.

Specifying the Input Type for IP Phone Input Fields

Note This feature is available only for some IP phones and some WAP devices. For more information on the IP phones you have licensed, go to the Design Studio Help menu and choose Device Help.

By default, an input type="text", input type="password", or textarea element will accept any ASCII character supported by the device. You can limit the type of characters accepted as input by applying an Input Type rule on the input or textarea element. For example, you can specify that an input field will accept only numbers or will accept only uppercase letters. By limiting the type of characters that can be entered in a field, you can reduce the number of keystrokes required for a user to complete the field.

To specify the input type of a field: 1 In the project tree, click a device type. 2 In the XHTML source view, right-click the input or textarea element that you want to change. Design Studio allows you to apply an Input Type rule only to input elements with an attribute of type="text" or type="password" or to textarea elements. The input or textarea element must be part of an area that has a Select rule applied. The Input Type rule does not select an input or textarea element for transformation. 3 Choose Input Type from the shortcut menu. The Configure: Input Type Rule dialog box appears. 4 Optionally, change the rule name, perhaps using a brief description of its content, such as “Accept telephone numbers only.”

162 Design Studio User Guide Chapter 5 Working with Pages and Elements Specifying the Input Type for IP Phone Input Fields

5 Choose how to apply the rule: • Click the Project radio button to add the rule to all pages in this project. • Click the This Page radio button to add the rule only to this page. 6 From the Input Type drop-down menu, choose a type. The input types are as follows: • ASCII (uppercase and lowercase letters, numbers, and special characters) • Telephone (numbers, #, and *) • Numeric (numbers only) • Equation (numbers and math symbols) • Uppercase (uppercase letters only) • Lowercase (lowercase letters only)

Note If an input element has a type="password" attribute, user input will be echoed to the screen as asterisks. You can use any of the input types with an input type="password" element.

7 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

Design Studio displays the results of the Input Type rule. The Input Type icon ( ) shows where you applied the rule.

Design Studio User Guide 163 Chapter 5 Working with Pages and Elements Defining Soft Keys

Defining Soft Keys

Note This feature is available only for some IP phones. For more information on the IP phones you have licensed, go to the Design Studio Help menu and choose Device Help.

Some IP phones include soft keys, used for navigation, to select menu items, and for other IP phone functions, such as to dial a number. When an IP phone user requests a web page, the Application Gateway breaks the content into a series of screens, or cards, and adds soft keys to the cards, provided that the phone supports the addition of soft keys. The following topics explain how to define soft keys for XML-based IP phones. The procedure for other types of IP phones differ. For more information, go to the Design Studio Help menu and choose Device Help. • Creating a Soft Key on XML-Based IP Phones, page 164 • Converting a Link into a Soft Key, page 167 • Converting a Phone Number into a Soft Key, page 169

Creating a Soft Key on XML-Based IP Phones

To create a soft key, you specify the label that will be used for the soft key and provide the URL the key will open or the phone number the key will dial. The Application Gateway positions the soft key after the default soft keys on the card or cards that you specify. In addition to the default soft keys, you can specify three soft keys per card.

To create a soft key: 1 In the project tree, click a device type. 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links.

164 Design Studio User Guide Chapter 5 Working with Pages and Elements Defining Soft Keys

3 Click the Preview tab, review the cards, and determine where you want the soft key to appear: • If you want the soft key on all cards in the deck, you can apply the soft key rule anywhere on the page. • If you want the soft key on just one card, locate the card and review its content. You will need to apply the Soft Key rule to an element that is included on that card. 4 Click the Edit tab and locate an element that appears on a card that you identified in the previous step. 5 In the XHTML source view, right-click the element and choose Soft Key from the shortcut menu.

The Configure: Soft Key Rule dialog box appears. 6 Optionally, change the rule name, perhaps using a brief description of its content, such as “Dial Support Soft Key.” 7 Choose how to apply the rule: • Click the Project radio button to add the Soft Key rule to all pages in this project. • Click the This Page radio button to add the Soft Key rule only to this page. 8 Click the Configure Soft Key tab. 9 Enter a label for the soft key in the Soft Key Name text box.

Design Studio User Guide 165 Chapter 5 Working with Pages and Elements Defining Soft Keys

10 Choose where you want to locate the soft key: • Choose Entire Deck to add the soft key to each card associated with this web page. • Choose Current Card to add the soft key only to the card that contains the element where you are creating the Soft Key rule.

Note The Range setting is not implemented for this release.

11 Select a protocol from the URI drop-down menu and enter the URL or the phone number to be dialed.

166 Design Studio User Guide Chapter 5 Working with Pages and Elements Defining Soft Keys

• To open a URL from the soft key, choose either http:// or https:// from the URI menu and enter a URL, such as www.site.com. • To dial a number from the soft key, choose either Dial: or EditDial: from the URI menu and enter a phone number as follows: – Choose Dial: if you do not want to allow a user to change the phone number. – Choose EditDial: if you want to allow a user to change the number, such as to specify an access code or prefix. – IP phones accept numbers, the # character, and the * character in phone numbers and strips spaces and the following characters: - ( ) from the number. Thus, you can specify a phone number in a variety of forms, including the following: 5555551234, 555-555-1234, (555) 555-1234, 555 555 1234. 12 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, click the Configure Rule tab and see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

The Soft Key icon ( ) shows where you applied the rule. 13 Click the Preview tab and review the soft keys. Verify that the label fits in the space provided on the IP phone.

Converting a Link into a Soft Key

When converting an a href element into a soft key for XML-based IP phones, you can optionally specify a label for the key. By default, the text of the a href element is used as the label. The Application Gateway positions the soft key after the default soft keys on the card or cards that you specify. In addition to the default soft keys, you can specify three soft keys per card.

Design Studio User Guide 167 Chapter 5 Working with Pages and Elements Defining Soft Keys

To convert an a href element into a soft key: 1 In the project tree, click a device type. 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links. 3 In the XHTML source view, right-click the a href element that you want to convert. 4 Choose Soft Key from the shortcut menu. The Configure: Soft Key Rule dialog box appears. 5 Optionally, change the rule name, perhaps using a brief description of its content, such as “Convert News link to Soft Key.” 6 Choose how to apply the rule: • Click the Project radio button to add the Soft Key rule to all pages in this project. • Click the This Page radio button to add the Soft Key rule only to this page. 7 Click the Configure Soft Key tab. 8 Choose where you want to locate the soft key: • Choose Entire Deck to add the soft key to each card associated with this web page. • Choose Current Card to add the soft key only to the card that contains the element where you are creating the Soft Key rule.

Note The Range setting is not implemented for this release.

9 Click Convert HREF into a Soft Key.

168 Design Studio User Guide Chapter 5 Working with Pages and Elements Defining Soft Keys

10 To override the default soft key label (the text of the a href element), click Add Key Name to select it and then enter a label in the Soft Key Name text box. 11 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, click the Configure Rule tab and see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

The Soft Key icon ( ) shows where you applied the rule. 12 Click the Preview tab and review the soft keys. Verify that the label fits in the space provided on the IP phone.

Converting a Phone Number into a Soft Key

To convert a phone number into a soft key for XML-based IP phones, you specify whether you want to allow a user to edit the number and, optionally, a prefix for the number. The Application Gateway positions the soft key after the default soft keys on the card or cards that you specify. In addition to the default soft keys, you can specify three soft keys per card.

Design Studio User Guide 169 Chapter 5 Working with Pages and Elements Defining Soft Keys

To convert a phone number into a soft key: 1 In the project tree, click a device type. 2 Specify all other transformations that will affect the content of the cards. For example, make sure that you have completed selecting and clipping content and grouping links. 3 In the XHTML source view, right-click the phone number that you want to convert. 4 Choose Soft Key from the shortcut menu. The Configure: Soft Key Rule dialog box appears. 5 Optionally, change the rule name, perhaps using a brief description of its content, such as “Soft Key to dial Customer Support.” 6 Choose how to apply the rule: • Click the Project radio button to add the Soft Key rule to all pages in this project. • Click the This Page radio button to add the Soft Key rule only to this page. 7 Click the Configure Soft Key tab. 8 Choose where you want to locate the soft key: • Choose Entire Deck to add the soft key to each card associated with this web page. • Choose Current Card to add the soft key only to the card that contains the element where you are creating the Soft Key rule.

Note The Range setting is not implemented for this release.

9 Enter a label for the soft key in the Soft Key Name text box. 10 Click Dial Number from Page, choose a Dial Type, and optionally specify a dial prefix.

170 Design Studio User Guide Chapter 5 Working with Pages and Elements Defining Soft Keys

• Choose NotEditable to prevent a user from changing the number. • Choose Editable to allow a user to change the number, such as to specify an access code or prefix. 11 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, click the Configure Rule tab and see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

The Soft Key icon ( ) shows where you applied the rule. 12 Click the Preview tab and review the soft keys. Verify that the label fits in the space provided on the IP phone.

Design Studio User Guide 171 Chapter 5 Working with Pages and Elements Refreshing a Page

Refreshing a Page Many device types, including WAP phones, support page refresh, which automatically advances the display to a specified URL with no user intervention. For example, you could send a logo to the device, display it for a few seconds, and then automatically refresh the display with a menu; or you could rotate the display between a menu and a list of headlines. Page refresh is controlled through a meta refresh element that you insert in a head element. For XML-based IP phones, Design Studio includes a Refresh rule that inserts a meta refresh element. For other device types that support refresh, you can insert a meta refresh element by using the Insert rule.

Note The Refresh rule is available only for XML-based IP phones. Many other devices also support the insertion of a meta refresh element. For more information on the IP phones that you have licensed, go to the Design Studio Help menu and choose Device Help.

The following procedure describes how to use the Refresh rule. For information on manually inserting a meta refresh element, see “Inserting a Meta Refresh Element,” page 174.

To refresh a card: 1 In the project tree, click a device type. 2 In the XHTML source view, right-click. (You can place the Refresh rule anywhere on the page.) 3 Choose Refresh from the shortcut menu.

172 Design Studio User Guide Chapter 5 Working with Pages and Elements Refreshing a Page

The Configure: Refresh Rule dialog box appears.

4 Optionally, change the rule name, perhaps using a brief description of its content, such as “Refresh to News links.”

Design Studio User Guide 173 Chapter 5 Working with Pages and Elements Refreshing a Page

5 Choose how to apply the rule: • Click the Project radio button to add the rule to all pages in this project. • Click the This Page radio button to add the rule only to this page. 6 In the Refresh After text box, specify the number of seconds that you want the current page to display before advancing to the next page. By default, the refresh interval for a web page is “0”, which means that a user must specify an action to advance to the next page. 7 If you want the transformation rule to apply to this exact element and only to this element, click OK. Otherwise, see “Applying Rules to Several Elements,” page 93.

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 “Specifying a Rule Location on a Dynamically Generated Page,” page 128.

The Refresh icon ( ) shows where you applied the rule. 8 Click the Preview tab and review the resulting screens.

Inserting a Meta Refresh Element

Some IP and WAP phones support the insertion of a meta refresh element in the head element. For more information on refresh, see “Refreshing a Page,” page 172.

To insert a meta refresh element: 1 On the page you want to refresh, click a device type in the project tree. 2 Locate the head element near the top of the XHTML view. 3 Right-click the head element and choose Insert from the shortcut menu. 4 Click the Insert Element tab. 5 In the Insert New Element area, click As Child.

174 Design Studio User Guide Chapter 5 Working with Pages and Elements Refreshing a Page

6 In the XHTML/XML Fragment text box, enter the following:

interval is the number of seconds that you want this page to display before advancing to the specified URL. 7 Click OK.

Design Studio User Guide 175 Chapter 5 Working with Pages and Elements Refreshing a Page

176 Design Studio User Guide Chapter 6

Working with XML, XPath, and XSL

The following topics describe how to work with some types of non-HTML content: • Manually Configuring the XPath Expression of an Element, page 177 • Working with XML Projects, page 179 • Importing Custom XSL, page 182

Manually Configuring the XPath Expression of an Element

Note This feature is intended only for users familiar with XSL.

You can manually configure an element by editing its XPath expression. This feature provides more flexibility in node selection when applying a rule.You can modify an XPath expression to address one or several nodes based on position and/or attributes. Table 14 contains the XPath expression to use to achieve various results.

Table 14 XPath Expression Examples

Intended Selection XPath Expression All elements that are not tables (use, for *[not(self::table)] example, to delete everything but the tables) Last row (tr element) in a table tr[position() = last()] All rows except the last row of a table tr[position()>=1 and position()<=last()-1] Every third tr element, starting with the tr[position() mod 3=1] first

Design Studio User Guide 177 Chapter 6 Working with XML, XPath, and XSL Manually Configuring the XPath Expression of an Element

Table 14 XPath Expression Examples (continued)

Intended Selection XPath Expression Every other tr element after the third tr[position()> 3 and position() mod 2 = 0] row The third row that has the class attribute tr[@class][position()=3] tr[@class][3] The third row that has the class attribute tr[@class='specialrow'][position()=3] set to specialrow tr[@class='specialrow'][3] The third row only if it has the class tr[position()=3][@class='specialrow'] attribute set to specialrow tr[3][@class='specialrow'] The rows that do not have the class tr[not(@class)] attribute The first text element only if it equals text()[1][self::text()='Howdy'] “Howdy”1 The first “Howdy” text element text()[self::text()='Howdy'][1] The first text element only if it equals text()[1][self::text()=$a4868257202001] the contents of the text field in the dialog box 1. If the text you want to configure contains special characters, particularly single or double quotation marks, be sure to enter the text in the text field and click Reload to retrieve the XPath expression provided by Design Studio. You must include any text variables provided by Design Studio in your XPath expression.

For more information about XPath pattern matching, see http://www.w3.org/TR/xpath.

178 Design Studio User Guide Chapter 6 Working with XML, XPath, and XSL Working with XML Projects

To manually configure an XPath expression: 1 In the Configure Rule dialog box, set the depth and position options. 2 Click Manually Configure Element to select it. 3 Click Reload to view the current XPath expression for the node. 4 Edit the XPath configuration in the text box.

Design Studio alerts you if you enter invalid syntax for the XPath. 5 Click OK.

Working with XML Projects If you have a set of XML pages that you want to make available to users, you work with the XML pages in a Design Studio XML project. For XML projects, you import into Design Studio an XSL style sheet that you created in another application. Design Studio uses the imported XSL style sheet to transform the XML pages.

Note If you need to use more than one XSL style sheet to handle different device protocols, use the Import XSL rule as described in “Using Several XSL Style Sheets for a Project,” page 188.

The following topics describe how to use Design Studio to work with XML projects: • Creating an XML Project, page 180 • Adding a Page to an XML Project, page 181 • Updating an XSL Style Sheet, page 182

Design Studio User Guide 179 Chapter 6 Working with XML, XPath, and XSL Working with XML Projects

Creating an XML Project

An XML project contains an XSL style sheet and the XML pages that you want to transform. You create an XSL style sheet outside of Design Studio. Be sure to validate an XSL style sheet before importing it. Design Studio does not validate imported style sheets.

Note Before you import an XSL style sheet, verify that all xsl:template elements in the style sheet have a priority attribute set to greater than 1. This ensures that your style sheet will not conflict with the style sheet generated by Design Studio.

To create an XML project: 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. 2 From the Projects menu, choose Create Project. The Create Project dialog box appears. 3 Enter a name to identify the project, for example, “command pages.” 4 Click the XML radio button. 5 Click OK. The Select Location of Style Sheet dialog box appears.

6 Enter the fully-qualified URL of an XSL style sheet, or click Browse, navigate to a filename, and click Open. 7 Click OK. Design Studio creates the project, imports the style sheet, and adds the Style Sheet tab to the window.

180 Design Studio User Guide Chapter 6 Working with XML, XPath, and XSL Working with XML Projects

8 To view the style sheet, click the Style Sheet tab. After you create a project, you add web pages to it as described in “Adding a Page to an XML Project,” page 181.

Adding a Page to an XML Project

To add a page to an XML project: 1 In the project tree, click a project. 2 Enter the XML page URL in the Address field. Design Studio opens the requested page in the Browse tab. The XML is formatted according to the XSL style sheet that you imported in this project. If the requested page does not appear, the Application Gateway 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 “Using an Identifier Rule for Multiple Pages,” page 56. If a Redirection message displays, see “Handling Page Redirects,” page 46. 3 In the lower-left pane, click Add Page to Project. Design Studio adds the XML page to the project and displays it in the View Original tab, formatted according to the imported XSL style sheet. 4 Create identifier rules for the pages as described in “Identifying a Page,” page 49. 5 Save and publish XML projects just like HTML projects.

Design Studio User Guide 181 Chapter 6 Working with XML, XPath, and XSL Importing Custom XSL

Updating an XSL Style Sheet

After you change and validate an XSL style sheet in another application, update it in Design Studio.

To update an XSL style sheet: 1 Right-click the XML project in the project tree. 2 Choose Update Style Sheet from the shortcut menu.

Importing Custom XSL In addition to using the rich set of transformation rules provided with Design Studio, you can also apply a custom rule to an element or a custom XSL template to a page. This advanced feature enables you to supplement or replace the default XSL template in the XSLT style sheet created by Design Studio. When you apply a rule such as Select or Move, Design Studio writes an xsl:template element for the rule. You can choose, instead, to create your own rule by modifying or replacing an xsl:template element. The default XSL template provided by Design Studio is associated with a particular node or set of nodes. If you override the default, the XPath pattern in the xsl:template match= statement determines on which nodes the rule is applied. Importing a custom XSL template rule is useful in cases such as the following: • To perform advanced string manipulation on text or on element attributes. For example, you might need to reorder something in a URL or you might need to remove part of the beginning and the end of a URL. • To modify dynamically generated content. • To use several custom XSL style sheets for XML pages. • To perform an XSL operation on the page URL. When Design Studio generates a style sheet, it adds a global variable ($url) that contains the page URL. You can use this variable in imported style sheets or in XPath expressions.

182 Design Studio User Guide Chapter 6 Working with XML, XPath, and XSL Importing Custom XSL

The following topics describe how to import custom XSL: • Importing a Custom XSL Template Rule on a Node, page 183 • Examples of Custom XSL, page 185 • Using Several XSL Style Sheets for a Project, page 188

Importing a Custom XSL Template Rule on a Node

To import a custom XSL template rule on a node: 1 In the project tree, select a device type. 2 In the XHTML source view, right-click the node where you want to apply a custom XSL template rule. 3 Choose Import XSL from the shortcut menu. The Configure: XSL Import Rule dialog box appears. 4 Optionally, change the rule name, perhaps using a brief description of its content, such as “Custom rule: manipulate URL.” 5 Choose how to apply the rule: • Click the Project radio button to apply the style sheet to all pages in this project. • Click the This Page radio button to apply the style sheet only to this page. 6 Choose each device type to which you want to apply the rule. 7 Click the Import XSL tab. The Import XSL tab appears.

Design Studio User Guide 183 Chapter 6 Working with XML, XPath, and XSL Importing Custom XSL

8 To change the XSL template for just this node, leave the Use Default check box selected. If you clear the check box, the XSL template that you enter replaces the entire default style sheet for the page. 9 Type the XSL statements for the rule you are creating. 10 Click OK. Design Studio validates the XSL and displays an error message if the XSL is not well formed or includes unsupported elements such as xsl:keys and xsl:call-template.

184 Design Studio User Guide Chapter 6 Working with XML, XPath, and XSL Importing Custom XSL

Examples of Custom XSL

By importing custom XSL, you can create your own rules in Design Studio. The following tables contain the custom XSL needed to perform a variety of transformations: • Changing a String (Table 15 on page 6-185) • Using and Changing URLs (Table 16 on page 6-186) • Handling Special Cases (Table 17 on page 6-187)

Table 15 Changing a String

Transformation Custom XSL Remove the last The following XSL selects the substring of the current string "." from character of a string character 0 to the length of the string minus one. Display a portion of a Suppose that a string is “Annual Sales Figures for Worldwide Sales” string, starting from a and you want to display “Worldwide Sales”. The following XSL particular substring selects the string that starts at the string-length position of everything before “Worldwide”. In other words, the selection starts at “Worldwide” and continues through the rest of the string. Display one word of a Suppose that a string is “Annual Sales Figures for Worldwide Sales” string and you want to display “Worldwide”. The XSL starts at the string-length position of the length of the string before “Worldwide” and continues for the number of characters in the string “Worldwide”.

For more information on using substrings, refer to http://www.w3.org/TR/xpath#function-substring.

Design Studio User Guide 185 Chapter 6 Working with XML, XPath, and XSL Importing Custom XSL

Table 16 Using and Changing URLs

Transformation Custom XSL Adding a link to the When Design Studio generates a style sheet, it adds a global variable top of the page ($url) that contains the page URL. The following XSL uses $url to add a link to the top of the page. Go To Top Changing a URL by Suppose that you need to change wrong.html to dir/path/new.html in replacing a filename the link href="/wrong.html?session=1234". The following XSL changes the link (a element) to href="/dir/path/new.html?session=1234". Changing an HTTP Suppose that you open an internal application to the Application link to HTTPS Gateway and want the requests to be secure between the Application Gateway and the calling applications. The following XSL converts an HTTP request to HTTPS. It must be placed on an a element that is relative to the current page. For example, on http://www.site.com the XSL converts the link Movies into Movies by returning the global variable $url (the current page URL). Because the value of $url typically includes ":80", the XSL includes substring-before to remove the ":80". https://

186 Design Studio User Guide Chapter 6 Working with XML, XPath, and XSL Importing Custom XSL

Table 16 Using and Changing URLs (continued)

Transformation Custom XSL Refreshing a page to Suppose that you want to create a screensaver by forcing a page to itself refresh to itself. The following XSL creates a meta refresh element that calls the value of $url. It is equivalent to the syntax . Refresh

Table 17 Handling Special Cases

Transformation Custom XSL Creating a dialable For devices that support the Dial rule, you can apply the Dial rule to phone number when a phone number only if it is a text element. If the phone number is the the number is not a attribute of an element (such as an input element), you can use text element custom XSL to create the Dial rule. Suppose that the XHTML source view contains the following: Name1

To create a Dial rule, select the text to be used as the label for the Dial rule (“Name1” above) and specify the following XSL to copy the selected text string to the dialname tag:

Also select the input element and specify the following XSL to use the value of the value attribute with the dialnumber tag:

Design Studio User Guide 187 Chapter 6 Working with XML, XPath, and XSL Importing Custom XSL

Using Several XSL Style Sheets for a Project

To make a set of XML pages available to users, you import into Design Studio one or more XSL style sheets that you created in another application. Design Studio and the Application Gateway use an imported XSL style sheet to transform the XML pages. If your XML pages have only one XSL style sheet, you can create an XML project, as described in “Working with XML, XPath, and XSL,” page 177. If your XML pages have several XSL style sheets to support different device protocols, you create an HTML project and import a style sheet for each protocol by replacing the default element.

To use several XSL style sheets with one project: 1 In the project tree, select a device type that corresponds to a style sheet you want to import. 2 Right-click in the XHTML source view or the browser view. 3 Choose Import XSL from the shortcut menu. The Configure: XSL Import Rule dialog box appears. 4 Optionally, change the rule name, perhaps using a brief description of its content, such as “Custom rule: manipulate URL.” 5 Choose how to apply the rule: • Click the Project radio button to apply the style sheet to all pages in this project. • Click the This Page radio button to apply the style sheet only to this page. 6 Click the Import XSL tab. The Import XSL tab appears.

188 Design Studio User Guide Chapter 6 Working with XML, XPath, and XSL Importing Custom XSL

7 Clear the Use Default check box. 8 Open the XSL style sheet in a text editor such as Notepad. 9 Copy all xsl:template elements in the style sheet. 10 Paste the copied text into the XSL Import Rule dialog box. 11 Click OK. Design Studio validates the XSL and displays an error message if the XSL is not well formed or includes unsupported elements such as xsl:keys and xsl:call-template. 12 Apply transformation rules as needed.

Design Studio User Guide 189 Chapter 6 Working with XML, XPath, and XSL Importing Custom XSL

13 Repeat Steps 1 through 12 for another device protocol.

Note In the XSL Import Rule dialog box, be sure to clear the check box for the previously configured device type.

190 Design Studio User Guide Chapter 7

Publishing, Previewing, and Testing Your Work

The following topics describe how to publish a configuration file to the Application Gateway and use Design Studio and simulators to preview and test your page transformations: • Publishing a Configuration File to an Application Gateway, page 191 • Previewing Page Transformations, page 193

Note For information on publishing the Application Menu, see “Saving and Publishing the Application Menu,” page 213.

Publishing a Configuration File to an Application Gateway When you publish a configuration file to an Application Gateway, the Application Gateway immediately begins using it to transform web page requests. Publishing a configuration file does not interrupt service on the Application Gateway and does not result in corrupted content. Because a published configuration file is instantly “live,” set up an Application Gateway that you use only for testing. You can choose to merge a configuration file with the one currently loaded on an Application Gateway, or overwrite the configuration file loaded on an Application Gateway. Merging configuration files is necessary if multiple users work on different parts of the same site. When you merge configuration files, Design Studio warns about identifier rule conflicts and gives you the opportunity to repair the conflicts. When you publish a configuration file, you can choose to also publish the Application Menu. When you publish the Application Menu, it is overwritten even if you choose to merge the configuration file.

Design Studio User Guide 191 Chapter 7 Publishing, Previewing, and Testing Your Work Publishing a Configuration File to an Application Gateway

To publish a configuration file: 1 From the File menu, choose Publish Configuration. Design Studio displays the File Publish dialog box.

2 Choose how you want Design Studio to handle the upload: • By default, Design Studio validates identifier rules. If you are sure that the rules are correct, you can reduce the validation time by clearing the check box. • To also upload the Application Menu, click the Upload Application Menu Pages check box. The Application Menu will be overwritten, even if you choose to merge the configuration file. • To merge the current configuration file with the configuration file already loaded on the Application Gateway, click Merge. The merge operation applies only to transformation rules, not to the Application Menu which is overwritten. • To replace the configuration file on the Application Gateway with the one you are uploading, click Overwrite. Design Studio will ask if you want to save the configuration file that is open. Do not overwrite the configuration file on an Application Gateway if you use XHTML extensions to transform some pages. For information, see “Managing Configuration Files When Using Application Gateway XHTML Extensions,” page 232. 3 If Design Studio warns you about identifier rule conflicts, follow the online instructions. 4 Wait until Design Studio displays a message that the configuration is uploaded. 5 Click OK. Design Studio updates the Application Gateway with the file you downloaded.

192 Design Studio User Guide Chapter 7 Publishing, Previewing, and Testing Your Work Previewing Page Transformations

If the configuration does not upload successfully, the Application Gateway may be offline or you may have lost your connection to the Application Gateway. For assistance, contact your Application Gateway administrator.

Previewing Page Transformations The Design Studio Preview tab provides a static approximation of how a transformed page appears on most device types. By previewing a page, you can verify its appearance and how content is divided into cards when transformed. To follow links, you must use an external device simulator or an actual device.

To preview a transformation: 1 In the project tree, locate the page that you want to preview and click a device type for that page. The preview in the Preview tab corresponds to the device type selected in the project tree. 2 Click the Preview tab. If Design Studio does not have a preview for a device type, the Preview tab is inactive when you select the device type in the project tree. The Preview tab lists each card that corresponds to the web page you transformed. 3 In the cards area of the Preview tab, click a card to view it in the preview.

Note If the Preview area displays the message “AG Not Accessible” and your Application Gateway is configured to use a proxy server, ask your Application Gateway administrator to add the IP address of the Application Gateway to the Proxy Exclusion List in the Administration Tool, Network > Proxies page.

For information on using external simulators, see “Testing a Transformation Using a Simulator or Browser,” page 196.

Design Studio User Guide 193 Chapter 7 Publishing, Previewing, and Testing Your Work Previewing Page Transformations

The following topics explain how you can work with the Preview tab to review and fine tune a transformation: • Working with the Cards Area, page 194 • Using the Preview Tab, page 195

Working with the Cards Area

When you click the Preview tab, Design Studio lists each card that results from the transformation of the current web page for the selected device. Figure 23 shows the card list for XML-based IP phones, which do not mix data types (text, image, input field) on a card. Figure 24 shows the card list for other device types. Cards are listed in the order in which the Application Gateway will send them to a device.

Figure 23 Card List in Preview Tab (XML-based IP Phones)

Figure 24 Card List in Preview Tab (Most Devices)

194 Design Studio User Guide Chapter 7 Publishing, Previewing, and Testing Your Work Previewing Page Transformations

If a card includes the Refresh rule, the Refresh icon displays beside the card icon as shown in Figure 25. (Not all device types support the Refresh rule.)

Figure 25 Card with Refresh Icon

For XML-based IP phones, you can view a summary of the contents of a card in a pop-up window. To view the summary, point to a card icon as shown in Figure 26.

Figure 26 Card with Pop-Up Description

Using the Preview Tab

The preview displays an approximation of how a card will look when viewed on an actual device. The preview does not support navigation, input fields, or the operation of most keys. You should test each card on an actual device to verify the display of text and images as well as the operation of links, input fields, and keys. For more information on using the preview for IP phones, refer to the Device Help available from the Design Studio Help menu.

Design Studio User Guide 195 Chapter 7 Publishing, Previewing, and Testing Your Work Testing a Transformation Using a Simulator or Browser

For most WAP phone and IP phone device types, the title element text displays on the top line of each card associated with a web page. To remove the title text, use Design Studio to apply the Clip rule to the title element. You can apply the Modify rule to the text if you want to change the title.

Testing a Transformation Using a Simulator or Browser You can test and browse transformed pages from your desktop using the following external simulators and browsers: • Openwave Mobile Browser Simulator (mobile phone simulation) • Go.Web Simulator (RIM device simulation) • Internet Explorer version 5.0 and higher or Netscape Navigator version 4.01 and higher (HTML-based device simulation)

Note To view a transformed application or web page on any device or browser, you must direct your request to the Application Gateway by including its IP address and HTTP or HTTPS port number with the URL.

For example, if the Application Gateway IP address is 192.168.10.0 and its HTTP port is 80, you must navigate to the URL http://192.168.10.0:80/http://pageURL. If you do not include the Application Gateway IP address in the URL, the returned application or page will not be transformed.

The following topics describe how to use the simulators and browsers to test page transformations: • Using the Openwave Mobile Browser Simulator, page 197 • Using the Go.Web Simulator, page 198 • Using a Browser, page 200

196 Design Studio User Guide Chapter 7 Publishing, Previewing, and Testing Your Work Testing a Transformation Using a Simulator or Browser

Using the Openwave Mobile Browser Simulator

The Openwave Mobile Browser Simulator mimics the display of a variety of wireless phones, including Alcatel, Ericsson, Motorola, and Openwave phones.

To preview a page: 1 Publish the configuration file, as described in “Publishing a Configuration File to an Application Gateway,” page 191, and do not exit Design Studio. The simulator must access transformed pages through the Design Studio connection to the Application Gateway. 2 Double-click the shortcut that you created in “Installing the Openwave Mobile Browser Simulator,” page 26. 3 In the Openwave SDK window, choose Go To Address from the Simulator menu. 4 In the Go To Address dialog box, enter the URL to the page that you want to preview. You must include your Application Gateway IP address and HTTP or HTTPS port number as shown in the following example: http://192.168.10.0:80/http://pageURL 5 Click OK. The Application Gateway redirects the request to secure mode, transforms the requested page, and sends it to the simulator.

Note Visited locations are listed in the Address drop-down menu in the Openwave SDK window. To quickly return to a location, select it from the menu.

Table 18 describes the function of the Openwave Simulator navigation keys and their PC keyboard equivalents.

Table 18 Openwave Simulator Navigation Reference

Simulator Key Function Keyboard Equivalent Arrows Moves device cursor Arrows Bck Goes back one screen Esc

Design Studio User Guide 197 Chapter 7 Publishing, Previewing, and Testing Your Work Testing a Transformation Using a Simulator or Browser

Table 18 Openwave Simulator Navigation Reference (continued)

Simulator Key Function Keyboard Equivalent Clr Moves device cursor Backspace back one space (when in a text field) ACCEPT Soft Key Accepts the choice Enter (labeled with a checkmark, “OK”, or “ACCEPT”)

Using the Go.Web Simulator

The Go.Web Simulator mimics the display of a RIM 950 pager and a RIM 957 handheld device.

To preview a page: 1 Publish the configuration file, as described in “Publishing a Configuration File to an Application Gateway,” page 191, and do not exit Design Studio. The simulator must access transformed pages through the Design Studio connection to the Application Gateway. 2 Double-click the shortcut that you created in “Installing the Go.Web Simulator,” page 28. 3 In the Go.Web Simulator window, click the Handheld button. 4 Using the down arrow on your PC keyboard, move the cursor in the simulator window until Click here to start is highlighted. 5 Press Enter on your PC keyboard. The simulator window displays a message that it is generating security keys. 6 When the Go.Web Home page displays, use the down arrow to select the http input field.

198 Design Studio User Guide Chapter 7 Publishing, Previewing, and Testing Your Work Testing a Transformation Using a Simulator or Browser

7 Press Enter on your keyboard. A larger input box displays. 8 In the input box, enter the URL to the page that you want to preview. You must include the Application Gateway IP address and HTTP or HTTPS port number as shown in the following example. Note that the initial “http://” is already provided on the Go.Web Home page.

9 Press Enter on your keyboard. 10 On your keyboard, press the down arrow to select Open URL.

11 Press Enter on your keyboard.

Design Studio User Guide 199 Chapter 7 Publishing, Previewing, and Testing Your Work Testing a Transformation Using a Simulator or Browser

The Application Gateway redirects the request to secure mode, transforms the requested page, and sends it to the simulator. [Table 19 describes the function of the Go.Web Simulator navigation keys and their PC keyboard equivalents.

Table 19 Go.Web Simulator Navigation Reference

Simulator Key Function Keyboard Equivalent Left/right Presses roller Left/right arrows or Enter key arrows wheel on device Up/down Spins roller Up/down arrows arrows wheel on device All keys Various Left-click the key; use the keyboard character keys to enter text into a text field on the device.

Using a Browser

For HTML-based devices, you can preview transformation results in a desktop browser.

To preview a page in a browser window: 1 Publish the configuration file to the Application Gateway, as described in “Publishing a Configuration File to an Application Gateway,” page 191, and do not exit Design Studio. 2 Open a browser window, either Internet Explorer or Netscape Navigator. 3 Enter the URL to the page that you want to preview. You must include the Application Gateway IP address and HTTP or HTTPS port number as shown in the following example: http://ipAddress:portNmber/http://pageURL 4 Press Enter on your keyboard. The Application Gateway redirects the request to secure mode, transforms the requested page, and sends it to the browser.

200 Design Studio User Guide Chapter 8

Customizing the Application Menu

The Application Menu is a hierarchical services portal that provides phone and mobile device users with quick access to destinations that are transformed for use on those devices. Figure 27 shows a sample Application Menu.

Figure 27 Sample Application Menu

You use Design Studio to add links and pages. Pages that you create through the Application Menu editor can include a title, links, and an image. The Application Menu editor enables you to select the order in which those items appear. Use the Application Menu preview to check your work without having to connect to a phone.

Note By default, the Application Menu is a submenu on the Voice Office menu. If you do not want the Application Menu to display on IP telephones, go to the Application Gateway Administration Tool, Operation > Voice Office > Menu, and deselect the Add Application Menu check box.

Design Studio User Guide 201 Chapter 8 Customizing the Application Menu Application Menu Workflow

If no applications have been added to the Application Menu, the message “Application Menu not configured” appears in place of the Application Menu.

The following topics describe how to customize the Application Menu: • Application Menu Workflow, page 202 • Opening the Application Menu Editor, page 203 • Changing Application Menu Page Titles, page 204 • Adding Links to an Application Menu Page, page 205 • Adding and Removing an Application Menu Image, page 207 • Changing the Application Menu Page Layout, page 208 • Adding and Deleting Application Menu Pages, page 209 • Previewing the Application Menu, page 213 • Saving and Publishing the Application Menu, page 213

Application Menu Workflow To customize the Application Menu, follow these general steps: 1. Start Design Studio, create or open the configuration file where you want to save the Application Menu, and click the App. Menu tab. (“Opening the Application Menu Editor,” page 203) 2. Edit the Application Menu as follows: a. To change a page title, select the title text and type a new title. (“Changing Application Menu Page Titles,” page 204) b. To add a link, choose New Anchor from the Insert menu. (“Adding Links to an Application Menu Page,” page 205) c. To add an image, choose Image and then Add Image from the Edit menu. (“Adding and Removing an Application Menu Image,” page 207) d. To change the page layout, choose Layout from the Edit menu. (“Changing the Application Menu Page Layout,” page 208)

202 Design Studio User Guide Chapter 8 Customizing the Application Menu Opening the Application Menu Editor

3. To add a page, choose New Page from the Insert menu. (“Adding and Deleting Application Menu Pages,” page 209) 4. To check your work, click the Preview tab. (“Previewing the Application Menu,” page 213) 5. To save your work, choose Save Configuration from the File menu. To publish your work, choose Publish Configuration from the File menu. (“Saving and Publishing the Application Menu,” page 213)

Opening the Application Menu Editor The Application Menu editor is included with Design Studio. To access the Application Menu editor, click the App. Menu tab.

To open the Application Menu editor: 1 Start Design Studio. For information, see “Starting Design Studio,” page 13. 2 Create or open the configuration file where you want to save your changes to the Application Menu. For information, see “Opening and Saving a Configuration File,” page 43.

Note When you create a new configuration file, the default Application Menu is loaded. If you want to work on a Application Menu that has already been published, choose Get Configuration from the File menu to open the published Application Menu in Design Studio.

3 Click the App. Menu tab (below the project tree).

Design Studio User Guide 203 Chapter 8 Customizing the Application Menu Changing Application Menu Page Titles

The Application Menu editor appears. Use the Edit tab to work on Application Menu pages and use the Preview tab to check your work.

Changing Application Menu Page Titles The default title for the home Application Menu page is “Menu” and for other Application Menu pages that you add is “New Page.” You can change or hide a title.

204 Design Studio User Guide Chapter 8 Customizing the Application Menu Adding Links to an Application Menu Page

To change a page title: 1 In the Application Menu tree, select the page with the title that you want to change. The page appears in the Edit tab. 2 In the Edit tab, select the page title and type a new title. Your changes also appear in the Application Menu tree.

Adding Links to an Application Menu Page You can add links from the Application Menu to applications and pages that you have transformed through Design Studio or that are already formatted for display on a supported device. If you add more links than will fit on a particular screen, the Application Gateway paginates the page and adds navigation buttons that are appropriate for a device type.

To add a link: 1 In the Application Menu tree, select the page on which you want to create the link. 2 From the Insert menu, choose New Link.

Note Alternatively, right-click the page in the Application Menu tree and choose the command from the shortcut menu.

The new link appears in the Application Menu tree and in the Edit tab at the bottom of the list of links.

Design Studio User Guide 205 Chapter 8 Customizing the Application Menu Adding Links to an Application Menu Page

3 To include an icon with the link, click the left-most cell of the added link and select an icon from the scroll list.

4 Select the link text and type the text that you want to be displayed for the link on a phone.

5 Select the URL text and enter the link destination. Include either http:// or https:// with the URL.

206 Design Studio User Guide Chapter 8 Customizing the Application Menu Adding and Removing an Application Menu Image

6 By default, the Application Gateway prepends its IP address to any URL so that the URL request is directed to the Application Gateway for transformation. You might need to change that behavior, by clearing the Rewrite URL check box in the following cases: • If the URL destination (application or page) is already in a format that is appropriate for the phone and does not need to be transformed by the Application Gateway. By disabling URL rewrite, the URL request is not intercepted by the Application Gateway; instead, it is routed as usual to the URL specified. • If the URL destination is to another Application Gateway. By disabling URL rewrite, the URL request is not intercepted by the Application Gateway where the Application Menu is located; instead, it is routed to the other Application Gateway that is associated with the link. If the page that corresponds to the URL needs to be transformed by the Application Gateway, leave the Rewrite URL check box selected. 7 Repeat 2 through 6 for each link that you want to add. 8 To rearrange the links, select a link and click the Up or Down buttons.

Adding and Removing an Application Menu Image An Application Menu page can include an image such as a logo. If the image is too large for display on a microbrowser screen, the Application Gateway scales it according to the geometry key settings in the DDF as described in “Configuring Device Definitions,” page 15.

Design Studio User Guide 207 Chapter 8 Customizing the Application Menu Changing the Application Menu Page Layout

To add an image: 1 In the Application Menu tree, click the page to which you want to add an image. 2 From the Edit menu, chose Image and then Add Image. 3 In the Open Image dialog box, enter a URL. Alternatively, click Browse, navigate to the image location, and click Open. 4 Click OK. The image appears in the Application Menu display. 5 To change the location of the image on the page, see “Changing the Application Menu Page Layout,” page 208.

To remove the image from the page: 1 In the Application Menu tree, click the page from which you want to remove the image. 2 From the Edit menu, choose Image and then Remove Image. The image is removed from the Application Menu display.

Changing the Application Menu Page Layout You can specify whether an image that you add to an Application Menu page appears at the top or bottom of the page or between the title and links. You can also choose to hide the title from an Application Menu page. When you hide the title, the title text is used only to identify the page in the Application Menu tree.

To change the page layout: 1 In the Application Menu tree, click the page that you want to change. 2 From the Edit menu, choose Layout. The Page Layout dialog box appears.

208 Design Studio User Guide Chapter 8 Customizing the Application Menu Adding and Deleting Application Menu Pages

3 To change the location of an image, click a layout icon in the Page Layout dialog box. A description of the layout appears in the dialog box. 4 To hide the title text, clear the Show Title check box. 5 Click OK. The page layout changes in the Application Menu display.

Adding and Deleting Application Menu Pages You can add links from the Application Menu to any of the following destinations: • Pages that you create through the Application Menu editor. • Applications and pages that you transform through Design Studio. When designing an Application Menu, take into consideration that the usability of a menu declines with the number of clicks required for a user to access an application or site. You can use the Application Menu editor to create an Application Menu page, or you can add an existing page from the Design Studio project tree. The following topics describe how to add and delete Application Menu pages: • Creating an Application Menu Page, page 210 • Adding an Existing Page to an Application Menu, page 211 • Deleting a Page from the Application Menu, page 213

Design Studio User Guide 209 Chapter 8 Customizing the Application Menu Adding and Deleting Application Menu Pages

Creating an Application Menu Page

When you create an Application Menu page, the Application Menu editor adds a link to the new page. The link appears on the Application Menu page that was selected when you added the page.

To create a page in the Application Menu editor: 1 In the Application Menu tree, click the page where you want to include the link to the new page. 2 From the Insert menu, choose New Page. A page named “New Page” appears in the Application Menu tree. The new page appears in the Edit tab.

3 Optionally, add an image to the new page as described in “Adding and Removing an Application Menu Image,” page 207. 4 Add links to the new page as described in “Adding Links to an Application Menu Page,” page 205. 5 In the Application Menu tree, click the page that contains the link to the new page. 6 Edit the link to the new page as follows: • To include an icon with the link, click the left-most cell of the link and select an icon from the scroll list. • Select the link text, type the text to be displayed for the link on a phone, and press Enter. The link text changes in the Edit tab and in the Application Menu tree. • To reposition the link in the list, use the Up and Down buttons. You cannot enter a link to a page that you create; Design Studio manages those links.

210 Design Studio User Guide Chapter 8 Customizing the Application Menu Adding and Deleting Application Menu Pages

Adding an Existing Page to an Application Menu

Another way to customize the Application Menu is to add pages that already exist and are included in the same Design Studio configuration file as the Application Menu. For example, you might add pages or applications from your company web site.

To add an existing page to an Application Menu: 1 Locate the page in the Design Studio project tree.

Tip If the Application Menu editor is visible, click the Project Tree tab to exit the editor.

2 Right-click the page name in the project tree and choose Add to Application Menu from the shortcut menu.

The Add Page to Application Menu dialog box appears.

Design Studio User Guide 211 Chapter 8 Customizing the Application Menu Adding and Deleting Application Menu Pages

3 In the Name text box, change the page name to the text that will be used for the link to the added page. You can also change the link text later in the Application Menu editor. 4 In the Application Menu Page tree, select the page where you want to locate the link to the added page.

5 Click OK. 6 Click the App. Menu tab to view the added link. You can add an icon to the link, change the link text, or disable URL rewriting for the link as described in “Adding Links to an Application Menu Page,” page 205.

212 Design Studio User Guide Chapter 8 Customizing the Application Menu Previewing the Application Menu

Deleting a Page from the Application Menu

To delete an Application Menu page: 1 In the Application Menu tree, click the page that you want to delete. 2 From the Edit menu, choose Delete.

Previewing the Application Menu You can view the general appearance of the Application Menu in the Application Menu Preview tab. To view how the Application Menu is paginated and to test navigation, you must view the Application Menu on an actual phone or mobile device.

To preview an Application Menu page: 1 In the Application Menu tree, click the page that you want to preview. 2 Click the Preview tab. The links in the preview are not active. To test the links, publish the configuration file and then access the Application Menu through a phone or mobile device. For more information, see “Saving and Publishing the Application Menu,” page 213.

Saving and Publishing the Application Menu After you customize the Application Menu, save the configuration file and publish it to the Application Gateway. When you publish the Application Menu, it always overwrites the Application Menu on the Application Gateway. You cannot merge Application Menus.

To save the Application Menu: 1 From the File menu, choose Save Configuration or Save As Configuration. 2 If prompted, enter a filename and click Save.

Design Studio User Guide 213 Chapter 8 Customizing the Application Menu Saving and Publishing the Application Menu

Design Studio saves the configuration file on your computer using the name that you provide. If a file you save already exists, Design Studio saves the old version to a backup file named filename~.

To publish the Application Menu: 1 From the File menu, choose Publish Configuration. 2 In the File Publish dialog box, select the Upload Application Menu Pages check box and then click Overwrite (if you want to overwrite the transformation rules) or Merge (if you want to merge the transformation rules). The Application Menu on the Application Gateway is updated with your changes.

Note By default, the Application Menu is a submenu on the Voice Office menu. If you do not want the Application Menu to display on IP telephones, go to the Application Gateway Administration Tool, Operation > Voice Office > Menu, and deselect the Add Application Menu check box.

214 Design Studio User Guide Chapter 9

Specifying Transformation Rules in HTML Files

The following topics describe how to specify web page transformations in your source HTML files rather than through Design Studio: • Introduction, page 215 • Application Gateway XHTML Extensions, page 217 • Using Application Gateway XHTML Extensions in Source HTML, page 224 • Hiding Device-Specific Content from Full Browsers, page 231 • Managing Configuration Files When Using Application Gateway XHTML Extensions, page 232

Introduction The Application Gateway transforms web pages according to transformation rules. You can create transformation rules by using the following: • Design Studio • Application Gateway XHTML extensions in source HTML/XML files

Note XHTML is the next generation of HTML and provides the benefit of extensibility. The Application Gateway XHTML extensions are Application Gateway-specific attributes that are used by the Application Gateway to transform content.

When you use Design Studio to create transformation rules, you do not change the source HTML files. Instead, you create rules that are applied to a web page by the Application Gateway when the web page is requested

Design Studio User Guide 215 Chapter 9 Specifying Transformation Rules in HTML Files Introduction

by a device. Design Studio enables you to transform legacy content without having to modify the source files and enables you to transform content that you do not own. In addition, Design Studio can be used by anyone with a general understanding of HTML. Rather than using Design Studio to create transformations, you can include Application Gateway XHTML extensions in HTML files to indicate transformations for a particular device. Typically, this method of specifying transformation rules is handled by an application developer during the initial implementation of a web page. An application developer includes XHTML extensions to indicate content that should be selected or clipped for a particular device. If different transformations are required for the various device types, sections of the web page may need to be replicated for each device. As you plan the design and content of new web content, consider whether it will be more efficient to apply transformation rules through Design Studio or to build the rules into the content. One advantage of using the Application Gateway XHTML extensions is that, when content changes, you do not have to return to Design Studio to update transformation rules. A special configuration file, extensions.tcf, is required for the Application Gateway to interpret the XHTML extensions. The extensions.tcf file is located in the Design Studio installation area in studio/class/docs/extensions.tcf.

Note If you use Application Gateway XHTML extensions, we recommend that you do not attempt to use Design Studio to specify additional transformation rules on the same content. Doing so can result in conflicting identifier rules or transformation rules. You can, however, create additional projects and merge them into the default configuration file on the Application Gateway.

If you choose to use Design Studio to create additional transformations for pages that contain Application Gateway XHTML extensions, be sure to add those pages to the configuration file extensions.tcf.

216 Design Studio User Guide Chapter 9 Specifying Transformation Rules in HTML Files Application Gateway XHTML Extensions

Application Gateway XHTML Extensions Most Application Gateway XHTML extensions consist of element attributes that specify the following information: • A class attribute value that is unique to the Application Gateway. • A devices attribute that indicates the device types for which you want content transformed. • A rule attribute that specifies the transformation rule that you want to apply. • Additional attributes provide more information for some rules.

Note We recommend that you use the Application Gateway XHTML extensions with div elements, except as noted in this topic. While it is possible to use the extensions with any element, a broader application of the extensions is not supported.

Table 20 summarizes the XHTML extensions used with div elements and Table 21 ( on page 9-223) lists the XHTML attributes used on other elements.

Table 20 Application Gateway XHTML Extensions Used with DIV Elements

Attribute Values Usage class transform_rule Identifies content to be transformed for the specified device types. This content will also be visible to full browsers (such as Internet Explorer). transform_rule_hid Identifies content to be transformed for the specified e device types. This content will be hidden from full browsers. You must define this value in an embedded or linked style sheet, as described in “Hiding Device-Specific Content from Full Browsers,” page 231.

Design Studio User Guide 217 Chapter 9 Specifying Transformation Rules in HTML Files Application Gateway XHTML Extensions

Table 20 Application Gateway XHTML Extensions Used with DIV Elements (continued)

Attribute Values Usage devices chtml, Applies the rule to the specified devices. A value is desktop-browser, not valid if your license does not include the device html, imode, palm, type. wml, xhtml For the IP phone values supported by your licenses, view the device’s class value in the DDF Editor. If a class value is not specified, use the protocol value.

218 Design Studio User Guide Chapter 9 Specifying Transformation Rules in HTML Files Application Gateway XHTML Extensions

Table 20 Application Gateway XHTML Extensions Used with DIV Elements (continued)

Attribute Values Usage rule select Selects the content enclosed in the div element. See also the retain_parents attribute in this table. clip Clips the content enclosed in the div element. ignore Ignores the element only (not its text or child elements). Use rule="ignore" with the element that you want to ignore. For example, to ignore a font element for IP phones, add the attributes in the font tag: imgalt Replaces an image with its alternate text. A div element with this rule must enclose an img element or input type="image" element. If an input element is being used as an image map in the HTML, you cannot replace it with the alternate text. For more information on how the Application Gateway and devices handle images, see “Working with Images,” page 146. retainformat When set to "true", toggles the value of the DDF subkey retainformat. For more information, see “Specifying Basic Transformations,” page 224. dialname Identifies the label and number to be used for a dialnumber dialable phone number. This feature is available only for some IP phones. For more information on the IP phones that you have licensed, go to the Design Studio Help menu and choose Device Help. See also the prefix attribute in this table. cardbreak Forces a card break. Useful for keeping two related elements together. You can also use the cardbreak extension outside of a div element as follows:

Design Studio User Guide 219 Chapter 9 Specifying Transformation Rules in HTML Files Application Gateway XHTML Extensions

Table 20 Application Gateway XHTML Extensions Used with DIV Elements (continued)

Attribute Values Usage retain_ true Default value. Used with the rule="select" attribute. parents Retains the parent elements of the selected element. For example, if you select a td element and retain parents, the Application Gateway includes the parent tr and table elements. Retaining parents impacts performance, so retain them only if they are needed. false Used with the rule="select" attribute. Removes the parent elements. Be aware that removing parents can result in incorrect markup. For example, if you select a td element and choose to remove the parents, the transformed element may not have the required parent tr and table elements. prefix numeric_value Used with the rule="dialnumber" attribute. Appends a prefix, such as “1” or “9” to the number specified with the rule="dialnumber" attribute. refresh_timer1 interval Refreshes the card after the number of seconds specified. A refresh of “0” means that the card will not refresh or that a refresh set earlier in the card deck will stop. Include anywhere on the card you want to refresh. You can also use the meta refresh element, as described in “Refreshing a Card,” page 231. 1. This feature is available only for IP phones and devices that support meta refresh elements. For more information on the IP phones that you have licensed, go to the Design Studio Help menu and choose Device Help.

To specify a transformation in HTML code, you must include the class, rule, and devices attributes. The following sample HTML code illustrates the following: • Web page content that may be accessed through a variety of devices or through a full browser. Device types shown in these examples are generic, such as device1. • Retained table elements for one device type. • Ignored font element and dialable phone number for one device type.

220 Design Studio User Guide Chapter 9 Specifying Transformation Rules in HTML Files Application Gateway XHTML Extensions

• Redundant pieces of content. Supporting multiple device types with different transformations can result in the creation and maintenance of redundant content. In such cases, it might be more efficient to create the rules using Design Studio.

... ...

...

Design Studio User Guide 221 Chapter 9 Specifying Transformation Rules in HTML Files Application Gateway XHTML Extensions

...

...

Call:	800-555-1234

The XHTML extensions summarized in Table 21 are used only on the specified elements.

222 Design Studio User Guide Chapter 9 Specifying Transformation Rules in HTML Files Application Gateway XHTML Extensions

Table 21 Application Gateway XHTML Extensions Used with Specific Elements

XHTML Extension Usage requests are directed to the Application Gateway. You can disable this behavior by adding the rule="noproxy" attribute to a link. For some WML-based devices: Converts an input button, with a type of “submit,” to The _keypad_mode attribute specifies the input type for an input fieldand has the following values: 2 T (telephone number) N (numeric) E (equation) U (uppercase) L (lowercase) P (password; used with any of the other InputFlag attributes, such as “AP”) The optional _input_label attribute specifies the prompt that an IP phone will display for the input field. A label can be up to 15 characters. Suppose that a web page contains an input field for zip code and a text area for a tracking identifier. The input and textarea elements might appear as follows: <input type="text" name="zip" value="90210" _keypad_mode="N" _input_label="Zip Code"></input> <textarea name="track" _keypad_mode="U" _input_label="Tracking ID">

Design Studio User Guide 223 Chapter 9 Specifying Transformation Rules in HTML Files Using Application Gateway XHTML Extensions in Source HTML

Using Application Gateway XHTML Extensions in Source HTML The following topics describe how to use the Application Gateway XHTML extensions to mark up source HTML for transformation by the Application Gateway: • Specifying Basic Transformations, page 224 • Creating Dialable Numbers in HTML Content, page 228 • Ignoring an Element in HTML Content, page 229 • Creating a Soft Key for an IP Phone, page 230 • Specifying an Input Field Type and Label for an IP Phone, page 230 • Refreshing a Card, page 231

Specifying Basic Transformations

If you have used Design Studio to specify transformation rules, you are familiar with choosing from a rich set of rules that are necessary for repurposing applications designed for full browsers to content that is appropriate for microbrowser screens. However, if you are creating an application specifically for delivery to devices, the development process is much different and requires only a few transformation rules. To include content, you select the content by enclosing it in a div element with the rule="select" attribute. You can make multiple selections on a page and you can nest selections. For example, you might want to include a large chunk of code for some devices but include only a small portion of that code for other devices. To exclude content from an otherwise selected area, you clip the content by enclosing it in a div element with the rule="clip" attribute. For example, you might want to include an entire table for several devices but exclude some rows for one of the devices. For information about a similar operation, ignore, see “Ignoring an Element in HTML Content,” page 229. By default, the Application Gateway retains web page formatting. For example, for devices such as WML-based phones and Palm and RIM devices, table elements are retained as a table, rather than converted to a list. This behavior is controlled by the retainformat key in the DDF which defaults to "yes".

224 Design Studio User Guide Chapter 9 Specifying Transformation Rules in HTML Files Using Application Gateway XHTML Extensions in Source HTML

Use the retainformat attribute as follows: • Retain a table as a table element. Use this rule with a div or table element. • Retain an img element. (By default, the Application Gateway drops images that are smaller than 20 pixels in both height and width for WAP and cHTML devices and IP phones.) Use this rule with a div or img element. • Retain other elements, such as font and pre, that would be ignored as the result of the DDF retainformat key. • Override the DDF retainformat="no" key for an entire page: Put the retainformat="true" attribute on the body element. • Change the value of the retainformat key more than once on a page. Each time you use the retainformat attribute, the value toggles. • For XML-based IP phones, a card is automatically dropped if it does not contain an alphanumeric character. For example, if the source HTML contains a link, followed by a comma and another link, the card containing the comma will be dropped. There might be cases in which you want to retain the card that contains the comma. For example, a card might contain an image that incorporates the comma. To retain the card with the comma, enclose the comma with a span element, as follows: ,

Table 22 contains sample HTML code for several types of transformations.

Design Studio User Guide 225 Chapter 9 Specifying Transformation Rules in HTML Files Using Application Gateway XHTML Extensions in Source HTML

Table 22 HTML Code for Sample Transformations

Transformation HTML Code Select content for one ... device and select a

subset of the same content for a second ... device.

Retain parent

elements. ...

...

... Select content for two ... devices; clip some of

the content for one of the devices. ...

Remove parent device2

elements. ...

...

...

226 Design Studio User Guide Chapter 9 Specifying Transformation Rules in HTML Files Using Application Gateway XHTML Extensions in Source HTML

Table 22 HTML Code for Sample Transformations (continued)

Transformation HTML Code Retain a table as a

assumes that the DDF ... retainformat key is ... set to "no".)

...

Alternatively, you can achieve the same transformation as follows:

... ...

... Replace an img

alternate text. ... For information on how the Application Images,” page 146. ...

Gateway and various handle images, see “Working with

...

Design Studio User Guide 227 Chapter 9 Specifying Transformation Rules in HTML Files Using Application Gateway XHTML Extensions in Source HTML

Creating Dialable Numbers in HTML Content

Note This feature is available only for WAP phones and some IP phones. For more information on the IP phones that you have licensed, go to the Design Studio Help menu and choose Device Help.

Some devices support the initiation of a phone call by selecting text in the microbrowser. The rule="dialname" and rule="dialnumber" attributes enable you to specify a phone number to be dialed when the user selects a particular text string. The prefix="numeric_value" attribute enables you to specify a prefix to be dialed with the phone number. To create a dialable number, you work with two text elements—the text that includes the phone number and the text that you want to use as a label for the phone number. For example, in a directory listing you would use the text associated with a phone number as its label. To create a dialable number in an HTML page, you must enclose the label for the phone number and the phone number in div elements, as shown in the following example: ...

Contact Number:

800-555-1234

Note You must specify the rule="dialname" and rule="dialnumber" attributes in pairs using div elements that enclose text.

228 Design Studio User Guide Chapter 9 Specifying Transformation Rules in HTML Files Using Application Gateway XHTML Extensions in Source HTML

Ignoring an Element in HTML Content

When you clip an element, any text or child elements of that element are also clipped. If you want to exclude an element, but retain the text of the element and any child elements, you ignore the element. For example, the following font element encloses text and a link:

... ...

some text Click here

To include the text and link in the transformation, but ignore the font element, use the rule="ignore" attribute with the font element as follows:

... ...

some text Click here

Design Studio User Guide 229 Chapter 9 Specifying Transformation Rules in HTML Files Using Application Gateway XHTML Extensions in Source HTML

Creating a Soft Key for an IP Phone

Note This feature is available only for some IP phones. For more information on the IP phones that you have licensed, go to the Design Studio Help menu and choose Device Help.

For XML-based IP phones, you can add up to three soft keys per card with the softkeyitem element. You specify which cards are to display the soft key, the URL or phone number for the soft key, and a label. For example, to add a soft key to card3 that opens the link http://www.site.com, use the following syntax: My Site

To add a soft key to the entire deck that dials a user-editable number, use the following syntax: Support

For some WML-based devices, you can convert an input button, with a type of “submit,” to a soft key by adding the attribute a_softkey="true" to the input element.

Specifying an Input Field Type and Label for an IP Phone

Note This feature is available only for some IP phones. For more information on the IP phones that you have licensed, go to the Design Studio Help menu and choose Device Help.

Some IP phones accept any ASCII character supported by the phone in an input field. You can add the _keypad_mode attribute to input type="text | password" or textarea elements to restrict the input type. For example, you can restrict the input type to a telephone number or uppercase letters, thus reducing the number of keystrokes required for a user to complete the field. Use the _input_label attribute if you want to specify a prompt for an input field. See Table 21 for more information about the _keypad_mode and _input_label attributes.

230 Design Studio User Guide Chapter 9 Specifying Transformation Rules in HTML Files Hiding Device-Specific Content from Full Browsers

Refreshing a Card

By default, a user must specify an action to move from one card to the next. For devices that support the meta refresh element, you can specify a refresh interval after which the display advances to the next card. The refresh interval that you specify (refresh_timer="interval") applies to the current card and each subsequent card for the web page until a refresh interval of “0” is encountered. Specify the refresh interval in seconds. You can also specify a refresh interval by including a meta refresh element (meta http-equiv="refresh" content="interval; URL=http://url") in the head element. In this case, the refresh applies to each card associated with the web page. Typically, you would use this method if a web page transforms to one card. For example, you might display an image and then refresh it to a menu; or you might rotate the display between a menu and a list of headlines.

Hiding Device-Specific Content from Full Browsers By default, full browsers such as Internet Explorer and Netscape Navigator render all web page content, including the content enclosed in elements with the attribute class="transform_rule". If a web page contains content intended for full browsers as well as device-specific content, you can hide the device-specific content from full browsers as follows: • Use the attribute class="transform_rule_hide" when you specify the Application Gateway XHTML extensions. • Include a declaration for transform_rule_hide either in a style element in the HTML page or in an external style sheet that you reference from a link element in the HTML page. To embed a declaration for transform_rule_hide in an HTML page, include the following code within the head element:

Design Studio User Guide 231 Chapter 9 Specifying Transformation Rules in HTML Files Managing Configuration Files When Using Application Gateway XHTML Extensions

To put a declaration for transform_rule_hide in an external style sheet, include the following code within the head element of the HTML page:

where filename.css includes the following declaration for transform_rule_hide: .transform_rule_hide { display: none; }

Managing Configuration Files When Using Application Gateway XHTML Extensions To enable the Application Gateway to process Application Gateway XHTML extensions, a special configuration file, extensions.tcf, must be merged with the configuration file published to the Application Gateway. extensions.tcf defines all rules needed to process the extensions. It is provided in the Design Studio installation directory in studio/class/docs/extensions.tcf. The method you use to manage a configuration file is based on whether you use just the Application Gateway XHTML extensions or both the extensions and Design Studio, as follows: • If an Application Gateway is used only to process web pages that include Application Gateway XHTML extensions, publish extensions.tcf to the Application Gateway. For information, see “Merging the Extensions Configuration File on an Application Gateway,” page 233. • If an Application Gateway is used to process web pages that include Application Gateway XHTML extensions and web pages that are transformed using rules created in Design Studio, you must merge any configuration files created in Design Studio with the extensions.tcf configuration file on the Application Gateway. The configuration files that you create in Design Studio must not use the project name “Default Transformations.”

232 Design Studio User Guide Chapter 9 Specifying Transformation Rules in HTML Files Managing Configuration Files When Using Application Gateway XHTML Extensions

While it is possible for you to make modifications to the rules in extensions.tcf, such changes are not supported.

Merging the Extensions Configuration File on an Application Gateway

The Application Gateway XHTML extensions will not work unless the configuration file on the Application Gateway contains the project in the configuration file named extensions.tcf. You must merge extensions.tcf with the file currently on the Application Gateway.

To merge the extensions.tcf configuration file on an Application Gateway: 1 Start Design Studio. For information, see “Starting Design Studio,” page 13. 2 From the Design Studio File menu, choose Open. 3 In the Open dialog box, navigate to studio/class/docs/extensions.tcf in the Design Studio installation area. 4 Click Open. 5 From the File menu, choose Publish Configuration. 6 In the File Upload dialog box, click Merge. If you select Upload Application Menu Pages, the Application Menu will be overwritten. 7 Wait until Design Studio displays a message that the configuration file is uploaded. 8 Click OK.

Design Studio User Guide 233 Chapter 9 Specifying Transformation Rules in HTML Files Managing Configuration Files When Using Application Gateway XHTML Extensions

234 Design Studio User Guide Chapter A

Troubleshooting Design Studio

The following topics describe how to solve commonly encountered problems in Design Studio: • Design Studio Hangs or Will Not Connect to an Application Gateway, page 235 • Simulator Does Not Work, page 236 • General Issues when Using Design Studio, page 236 • Unexpected Transformation Results, page 239

Design Studio Hangs or Will Not Connect to an Application Gateway

Design Studio frequently hangs. Design Studio can hang if your PC runs out of memory (a minimum of 128 MB of RAM is required; 256 MB of RAM is recommended).

Design Studio cannot connect to an Application Gateway. This problem is probably due to the information that you entered when you logged into Design Studio or connected to a different Application Gateway. Contact your Application Gateway administrator to verify that you are using the correct username, password, IP address, and server upload port.

Design Studio User Guide 235 Chapter A Troubleshooting Design Studio Simulator Does Not Work

Simulator Does Not Work

I cannot open a URL in a simulator or browser. I’m getting messages such as “page not found” or “cannot connect to site.” To use a simulator or browser to preview a page, you must connect to an Application Gateway. Verify that you are entering the URL in the correct format as shown in the following example: http://ipAddress:portNumber/http://pageURL The ipAddress:portNumber identifies the Application Gateway.

Transformed pages do not display in my browser. They display in a simulator. Use Internet Explorer version 5.0 or higher or Netscape version 4.01 or higher.

When I try to open a URL in the Openwave Mobile Browser Simulator, the message “Unsupported content type” displays. You must configure the Openwave Mobile Browser Simulator to connect through a proxy port. For information, see “Installing the Openwave Mobile Browser Simulator,” page 26.

After I select “Click here to start” on the Go.Web Simulator, the simulator seems to hang while displaying a message about generating security keys. This problem can occur if you are using a software firewall on your computer. To work around the problem, disable the software firewall while you are using the Go.Web Simulator.

General Issues when Using Design Studio

I opened a URL in Design Studio and the page is blank. A page might appear blank if there is one Select rule on the page and that rule is dead.

I am having trouble creating Identifier rules that work the way I intend. Identifier rules must be mutually exclusive. Here’s a simple example to help you understand how your Identifier rules might be incorrect. Suppose that you have two types of bags of marbles: Type Bag1 contains

236 Design Studio User Guide Chapter A Troubleshooting Design Studio General Issues when Using Design Studio

red marbles and green marbles; Type Bag2 contains red marbles and blue marbles. Suppose that you create the following rules to identify the two types of bags: • If a bag contains a red marble, then it is type Bag1. • If a bag contains a red marble and a blue marble, then it is type Bag2. You receive a new bag of marbles and need to determine which type of bag it is. First, you check if it has a red marble. It does, therefore it matches type Bag1. You then look at the rest of the marbles in your new bag and see that it contains red and blue marbles (type Bag2), not red and green marbles (type Bag1). Because the rule for type Bag1 is not mutually exclusive, you incorrectly identified the new bag.

I applied the Select rule to an element. I want to select another element, but only the element I selected appears in the Edit tab. Click the View Original tab to select additional elements.

My transformation is requiring many rules. Most transformations require fewer than a dozen rules. The most efficient transformations generally start with a Select rule, which eliminates most content that you do not want on the transformed page. Also, be sure that you take advantage of applying rules to multiple depths and positions as described in “Applying Rules to Several Elements,” page 93.

Rules in the rules area are displayed in red or gray. Rules that are displayed in red are conflicting. For information on resolving conflicting rules, see “Resolving Conflicting Rules,” page 90. Rules that are displayed in gray are no longer in effect. For information, see “Evaluating Dead Rules,” page 92.

The Configure dialog box contains the message “This is a Relative Element” and does not let me change the depth setting of the element. That message displays in two cases: • When you select the first Source element of a Move rule. • When you select the first Location element of a rule that uses the Advanced setting to specify rule location.

Design Studio User Guide 237 Chapter A Troubleshooting Design Studio General Issues when Using Design Studio

In both cases, Design Studio does not allow you to change the depth setting of the element because the depth of that element is relative to the Destination path (for the Move rule) or the Operation path (for the Advanced setting). Design Studio must retain the depth setting of the element in order to track its XPath.

A Select rule has no effect or the entire page is clipped. You might need to select a larger area of the page and then clip elements from it as needed. If the transformed page is blank, the Select rule may be based on an attribute that dynamically changes or the Select rule may be dead.

238 Design Studio User Guide Chapter A Troubleshooting Design Studio Unexpected Transformation Results

I added a new rule and a previously added rule no longer is in effect. In general, the last rule added has the highest priority. The exception is the Select rule, which always takes precedence. When one rule causes another rule to not work, the two rules conflict. Conflicting rules display in red in the list of rules. Right-click a red rule name and choose Rule Conflicts to view the name of the conflicting rule.

The configuration file I just saved is not what I intended. Can I revert to the previous version? When you save a configuration file, Design Studio keeps a backup of the previous version in a file named filename~. If you are doing a lot of experimenting, consider saving each version of a configuration file to a different name so you can return to older versions.

Unexpected Transformation Results

HTML/XML pages viewed in a simulator or on a device are not transformed. Check for the following: • Verify the page Identifier rules. • Confirm that the rules are applied to the particular device. • Verify that the rules were published to the Application Gateway you are using to preview them. If they were published, perhaps a subsequent publish of a different configuration file overwrote them, so try publishing the configuration file again. • If the above setup is correct, contact your Application Gateway administrator. There might be a problem with the Application Gateway or server load balancer configuration.

When I tried to browse to a page, Design Studio displayed the Not Well Formed dialog box. The page is not in a format (such as HTML, XHTML, XML) that Design Studio can convert to a DOM object hierarchy. For example, the page might be an image file or a PDF.

Design Studio User Guide 239 Chapter A Troubleshooting Design Studio Unexpected Transformation Results

The Voice Office Menu does not appear on IP phones. Ask your Application Gateway administrator to verify that the Default URL setting on the Operation > General page of the Application Gateway Administration Tool is set to Voice Office Menu (the default setting if the Application Gateway is licensed for IP phones).

The Application Menu does not appear on mobile devices. Ask your Application Gateway administrator to verify that the Default URL setting on the Operation > General page of the Application Gateway Administration Tool is set to Application Menu (the default setting if the Application Gateway is licensed only for mobile devices).

The rules I applied to a page resulted in a correct transformation a few days ago, but now they do not work. The rules that I’m applying to a particular page are not working consistently. This problem is probably due to dynamically generated content on the page. Determine how the content is changing and apply rules accordingly. Pay particular attention to rules that are applied based on element depth and position. The dynamically generated content may not always appear at the same depth or position.You might, for example, need to set a path element to match against a range of positions.

A page does not have the transformation results I intended. The rules that you create must result in valid HTML. If the rules are not working as you expected, verify that you have not inadvertently instructed Design Studio to create invalid HTML. For example, verify that you have not moved a td element outside of a table element.

After browsing to a page in Design Studio and clicking a link, the original page continues to display. If the link contains code to open a new window (for example, ), Design Studio displays the contents of the window at the end of the page containing the link. If you scroll to the bottom of the page, you should see the window contents. For more information on window and frame handling, see Working with Frames and Windows, page 131.

240 Design Studio User Guide Chapter A Troubleshooting Design Studio Unexpected Transformation Results

No images are displayed on IP phones. If the images are not being removed as the result of transformation rules, check the Device Definition File (DDF) for IP phones and verify that images are enabled. For information about editing a DDF, see “Configuring Device Definitions,” page 15.

I added a page that contains one GIF or JPEG image (and no text) and the image does not show up on a RIM device, Palm device, or phone. This problem occurs when a web page contains a link (perhaps with a thumbnail image) that opens just an image in a separate window. Unlike desktop browsers, microbrowsers do not support pages that contain only an image. To work around this limitation, either add text to the page containing just the image, or clip the link to the image.

On a RIM device, a GIF image is not displaying correctly. A RIM device encounters problems when attempting to display a GIF image that follows a blank GIF image (used for spacing, for example). To correct the problem, use Design Studio to clip all blank GIFs.

On a Compaq iPAQ device, a page has horizontal scrolling. By default, the Application Gateway limits horizontal scrolling to improve usability. However, if a page contains a pre element, the default behavior is overriden and the page might have horizontal scrolling. To disable the horizontal scrolling, use Design Studio to clip or ignore the pre element.

On a WML device, my line breaks are ignored. For WML devices, the Application Gateway ignores empty br elements (that is, br elements that do not enclose text or structural elements). To retain a line break, use the Modify rule to add the _forced="true" attribute to the br element.

I imported an XSL style sheet, but it has no effect on the XML pages I added to the project. All xsl:template elements in your style sheet must have a priority attribute set to greater than 1. Otherwise, the style sheet generated by Design Studio can conflict with your style sheet so that your styles do not apply.

Design Studio User Guide 241 Chapter A Troubleshooting Design Studio Unexpected Transformation Results

242 Design Studio User Guide Index

Symbols saving 213 $url variable 186 workflow 202 &, in attributes 81 applying rules 93 /, in URL 55 manually configuring 177 ?, in URL 55 ASCII character encoding 9 attributes A & character 81 applying rules based on 111 Advanced setting 128 audio file 9 example 105 AG See Application Gateway B Application Gateway 5 binary data 9 connecting to 14 clipping file links to 108 handling of web pages 2 br element 161 IP address prepended to links 3, 149 Browse tab 38 operation, illustrated 7 publishing configuration file to 191 C troubleshooting connection to 235 character encoding support 9 upload port 14 child element 33 Application Menu 201 inserting 84 adding an image 207 cHTML adding pages 209 devices 9 changing a page title 204 version supported 8 changing the layout 208 Clip rule 60 creating links 205 creating 71 editor 201 editing 65 opening 203 configuration file 32 previewing 213 and XHTML extensions 232 publishing 213

Design Studio User Guide 243 Index

backing up 44 Design Studio 1 creating 41 configuration file 32 loading 43 features 3 merging 191 logging in 13 opening 43 password 14 overwriting 191 projects in 32 publishing 191 starting 13 saving 43 table of rules 59 conflicting rules 237 troubleshooting 235 content versus XHTML extensions 215 clipping 71 window overview 35 creating 82 workflow overview 40 dynamically generated, example 105, 129 Device Definition File (DDF) 15 frames 131 adding 23 ignoring 74 changing 22 images 146 keys and values 16 modifying 77 devices moving creating portal pages 201 paginating 118 programming a button 82 phone number 151 Dial Number rule 63 selecting 67 applying to several elements 154 tables 139 creating 151 See also page editing 65 custom objects 9 Disable URL Rewrite rule 62 creating 149 D editing 65 document-body tag 133 DDF, see Device Definition File document-frame tag 133 dead rules 237 document-set tag 133 depth, of element 34 document-summary tag 133 applying rule based on 101

244 Design Studio User Guide Index

dynamically generated pages 58, 105, 129 Extensible Stylesheet Language modifying with custom XSL template 182 See XSL specifying rule location 128 uniquely identifying elements 128 F working with 127 finding text in XHTML view 39 Force Card Break rule 64 E formbegin element 71 Edit tab 38 formend element 71 element 33 forms applying rule to several 93 example transformation 124 attributes and applying rules 111 input elements 71, 87, 146 child 33 Submit button 146 depth 34, 101 frames hierarchy 33 frame element 131 manually configuring XPath of 177 iframe element 131 modifying 77 transformation guidelines 133 moving 87 using identifier rules with 133 on dynamically generated pages 105, 128, 129 G parent 33 global variable 186 position 34, 102 Go.Web Simulator 196 relative 237 installing 28 repeated, icon 94 troubleshooting 236 replacing with text 77 using 198 retaining format 139 Group rule 63 skipping 97 creating 157 specifying a relative path 109 editing 65 text, and applying rule 100 using as page identifier 49 encoding support 9

Design Studio User Guide 245 Index

H IMG ALT rule 62 HDML, version supported 8 creating 146 HTML editing 65 based devices, simulators 196 img element 146 content unsupported 9 retaining small images 148 devices supported 9 i-mode, version supported 8 version supported 8 Import XSL rule 62 http-equiv="refresh" 46 creating 182 editing 65 I examples 185 input element 71, 87, 146 Identifier rule 49 example transformation 124 dynamically generated pages 127 on IP phones 162 frames 134 type="image" 146 pages without an 117 Input Type/Label rule 64 Paginate Anchor rule 123 creating 162 template-based pages 116 editing 65 troubleshooting 236 Insert rule 61 windows 134 creating 82 identifying a page 49 editing 65 by element text 51 IP phones 9 by URL 54 adding dialable number for 151 guidelines 50 defining Soft Keys 164 sharing identifiers 56 grouping links 157 Ignore rule 60 previewing transformations 193 creating 74 setting refresh interval 172 editing 65 troubleshooting images 241 images formats supported 8 troubleshooting 241 J using alternate text 147 Java applet 9

246 Design Studio User Guide Index

L Openwave Mobile Browser Simulator 196 line break, forcing 161 installing 26 link troubleshooting 236 converting to soft key 167 using 197 grouping 157 grouping (IP and WAP) 157 P relative 120 page 32 149 rewriting disabled adding to HTML project 45 to binary file, clipping 108 adding to XML project 181 deleting from project 48 M design guidelines 11 Manually Configure Element option 177 displaying information 47 merging configuration files 191 dividing 118, 120 meta element 46 dynamically generated, refresh 174 transforming 105, 129, 182 microbrowser frames used in 131 content design 11 grouping in project 32 display size 11 identifier overview 49 download time 11 identifying by element text 51 navigation 11 identifying by URL 54 simulator 196 paginating 118, 120 Modify rule 60 previewing transformation results 193 creating 77 query/results, transforming 124 editing 65 redirects 46 47 Move rule 61 renaming applying to several elements 112 sharing identifiers 56 creating 87 template-based 115 editing 65 See also content, web page Paginate Anchor rule 62 creating 118 O editing 65 objects, unsupported 9

Design Studio User Guide 247 Index

Palm devices, table handling 139 R parent element 33 redirect requests, handling 46 dropping 70 Refresh rule 64 inserting 84 creating 172 password for Design Studio 14 editing 65 path element, configuring 93 RELATIVE_ELEMENT 128 relative path 109 relative elements 237 PDF files 9 relative links 120 clipping links to 108 results page, transforming 124 phone number Retain Format rule 62 converting to soft key 169 creating 139 making dialable 151 editing 65 phones, previewing transformations 193 RIM devices plug-ins 9 simulator 196 position, of element 34 table handling 139 applying rule based on 102 rules 31 Preview tab 38, 193 displayed in gray 90 project displayed in red 90 about 32 See also identifier rules, transformation adding page 45, 181 rules creating 41 deleting 44 S deleting page from 48 searching XHTML 39 HTML, creating 44 select element 71 tree, using 36 Select Relative Path button 109, 128 XML, creating 180 Select rule 59 publishing configuration files 191 creating 67 editing 65 Q precedence over rules 70 query page, transforming 124 troubleshooting 238 Shift_JIS character encoding 9

248 Design Studio User Guide Index

simulator 196 Disable URL Rewrite rule 62 Go.Web 28 editing 65 Openwave Mobile Browser 26 Force Card Break rule 64 troubleshooting 236 Group rule 63 Soft Key rule 64 Ignore rule 60 creating 164 IMG ALT rule 62 editing 65 Import XSL rule 62 Style Sheet tab 38 Input Type/Label rule 64 Submit button on forms 146 Insert rule 61 in source HTML 215 T manually configuring XPath 177 Modify rule 60 table element 139 Move rule 61 converting to list 142 on dynamically generated pages 128 retaining 139 62 tables Paginate Anchor rule previewing results of 193 converting to list 139, 142 priority of 93 example transformation 105, 129 Refresh rule 64 retaining 139 Retain Format rule 62 tag Select rule 59 See element Soft Key rule 64 textarea element, on IP phones 162 specifying location of 128 text element, configuring 93 table of 59 title element, as page identifier 49 troubleshooting 239 transformation rules 31, 58 using XHTML extensions 215 applying to several elements 93 Clip rule 60 conflicting rules 90, 237 U creating custom 182 URL dead rules 90, 237 and / 55 deleting 65 and ? 55 Dial Number rule 63 changing with custom XSL 188

Design Studio User Guide 249 Index

in attributes 81 Wireless Markup Language rewriting 3 See WML rewriting, disabled 149 WML using as page identifier 49 devices 10 user agent, for device 16 version supported 8 UTF-8 character encoding 9 X V XHTML variable, global 186 code, inserting 82 video file 9 element hierarchy 33 View Original tab 38 source view 38 use of 38 W versions supported 8 XHTML extensions 215, 217 WAP phones 10 clipping content 224 adding dialable number for 151 creating dialable numbers 228 grouping links 157 disabling URL rewriting 223 simulator 196 extensions.tcf 232 table handling 139 forcing a card break 219 web page hiding content from full browsers 231 formats supported 8 ignoring an element 229 IP address in links to 3 managing configuration files 232 unsupported content 9 refreshing a card 220 See also page replacing images with alternate text 227 windows 131 retaining tables 227 transformation guidelines 133 selecting content 224 Wireless Application Protocol XML See WAP phones code, inserting 82 wireless device 1 content unsupported 9 content design 11 project 177 formats supported 9 supported 9

250 Design Studio User Guide Index

version supported 8 well-formed syntax 86 XPath expression, configuring 177 XSL, version supported 8 xsl:call-template element 184, 189 xsl:keys element 184, 189 xsl:template element 180, 182 XSL style sheet 177 examples of custom XSL 185 importing 180 updating 182 XSL template rule 182

Design Studio User Guide 251