Design Studio Getting Started Guide Release 2.1 (Service Pack)

Transcription

1 Release 2.1 (Service Pack) Issue 2.1 April 2006

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

3 Contents CHAPTER 1 Design Studio Overview 1 Important Concepts in Design Studio 3 Working in Design Studio 6 CHAPTER 2 Installing and Starting Design Studio 7 Installing Design Studio 7 Starting Design Studio 8 CHAPTER 3 Design Studio Quick Tour 9 Getting Started 10 Identifying the Page 15 Selecting Content 17 Selecting Additional Content 23 Clipping Content 25 Changing Several Elements with One Rule 28 Inserting Content 32 Moving Content 37 Previewing the Transformation 43 Saving and Publishing the Project 44 I NDEX iii

4 Contents iv

5 Chapter 1 Design Studio Overview Application Gateway Design Studio is a PC-based application that allows you to provide business applications to mobile users by specifying how applications should appear when delivered to a variety of microbrowser devices, including IP phones, Wireless Application Protocol (WAP) phones, and Personal Digital Assistants (PDAs). When you use Design Studio you do not change existing content; instead, you create transformation instructions that customize applications for delivery to microbrowser devices. You can also use Design Studio to customize the Application Menu, a portal for users of phones and other supported devices. The Application Menu simplifies and streamlines user access to common destinations, just as a computer desktop does for PC users. For information on the Application Menu, refer to the Design Studio User Guide. The Application Gateway is an appliance-based transformation device. The Application Gateway dynamically transforms applications according to the transformation instructions created in Design Studio and based on microbrowser requirements, such as screen size and markup language. The Application Gateway delivers data and enhanced voice applications to the users of IP telephones and mobile devices. An Application Gateway is located in front of application servers, as shown in the sample configuration in Figure 1. 1

6 Chapter 1 Design Studio Overview Figure 1 Application Gateway Connected to Application Server These topics introduce the key concepts and processes that will help you to work efficiently with Design Studio: Important Concepts in Design Studio, page 3 Working in Design Studio, page 6 2

7 Chapter 1 Design Studio Overview Important Concepts in Design Studio Important Concepts in Design Studio Before you begin working with Design Studio, it is helpful to understand a few concepts so that you organize your work and create transformation instructions (transformation rules) as efficiently as possible. Design Studio has a comprehensive set of transformation rules. To transform a web page containing images, links, tables, and forms for appropriate display on a device, you use transformation operations such as select, clip, move, insert, and modify. Design Studio supports complex transformations through the rules listed in Table 1. Table 1 Rule Select Clip Ignore Modify Insert Summary of Transformation Rules Common Uses Includes an element. The first Select rule that you apply to a page excludes all other elements. The subsequent Select rules that you create add to your initial selection. In general, the most efficient way to start working with a page is to select the main element you want to include (perhaps a form or table). To select additional elements, go to the View Original tab. Excludes an element. After you select the main element(s) you want to include, you can then clip elements within the selected content. For example, you might clip a particular table column or some fields in a form. Overrides a Select or Clip rule. Suppose that a table you select includes a href links and the text that is displayed for the links. For a transformation, you can include just the text and not the link by ignoring the link. (If you clip the a href link, the accompanying text is also clipped.) Changes one type of element to another type of element. For example, you might change an hr element (horizontal rule) to a br element (break). You can also replace an element with XHTML/XML code or text; you can add, change, or remove element attributes. Adds an element, text, or blocks of HTML/XML code. Your transformed page can contain content that is not part of the original web page. 3

8 Chapter 1 Design Studio Overview Important Concepts in Design Studio Table 1 Summary of Transformation Rules (continued) Rule Move Retain Format IMG ALT Paginate Anchor Disable URL Rewrite Import XSL Force Card Break Other rules Common Uses Relocates an element. The Move rule is particularly useful for managing layout on very small screens. For example, if an input field and label will display on different pages on a device, you can move the label so that it is sent to the device before the input field. Toggles the setting of the DDF key retainformat. Retains an img element smaller than 20 pixels in both width and height. Replaces an image with its alternate text. Images that are large or that do not display well on small screens are best replaced with text. You might also choose to replace an image to improve download time. Creates multiple links in the place of one href link and allows you to define multiple views of the destination page. Instead of sending one large page to a device when a user clicks a particular link, you can divide the destination page into several pages which the user accesses through additional links that you create. By default, the Application Gateway prepends its IP address to links on transformed pages so that page requests are directed to the Application Gateway. You can disable URL rewriting by applying a Disable URL Rewrite rule to a link. Applies custom XSL to a particular element. By importing XSL, you can achieve transformations that are not possible through the other transformation rules. For example, you can import XSL that performs string manipulation on a URL string. Supplements automatic pagination by inserting a card break. Useful when related elements are split between two cards. Depending on the type of devices for which you have purchased licenses, you may have access to additional rules that take advantage of the native functionality of the device. For more information, refer to the Design Studio User Guide. 4

9 Chapter 1 Design Studio Overview Important Concepts in Design Studio You can achieve powerful results with very few transformation rules. A transformation rule can apply to just one element on one page for one device type. A transformation rule can also apply to many instances of an element across several pages for all device types. Before you begin applying transformation rules, analyze the web pages you want to transform. Consider whether pages that are based on a common template can be transformed using the same set of rules. Plan how you can achieve a particular transformation with as few rules as possible. Using a small set of rules speeds your initial work and simplifies maintenance. Most pages require fewer than a dozen transformation rules. You can apply a transformation rule to all pages in a project. A project is a container for web pages that you want to transform. Be sure to group in a project the pages that can share transformation rules. All of the transformation rules that reside on an Application Gateway must be contained in one configuration file. When you save your work in Design Studio, you save a configuration file. A configuration file is what you publish to the Application Gateway. When you publish a configuration file, you can overwrite or merge with the already published file. The Application Gateway must be able to match a set of transformation rules to a particular web page. When an Application Gateway receives a request for a web page, it must match the page to a set of transformation rules, manipulate the page as needed for the requesting device, and then transform the page based on the rules you created in Design Studio. The Application Gateway recognizes a page based on another type of rule that you create in Design Studio, the identifier rule. You can identify a page by some or all of its URL, by some unique text on the page such as the text of the title element, or by a combination of the URL and some unique text. When you create an identifier rule, it is important to consider whether any other web page could match the rule. 5

10 Chapter 1 Design Studio Overview Working in Design Studio Working in Design Studio Design Studio Quick Tour, page 9, guides you through a sample Design Studio project, from starting the Design Studio application to publishing your work to an Application Gateway. For each set of web pages that you transform in Design Studio, you will perform the following steps: 1. Create a configuration file in Design Studio. 2. Add a project to contain a related set of web pages that you will transform. 3. Add a web page to a project. 4. Create identifier rules for the page. 5. Create transformation rules for the page. 6. Publish the page to the Application Gateway you use for testing. 7. Preview the page. 8. When a project is ready for production, publish it to an Application Gateway. 6

11 Chapter 2 Installing and Starting Design Studio The following topics summarize the steps for installing and starting Design Studio: Installing Design Studio, page 7 Starting Design Studio, page 8 For more detailed information, see the Design Studio User Guide. Installing Design Studio The Design Studio installer is on a CD-ROM provided with the Application Gateway. A Design Studio installation includes the required Java 2 Runtime Environment (JRE). Design Studio requires the following: Windows 2000 or Windows XP At least 25 MB of disk space. At least 128 MB of RAM; 256 MB is recommended. Internet Explorer version 5.0 or higher or Netscape version 4.01 or higher. A VGA color monitor with a graphics card capable of showing 16-bit color or higher. The minimum screen resolution is 1024 x 768. Recommended resolution is 1280 x Network connection to the Application Gateway. 7

12 Chapter 2 Installing and Starting Design Studio Starting Design Studio To install Design Studio: 1 On the PC where you want to install Design Studio, insert the Design Studio CD-ROM in the CD drive. 2 If the installer does not start automatically, run setup.exe. 3 Follow the instructions in the installer. You may be asked to restart your PC during the installation. After you restart your PC, the Design Studio installation wizard continues the installation. By default, Design Studio is installed on the home drive in the folder used for Program Files in Avaya\AG\Design Studio\version. 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 The IP address of the Application Gateway Application Gateway upload port number 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 number is 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. 8

13 Chapter 3 Design Studio Quick Tour This quick tour explains how to use Design Studio to create transformation rules for one web page. The tour introduces the basics of Design Studio without getting into the details. Note The tour takes about 15 minutes to complete. The web page used in this example contains contact information and related links. Figure 2 shows how the original page looks. Figure 3 shows how the page looks after you have created transformation rules with Design Studio. Figure 2 Original Contacts Page 9

14 Chapter 3 Design Studio Quick Tour Getting Started Figure 3 Transformed Contacts Page Notice that the transformation omits most of the original content. Getting Started Before you start creating the rules that transform the contacts page, you must first create a configuration file and project in Design Studio. A configuration file is a container for one or more projects; only one configuration file can be loaded on an AG at a time. A project is a container for one or more web pages and helps you to organize your work. If you want to follow these steps on your PC, start Design Studio as described in Installing and Starting Design Studio, page 7. 1 In the Design Studio window, click New Configuration. Alternatively, choose New Configuration from the File menu. Design Studio creates a configuration file named Unnamed Configuration and displays the Create Project dialog box. 10

15 Chapter 3 Design Studio Quick Tour Getting Started 2 In the Name of the project field, enter Quick Tour. For this exercise, leave the HTML radio button selected. 3 Click OK. Design Studio adds the project name Quick Tour to the window. Next, you will navigate from the sample home page to the contacts page. Then, you will add the contacts page to the Quick Tour project. 1 In the Address field, type /Examples/Tutorial/home.html and press Enter. Note You must have Internet access to reach the site. 11

16 Chapter 3 Design Studio Quick Tour Getting Started Design Studio displays the sample home page in the Browse tab. 2 At the top of the page, click Contacts. The sample contacts page appears. 12

17 Chapter 3 Design Studio Quick Tour Getting Started 3 In the lower-left pane, click Add to Configuration. The Add Page to Project dialog box appears. You must add a page to a project in order to create transformation rules for it. By default, the project tree uses a page s URL as its name. You can change the name of a page to something more descriptive. 4 In the Add Page to Project dialog box, change the page name to Contacts. 13

18 Chapter 3 Design Studio Quick Tour Getting Started Tip To change a page name after you add a page, right-click the page in the project tree, choose Rename Page from the shortcut menu, and enter a name. 5 Click OK. Design Studio adds the page to the project tree and displays it in the View Original tab, which contains a browser view and an XHTML source view of the page. 14

19 Chapter 3 Design Studio Quick Tour Identifying the Page Identifying the Page After you add a page in Design Studio, you must specify an identifier for the page. The AG uses an identifier to distinguish one web page from another. This identifier enables the AG to determine which rules to apply to a web page. Typical identifiers are the text of the title element or the page URL. 1 Click Identifier Rules in the project tree. 2 In the XHTML source view, locate the title element. Tip If you have trouble locating an item, you can click the Find ( ) icon, enter the text or element name you are searching for, and click Find. 3 Right-click the text Sample Contacts Page that follows the title element. A shortcut menu appears. 4 Choose Tag Contains from the shortcut menu. The Identify Page dialog box appears. 15

20 Chapter 3 Design Studio Quick Tour Identifying the Page For this exercise, do not change anything in the dialog box. 5 Click OK. Design Studio adds the identifier to the page and lists the rule in the lower-left pane. 16

21 Chapter 3 Design Studio Quick Tour Selecting Content Selecting Content Now that you have added the contacts page and created an identifier for it, you can begin transforming the contents of the page. In this exercise, you select a portion of the page for display on devices. The rest of the content on the original page will not be sent to devices. 1 In the Design Studio window project tree, click Transformation Rules to display the list of supported devices. 2 Click IP Phone. Note The devices listed in your Design Studio window will differ from the examples in this guide. The number in parentheses indicates the number of rules applied to the device type. Before you can create a transformation rule, you must select a device type in the project tree. If your license supports multiple device types, you can later apply a rule to other device types. For this exercise, you will create rules for one device type only. The contacts page appears in the Edit tab. 17

22 Chapter 3 Design Studio Quick Tour Selecting Content The browser view appears in the upper pane of the Edit tab; the XHTML source view appears in the lower pane of the Edit tab. In the introduction to this tour, Figure 3 showed how the transformed contacts page looks: Some contact information is included and the rest of the content is excluded. To begin transforming the page, you will select the company address and phone numbers. 3 In the browser view, click the text unnamed company that is below the logo. 18

23 Chapter 3 Design Studio Quick Tour Selecting Content Tip Clicking an item in the browser view is a quick way to locate an element in the XHTML source view. Design Studio selects the text in both the browser and XHTML source views. 19

24 Chapter 3 Design Studio Quick Tour Selecting Content 4 Locate in the XHTML source view the small element that is three lines above unnamed company. 5 Click the small element in the XHTML source view. The small element contains elements that you will select for transformation in this tour. Design Studio expands the highlighted area in the browser view. 6 Right-click the small element in the XHTML source view. A shortcut menu appears. Note Your menu might include additional commands. 20

25 Chapter 3 Design Studio Quick Tour Selecting Content 7 Choose Select from the shortcut menu. The Configure: Select Rule dialog box appears. 21

26 Chapter 3 Design Studio Quick Tour Selecting Content Note If your license supports more than one device, all configure dialog boxes include a list of the devices below the Rule Name area. You can select each device to which you want to apply a rule. 8 Select Drop All Parent Elements. By dropping parent elements, you select only the contents of the table, not the table structure. Removing unnecessary parent elements lowers the processing overhead. For this exercise, do not change anything else in the dialog box. 9 Click OK. The browser view displays only the element you selected. In the XHTML source view, the Select icon ( ) indicates that you selected this element. You have now created your first transformation rule. The transformed page contains only the company address and phone numbers. 22

27 Chapter 3 Design Studio Quick Tour Selecting Additional Content Selecting Additional Content In this exercise, you will select some links to include in your transformed page. 1 Click the View Original tab. The additional element that you need to select no longer displays in the Edit tab. By viewing the original web page in the View Original tab, you can locate the element and apply a rule to it. 2 In the browser view, click General Inquiries. Design Studio highlights General Inquiries in both views. 3 In the XHTML source view, click the td element that is six lines above General Inquiries. The Design Studio window should look like the following example: 23

28 Chapter 3 Design Studio Quick Tour Selecting Additional Content 4 Right-click the td element you just selected and choose Select from the shortcut menu. 5 Select Drop All Parent Elements. For this exercise, do not change anything else in the dialog box. 6 Click OK. 7 Click the Edit tab. You must return to the Edit tab to see the transformation results. The elements you selected are now included in the transformed page. 24

29 Chapter 3 Design Studio Quick Tour Clipping Content Clipping Content Some content that you selected for transformation in an earlier exercise includes a horizontal rule that you will now remove. When a chunk of content includes an element that you want to remove, you use the Clip rule or the Ignore rule. The Clip rule removes an element and all of its descendants. The Ignore rule ignores just the element and keeps the descendants of the element. In this exercise, you will exclude the horizontal rule by clipping it. 1 Make sure that the Edit tab is visible and then click the horizontal rule in the browser view. 25

30 Chapter 3 Design Studio Quick Tour Clipping Content 2 In the XHTML source view, right-click the hr element and choose Clip from the shortcut menu. The Configure: Clip Rule dialog box appears. 26

31 Chapter 3 Design Studio Quick Tour Clipping Content 3 Click OK. The horizontal rule is no longer part of the transformed content. In the XHTML source view, the Clip icon ( element. ) indicates that you clipped an 27

32 Chapter 3 Design Studio Quick Tour Changing Several Elements with One Rule Changing Several Elements with One Rule Each Select rule that you created in this Quick Tour applies only to one node in the XHTML. You can also apply one rule to several nodes. With one rule, you can accomplish powerful results such as the following: Change every occurrence of one element to another element. Select a particular type of element, regardless of its location in the XHTML hierarchy. Apply a rule to content that dynamically changes position. In this exercise, you will modify all of the li elements (the bulleted list you previously selected) to br elements with one rule. As a result, the bullet character will be removed from those elements. 1 Make sure that the Edit tab is visible, and then click General Inquiries. 2 In the XHTML source view, right-click the li element that is four lines above General Inquiries and choose Modify from the shortcut menu. 28

33 Chapter 3 Design Studio Quick Tour Changing Several Elements with One Rule The Configure: Modify Element Rule dialog box appears. 3 In the Configure: Modify Element Rule dialog box, click the Modify Element tab. The Modify Element tab displays the selected element name in a text box. You use the button to display a list of HTML elements from which you can choose an element to replace the li element. 29

34 Chapter 3 Design Studio Quick Tour Changing Several Elements with One Rule 4 Click the button to display a list of elements. 5 Scroll the list and select br. 6 Click OK. The bullet character no longer appears in front of General Inquiries. 7 To remove the bullet character from the rest of the items, right-click the li element where you applied the Modify rule and choose Edit Rule from the shortcut menu. 30

35 Chapter 3 Design Studio Quick Tour Changing Several Elements with One Rule Note In the XHTML source view, the Modify icon ( ) indicates that you modified this element. 8 In the Configure: Modify Element Rule dialog box, notice that the li element in the Path list is selected. You can use the settings in the Path to Selected Element area to apply a rule across multiple depths and positions of an element. Depth refers to the nesting that is represented along the x-axis in the XHTML source view. Position refers to the repetition of like elements along the y-axis. 9 From the Position to Match drop-down menu, choose All Positions. 31

36 Chapter 3 Design Studio Quick Tour Inserting Content 10 Click OK. All of the list items now appear without the bullet character. Inserting Content In this exercise, you will insert some text in the transformed page. 1 Make sure that the Edit tab is visible, and then click the last phone number. 32

37 Chapter 3 Design Studio Quick Tour Inserting Content 2 In the XHTML source view, right-click the br element that follows the selected phone number. 33

38 Chapter 3 Design Studio Quick Tour Inserting Content 3 Choose Insert from the shortcut menu. The Configure: Insert Rule dialog box appears. 34

39 Chapter 3 Design Studio Quick Tour Inserting Content For this example, do not change anything in the Configure Rule tab. 4 Click the Insert Element tab. 5 In the Insert New Element area, click the After radio button to indicate where you want to insert the text. 6 In the HTML/XML Fragment text box, type <p>contacts:</p>. The Insert Element tab should look like the following example: 35

40 Chapter 3 Design Studio Quick Tour Inserting Content 7 Click OK. Design Studio displays the inserted text after the phone number in the browser view. In the XHTML source view, the Insert icon ( ) indicates that you inserted an element. 36

41 Chapter 3 Design Studio Quick Tour Moving Content Moving Content In this exercise, you will move some text after Technical Support. 1 The text you are moving is not included in the current transformed page, so click the View Original tab in order to locate the text. 2 In the browser view, click Partner Support. 37

42 Chapter 3 Design Studio Quick Tour Moving Content 3 In the XHTML source view, right-click the a element that is one line above Partner Support. 4 Choose Move from the shortcut menu. 38

43 Chapter 3 Design Studio Quick Tour Moving Content The Move Destination dialog box appears. 5 In the XHTML source view, locate the text Technical Support. You will move the text Partner Support after Technical Support. 6 Click the a element that is one line above Technical Support. The text appears in the Move Destination dialog box. 7 In the Move Destination dialog box, click OK. The Configure: Move Rule dialog box appears. 39

44 Chapter 3 Design Studio Quick Tour Moving Content 8 In the Move Element area, click After and then click OK. 9 In the Design Studio window, click the Edit tab. The text you moved appears on the same line as Technical Support. 40

45 Chapter 3 Design Studio Quick Tour Moving Content You can correct the formatting by inserting a line break, as follows. 10 In the XHTML source view, right-click Technical Support and choose Insert from the shortcut menu. 11 Click the Insert Element tab. 12 Click the After radio button and then type <br/> in the XHTML/XML Fragment text area. 41

46 Chapter 3 Design Studio Quick Tour Moving Content 13 Click OK. Your transformed page should look like the following example: 42

47 Chapter 3 Design Studio Quick Tour Previewing the Transformation Previewing the Transformation Design Studio includes a static page preview for most device types. To preview transformations for Palm and Research in Motion (RIM) devices, or to test navigation on any device, you must use actual devices or device simulators. To preview your work: 1 Click the Preview tab. 2 In the Cards column of the Preview tab, click the first card. 3 View the transformed card in the preview. 43

48 Chapter 3 Design Studio Quick Tour Saving and Publishing the Project Saving and Publishing the Project You have now transformed your first web page. Next, you will save your work and publish the configuration file. To save your work: 1 From the File menu, choose Save Configuration. 2 Enter QuickTour and click Save. Design Studio saves your project in a configuration file named QuickTour.tcf. Next, you will publish the configuration file to the AG. Only one configuration file can reside on an AG at a time. The configuration file that you publish replaces the configuration file previously in effect on the AG. We recommend that you follow these guidelines when working with Design Studio configuration files: Maintain on your PC separate folders for in-progress and published configuration files. Archive on your PC each configuration file that you publish to the AG. If someone accidentally overwrites the configuration file on the AG, you can retrieve it from your PC. After you complete work on a configuration file and want to put it into production, be sure to publish the configuration file to an AG. To publish your configuration file to an AG: 1 From the File menu, choose Publish Configuration. 2 Indicate whether you want to merge or overwrite the configuration file. Merge the configuration file if you want to add your rules to the already loaded configuration. Overwrite the configuration file if you want to replace the currently loaded configuration file. 3 Wait until Design Studio displays a message that the configuration is uploaded. 4 Click OK. 44

49 Chapter 3 Design Studio Quick Tour Saving and Publishing the Project 5 To view your work in a device, you must direct your request through the AG where you published the configuration file. For example, if your AG IP address is and your HTTP port is 80, you can view your transformation of the sample Contacts page ( /Examples/Tutorial/sample.html) by navigating to the following URL: sample.html You have now completed the tour. Tip For more information on transforming web page content, click Help in the Design Studio window and choose Design Studio Help (for the online version of the Design Studio User Guide) or Examples (for sample transformations). 45

50 Chapter 3 Design Studio Quick Tour Saving and Publishing the Project 46

51 Index A adding web pages 13 Address field 11 Application Menu 1 applying a rule to several elements 28 B browser view 14, 19 Browse tab 12 C Clip rule 3 creating 25 icon 27 configuration file 5, 44 creating 10 publishing 44 saving 44 content adding to a selection 23 clipping 25 inserting 32 moving 37 selecting 17 creating a project 10 D depth, defined 31 Design Studio 1 installing 7 starting 8 system requirements 7 workflow 6 Disable URL Rewrite rule 4 E Edit tab 17 elements applying rule to several 28 depth 31 inserting 32 modifying 28 moving 37 position 31 removing parents 22 searching for 15 selecting 17 F Find icon 15 Force Card Break rule 4 I Identifier rule 5 creating 15 Ignore rule 3 47

52 Index IMG ALT rule 4 Import XSL rule 4 Insert rule 3 creating 32 icon 36 installing Design Studio 7 Internet Explorer version supported 7 IP phone preview 43 M Modify rule 3 creating 28 icon 31 Move rule 4 creating 37 N Netscape version supported 7 P page See web page Paginate Anchor rule 4 parent elements, removing 22 Path to Selected Element area 31 position, defined 31 Preview tab 43 project 5 adding page to 13 creating 10 previewing 43 publishing 44 saving 44 tree, and device types 17 publishing a project 44 R renaming a page 13 Retain Format rule 4 rules See transformation rules S saving a project 44 searching a web page 15 Select rule 3 creating 17, 23 icon 22 starting Design Studio 8 system requirements 7 T transformation rules applying to several elements 28 editing 30 guidelines 5 48

53 Index summary of 3 viewing results of 43 U URL, navigating to 11 V View Original tab 14, 23 W web page adding to project 13 creating identifier 15 navigating to 11 renaming in project tree 13 searching in 15 X XHTML source view 14, 19 49