Building Dynamic WAP Applications with MobileDev

Building Dynamic WAP Applications with MobileDev Stéphane Hogue Leslie Hirst Nicolas Fortin Pearson 201 West 103rd St...

Author: Leslie Hirst | Stephane Hogue | Nicolas Fortin

25 downloads 947 Views 4MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Report copyright / DMCA form

DOWNLOAD PDF

Building Dynamic WAP Applications with MobileDev Stéphane Hogue Leslie Hirst Nicolas Fortin

Pearson 201 West 103rd St., Indianapolis, Indiana, 46290 USA

Building Dynamic WAP Applications with MobileDev

ASSOCIATE PUBLISHER Jeff Koch

ACQUISITIONS EDITOR William Brown

Copyright © 2002 by Sams Publishing All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein.

DEVELOPMENT EDITOR

International Standard Book Number: 0-672-32177-7

Barbara Hacha

Library of Congress Catalog Card Number: 2001089498

INDEXER

Printed in the United States of America

Aamir Burki

03

02

MANAGING EDITOR Matt Purcell

PROJECT EDITOR Andy Beaster

COPY EDITOR

PROOFREADER

First Printing: July 2001 04

Mark Renfrow

01

4

3

2

1

Trademarks All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark.

Jody Larsen

TECHNICAL EDITOR Richard Simon

TEAM COORDINATOR Chris Feather

INTERIOR DESIGNER Anne Jones

Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The authors and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book.

COVER DESIGNER Aren Howell

PAGE LAYOUT Ayanna Lacey

Contents at a Glance Introduction 1 PART I

An Introduction to WAP Application Development

1

The Wireless World 5

2

WAP Design Tools 19

3

Wizarding Up a WAP Application 41

PART II

The Basics of WAP Application Design

4

Before Building 63

5

Learning About Wireless Markup Language 75

6

Wizards and Markup 103

7

Script Plus Markup—A Dynamic Application 127

8

Getting the Most Out of MobileDev 159

PART III 9

Advanced Topics Location-Based Services 189

10

More Fun for WAP Fanatics 203

11

Java and MobileDev 223

12

The Future of the Wireless Internet 239

PART V

Appendixes

A

Setup 255

B

Glossary 275 Index 291

Table of Contents Introduction

PART I

1


1

The Wireless World 5 The Wireless Internet ..............................................................................6 Web Applications................................................................................6 WAP Applications ..............................................................................7 What You Need to Know....................................................................7 In Technical Terms ..................................................................................8 WAP Protocol ..........................................................................................9 What About Other Protocols? ............................................................9 Internet-Capable Phones and Other Devices ........................................10 Cell Phone Limitations and Benefits................................................10 Phones Versus Browsers ..................................................................11 Phone Simulators ..................................................................................11 Cellular Networks ..................................................................................13 WAP Gateways ......................................................................................13 Markup Languages ................................................................................14 WML Example ................................................................................14 What About XHTML?......................................................................14 Markup Languages and Design Tools ............................................15 Programming Languages ......................................................................15 Your Role in the Development Process............................................15 Unique Wireless Features ......................................................................16 How Do WAP Applications Work?........................................................16 Summary ................................................................................................17 Q&A ......................................................................................................17

2

WAP Design Tools 19 Wireless Design Tools ..........................................................................20 MobileDev for the Wireless Internet ....................................................20 Features That Make It Easy..............................................................21 Try It Yourself ..................................................................................21 Let’s Go..................................................................................................22 Open a Project........................................................................................23 About the Movies Demo........................................................................23 Static or Dynamic? ..........................................................................24 MobileDev’s Development Environment ..............................................24 Views ................................................................................................24 View Options ....................................................................................24

Application Map ....................................................................................25 Working in the Application Map......................................................26 Application Browser ..............................................................................27 Want More Information? ..................................................................27 Document Editor....................................................................................27 Script Editor ..........................................................................................28 Phone Simulator ....................................................................................29 SDK Simulators ....................................................................................30 Database Browser ..................................................................................30 Loading a Data Source ....................................................................30 Pasting Column Information ............................................................31 Toolbars..................................................................................................31 Floating and Docking ......................................................................31 Moving a Toolbar ............................................................................31 Customizing the Toolbar ..................................................................32 Pop-ups ..................................................................................................32 Help Is a Click Away ............................................................................32 Overview ..........................................................................................32 Online Getting Started ..........................................................................33 Context-Sensitive Help ....................................................................33 Running a Project ..................................................................................33 Using the Simulator ..............................................................................35 Clicking a Key ..................................................................................35 Service Options ................................................................................35 Highlight and Select ........................................................................35 Prompt Fields....................................................................................35 Text and Other Editors ....................................................................36 Multiselection Lists ..........................................................................37 Closing the Demo ..................................................................................38 Testing Across Simulators ....................................................................38 Install UP.Simulator ..............................................................................38 Summary ................................................................................................39 Q&A ......................................................................................................40 3

Wizarding Up a WAP Application 41 Your First Application............................................................................42 Create a Project......................................................................................42 Decks, Cards, and Links ........................................................................43 What’s a Deck? ................................................................................43 And a Card?......................................................................................43 What About Links? ..........................................................................43 Wizards ..................................................................................................44 MobileDev Wizards ..........................................................................44

vi

BUILDING DYNAMIC WAP APPLICATIONS

WITH

MOBILEDEV

Create the First Deck ............................................................................46 Save the Project ....................................................................................48 Changing the Look of the Application Map..........................................48 Retrofitting........................................................................................50 Create the Second Deck ........................................................................51 Create a Link ....................................................................................52 Curious About the Code? ................................................................53 Run the Application ..............................................................................53 What’s Auto Mirror? ........................................................................54 Troubleshooting................................................................................54 Same Application, Different Browser....................................................55 Create the First Card ........................................................................56 Create the Second Card ....................................................................57 Create the Link ................................................................................57 Compare the Applications ................................................................58 Summary ..........................................................................................58 Q&A ......................................................................................................59

PART II


4

Before Building 63 The Question of Style ............................................................................64 Style Guides......................................................................................65 The Question of Technology ................................................................67 Browser Brand..................................................................................67 Document Type and Version ............................................................69 Application Server............................................................................69 Avoiding Headaches ..............................................................................71 Fixing Things....................................................................................72 Your Turn to Create Projects ................................................................72 The TopMovies Project ....................................................................72 The BitsNPieces Project ..................................................................72 Summary ................................................................................................74 Q&A ......................................................................................................74

5

Learning About Wireless Markup Language 75 What Is Markup? ..................................................................................76 Why WML and Not HDML? ..........................................................76 WML Basics ....................................................................................77 Something to Work With ..................................................................77 Decks......................................................................................................79 Document Prologue ..............................................................................80

CONTENTS Cards ......................................................................................................80 Display Card ....................................................................................81 Input Card ........................................................................................82 Select Card........................................................................................82 Images ....................................................................................................84 Configure Your Web Server for Images ..........................................85 Images in WML Syntax ..................................................................85 WBMP Images ................................................................................86 Icons..................................................................................................87 Using Images ....................................................................................87 Links ......................................................................................................88 Action Links ....................................................................................88 Anchors ............................................................................................91 Card Events ......................................................................................93 Card Events and Animated Images ..................................................93 Browser Variables ..................................................................................95 Another Way to Use Browser Variables ..........................................97 WML Rules............................................................................................97 For More Information ............................................................................98 Editing Markup Code in MobileDev ....................................................98 Auto List Members ..........................................................................98 Auto Complete..................................................................................99 Chroma Code....................................................................................99 Property Sheets ..............................................................................100 Online Help ....................................................................................100 Summary ..............................................................................................101 Q&A ....................................................................................................101 6

Wizards and Markup 103 What Are You Building?......................................................................104 Create Display Deck ............................................................................104 What’s a Back Key? ......................................................................106 Default Markup....................................................................................108 Browser Brand................................................................................108 Restricted Access............................................................................108 Caching Control..............................................................................109 Generate a Key to a Previous Task ................................................109 Specify This Deck as a New Task ..................................................110 Enable Back Key ............................................................................110 Create Input Deck for a Prompt ..........................................................110 What’s a Browser Variable? ..........................................................112 What’s “Undefined?”......................................................................113 Where Did that Card Name Come From?......................................113 Other Options in the Wizard ..........................................................113

vii

viii


WITH

MOBILEDEV

Create Action Link ..............................................................................114 Drawing the Link............................................................................115 Create Input Deck for a Selection ......................................................116 Relink an Unresolved Link..................................................................118 Add an Options Link ..........................................................................119 Deck Versus Card ..........................................................................120 The About Card and Options Link ................................................120 Run Application ..................................................................................123 The Limits of Markup..........................................................................123 Summary ..............................................................................................125 Q&A ....................................................................................................126 7

Script Plus Markup—A Dynamic Application 127 Why Use Script? ..................................................................................128 Script Plus Markup ..............................................................................128 Server Languages ................................................................................129 Perl..................................................................................................130 ASP VBScript ................................................................................130 Required Code ....................................................................................131 Processing Directive ......................................................................131 MIME Type ....................................................................................131 Template Processing Code ............................................................131 Automatically Generated Perl Code ..............................................132 Substitution Variables ..........................................................................132 My $Substitution ............................................................................133 Hard-Coded Substitution Variables ................................................133 Parameters............................................................................................136 Create ShowMovies Deck ..............................................................137 Pass Parameter in a Link ................................................................140 Receive Parameter in Server Script................................................141 Database Access ..................................................................................143 Code to Select Records ..................................................................143 Code to Return Data to the Browser ..............................................144 Try It Yourself ......................................................................................145 ASP VBScript ......................................................................................148 An ASP Template Project ..............................................................148 Processing Directive ......................................................................148 MIME Type ....................................................................................148 Calling the Markup Template ........................................................149 Substitution Variables ....................................................................149 Retrieving Parameters ....................................................................150

CONTENTS WMLScript ..........................................................................................151 Resources........................................................................................152 WMLScript Standard Libraries ......................................................152 Add WMLScript ............................................................................153 Edit WMLScript ............................................................................153 WML and WMLScript Example....................................................153 Summary ..............................................................................................157 Q&A ....................................................................................................157 8

PART III 9

Getting the Most Out of MobileDev 159 Multideveloper Mode ..........................................................................160 Locking and Refreshing ................................................................160 MobileDev in Multideveloper Mode..............................................161 Visual SourceSafe ..........................................................................162 Switching from SourceSafe to MobileDev ....................................166 Switching from MobileDev to SourceSafe ....................................166 Database Browser ................................................................................167 Loading a Database into the Browser ............................................167 Using the Data Information............................................................171 Deploy Project ....................................................................................171 The Deploy Project Dialog Box ....................................................171 Deploying with FTP ......................................................................174 Testing the Deployed Application ..................................................174 Default Settings....................................................................................175 Editor ..............................................................................................176 Color ..............................................................................................177 SourceSafe ......................................................................................177 Log..................................................................................................178 Simulators ......................................................................................179 Application Map ............................................................................180 Project ............................................................................................182 Containers ............................................................................................184 Creating a Container ......................................................................184 Establishing Ownership..................................................................184 Summary ..............................................................................................185 Q&A ....................................................................................................185

Advanced Topics 187 Location-Based Services 189 What Are Location-Based Applications? ............................................190 The Technology ..............................................................................190 Find Me a Movie Theater ....................................................................191

ix

x


WITH

MOBILEDEV

Simulating the Experience ..................................................................191 Registering a Location-Enabled Site..............................................191 Creating Imaginary Users ..............................................................192 Enabling the Simulation ................................................................194 Creating the Application Using MobileDev ........................................195 How It Works..................................................................................195 WML Code Displays the Application ............................................196 Perl Code Provides the Logic ........................................................198 Run the Application........................................................................199 Summary ..............................................................................................201 Q&A ....................................................................................................201 10

More Fun for WAP Fanatics 203 Subscriber ID ......................................................................................204 Retrieving the Information ............................................................204 Regular Phone Calls ............................................................................205 Coding with WTAI ........................................................................205 Animated Images Again ......................................................................205 An Animated Logo for Big Thrills ................................................206 Optimizing for the Browser Brand ......................................................209 Choosing Between Nokia and UP..................................................210 Internationalization ..............................................................................214 Language ........................................................................................214 Character Sets ................................................................................214 Browser Limitations ......................................................................215 Simulating Internationalization ......................................................215 Optimizing for the Language ..............................................................216 WML Code Calls Language-Specific Applications ......................217 Perl Code Retrieves the Language Information ............................219 Test the Application........................................................................219 Security ................................................................................................220 Notifications ........................................................................................221 Summary ..............................................................................................221 Q&A ....................................................................................................222

11

Java and MobileDev 223 Introducing Java and Enhydra ............................................................224 How Enhydra Works ......................................................................224 Installing Enhydra ..........................................................................225 Creating an Application: An Overview ..............................................225 About the CameraLand Application ....................................................225

CONTENTS Creating the MobileDev Project ..........................................................226 The SearchBy Deck........................................................................226 The SelModel Deck........................................................................228 The Details Deck ............................................................................229 Creating the Enhydra Project ..............................................................230 Modifying the Default Enhydra Project ..............................................231 The SearchBy Java Page ................................................................232 The SelModel Java Page ................................................................232 The Details Java Page ....................................................................234 Compiling the Enhydra Application ....................................................235 Mapping File ..................................................................................236 Making the Application ..................................................................236 Running the Application ......................................................................236 Summary ..............................................................................................238 Q&A ....................................................................................................238 12

PART IV A

The Future of the Wireless Internet 239 Reality and Dreams..............................................................................240 User Interface ................................................................................240 Network Bandwidth........................................................................243 Markup Languages and XHTML ..................................................244 WAP 2.0 ..............................................................................................245 Is WAP Dead? ................................................................................246 What Else Is There? ............................................................................248 I-Mode Consideration ....................................................................248 Other Emerging Technologies ........................................................248 Complementing Technologies ............................................................248 Open Technology—It’s Up to You ......................................................249 What Others Say ..................................................................................250 The Future of MobileDev ....................................................................251

Appendixes

253

Setup 255 Checklist ..............................................................................................256 Suggested Configuration......................................................................256 Internet Explorer 4 ..............................................................................256 Web Server ..........................................................................................257 Remember These Directories ........................................................257 Document and CGI Directories in MobileDev ..............................257 Auto Mirror Fields..........................................................................259 Web Server Versus Browser ..........................................................260 Configure Web Server ....................................................................260

xi

Images ............................................................................................265 Starting Your Web Server ..............................................................265 Perl ......................................................................................................266 MobileDev ..........................................................................................266 Trial Version ..................................................................................266 Registered Version ..........................................................................267 Installing MobileDev......................................................................267 Ready to Go ........................................................................................272 Other Goodies ......................................................................................272 Got Questions? ..............................................................................273 Installing the Openwave and Nokia SDKs ..........................................273 Installing the Java SDK and Lutris Enhydra ......................................273 Java SDK ........................................................................................274 Lutris Enhydra ................................................................................274 Installing WAPDraw ............................................................................274 B

Glossary Index

275

291

About the Authors Stéphane Hogue is an award-winning technical writer at Speedware Corporation, the company that produces MobileDev and other application development tools. In his eight years at Speedware, he has worked on manuals, course workbooks, and online help for Web and 4GL design tools as well as on business intelligence products. He has also been a featured speaker at conferences. Stéphane particularly enjoys working with and explaining cutting-edge technology. Leslie Hirst is a technical writer and manager of Technical Documentation at Speedware. She has worked on everything from white papers to workbooks, including reference manuals, quickreference guides, getting-started tutorials, online CDs, and conference papers. Like Stéphane, Leslie is an award winner, winning more than 12 technical-writing awards in the past ten years. Leslie really likes creating databases and applications to explain complicated concepts in a simple manner. Nicolas Fortin is the Product Marketing Manager for Wireless Solutions at Speedware Corporation. In his 12 years with Speedware, Nick has been involved with many technologies, including mobile Internet concepts. As part of his achievements, he has created a WAP airlinereservation system and has been a key reference for various WAP-related endeavors, such as conferences, articles, white papers, and books, while managing MobileDev, Speedware’s professional application development software specifically designed for the mobile Internet.

About the Tech Editor Richard J. Simon has been a pioneer in new technology since 1985 when he started a consulting company to develop PC solutions for businesses. As an early Windows developer, he developed using client/server technologies that are now commonplace in the industry. Richard has been on the leading edge of Internet technologies and n-tier development. Richard is a former CTO of more than eight years for a software development company that developed and marketed applications to Fortune 1000 companies. He currently is the cofounder and CEO of MillenniSoft, Inc. Richard is an established author of several Windows programming books and references, including Windows 95 API Bible, Windows NT API Super Bible, Windows 2000 API Super Bible, ODBC and Multimedia API Bible, Windows 98 Programming for Dummies, and Windows 2000 Programming for Dummies. He has also tech edited several books on Windows development technologies.

About the Reviewer Jaron Rubenstein is Director of Technology for Logicept Corporation, a software development firm he cofounded in 1998 with Michael Cohn. Jaron’s primary interests are in Open Source technologies such as Linux, Apache, and Samba and in human/computer interaction, particularly as it applies to pervasive computing. Jaron began working with WAP devices in early 2000 and has led the development effort for several WAP sites. His latest WAP project has been the port WebPublish!, Logicept’s Content Management and Site Administration tool to WAP. Prior to Logicept, Jaron held software development positions with Lockheed Martin Corporation and Reuters Information Technologies and provided software and systems consulting services for many other organizations. Jaron has contributed to several books in the Unleashed series published by Sams Publishing. He is also the coauthor of two Linux certification training courses published by Element K Press. Jaron is an active member of the Institute of Electrical and Electronics Engineers (IEEE), where he is the GOLD Representative to the IEEE-USA Board of Directors.

Dedication To Kay Palkhivala—boss, teacher, friend for life.

Acknowledgments First of all, we’d like to thank the Speedware MobileDev team for creating such a cool product and for patiently answering our many questions. Nearly everyone in the development and quality assurance teams played a part, but in particular we’d like to mention Daniel Piché, JeanMarc Jalbert, Jacques Bussières and John Serri. Thanks also to Christopher Koppe, Garry Ciambella, and other Speedware leaders who believed in us and gave us the go-ahead to write this book. We’d also like to thank our colleagues in the Technical Documentation department who helped us with our regular responsibilities while we were working flat out on this book. The TechDoc team includes Vince Gardner, Jason Brooks, and Gabby Berezowski, who also helped with the diagrams. Finally, Nicolas would like to express his thanks to his college teacher, Mr. Len Samuel, who shared his “geeky” love for computer science, and to his old Atari 400 BASIC cartridge, which started it all for him.

Tell Us What You Think! As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way. As an Associate Publisher for Sams, I welcome your comments. You can fax, email, or write me directly to let me know what you did or didn’t like about this book—as well as what we can do to make our books stronger. Please note that I cannot help you with technical problems related to the topic of this book, and that due to the high volume of mail I receive, I might not be able to reply to every message. When you write, please be sure to include this book’s title and author as well as your name and phone or fax number. I will carefully review your comments and share them with the author and editors who worked on the book. Fax:

317-581-4770

Email:

[email protected]

Mail:

Jeff Koch, Associate Publisher Sams 201 West 103rd Street Indianapolis, IN 46290 USA

Introduction If you pick up this book, odds are that you are curious about the wireless Internet and the applications that run on it. You’ve probably heard of something called “WAP” and you may have even heard about MobileDev. So what is MobileDev? In a nutshell, it’s a powerful, comprehensive, and integrated Windows-based development environment designed for rapid wireless Internet application development. MobileDev and this book will allow you to take advantage of the ever-expanding consumer demand for wireless Internet access and for the applications that drive wireless electronic commerce.

Was This Book Written for You? This book was written for beginners and first timers who want to learn about WAP in the quickest and most effective way. Those of you who have already dabbled in WAP development and messed around with SDKs and other authoring tools will be particularly interested in the proposed development methodology that MobileDev offers. You don’t need to know much about programming languages to use this book; as you read along, you’ll learn what you need to know to create great WAP applications. If you like to learn by example and want to start developing WAP applications right away, this book was written for you.

Do You Need the Programs on the CD? To get the full benefit of this book, you should use the programs included on the CD, especially the trial version of MobileDev, if you haven’t purchased it already. After installing MobileDev, you’ll have all you need to start developing WAP applications. The Trial version of MobileDev lets you follow along with everything in this book except for some of the advanced material in Chapter 8: “Getting the Most Out of MobileDev.” Some of the features described in this chapter are available only in the Registered, or purchased, version. If you haven’t purchased MobileDev, you can still review the features and examples and see if they are of interest to you. The CD also includes other programs and enabling technologies, such as WAPDraw, Enhydra, the Openwave SDK 4.1, and the Nokia WAP Toolkit, which we thought you might enjoy. You’ll find these programs under the \3rdparty directory on the CD. The CD also contains code examples for some of the more complicated scenarios described in the book. You can use these examples to save yourself some typing; they are organized by chapter under the \Examples directory on the CD.

2

Building Dynamic WAP Applications with MobileDev

How Should You Use This Book? The book was designed to be read from cover to cover, although you should feel free to consult the Contents to see what particularly interests you. The first chapter presents the basics of the wireless Internet and MobileDev. Subsequent chapters introduce you to MobileDev’s features and teach you how to create applications by way of exercises. At the end, we give our best guesses as to the future of the wireless Internet and MobileDev. Appendix A contains setup and configuration instructions for installing the various software components that you may use with this book. The Glossary contains definitions of WAP and MobileDev-related terms.

What Should You Do First? Go to Appendix A and install MobileDev.


IN THIS PART 1 The Wireless World 2 WAP Design Tools

5 19

3 Wizarding Up a WAP Application

41

PART

I

The Wireless World

IN THIS CHAPTER • The Wireless Internet • In Technical Terms • WAP Protocol • Internet-Capable Phones • Phone Simulators • Cellular Networks • WAP Gateways • Markup Languages • Programming Languages • Unique Wireless Features • How Do WAP Applications Work? • Q&A

CHAPTER

1

6

An Introduction to WAP Application Development PART I

So, you want to build wireless Internet applications. Well, getting this book is an excellent start. But before you start building, you might want to learn a bit about the wireless concept and the world of the wireless Internet. In this first chapter, you’ll take a quick look at the wireless world and learn the answers to the following questions: • How does the wireless Internet compare to the Internet and World Wide Web you already know? • What is a WAP application and how is it different from a Web application? • What technologies are involved in the wireless Internet? • How do wireless Internet applications work? At the end of the chapter there is a summary and a short quiz.

The Wireless Internet Exactly what do we mean by the wireless Internet? You probably already know what the regular Internet is. Often shortened to “the Net,” the Internet is a global network of loosely-connected computers that lets users share information on a huge variety of subjects. The World Wide Web—often just called “the Web”—is the most visible part of the Internet, letting users access Web pages for information, entertainment, and business. “Surfing the Web” has become part of the language and has profoundly affected the lifestyle of many. But what about the wireless Internet? Does it mean you can access Web pages from your mobile telephone? Well, yes and no. In fact, it is possible to display Web pages on your phone, but it’s not something you’d really want to do.

The Internet runs Web pages; the wireless Internet runs WAP applications.

Web Applications Web pages are meant to be displayed on a computer monitor; they can be huge and full of pictures, including animations, with sound and fancy fonts. But all these features that make Web pages so enjoyable and so useful to read on a computer are the very features that make Web pages impossible to view on a cell phone. Maybe sometime—maybe even in the near future—we’ll be able to shrink down all the sound and color of a Web page onto the display of a cell phone, but until then, it’s unrealistic to try to access Web pages from your phone.

The Wireless World CHAPTER 1

7

WAP Applications

1

What you want to access from your cell phone are wireless Internet applications, also known as WAP applications. (WAP is an acronym for Wireless Application Protocol.) WAP applications provide a different kind of service because they are designed for a different kind of user and a different kind of usage. They typically use few words, no sound, and they display only tiny pictures. Figure 1.1 shows the first screen of a WAP application.

THE WIRELESS WORLD

FIGURE 1.1 Wireless applications run on cell phones and other handheld devices.

Wireless Internet users are much more mobile than regular Internet users; they are not tied to a bulky PC or even to a laptop. Wireless users don’t want to surf; they just want information— usually small pieces of information—that they can access quickly and effectively. They may also want to take advantage of some of the benefits that are unique to the wireless Internet, such as location-based services and notification alerts. You’ll learn more about these features later in the book, and you’ll see how to incorporate them into your applications.

What You Need to Know You may be wondering how much you really need to know about the wireless Internet to start creating wireless applications.

8


Fortunately, you need to know surprisingly little to get started, especially if you use a good design tool. A design tool frees you from the underlying technology so that you can focus on the applications themselves.

In Technical Terms In technical terms, the wireless Internet is a set of interconnected protocols and technologies allowing access to information and to applications through the use of the existing Internet infrastructure from an Internet-capable mobile phone or other handheld device. Figure 1.2 gives you an idea of the components of the wireless Internet.

CONSUMER SITES

WAP GATEWAY

INTERNET BUSINESS/ E-COMMERCE NETWORK OPERATOR

CARRIER APPLICATIONS

COPORATE INTRANET EXTENSIONS

WIRELESS TECHNOLOGY DIAGRAM

FIGURE 1.2 Wireless applications rely on a lot of behind-the-scenes technology.

But just what are those protocols and technologies, and how do they all work together to form the wireless Internet? Let’s take a moment to look at some concepts, such as • The WAP protocol • Internet-capable devices • Phone simulators • Cellular networks • WAP gateways


• Markup languages

9

1

• Programming languages

WAP Protocol As previously mentioned, WAP stands for Wireless Application Protocol; it’s an international set of standards and rules that is intended to define and regulate how users access Internetbased information and services from their wireless devices. Although the most popular wireless device is the cellular phone, other devices such as pagers, two-way radios, and Personal Digital Assistants (PDAs) can also support WAP. WAP covers most cellular networks and is supported by nearly all operating systems. The WAP protocol is governed by a forum—the WAP Forum—that was founded in 1997 by Unwired Planet (now known as Openwave), Nokia, Ericsson, and Motorola and now consists of nearly 500 companies. In comparison to regular Internet applications, which are called Web applications, wireless Internet applications are often called WAP applications. You may be wondering if you have to become a WAP expert to write WAP applications. Happily, you don’t. As mentioned earlier, a good design tool can be your WAP guide. Of course, if you want to know more about this interesting topic, you should feel free to read all about it. For more information about WAP, you can check out the following Web sites: •

www.wapforum.com

•

www.w3schools.com/wap

•

www.anywhereyougo.com

•

www.wirelessinanutshell.com

•

www.wuzap.com

•

www.wannawap.com

•

www.wapulous.com

•

www.wap-shareware.com

•

www.wap.com

What About Other Protocols? As we write, other technologies and standards are emerging and starting to compete with WAP. One such is I-Mode, a technology introduced in Japan by DoCoMo, an offshoot of NTT,

THE WIRELESS WORLD

• Unique wireless features

10


Japan’s telephone operator. I-Mode is hugely popular in Japan but only time will tell what sort of impact it will make on the rest of the wireless world.

Internet-Capable Phones and Other Devices Let’s look at WAP applications from the point of view of the end users and the devices they use to access applications. To access a WAP application, you need a cell phone or other wireless handset containing a browser. Cell phone browsers interpret and display information in a wireless application, working in much the same way as Web browsers do. Cell phone browsers are called microbrowsers because of their small size and limited capabilities. A cell phone with a microbrowser is called a WAP-enabled phone, an Internet-capable phone, or sometimes a data-aware phone. Although the mobile phone is currently the most popular device for WAP access, let’s not forget that there are other mobile devices that support WAP. Personal Digital Assistants (PDAs) and the PDA-phone hybrids named smartphones can support WAP by means of WAP browser software like the Blazer browser from HandSpring (www.handspring.com). Then there are twoway messaging systems, or pagers, like the BlackBerry device from Research In Motion (RIM) (www.rim.net) that can support WAP using a WAP browser such as the Neomar WAP browser (www.neomar.com). What this means is that you aren’t limited to cell phones when creating your WAP applications. In fact, you can use the knowledge supplied in this book to build applications that will run on any WAP-enabled device. You can even write applications that are customized for several devices and send the correct content to users depending on their browser brand. See “Optimizing for the Browser Brand” in Chapter 10 for detailed steps on how to do this.

Cell Phone Limitations and Benefits Compared to computers accessing Web pages, mobile phones have certain limitations: • They have a smaller—usually much smaller—display screen than a computer. Typically, they are 4 to 11 lines long by 12 to 16 characters across, with a monochrome display and limited graphics capabilities. Small bitmaps and icons may be displayed, but larger graphics are not supported. • Phones also have a limited keypad, so data entry is cumbersome. When you develop WAP applications, you need to remember that it’s not easy for users to enter large chunks of information.


• Mobile phones have a smaller memory than computers do, so the data that can be transmitted, received, and displayed is limited. However, one benefit of Internet-capable mobile phones is that they provide local variables, stored in the memory of the phone browser, which can be used to store the value of the end user’s choice or entry. Another benefit is the fact that mobile phones offer features not supported by regular Web browsers, such as the ability to be “pushed” information from a server, and to receive locationspecific services based on the physical location of the mobile phone.

Phones Versus Browsers How much do you need to know about cell phones? Actually, you don’t need to know as much about individual phone brands as you do about phone browsers. Just as Web developers need to consider Microsoft Internet Explorer and Netscape, wireless developers need to think of the phone browser that their users will have, and consider its screen size, text size, screen resolution, and scrolling capability. Fortunately, even though hundreds of brands of phones are available, there are only a handful of phone browsers—for example, UP.Browser, the Nokia 7110, and the Ericsson R320 browser. If you think your users will be using different browsers, you should consider coding separate applications customized for each browser type or code for the lowest common denominator in terms of size and scrollability.

Phone Simulators To help in developing WAP applications, good WAP design tools provide phone simulators as software that is installed on your computer. As the name implies, this software simulates the behavior of a mobile phone and its microbrowser on your computer, allowing you to test applications as you develop them. In this book, you’ll look at two main simulators, shown in Figures 1.3 and 1.4: • The UP.Simulator from Openwave, based on the UP.Browser. • The Yospace simulator, based on the Nokia 7110 browser.

1 THE WIRELESS WORLD

• Cell phones have transmission limitations, depending in part on the network and gateway you use. Typically, the limit is about 1.2KB, but it’s often recommended to keep the size of a data stream to fewer than 600 bytes.

11

12


FIGURE 1.3 The UP.Simulator is based on the North American UP.Browser (image courtesy of Openwave Systems Inc.).

FIGURE 1.4 The Yospace simulator is based on the Nokia browser popular in Europe.


As you will see, these two types of simulators—and the types of phones they represent—give a very different look and feel to the same application.

Cellular Networks Cell phones work on different cellular networks, each managed by a different network provider. However, WAP applications can run over nearly all these networks. In effect, the cellular network provides the transmission of the signal, and the mobile phone and WAP gateway (more on that in the following section) interpret and handle the content. Do you need to know about cellular networks to start writing wireless applications? Not really, because the network will not impact much on your application design. However, as you become more proficient in WAP development, you will certainly benefit from researching and understanding the extra wireless features supported by your network operator so that you can incorporate them into your applications. For example, notification alerts, the capability to push messages and other information to a device, is not supported by all network operators.

WAP Gateways A WAP gateway is the hardware and software that act as a bridge between a cellular network and the Internet. The gateway itself is the software that sits at the back end of the cellular network operator; it receives signals from mobile phones and sends them on to the Internet. Gateways work by “translating” WAP instructions to HTTP and vice versa. The most important thing you need to know about the WAP gateway that your applications will use is which language it supports: WML, HDML or both. (You’ll be looking at these languages later in this chapter.) Otherwise, as for cellular networks, understanding your WAP gateway is not as important at the beginning, although it may become more significant as you advance to more sophisticated applications. In particular, if your applications will be used in different parts of the world or involve different network operators and gateways, you will want to brush up on the limitations and the services they offer. For example, some gateways provide a Mobile Location Server, which lets the carrier accept location-based requests from mobile phones.


What do you need to know about phone simulators? Not all that much. And this book will teach you everything you need to know.

13

14


Markup Languages If you’re used to writing Web pages, you’ll know that they’re generally coded in a language called HTML, which stands for Hypertext Markup Language. You’ll also know that this language, powerful though it is, can only display information on the screen. It cannot access data from a database, and it cannot perform calculations or manipulate data in any way. The HTML code is sometimes called the presentation layer of a Web application because it specifies what is presented on the Web page. The logic layer, or the back-end processing and data access, can be written in one of many programming languages. In a wireless application, the presentation layer—what you see on the cell phone—is currently created with one of two languages: • Wireless Markup Language (WML) is the worldwide industry standard. WML is not yet mainstream in North America but is catching on fast. • Handheld Device Markup Language (HDML) is used mostly in North America but is quickly being superseded by WML. WML and HDML are similar to HTML. They all consist of tags and options in the familiar format, plus they include URLs that specify links to other pages or services.

WML Example For example, the following WML code was used to create the application shown in Figure 1.1 on the first page of this chapter. <wml>
Welcome to the Wireless Internet
<do type=”accept” label=”OK”>

What About XHTML? Apart from HDML and WML, you may also have heard of XHTML, or eXtensible HTML. This is a new version of HTML that the industry gurus are recommending to replace HTML for all Internet applications. The idea is that all applications, whether Web based, phone based or kitchen appliance based, should be written in the same markup language, with different modules of the language customized for different applications. The next version of WAP technology, WAP 2.0, promises to support XHTML as well as its current languages.


And then there’s CHTML (Compact HTML), used in Japan’s I-Mode applications.

Obviously, the big benefit to both XHTML and CHTML is that they are based on the HTML that Web programmers already know, so no steep learning curve exists for writing WAP applications. Really, the biggest obstacle in writing WAP applications is not which markup language you use. For one thing, you can let your design tool handle the language issue simply by selecting a language from a list. More importantly, a WAP application is not a translation of a Web application. As you will see when you learn about styles and guidelines in Chapter 4, “Before Building,” what you really need to consider is the content of your WAP application, not the language in which it’s written.

Markup Languages and Design Tools However, without a good design tool, you need to know a lot about markup languages. The markup language specifies what users actually see in the application, as well as how they can navigate around in it and interact with it. Therefore, correct coding and a consistent coding style are important in making your applications appealing and easy to use.

Programming Languages The presentation layer is only half of a WAP application. The other half is called the logic layer, the code that provides the processing logic of the application. This logic layer is created with a server-side programming language, such as Perl, ASP (Microsoft’s Active Server Pages) or Java. These programming languages are part of the server-side technology that allows for database access and the execution of calculations and conditional logic. Perl is the programming language that is used most often in this book. Perl, which is an acronym for Practical Extraction and Report Language, is an interpreted, high-level programming language developed by Larry Wall. Perl has roots in C, Unix, and other languages; it is fast, free, and easy to learn. Perl works on all types of operating systems and is used by thousands of programmers around the world. Many Web sites are devoted to Perl; a couple of our favorites are •

www.tpj.com—Acronym

•

www.cpan.org—Acronym

for The Perl Journal for the Comprehensive Perl Archive Network

Your Role in the Development Process What do you need to know about programming languages? To start, you don’t need to remember what all those acronyms stand for.


Should you be learning these languages?

15

16


And how much you need to know about a particular programming language depends on your role in the development process. If your task is to create the presentation layer of a WAP application, you don’t need to know anything about server-side script and its technology. On the other hand, if your task is to create the guts of an application using a technology such as Perl, you will need to learn Perl. Fortunately, good design tools can get you started by generating the required programming code so that your application can run.

Unique Wireless Features Some features are unique to wireless applications. These include the following: • Notification alerts—You can design an application that notifies a user under certain circumstances; for example, when the value of a stock fluctuates or your plane is delayed. • Subscriber ID—Because the user is known by his or her subscriber ID, an application can create profiling databases to enhance applications by personalizing the information. • Location-based services—Because the location of a mobile phone is known (based on its cell location), services that offer information relevant to the user’s physical position can be offered. You’ll learn more about these features—and how to incorporate them into your applications— in later chapters.

How Do WAP Applications Work? Figure 1.5 shows what happens when you run a WAP application: 1. You request a wireless application using a URL, a link, or a menu option. 2. Your cellular network sends the transmission to its WAP gateway. This step is usually preconfigured on your phone by your telephone provider. 3. The WAP gateway packages the transmission and sends it to the Internet, using standard Internet technology. 4. The information is returned via the WAP gateway to your mobile phone, where it is displayed using the phone’s microbrowser. 5. From your phone, you can interact with the application, respond to the information, and start the process over again.


17

1 2

WAP GATEWAY 3 Internet File.hdml File.wml

5

4

FIGURE 1.5 Wondering what goes on behind the scenes when you run a WAP application?

Summary In this chapter you were introduced to the wireless Internet and WAP. Among other things, you learned about the difference between WAP and Web, and you took a high-level look at Internet-capable cell phones and other wireless Internet devices. You checked out phone simulators, cellular networks, WAP gateways, and previewed WML, the prevalent wireless Internet language. In Chapter 2, “WAP Design Tools,” you’ll be introduced to MobileDev, a unique design tool for building WAP applications.

Q&A Q What are the main components of the mobile Internet? A The WAP protocol, Internet-capable devices, cellular networks, WAP gateways, the markup languages, programming languages, and the Internet. Q What are the three main features of the wireless Internet that are not available in a regular Web environment? A Notification alerts, subscriber ID, and location-based services. Q What is the worldwide standard markup language used for wireless applications? A WML, which is the acronym for Wireless Markup Language. Q Are mobile phones appropriate for accessing regular Web pages? A For the moment, no, because of their limited display capabilities.

THE WIRELESS WORLD

1

18


Q What does “Web” represent? A The World Wide Web, the regular Internet, Web pages, the whole graphical-intensive, sound-and-color thing. Q And what about “WAP”? A WAP is the acronym for Wireless Application Protocol; it means the wireless Internet, small applications on a cell phone, and quick access to the information you need to know.

CHAPTER

WAP Design Tools

2

IN THIS CHAPTER • Wireless Design Tools

• SDK Simulators

• MobileDev for the Wireless Internet

• Database Browser

• Let’s Go • Open a Project • About the Movies Demo • MobileDev’s Development Environment • Application Map • Application Browser • Document Editor • Script Editor • Phone Simulator

• Toolbars • Pop-ups • Help Is a Click Away • Online Getting Started • Running a Project • Using the Simulator • Closing the Demo • Testing Across Simulators • Install UP.Simulator • Q&A

20


This chapter takes a look at some design tools that will help you write WAP applications, and introduces you to MobileDev, our favorite design tool for the wireless Internet. A trial version of MobileDev is included on a CD at the back of this book, so you can follow along with the exercises as you read. Along the way, you’ll learn the answers to the following questions: • What are WAP application design tools? • What makes MobileDev special? • How do I open and run the MobileDev demo? • Can I try the development environment for myself? This chapter also includes hands-on exercises that help get you familiar with MobileDev.

Wireless Design Tools A wireless design tool is a new type of application software that helps you create WAP pages, sites, and applications. There are several categories of these tools, including: • Software Development Kits (SDKs), such as the Openwave UP.SDK and the Nokia WAP Toolkit. SDKs include phone simulators, documentation, and code examples, but the development environment—the place where you actually create the application—consists only of a text editor and sometimes a tree view of the objects in the application. However, if you are an experienced developer and just need a simulator and some examples, SDKs can be valuable tools. The UP.SDK and the Nokia WAP Toolkit are included on the CD at the back of the book; see Appendix A, “Setup,” for installation instructions. • Static page tools, usually Web authoring tools with WAP extensions. These tools can generate static pages but aren’t geared for creating dynamic applications driven by a true server-side technology. • WAP application development software, such as MobileDev. Products such as MobileDev are particularly useful if you are just starting out in wireless development or if you want the convenience of an all-in-one development environment.

MobileDev for the Wireless Internet Given the name of this book, it’s no surprise that MobileDev is our favorite tool for creating wireless applications. But for good reason. With the exception of MobileDev, most wireless design tools offer only a limited development environment such as a text editor or a tree view, or they are Web tools with a WAP extension; that is, they weren’t specifically designed for creating WAP applications and they don’t really support the needs of wireless Internet developers.

WAP Design Tools CHAPTER 2

21

MobileDev, developed and marketed by Speedware Corporation, was designed from the ground up with rapid WAP-application development in mind. Its visual development interface lets you view the hierarchical structure and flow of your application—something that is not always evident from the WML or HDML code or from a tree view. MobileDev offers a complete development environment where you can design, create, test, and maintain wireless applications from one place. If you are new to wireless development, you’ll like its smart wizards that help you build the components of an application, and code editors for WML, HDML, WMLScript and server script.

Features That Make It Easy MobileDev lets you develop wireless Internet applications on your PC without a cell phone, a cellular network, a WAP gateway, or access to the Internet. It takes care of all the various pieces of the application development process, including • WAP protocol—You don’t need to know anything about the underlying technology, so you can focus on the applications you are going to build. • Internet-capable cell phones—MobileDev comes packaged with integrated phone simulators (software that mimics microbrowsers) so that you can test your applications as you develop them. • WML and HDML languages—MobileDev’s smart wizards automatically generate WML and HDML for standard user-interface components and create the best interface for the selected simulator. • Server-side technologies—Currently supporting ASP and Perl, MobileDev facilitates access to the most popular Internet application technologies. • Internet—MobileDev can work locally with a machine, making access to the Internet optional. This is a great feature when you don’t have a network card or access to a LAN, and it means you can work on your applications anywhere. All these features are part of one design environment, so you work from one place.

Try It Yourself But don’t just take our word for it. A trial version of MobileDev is included on the CD included with this book. Install it (instructions are in Appendix A, “Setup”) and you’ll be able to follow along with this book as you look at and create wireless applications.

2 WAP DESIGN TOOLS

As you can see from Figure 2.1, MobileDev is an integrated design environment for building and maintaining wireless applications.

22

An Introduction to WAP Application Development PART I It’s easy to edit presentation code in the document editor using context-aware lists and chroma-coding. You can code the business logic of your back-end server script in the script editor.

The Application Map helps you build and manage application decks and cards and their relationships visually.

The Application Browser provides an at-a-glance overview of the application components.

The Database Browser lets you copy database information directly into your script code. No more typos! The integrated Yospace phone simulator lets you test your application quickly and easily.

MobileDev also supports other browser simulators like Openwave, so you can test on different wireless devices.

FIGURE 2.1 MobileDev is a complete development environment.

Let’s Go Enough talk! Let’s get going. If you haven’t installed MobileDev from the CD at the back of the book, go to Appendix A and install it.


23

To start MobileDev, click Start, Programs, MobileDev 2.0, as shown in Figure 2.2 (or click the desktop icon).

2 WAP DESIGN TOOLS

FIGURE 2.2 Choose MobileDev from your Start menu.

The MobileDev main window—empty, so far—appears.

Open a Project Before you build your first WAP application, open the MobileDev demo and take a quick look at the development environment. When you work in the MobileDev environment, you always work in a project. A project is a centralized storage area that contains the objects that make up your application, such as WML or HDML documents plus server script code. To open the demo project: 1. Choose File, Open Project from the main menu. 2. Find and select . . .\MobileDev\Demo\Movies\Movies.md. The application is displayed on the MobileDev Application Map. The standard tree view of the application is also displayed in the Application Browser.

About the Movies Demo The application you’re about to look at displays information about top-rated movies based on a database from The Internet Movie Database (www.IMDb.com). It is a dynamic application using

24


Perl server script and a Microsoft Access database. After you’ve seen the application in action, you’ll learn how to create it yourself using MobileDev.

Static or Dynamic? MobileDev lets you create both dynamic and static applications. Dynamic applications use an application server language such as Perl or ASP to create the application decks and cards at runtime and display them in the phone’s browser. Static documents don’t use an application server; they behave like standard Web pages.

MobileDev’s Development Environment The MobileDev development environment consists of easy-to-use views, toolbars, and pop-ups.

Views Views are windows containing different aspects of a MobileDev application, letting you look at an application along its separate dimensions as you develop it. The views are • Application Map—Shows the components of the application and their relationships in a graphical representation. • Application Browser—Provides an at-a-glance overview of the application components. • Document Editor—Lets you edit markup code using context-sensitive help and chroma coding. • Script Editor—For editing the server-side script that drives a dynamic application. • Phone Simulator—For testing your application quickly and easily. • Database Browser—Lets you copy database information directly into the script code, eliminating typos and capitalization issues. The Application Map and the Application Browser are displayed by default. The other views can be displayed from the View menu, the View toolbar, or from pop-up menus that are available while you’re developing.

View Options MobileDev windows, including the views, have display options that may be accessed by rightclicking the menu of each window. The options, shown in Figure 2.3, are • Docked—A docked window is fixed to a particular location. Although the window may be resized, a docked window cannot have MDI Child windows on top of it. • MDI Child—An MDI Child window is a window that can be displayed or resized anywhere in the main window. The advantage of child windows is that other windows may be arranged over or under them.


25

2 WAP DESIGN TOOLS

FIGURE 2.3 Use the display options to organize your desktop as you like it.

Clicking the O in the title bar toggles the window between the docked and the MDI Child states. Try it on the Application Map.

Application Map The Application Map is a graphical representation of the decks, cards, and links that make up a MobileDev application, as you can see in Figure 2.4. When you open an existing project, the Application Map is displayed by default.

FIGURE 2.4 The Application Map gives a bird’s-eye view of your application.

26


When the Application Map is closed, you can redisplay it by choosing View, Application Map from the main menu, or by clicking the Application Map icon on the View toolbar. You’ll probably like the default look of the objects in the Application Map, but if you want to change their size, shape, or font, you can do so in the Settings dialog box, which is available by choosing Tools, Settings. You can also change the settings for an individual object in the Application Map by right-clicking it and choosing Properties. For example, Figure 2.5 shows the Properties dialog box for the Welcome deck.

FIGURE 2.5 The Properties dialog box lets you change the look of an object in the Application Map.

Decks, Cards, and Links WAP applications use a few terms that may be unfamiliar to you: A deck is a WML or HDML file containing cards. A card is a screen of information in a WAP application. A link is a connection between cards and decks. As you build applications, you’ll learn more about these objects.

Working in the Application Map When you’re working in the Application Map, keep the following in mind: • An asterisk (*) following the deck name indicates that the deck was modified since it was last saved. • Link names are hidden. To view the name of a link, rest the mouse over a link and the name will appear in a ToolTip.


27

• When a deck is edited, imported, created, or deleted, the Application Map is automatically refreshed to show the new links and cards used by the deck. The Application Browser is also updated to display the latest information. • When you select an object in the Application Map, it displays little handles along its edges; you can move and resize the object using these handles. • Double-clicking a deck, card, or link will display the Document Editor.

Application Browser

FIGURE 2.6 The Application Browser lists objects in your application.

The Application Browser is displayed by default when a project is opened. Like the Application Map, it can also be accessed by choosing View, Application Browser, or by clicking the Application Browser icon on the View toolbar. You can move around and work the Application Browser using the mouse (both left and right buttons), menu items, pop-ups and toolbar icons. Click + or – to list all instances of an object. Double-clicking an item in the Application Browser displays the Document Editor or Script Editor, depending on the type of object.

Want More Information? Details on all these features and more are contained in the MobileDev help system. Just click F1 to access it.

Document Editor The Document Editor is a text editor that has been enhanced with a lot of cool features to help you code the WML or HDML portion of your applications. The best feature is that most of the code you need is generated automatically by the MobileDev wizards. But you always have

2 WAP DESIGN TOOLS

The Application Browser, shown in Figure 2.6, is a tree view or folder representation of the decks, cards, and other objects in the current project.

28


complete control over the code and can modify it easily in the Document Editor. In the Document Editor, your text is color coded as you enter it, and you are automatically offered valid choices for your code. You can even have your code statements completed for you automatically.

FIGURE 2.7 The Document Editor lets you view or enter WML or HDML code.

To open the Document Editor, just select a deck, card, or link in the Application Map or Application Browser and do one of the following: • Select View, Document from the main menu. • Click the View Editor icon on the View toolbar. • Right-click and select View Document. • Easiest of all, just double-click the object. The default settings for such features as tab indent and auto list are set in the Editor tab of the Settings dialog box, accessed by choosing Tools, Settings.

Script Editor The Script Editor is a text editor for server script such as Perl, ASP VBScript or WMLScript. Figure 2.8 shows an example of Perl code in the Script Editor. To open the Script Editor, select a deck and choose View, Script from the main menu or click the Script Editor icon on the main toolbar. You can also right-click a deck and select View Script. The editor offers basic editing functionality, such as cut, copy, and paste, find and replace, indent and outdent, and so on, but it does not have the special features available in the Document Editor to help you write your script code.


29

2 You can enter Perl code into the Script Editor.

Phone Simulator To test your applications, you need a phone simulator. MobileDev comes with the Yospace phone simulator, which is based on the Nokia 7110 microbrowser. As you may recall from Chapter 1, a phone simulator is software that emulates the behavior of an Internet-capable phone. The Yospace simulator is shown in Figure 2.9. The simulator is displayed when you run or preview the application or a deck.

FIGURE 2.9 The Yospace phone simulator comes with MobileDev.

WAP DESIGN TOOLS

FIGURE 2.8

30


The default simulator and simulator-related choices are specified in the Simulators tab of the Settings dialog box (click Tools, Settings).

SDK Simulators MobileDev also supports the simulators included in the following SDKs: • UP.SDK 3.2 and 4.1 • Nokia WAP Toolkit 2.1 When you install these SDKs, MobileDev automatically adds their simulators to the list of simulators that you can use to test your applications. Look for them in the Simulators tab of the Settings dialog box (click Tools, Settings).

Database Browser The Database Browser is a tree view showing all the data objects available to your applications. Figure 2.10 shows some of the objects in a database called Movies. Table, view, and column information may be easily viewed and pasted into a MobileDev editor.

FIGURE 2.10 Movies is the database behind the Movies application.

You can open the Database Browser by choosing View, Database Browser from the main menu or by clicking the Database Browser icon on the View toolbar. Note that the Database Browser is disabled in the trial version of MobileDev. If you want to use this feature, you will need to purchase the registered version of MobileDev.

Loading a Data Source You can load databases and data files into the Database Browser using the Load a New Data Source dialog box, accessed from Tools, Load a Data Source. Later in this book, you’ll learn how to do this.


31

Pasting Column Information One of the best features of the Database Browser is that it lets you copy and paste data names directly into your code, which is a good way to avoid spelling and capitalization errors. To paste the name of a data column into a MobileDev editor, follow these steps: 1. Click a column in the Database Browser. 2. Choose Edit, Copy or Copy As, Table.Column or Base.Table.Column. (These choices let you qualify the column name with its table and/or database name.) 3. In the Document or Script Editor, click where you want to copy the information and choose Edit, Paste.

The MobileDev toolbars give you quick access to the same functionality as the menus. Although MobileDev has several toolbars (seven in all, as shown in Figure 2.11), you probably won’t want to display them all at one time. By default, the File and Edit toolbars are displayed; the others can be activated from the View menu (choose View, Toolbars), and all can be customized to suit your requirements.

FIGURE 2.11 You probably won’t want to use all seven toolbars at once.

Floating and Docking MobileDev toolbars may be docked or floating. A docked toolbar is attached to one side of the window; a floating toolbar can “float” anywhere you put it.

Moving a Toolbar To move a toolbar, use your mouse to drag the move handle on a docked toolbar, or drag the title bar on a floating toolbar to another location. If you drag the toolbar to the edge of the program window or to a location beside another docked toolbar, it becomes a docked toolbar.

WAP DESIGN TOOLS

Toolbars

2

32


When you move a docked toolbar, the move might affect the location and size of other toolbars in the same row.

Customizing the Toolbar You can customize the commands available on the toolbars using the Toolbars, Commands and Options tabs of the Customize dialog box. This dialog is accessed by choosing View, Toolbars, Customize. To add a command to a toolbar, follow these steps: 1. Activate the toolbar using the Toolbars tab. 2. Click the Commands tab. 3. Select the category that contains the command you want to add to the toolbar. 4. Click the icon in the Commands field and drag it to the toolbar. As always, you can have more information on the individual fields by clicking the Help button.

Pop-ups Pop-up menus provide a quick way to access commonly used features. Right-clicking an object accesses pop-ups. The features available vary depending on the context. Figure 2.12 shows a few examples.

FIGURE 2.12 Pop-up menus are often the easiest way of performing a task.

Help Is a Click Away When working with MobileDev, keep in mind that comprehensive online help is usually just a click away. Pressing F1 displays a standard help system, including a table of contents, an index, and a search feature.

Overview Help contains a description of the MobileDev dialog boxes, menus, toolbars, views, and wizards. There is also a How-To section that describes some standard and not-so-standard tasks.


33

Help also includes an online tutorial, markup language help reference (with examples), and a glossary of wireless Internet terms.

Online Getting Started The Help also includes a task-oriented tutorial where you can learn about MobileDev by building a wireless application. If you forget how to do a certain task, take a look at Getting Started; it may contain a topic devoted to the task you’re interested in.

Context-Sensitive Help

2

When working in the Document Editor with WML, HDML or WMLScript, pressing F1 will display help about the current element. For example, Figure 2.13 shows the help displayed for the WML <do> element.

WAP DESIGN TOOLS

FIGURE 2.13 Wondering what the <do> element does?

Running a Project Now that you’ve seen the demo in the design environment, take a look at it running in the integrated phone simulator: 1. Make sure your Web server is configured and running (see Appendix A, “Setup,” for details). 2. Select the deck called Welcome, right-click it, and choose Run Deck, New MobileDev— Yospace 1.0 from the pop-up menu. 2. If the Application Map hides the phone simulator window, minimize or undock the Application Map, and then resize the simulator. 3. Navigate through the application using the simulator’s keys and links. Highlights are shown in Figure 2.14.

34


The Movies Application in Action The Movies application prompts you for your name and then asks you to choose a movie category and a movie. The last screen is a description of your chosen movie. If you’re new to the Nokia phone simulator, you may need a bit of help using the standard Nokia navigation tools. See the following sections for navigational help. Movies What is your name? [Fred] Movies Welcome to top-rated Movies!

Select the prompt field, then enter your name in the text editor

Options

Back

Click Options then Next

Options

Movies Hi Fred, choose a genre: [Western] Options key

Movies The Good, the Bad and the Ugly Once Upon a time in the West The Searchers Red River Options Highlight and select a movie title, for example The Good, the Bad and the Ugly

Options

Back Select [Action] to display the entire list, then select a movie genre, for example Western

Click Options then Next

Back

Movies Two gunmen have formed a partnership. One is a wanted man (the Ugly) and his partner (the Good) will turn him in for the reward. Options

FIGURE 2.14 The Movies application gives information on your favorite films.

Back

The plot of the movie is displayed


35

Using the Simulator The following instructions will help you navigate through the demo if you have never used a Nokia simulator before. You’ll see how to use the simulator keys and the computer keyboard equivalents. One of the great things about using a phone simulator is that you can use your computer keys.

Clicking a Key Clicking a key means to click the selection key below the specified label.

2

For example, “click the Options key” means click the left selection key shown in Figure 2.15.

The simulator supplies the Service options screen; it lists the application’s links and default links such as Back and Empty cache.

Highlight and Select To activate an item on a list, you first highlight it and then select it, as shown in Figure 2.16: • To highlight an item, click, hold, and drag the scroll roller (or use the arrow keys on your computer keyboard). • To select a highlighted item, click the scroll roller or the Select key (or press Enter on your keyboard). Movies Welcome to Top-rated Movies!

Options

Click this key

FIGURE 2.15 Click the key under the label.

Prompt Fields When you are prompted to enter a value, the simulator displays a prompt field like the one shown in Figure 2.17. To enter a value, select the prompt field by clicking the scroll roller (or pressing Enter).

WAP DESIGN TOOLS

Service Options

36


Service options About OK Empty Cache Select

Back

Hold and drag roller to highlight, then click to select

FIGURE 2.16 Use the roller to highlight and select.

Movies What is your name? […]

Select

Back

Click roller to select prompt

FIGURE 2.17 An empty prompt field is shown as three dots.

A text editor supplied by the simulator is displayed.

Text and Other Editors The simulator provides a text editor, shown in Figure 2.18, to help you enter text. There’s also a number editor, which works in much the same way. Enter text into the editor using one of the following methods: • Enter letters and numbers from the simulator keypad. • Use the scroll roller to select characters from the list at the right. • Type characters from your computer keyboard. If you need to delete a character, click the Clear button. Click OK when you’re done. The prompt screen is redisplayed, showing your text.


a b c d e f

abc Input Caption:

Fred

Click OK when done

OK

37

Clear

Options

FIGURE 2.18 The simulator has built-in editors.

Multiselection Lists Selecting an item from a multiselection list is a three-step procedure, as you can see in Figure 2.19. The first time the list is displayed, only the first choice is shown. To expand the list of choices, highlight and select the first item by clicking the scroll roller (or pressing Enter). When the full list is displayed, use the scroll roller to highlight and select an item. (As always, you can use the arrow keys and Enter on your computer keyboard, if you prefer.) The original list screen is shown again, with your chosen item displayed.

2 WAP DESIGN TOOLS

Your text is displayed

Movies What is your name? [Fred]

38


Movies Hi Fred, choose a genre: [Action]

Options

Back

Click roller to expand list

Input Caption Action Comedy Fantasy Western Select

Cancel

Drag and click roller to select item Your choice is displayed

Movies Hi Fred, choose a genre: [Western]

Options

Back

FIGURE 2.19 Choosing from a list takes three steps.

Closing the Demo After you’ve finished looking at the demo project, close it by clicking File, Close Project. Don’t save any changes.

Testing Across Simulators While developing a WAP application, it’s a good idea to test it across the range of cell phones it will be run on. You’ve just seen the Movies application in a Nokia-style browser. The other browser that’s widely used in North America is the UP.Simulator from Openwave.

Install UP.Simulator The UP.Simulator comes with UP.SDK, the software developer’s kit from Openwave. If you haven’t already installed UP.SDK, you should go to Appendix A, “Setup,” and do so now.


39

After you’ve installed the UP.Simulator, MobileDev will detect it and add it to the list of available browsers. To run your application using this simulator: 1. Right-click the Welcome deck and choose Run Deck, New Generic UP Browser. 2. Follow the prompts and the links in the application. You’ll notice that this simulator doesn’t include a Service options screen and has fewer editors and special features. Figure 2.20 shows highlights of the application.

2

Click OK

OK key

Select a movie genre, for example Action and click OK

The plot of the movie is displayed

Select a movie, for example Seven Samurai, and click Link

FIGURE 2.20 The Movies application has a different look in the UP. Simulator.

Summary In this chapter, you learned about MobileDev’s place in the wireless Internet space and became familiar with some of its features using the demo application and simulator that are installed with MobileDev. You saw the Application Map that displays the objects in an application, looked at the code editors for markup and server code, and probably learned more than you care to about toolbars, pop-up menus and online help. Finally, you got to run the demo

WAP DESIGN TOOLS

Enter your name and click Next

40


application and look up the plot of your favorite movies on two simulators: the Yospace simulator with its featureful interface and the UP.Simulator with its very different look and feel. In Chapter 3, “Wizarding Up a WAP Application,” you’ll learn about the basic building blocks of a WAP application as you build one.

Q&A Q. What differentiates MobileDev from other wireless design tools? A. It was designed specifically for rapid WAP-application design. Q. Do you need a cell phone to test a WAP application? A. No, you can use MobileDev’s integrated simulator. Q. What are MobileDev’s five views? A. The Application Map, Application Browser, Script and Document Editors, the Yospace phone simulator, and the Database Browser. Q. How do I run a project? A. Send it to your simulator of choice.

Wizarding Up a WAP Application

IN THIS CHAPTER • Your First Application • Create a Project • Decks, Cards, and Links • Wizards • Create the First Deck • Save the Project • Changing the Look of the Application Map • Create the Second Deck • Run the Application • Same Application, Different Browser • Q&A

CHAPTER

3

42


In Chapter 2, “WAP Design Tools,” you learned about MobileDev and how to open and run a project. You’re now ready to build your first WAP application using MobileDev. As you build it, you’ll also learn the answers to the following questions: • How do I create a project? • What is a deck, a card, and a link? • Why do I want to use wizards to develop a WAP application? • How do I see my application in action?

Your First Application Now that you’ve seen MobileDev’s application development environment, you can create a simple application that is a variation on the “Hello World” cliché. Our application, like the demo you saw in the previous chapter, is a dynamic application based on the Nokia 7110 browser, using WML markup language and Perl server script.

Create a Project The first step in building a MobileDev application is to create a project. In Chapter 2, you opened an existing project; now you’ll create a new one. Creating a project really just means defining the locations for the various files that the application will create and use. Follow these steps: 1. Choose File, New Project from the main menu, as shown in Figure 3.1. 2. Type HelloWorld as the project name. The name can be any combination of letters and numbers, but don’t include any spaces (use an underscore instead). 3. The location is a folder on your PC where the project files will be stored. Accept the default location or choose another folder on your PC. 4. The Document Path and CGI Script Alias entries are used to construct the links that define the application flow. These entries depend on your Web server configuration. For more information, see Appendix A, “Setup.” If you installed Xitami, you can accept the defaults. If you are using another Web server, make sure the CGI Script Alias points to your CGI directory. 5. Select Nokia 7110 as your browser brand and WML 1.1 as the document type. 6. Select Perl Template as the application server. 7. Click Create. The Application Map—empty so far—is displayed.

Wizarding Up a WAP Application CHAPTER 3

43

FIGURE 3.1 The New Project dialog box contains file locations for the application.

Decks, Cards, and Links Now that you’ve defined a project, you can start creating the decks, cards, and links that make up the application. Before starting, let’s get familiar with the WAP lingo.

What’s a Deck? A deck is the basic building block of wireless applications; it is a WML or HDML file containing one or more cards that are displayed on a wireless device. Like an HTML file, it can be identified by a URL; for example: http://www.speedware.com/mydeck.wml

And a Card? A card represents one screen of information in a wireless application. It can display formatted text or prompt a user for information. In MobileDev, when you create a deck, a default card is also created. Figure 3.2 shows a card as it will appear in the phone simulator.

What About Links? A link is an action—usually a connection to another deck or card—that occurs when the user presses a selection key, chooses an item from a list, enters, or leaves a card. The MobileDev Link Wizard lets you create many kinds of links, corresponding to the different links available in WML and HDML.

3 WIZARDING UP A WAP APLLICATION

Our little “Hello World” application will consist of two decks and a link. The first deck will display a greeting and a link that the user can select for more information. The second deck will display—you guessed it—more information.

44


Reservations Welcome to Fantasy Airlines’ reservation system

Options

FIGURE 3.2 The first card in a wireless application usually identifies the program.

Wizards MobileDev provides several wizards—Deck Wizards, a Card Wizard, and a Link Wizard—to help you build your applications. A wizard is a series of dialog boxes that accomplish a task. In MobileDev, wizards are used to automatically generate the interface elements and standard code in WAP applications. Wizards save you from a lot of repetitive coding and typographical errors.

MobileDev Wizards MobileDev includes the following wizards, each designed to create a particular wireless Internet entity: • Display Deck Wizard—Adds a deck and card that displays information to a user. • Display Card Wizard—Adds a display card to an existing deck. See Figure 3.3 for an example of what a display card looks like in a running application. • Link Wizard—Adds a navigation link. • Menu Deck Wizard—Adds a deck, a series of cards, and links that allow a user to select and navigate in an application (see Figure 3.4). • Input Deck Wizard—Adds a deck and card that gathers user input (see Figure 3.5).


45

Advice Center The tip of the day for Monday is: Live for today. You never know what tomorrow will bring.

Options

FIGURE 3.3 A display card provides information.

3

Options

Back

WIZARDING UP A WAP APLLICATION

EZ Banking What do you want to do? Access account Pay bills Check exchange rates EZ Banking What kind of account? Checking Saving Other Options

Back

EZ Banking Which checking account? 01768 02493 08925 Options

FIGURE 3.4 A menu is a series of cards and links.

Back

46


EZ Banking Enter your code to log in: […]

Options

Back

FIGURE 3.5 An input card prompts you for information.

Create the First Deck First, use the Display Deck Wizard to create the card that greets a user when the application is first accessed: 1. Double-click anywhere on the Application Map to display the Add Deck dialog box shown in Figure 3.6.

FIGURE 3.6 Choose your wizard type in the Add Deck dialog box.

2. Double-click Display Deck Wizard. 3. In the first page of the wizard, type Welcome as the Deck Name, as shown in Figure 3.7. 4. The Title, HelloWorld, is the project name you supplied earlier. You can accept the default or enter your own title if you want. If you want to change the title for all decks in the project, you can use the Settings dialog box (choose Tools, Setting) instead.


47

5. Type Greetings, galaxy! as the display text. 6. Check Show Advanced Options. This activates the next page of the wizard, where you can specify other options. 7. Click Next.

FIGURE 3.7 Define the card in the first page of the wizard.

Don’t worry about all the other options available in the wizard; we’ll discuss them in greater detail later. 9. Check Show Generated Code. This tells the wizard to show you the markup code that will be generated. 10. Click Next.

FIGURE 3.8 The Advanced Options page is optional.


8. In Advanced Options, shown in Figure 3.8, uncheck the Enable Back Key check box— the first deck in your application doesn’t need a Back key.

48


11. The WML code that will be generated by the wizard is displayed; see Figure 3.9 for an example. Take a look at the code and click Finish.

FIGURE 3.9 Look at all the code you didn’t have to write!

The deck and default card are added to the Application Map, as you can see in Figure 3.10.

FIGURE 3.10 The deck and card are shown as rectangles on the Application Map.

Save the Project Notice the asterisk (*) next to the deck name. It indicates that recent changes need to be saved. To save your project, choose File, Save Project.

Changing the Look of the Application Map As mentioned in Chapter 2, you can customize the font, size, and other display properties of the objects in the Application Map. You can either make these changes for individual objects or you can change the default settings. Here you’ll learn how to do both.


49

First, change the default settings: 1. Choose Tools, Settings, and click the Application Map tab to display the Settings dialog box, as shown in Figure 3.11.

FIGURE 3.11

3

The Settings dialog box changes the default settings for all objects in the project.

FIGURE 3.12 The Deck Default Properties dialog box changes the default look of all decks.

3. If the MobileDev Default Text Settings option is checked, uncheck it. When this option is checked, MobileDev applies its “factory” settings; that is, the settings it was shipped with. 4. Select an alignment of Center Top and then change the font name to Arial by clicking the Browse button (the three dots). While you’re in the Font dialog box that you can see in Figure 3.13, make sure the font style is set to Regular and the size to 10.


2. Double-click the icon for the object you want to change (or click it once and then click Edit). For example, double-click the Deck icon to display the Deck Default Properties dialog box, as shown in Figure 3.12.

50


Actually, you can change the alignment and the font to anything you like (maybe you have a favorite font); these are just suggestions.

FIGURE 3.13 Choose your favorite font for the deck name.

5. Click OK to return to the Deck Default Properties dialog box. 6. Click Close and then click Yes to apply your changes and return to the Settings dialog box. 7. Repeat the procedure to modify the default text properties for a card. For example, you could use the same font but change the alignment to Center Middle. After you finish making your changes, you’ll notice that the Welcome deck has not changed. Why not? Well, what you’ve changed are the defaults; these settings will apply to any new decks you make. But you can also apply them to your existing decks (or deck, in this case).

Retrofitting Changing the properties of already existing objects is easy. Do the following to change the properties of the Welcome deck to the defaults you’ve just set: 1. Make your changes to the default properties, as described previously. 2. Click the Welcome deck to select it. (By the way, it’s possible to select one or more objects of the same type using the Ctrl key and the mouse). 3. Right-click and choose Properties, and then click the Application Map tab in the Properties dialog box; it will look something like Figure 3.14. 4. Check the Default Text Settings option, click Close, and then answer Yes to apply your changes.


51

FIGURE 3.14 You can apply your new defaults to individual objects using the Properties dialog box.

Create the Second Deck You can use the Display Deck Wizard again to create the second deck in your application: 1. Double-click the Application Map to display the Add Deck dialog box. 3. Type More as the Deck Name. 4. Type and Welcome to MobileDev as the Display Text. 5. Click Next, Next, and Finish. The More deck and default card are added to the Application Map, as shown in Figure 3.15.

FIGURE 3.15 Two decks are now shown on the Application Map.


2. Double-click Display Deck Wizard.

52


Create a Link The next step is to define the application flow by adding a link. We’ll use another wizard, the Link Wizard. Follow these steps: 1. Select the Welcome card on the Application Map. 2. Move the mouse pointer to the center of the Welcome card until the pointer changes to an arrow. 3. Click and drag the pointer to the More card. As you drag, a line appears between the two cards, as shown in Figure 3.16.

FIGURE 3.16 Drawing a line between two decks or cards activates the Link Wizard.

4. Release the mouse button to launch the Link Wizard, which is shown in Figure 3.17. 5. Select Define a New Link as the link type. 6. Change the Link Text to More. The other defaults are fine. 7. Click Next.

FIGURE 3.17 The Link Wizard defines the application flow.

8. The Parameter Definition page of the wizard, shown in Figure 3.18, lets you pass variables from the Welcome card to More. For the moment, however, you are not passing any variables, so just click Finish. The link you just created is added to the Application Map, as you can see in Figure 3.19.


53

FIGURE 3.18 You’ll see how to use variables and parameters soon.

3

Now the cards are linked.

Curious About the Code? You may be wondering about the underlying WML or HDML code that is generated when you run these wizards to create decks, cards, and links. You can see—and edit—this code any time you like by double-clicking a deck or card (or by right-clicking one and choosing View Document).

Run the Application As you saw in Chapter 2, MobileDev’s integrated phone simulator makes it easy to run and view an application. The Auto Mirror feature allows you to test decks using the integrated simulators. When you ran the demo, you did not have to enable the Auto Mirror feature, because that was done for you at installation. However, when you create a new project, this feature must be enabled the first time you test the deck.


FIGURE 3.19

54


What’s Auto Mirror? Auto Mirror is just a fancy way of saying that MobileDev keeps a copy of your documents and scripts under your local Web server so that they can be accessed by a simulator. To run the application and activate Auto Mirror: 1. Select the Welcome deck. (Make sure the deck itself is selected, not just the card.) 2. Right-click the deck and choose Run Deck, New MobileDev—Yospace 1.0 to run the deck in the Yospace phone simulator provided with MobileDev (or press Shift+F5 as a shortcut). 3. The first time you run a deck, you’ll be asked to enable and configure the Auto Mirror feature. Click Yes. 4. In the Settings dialog box that’s displayed (see Figure 3.20), check Auto Mirror Documents and Scripts to enable the feature. 5. Make sure that the location of your Web server’s document and CGI directories are correctly shown in the Doc. Folder and CGI Folder fields. 6. Click Apply and then Close.

FIGURE 3.20 You should enable Auto Mirror the first time you test an application.

The Welcome deck of your application will be displayed in the phone simulator, as shown in Figure 3.21. Click the More link to see the second page.

Troubleshooting If the application doesn’t appear as you expect, check the following troubleshooting points:


55

• Is your Web server installed, configured, and running? (See Appendix A: “Setup” for details.) • If you are not using Xitami (the default Web server), did you enter the correct locations in the Doc. Folder and CGI Folder fields of the Settings dialog box? (Again, see Appendix A.) • Did you make sure to draw the link between the cards, not the decks? (Linking decks rather than cards can give the wrong result.)

HelloWorld Greetings, galaxy! More HelloWorld and welcome to MobileDev. Options

Back

3 Back

FIGURE 3.21 Your application is displayed in the simulator.

Same Application, Different Browser So, you’ve created your first application and have viewed it on the Yospace phone simulator, which shows what the application will look like when accessed using a Nokia 7110 browser. But you’re probably asking yourself what this application will look like in another browser. No problem. For a quick view, just right-click the Welcome deck again and choose Deck, New Generic Up Browser. Figure 3.22 shows what you’ll see.

NOTE This browser is available only if you’ve installed the UP.SDK from Openwave, as suggested in Chapter 2. This software developer’s kit is available on the CD at the end of the book and installation instructions are included in Appendix A, ”Setup.“


Options

56


Greetings, galaxy! [More]

and welcome to MobileDev. Link

OK

FIGURE 3.22 Your application runs in another simulator.

This simple application runs well without modifications in the UP.Simulator. However, to take advantage of the differences between the browsers, you really should re-create the application for another browser. It may seem tedious to have to write an application twice, but in the current state of the WAP industry, many gurus recommend that we do so. Happily, it’s an easy task in MobileDev. Try it out by re-creating the Hello World application for another browser.

Create the First Card Create the first deck and card: 1. Double-click anywhere on the Application Map to display the Add Deck dialog box. 2. In Add Deck, double-click Display Deck Wizard to activate the wizard. 3. In the first page of the wizard, type Welcome_UP as the Deck Name. You’ll need to add the “_UP” because deck names must be unique within a project. 4. Accept the default title or change it to something more imaginative if you’d like. 5. Type Greetings, galaxy! as the display text. 6. Make sure that Show Advanced Options is checked and click Next.


57

7. In Advanced Options, shown in Figure 3.23, change the browser brand to UP.Browser and uncheck Enable Back Key. MobileDev lets you develop multiple applications having different browsers in the same project. Notice that the document version changes from WML 1.1 to UP.SDK 3.2.

FIGURE 3.23 Changing the browser brand customizes your application for another simulator.

8. Click Next and then Finish.

Use the Display Deck Wizard again to create the second card: 1. Double-click the Application Map to display the Add Deck dialog box. 2. Double-click Display Deck Wizard. 3. Type More_UP as the Deck Name. 4. Type and Welcome to MobileDev as the Display Text and click Next. 5. Change the browser brand to UP.Browser. If you know you are going to be creating a whole series of decks and cards using a different setting than what was specified when the project was created, change the default setting in the Project tab of the Settings dialog box (click Tools, Settings). 6. Click Next and Finish.

Create the Link Now link the two decks. If you don’t remember how to use the Link Wizard, see the preceding sections. 1. Draw a link between Welcome_UP and More_UP to launch the Link Wizard. 2. Select Define a New Link as the link type.


Create the Second Card

3

58


3. Change the Link Text to More. The other defaults are fine. 4. Click Next and then Finish.

Compare the Applications MobileDev generates different markup code for each browser brand. If you’d like to compare the code, just double-click the Welcome and Welcome_UP decks and view them in the Document Editor. For example, note how the title concept is treated differently: in Nokia phones, titles are displayed as headers, whereas in UP phones, titles are treated as standard text. This is the code generated for the Nokia browser brand:
Greetings, galaxy!

Compare it to the code generated for the UP.Browser brand:
HelloWorld

Greetings, galaxy!

Summary In this chapter, you learned about decks, cards, and links, and you built your first WAP application (twice!) using the Display Deck and Link Wizards. You may have customized the look of your Application Map to incorporate your favorite font or colors, and you probably took a quick look at the WML code that MobileDev generated for your application. Best of all, you were able to see your tiny little application in action, running on the Yospace simulator and the UP.Simulator. In Chapter 4, “Before Building,” you’ll learn about the basic technology choices that you should resolve before building an actual application.


59

Q&A Q. Is the CGI Script Alias, specified in the New Project dialog box, a physical location on the PC? A. Not necessarily. The script alias is specified in the Web server configuration file. Q. What is the difference between a deck and a card? A. Decks contain cards that display text or prompt a user for information. Q. Is Auto Mirror necessary? A. Yes, if you want to run and test your application on your PC.


PART


II

IN THIS PART 4 Before Building

63

5 Learning About Wireless Markup Language 6 Wizards and Markup

75

103

7 Script Plus Markup—A Dynamic Application 8 Getting the Most Out of MobileDev

159

127

Before Building

IN THIS CHAPTER • The Question of Style • The Question of Technology • Avoiding Headaches • Your Turn to Create Projects • Q&A

CHAPTER

4

64

The Basics of WAP Application Design PART II

In the previous chapter, you created a tiny MobileDev project and WAP application. Now you’ll step back and take a look at the choices you need to make before building a full-size application. In this chapter, you’ll look at the basic technology issues that you should resolve before building an application. Along the way, you’ll learn the answers to the following questions: • Is style important? • What are my technology choices? • Why are the values specified in the New Project dialog box so important? • Will changing my mind in mid-development give me a headache?

The Question of Style To some degree, programming is always a matter of style, and WAP programming is no exception. But each kind of program has its own style, so if you’re going to develop a WAP application, you’ll need to be familiar with the WAP style. If you’re a developer from another discipline, such as Web programming, you may have to wrap your mind around another mindset, or you risk creating applications that won’t be adopted by users. Take, for example, an airline Web site such as the one shown in Figure 4.1. A typical airline’s Web site offers a wealth of information, such as schedules, arrivals and departures, fares, special fares, seat selection, fleet information (complete with pictures and seating diagrams), inflight services, vacation packages, luggage inquiries, and even employment opportunities. Extending this same service to a mobile user requires some thought because you can’t just copy the same set of services. You need to ask yourself which features make sense in the mobile world and which mobile-specific features, such as alerts, should be added to the mix. As on the Web, a pleasant user experience is the key to making users come back to your site. If they don’t like your service the first time they come across it, they probably won’t come back, so make sure you understand what a pleasant WAP experience means. The best way to get a handle on this is to use a simulator (or a real cell phone) and visit WAP sites; you’ll soon get a good idea of what works and what doesn’t. Keep in mind that typical users are paying for their connect time. For example, if you’re developing a WAP site for the airline shown in Figure 4.1, you might include only flight reservations and current flight information, and add notification alerts for departure times and gates. See Figure 4.2 for an idea.

Before Building CHAPTER 4

65

FIGURE 4.1 The Fantasy Airline Web site attracts users with its graphics and huge variety of services.

Style Guides Another way to get a handle on what’s good and what’s bad in a WAP application is to read style guides. Industry players such as Openwave have developed programming style guides that contain invaluable information on how to approach WAP programming. If you’ve downloaded and installed Openwave’s UP.SKD, you’ve already got one on your PC. (And if you haven’t, the installation instructions are in Appendix A, “Setup.”)

Take, for example, the Openwave WML Application Style Guide (also available from the Openwave Web site). This style guide is a comprehensive guide for creating WML WAP applications and is based on real-world experience. The style guide covers usability issues and provides guidelines on navigation, menus, data input, text display, and so on. Here are some examples of their advice: • Minimize the amount of text that users have to enter by using lists as much as possible. For example, instead of asking them to enter the name of a city, offer a list of commonly-used cities. The last choice in the list could be an input field that they can fill in if they can’t find their city on the list.

BEFORE BUILDING

A Sample Guide

4

66


FIGURE 4.2 A WAP site for the airline should have only a few choices.

• When you ask users to enter text, use format specifiers if you require the text in a certain pattern. For example, if you need a date, show them the format you expect, such as DD-MM-YYYY. • Assign the most frequently performed task to the ACCEPT (left) function key in each card so that most users can navigate through the application using just one key. • Make popular decks bookmarkable so that users can return to them easily. • Specify the name of your service in the alert title. Nokia also offers a style guide called WAP Service Designer’s Guide to Nokia Handsets.


67

Remember This When designing a WAP application:

• Usability is critical. • Know your user. • Test your application.

The Question of Technology When you create a new project with the MobileDev New Project dialog box, you are, in effect, buying into various technologies. The technology choices you make can impact your application and its design in a big way, so it’s important to understand what is going on. For example: • Browser brand—What family of microbrowsers do you need to support? As you have seen, different browsers have different behaviors, and the display area and key arrangements vary considerably. • Document type and version—Which markup language and version should you use? If you are writing an application for North America, you may have to use HDML; in the rest of the world, WML is more common. • Application server—What is the application server technology (if any) that will drive the application? Is your application static or dynamic? If dynamic, are you planning to use Perl, ASP or even Java to drive your application logic?

Answers to these questions will be used to set defaults throughout the application. Of course, you can change your mind later or develop multiple applications in parallel using different settings, but you can save yourself some work by having answers to these questions right from the start. Let’s take a quick look at these technologies. At the end of this chapter, you’ll apply what you have learned by creating a new dynamic application project.

Browser Brand As you know, to run a mobile application, you need a mobile phone or other wireless device containing a microbrowser that interprets and displays information.

4 BEFORE BUILDING

If you don’t have answers to all these questions, you should find out before you start developing WAP applications. Your wireless carrier will be able to tell you about browser brands and document types, or you may be able to find the information you need at a Web site such as www.anywhereyougo.com, an online meeting place and information source for WAP developers.

68


Browser brand manufacturers have their own interpretation of the WAP standards and their own “extensions,” all of which have an effect on behavior. Web developers usually try to make their applications work on Microsoft Internet Explorer as well as on Netscape, and WAP developers have to do much of the same thing. Fortunately, as mentioned previously, there are only a few browser types, even though there are hundreds of brands of phone. This book looks primarily at the Nokia 7110 browser, which was developed for the European market, and the UP.Browser, which dominates the market in North America and is popular worldwide. As a WAP developer, you need to think of the phone browser that users will have, and you should consider coding for the lowest common denominator in terms of text size, scrollability, and behavior. Selecting a browser brand determines the markup languages (also called document types) available. For example, if you select the Nokia 7110, you will not be able to code in HDML. MobileDev currently supports the following browser brands: • Generic • Nokia 7110 • UP.Browser If you are unsure which one to use, ask your wireless carrier.

Generic The MobileDev generic browser is based on the Nokia browser and is MobileDev’s best guess at the set of features that is common to all browsers. For example, because the simplest form of selection is an anchor, anchors were chosen to represent the menu items generated by the Menu Deck Wizard for a generic browser brand. The downside to generic code is that it does not take advantage of extended features and behaviors that the individual browsers have to offer. You may need to tailor a generic application to a particular browser type after the application is completed.

Nokia 7110 When you select the Nokia 7110 brand, the MobileDev wizards will generate the best markup code for Nokia 7110 browsers. To take full advantage of this brand, you may want to install the Nokia WAP Toolkit. The toolkit is available on the CD at the back of the book; instructions for installing it are in Appendix A, “Setup.”

UP.Browser If you choose the UP.Browser, the MobileDev wizards will generate the most appropriate markup code for phones implementing the UP.Browser browser.


69

The UP.Browser browser brand is based on the Openwave UP.SDK versions 3.2 or 4.1. Again, to take full advantage of this brand, you really should install one of the UP.SDKs; they are available from the Openwave or MobileDev Web sites or on the CD at the back of this book.

Document Type and Version The document type refers to the markup language used in the application. In a wireless application, what you see on the cell phone is currently created with one of two languages: • WML—Currently the worldwide industry standard, it is supported by all browser brands. From the beginning of 2001, all Internet-capable cell phones support WML. • HDML—Used mainly in North America, it is supported only by the UP.Browser browser. However, HDML is a kind of lowest common denominator because most WAP gateways will support HDML. Which language you choose depends largely on the geographical location of your end users. If you are writing compatibility applications for existing cell phones in North America, you may still want to use HDML; otherwise, you’ll probably want to use WML.

Version The version specifies the markup language version to support. Choices depend on the document type selected.

Application Server The application server specifies the server technology used to run the application logic. The choices are • Static Documents—No template is created or used. • ASP Template—An ASP script is created along with a WML or HDML template. • Perl Template—A Perl script is created along with a WML or HDML template.

Static Versus Dynamic As mentioned in Chapter 2, “WAP Design Tools,” MobileDev lets you create both dynamic and static applications. Dynamic applications use an application server such as Perl or ASP to create the cards that are rendered in the phone’s browser. Static documents don’t use an application server and behave like standard Web pages.

Templates You may think that template means a stored pattern or file containing frequently-used or boilerplate text or other specifications. However, in the WAP world, template is just a concept meaning that the application’s presentation layer (the markup code) is kept separate from the

4 BEFORE BUILDING

• ASP Native—ASP is created without a template.

70


application logic layer (the server script). This separation of code means that programmers can work with the code they know best. When a deck is added to a template application, MobileDev automatically creates two sets of code: • Markup code containing WML or HDML • Server script code, containing, for example, ASP VB Script or Perl script You can enter and edit each set of code using the integrated editors: the Document Editor for markup, and the Script Editor for scripts. MobileDev generates nearly all the markup code that your application needs. However, for the server script code, you’ll have to do some of the work on your own to augment the code that MobileDev generates. For example, to pass information generated by the script for display in the markup code, you can use substitution variables. A substitution variable is a variable that is defined and given value in the server script, then passed to the phone browser, and displayed to the user. You’ll see how to use substitution variables in Chapter 5, “Learning About Wireless Markup Language.” As you can see in Figure 4.3, the server script interacts with the markup code at run time to create the application that is rendered in the phone’s microbrowser. Server script and markup code for the main menu

Reservations Tickets View Reservation

Options

Main menu in the Application Map

FIGURE 4.3 Markup and server code work together to create the application.

Main menu in the browser at run time


71

Choosing an Application Technology In the not-so-distant past, choosing an application server technology was as simple as choosing your operating system. If you were a Unix shop, you went with Perl; if you ran on Windows NT, you went with ASP. These days, you have more options and so choosing is a little harder. For example, you can now run ASP applications on Unix using chilli!Soft (www.chilisoft.com) and you can run Perl on Windows NT (it’s called ActivePerl for Windows). How do you choose? By considering some of the following factors: • Your programming background—If you come from the Unix world, Perl or Java is a good bet. If you are already familiar with NT servers and the Visual Basic family, go with ASP.

NOTE You can use Java technology to run MobileDev applications, even though Java is not fully supported in MobileDev’s development environment. See Chapter 11, “Java and MobileDev” for details and a scenario that you can build.

• Pricing—Research the costs carefully, including the operating system and Web server components required to build your service. Keep in mind that Perl and Java are free. • Web server—Choose your Web server carefully because it may determine your application server technology. For example, ASP will run on Xitami if you purchase Halcyon’s Instant ASP product. Instant ASP is a Java-based implementation of the ASP framework that lets developers deploy ASP applications on any Web server.

The bottom line is that you should choose carefully because it can be difficult and expensive to switch operating systems, Web servers, or application servers.

Avoiding Headaches The best way to avoid headaches is to familiarize yourself with style guides and other WAP applications so you can decide on technology issues before you start coding. However, if you do start coding and then change your mind about browser brand, document type, or application server technology, don’t worry. MobileDev is very flexible. In fact, it’s even possible to develop multiple applications in parallel, with each application using a different browser brand and document type, all within the same project.

4 BEFORE BUILDING

• Availability of components—Make sure the types of add-ons you have in mind are readily available (and reliable). Although many Perl and ASP components are available on the Web for free, you may have to customize them.

72


Fixing Things Change your mind about the browser brand, document type, or application server? No problem. Just use a MobileDev wizard to re-create the object in question using your new choices, and then cut and paste any markup or script code you want to keep into the new object.

Your Turn to Create Projects Now that you’ve looked at the various technology choices you have when creating a wireless application with MobileDev, let’s define a couple of different projects so you can review what you’ve learned. First, you’ll define a project based on a Nokia browser using WML presentation code and Perl server script; then you’ll define a static project that doesn’t use any server script at all.

The TopMovies Project In Chapter 2, you took a quick look at the MobileDev Movies demo, and we promised you could build something similar. If you don’t remember, the demo is a dynamic WAP application that displays information about top-rated movies. In the next few chapters, you’ll start building it, beginning with defining the project. Follow these steps: 1. Launch MobileDev; if it’s already open, close any open projects. 2. Choose File, New Project from the menu. 3. In the New Project dialog box, type TopMovies as the project name, as shown in Figure 4.4. 4. Specify a location for your project where application files will be stored on your PC. 5. Ignore the Document Path; it is used only for static applications. 6. For the CGI Script Alias, specify the location of your CGI directory relative to your Web server root directory. 7. Select Nokia 7110 as your browser brand and WML 1.1 as the document type. 8. Select Perl Template as the application server. 9. Click Create. The Application Browser window and an empty Application Map are displayed.

The BitsNPieces Project Before you start adding the components of the TopMovies application, we’re going to spend the next chapter looking at the basics of WML code. To do so, you don’t need the server script that comes with the TopMovies project you just defined. Instead, you’ll define a WML-only project that you’ll use to examine WML. Follow these steps:


73

FIGURE 4.4 The TopMovies project is based on WML and a Nokia browser.

1. Close the TopMovies project by choosing File, Close Project. 2. Choose File, New Project again. 3. In the New Project dialog box, type BitsNPieces as the project name, as shown in Figure 4.5. 4. Specify a location for your project where application files will be stored on your PC. 5. The Document Path is a location under your Web server document directory where static pages will be kept. 6. The CGI Script Alias is the location of your CGI directory relative to your Web server root directory. 7. Select Nokia 7110 as your browser brand and WML 1.1 as the document type. 8. Select Static Documents as the application server. 9. Click Create to define the project and display the Application Map.

4 BEFORE BUILDING

FIGURE 4.5 You’ll use BitsNPieces in the next chapter as you learn about WML.

74


Summary In this chapter, you learned about the importance of style and about the choices you need to make when you first create a project. You also created two new projects that you will build on in the upcoming chapters. In Chapter 5 you’ll take a closer look at wireless markup languages—WML in particular—and discover some of the fun things you can do with it. You’ll be surprised at what you can accomplish despite the simplicity of the language and the limited graphical capabilities of a cell phone: you’ll create input fields, selection lists, links, images, and even animations.

Q&A Q. What are the three most important things to remember when coding an application? A. Usability, knowing your user, and testing your application. Q. Which browser brand should I use to code in WML? A. Any of them; they all support WML. Q. Which MobileDev editor should I use to edit the application logic for a dynamic application? A. The Script Editor.

Learning About Wireless Markup Language

IN THIS CHAPTER • What Is Markup? • Decks • Document Prologue • Cards • Images • Links • Browser Variables • WML Rules • For More Information • Editing Markup Code in MobileDev • Q&A

CHAPTER

5

76


In the previous chapter, you learned about the style and technology issues that have to be considered before building a WAP application. In this chapter, you’ll take a closer look at markup languages, focusing on WML. Along the way, you’ll also learn the answers to the following questions: • What is markup? • How do I edit this stuff? • How can I use images in my application? • How can I get extra help when coding markup?

What Is Markup? Markup code is a simple programming language used in wireless applications. Currently, the two major wireless languages are WML (Wireless Markup Language) and HDML (Handheld Device Markup Language). When working with dynamic applications in the MobileDev environment, markup is also called the presentation layer. The application logic layer, which is handled by the server script, will be discussed in a subsequent chapter.

Why WML and Not HDML? You’ll notice as you read through this book that we concentrate on WML and practically ignore HDML, even though many phones, especially in North America, can accept only HDML applications. Why are we doing this? The main reason is because from the beginning of 2001, all new phones were capable of receiving WML applications, even in North America. Therefore, if you are developing new applications, you’ll probably want to use WML as your markup language. On the other hand, if you’re writing compatibility applications for the legions of North American cell phone owners who have HDML-only browsers, you’ll want to write in HDML. In a way, you could consider HDML a kind of lowest common denominator; most wireless gateways now include an HDML-to-WML translator as part of their service. Furthermore, although we’re not giving you much information about HDML in this book, that deficiency is more than remedied by using MobileDev as your application development tool. In MobileDev, the markup language is just a check mark in a dialog box; you can generate applications without worrying too much about which language they are written in. In addition, MobileDev includes context-sensitive help for all the HDML terms, which you can consult online while you’re building your apps.

Learning About Wireless Markup Language CHAPTER 5

77

WML Basics The WML language used in wireless applications is similar to HTML but is a much smaller language, consisting of tags that define document prologues, decks, cards, images, links, and variables. Most of the fancy layout features of HTML—such as tables, frames, and forms—are not available because they are not appropriate for use in current microbrowsers, which have limited display and memory capabilities.

Something to Work With To make it easier to discuss WML and WML tags, let’s use MobileDev to create a sample deck that will serve as an example for the discussion. Later, you’ll add more code to this deck. To create a basic WML file, follow these steps: 1. Open the MobileDev application, BitsNPieces, that you created in the previous chapter. 2. Double-click anywhere on the blank Application Map and choose Display Deck Wizard from the Add Deck dialog box, as shown in Figure 5.1. 3. In the Display Deck Wizard, leave all the default names, such as Deck1, and just enter some display text that you’ll recognize later, for example: Display Text: Go ahead, play with fire. 4. Click Next and then Finish, ignoring all the advanced options that you’re presented with.

5

Use the defaults in the Display Deck Wizard to create a “vanilla” deck.

WIRELESS MARKUP LANGUAGE

FIGURE 5.1

78


You’ll see the deck displayed on the Application Map. To view the WML code that MobileDev has generated, right-click the deck and choose View Document. You’ll see something like the following: :
Have your extinguisher handy.

4. Close the Document Editor, save the project, and run the deck, choosing the link labeled “But remember. . .” Figure 5.8 shows what the deck will look like on both types of browser. Nokia browser

UP.Browser

Advice Center Go ahead, play with fire. But remember… Go ahead, play with fire. [But remember...] Options

Link Advice Center Have your extinguisher handy.

Options


Back

FIGURE 5.8 Anchor links let you put links in the display text.


93

Card Events The last type of link is a card event. Card events define a URL to open when a card is accessed from a or <prev> action or when a element expires. Unlike actions and anchor link events, card events do not appear to a user as selectable choices or visual links. MobileDev supports the following card events as options in the tag: • onenterforward—URL to open if the user navigates to the card through a task. • onenterbackward—URL to open if the user navigates to the card through a <prev> task. • ontimer—URL to open if a element expires. The syntax is the same for all three elements; the tag is used only with the ontimer option:

Card Events and Animated Images WAP browsers don’t actually support animated GIFs or other animated images, but there is a way you can show something resembling a moving picture. Using the tag and the ontimer option, you can display cards in quick succession, each card showing a different image. To try it out using a few WBMP images, follow these steps: 1. Copy the following images from the CD to your Web server document directory: Fire1.wbmp, Fire2.wbmp, Fire3.wbmp and Fire4.wbmp. If you take a look at these files in your WBMP editor, you’ll see that they show the stages of a dying campfire. 2. View the code for Deck1 in the Document Editor. 3. In the code for card2, add an ontimer option, a tag and the first of the fire images; the card will look like the following when you’re done:

5 WIRELESS MARKUP LANGUAGE

4. Next, to make the cards show the remaining dying-fire images, copy the code for card2 and paste it three times at the end of the file, making sure you don’t overwrite the closing tag. Then adjust the card numbers and image numbers so that it looks like this:

94

Go ahead, play with fire.

But remember...





5. Close the Document Editor, saving your changes, and run the deck. Click the “But remember. . .” link, and then watch as the fire dies and smokes before your eyes. Figure 5.9 gives you an idea of what it looks like. If you want to extinguish it faster, you could set a smaller value in the tag.


95

Advice Center Go ahead, play with fire. But remember…

Options

Advice Center Have your extinguisher handy. Advice Center Have your extinguisher handy. Options Advice Center Have your extinguisher handy. Options Advice Center Have your extinguisher handy. Options

Options

FIGURE 5.9 Going, going, gone.

Browser Variables When the end user enters text in an input card or makes a selection in a select card, that value can be stored in a variable, called a browser variable, in the cell phone’s microbrowser. For example, the following input card stores the value in a browser variable named NameVar.

You can retrieve the value of this variable as $NameVar or $(NameVar). The parentheses around the variable name are not always required, but you should use them to make your code easier to read.


5

96


Figure 5.10 shows what happens to browser variables at runtime. GetName.WML <wml> ...

1 BitsNPieces What is your name? [Stephane]

The end user enters his name in the input field

Options

2 The browser assigns the value to the browser variable., NameVar. NameVar

ShowName.WML <wml>
Hi, $(NameVar), how are you today?
BitsNPieces Hi, Stephane, how are you today?

Options

FIGURE 5.10 The $ sign lets you access a browser variable’s value.

S t e p h a n e

3 You can use the value by prefixing the variable name with a $ sign.


97

Another Way to Use Browser Variables Only and <select> elements support browser variables in this automatic way. However, you can also set browser variables when executing a or a <prev> action, using the <setvar> element. The <setvar> tag declares a variable and gives it a value. Here’s the syntax: <setvar name=”name” value=”value”/>

You’ll need to use <setvar> whenever you want a browser variable outside of and <select>. In Chapter 6, “Wizards and Markup,” you’ll see an example of how <setvar> can be used with an anchor link to record a user’s selection.

WML Rules In the next chapter, you’ll look at some more features of WML, including browser variables, and you’ll learn how to let MobileDev do most of the coding for you. However, at times you may want to enter your own WML code or edit the automatically-generated code. When you’re coding in WML, you should be aware that WML is a stricter language than either HTML or HDML. Things that are merely suggestions in these other languages are actually requirements in WML. The following are some of the rules you should keep in mind when coding in WML: • Unlike HTML and HDML, the command keywords in WML are case sensitive and must be entered in lowercase. That means you must always code , not . • Variable names are also case sensitive but may be in any case. SignVar, signvar, and SIGNVAR are all different variables names. • Option values must always be enclosed in double quotes, like: id=”Poseidon”

In HTML and HDML, quotes are not required unless you are using special characters, but in WML you should always include them. • Spaces are not allowed between the option name, the equal sign, and its value. For example: Right: Wrong:



• Tags must always be closed, either with a closing tag, , or with something called an end-element character, which is a slash at the end of the tag. For example, you can see the two ways of closing tags in the following action link:

98


The <do> element must be closed with a separate tag because there is another element—the —within it. On the other hand, the element is completed within the tag itself, so it needs only a closing “/” at the end.

For More Information What you’ve looked at in this chapter is just a summary of WML basics. For detailed information about the various tags, see the MobileDev online help or the documentation set that you downloaded with the UP.SDK or the Nokia WAP Toolkit.

Editing Markup Code in MobileDev The wizards generate the standard interface components. If you want to modify the generated code or add other elements manually as you have done in this chapter, you can use the Document Editor. If you’ve been using the Document Editor, you’ve already noticed some of its features and have probably figured out most of them. The Document Editor actually has different names depending on the language you’re using. When you’re in a WML application, it’s called WML Editor; for HDML it’s—predictably enough—called HDML Editor. Whatever it’s called, the editor provides the following features: • Context-sensitive pop-up lists (also called Auto List Members) • An Auto Complete feature • Chroma Coding • Property sheets for tags and attributes • Extensive online help The Auto List Members, Auto Complete and Chroma Code features are enabled by default. To disable any of these features or to set the tab width and undo/redo level, access the Editor tab of the Settings dialog box by clicking Tools, Settings, as shown in Figure 5.11.

Auto List Members When the Auto List Members feature is turned on, you are offered a list of elements, attributes, and possible attribute values as you type, as you can see in Figure 5.12. The lists are governed by industry specifications and can recognize markup tags, attributes, and relationships, as well as the overall context, preventing you from creating code that will render incorrectly. For WML and HDML, lists appear after you type the on the opening tag.

Chroma Code


The Chroma Code feature displays elements and their attributes in color, allowing you to spot coding errors as they occur. You’ve probably already noticed that the code turns red when you make a syntax error; for example, if you enter an tag without enclosing it in
tags or if you code the href option instead of the src option in the tag.

5

100


You’ll probably be happy with the default colors, such as red for wrong, but if you want, you can customize all these colors in the Color tab of the Settings dialog box.

Property Sheets Property sheets are a great way to view and specify all the attributes of an element at one time. To display the property sheet for an element, place your cursor within the element or its attributes in the Document Editor and click Edit, Element Attributes, or press Ctrl+E. Figure 5.13 shows the property sheet for card2.

FIGURE 5.13 Property sheets give a summary of the attributes of a selected object.

Online Help The MobileDev online help incorporates reference information on WML and HDML. The Help is context aware, which means that when you press F1, help is displayed for the element you’re on. The online reference help topics include hidden links and pop-ups to related topics. To find a hidden link, move the mouse over a word; if the cursor changes to a hand, it means that more information is available by clicking. For example, Figure 5.14 shows the online help for the <do> element, with a pop-up explaining the meaning of the value that must be entered.


101

FIGURE 5.14 Online help is only a click away.

Summary In this chapter you learned the basics of WML code and how to enter and edit it using the MobileDev Document Editor. You looked at decks and the different types of cards, you worked with images—including an animated image—and links, and you were introduced to browser variables. Lastly, you found out more about the Document Editor and its code-assistance features. Now you know why your code turns red when it’s wrong! In Chapter 6, “Wizards and Markup Languages,” you’ll discover how to use MobileDev wizards to do most of your WML coding. The chapter discusses browser variables at greater length and introduces you to a great dynamic feature of WAP applications: substitution variables.

Q&A Q. Is a document prologue required? A. Yes, a document prologue is required for every WML file, but fortunately, the MobileDev wizards code it for you. Q. Which WML tags give you a selection list? A. The <select> and tags.


102


Q. Do I have to code all this stuff myself? A. Of course not. You’ll usually want to use the MobileDev wizards. Q. How do you access the value of a browser variable? A. By prefacing the variable name with a dollar sign ($).

Wizards and Markup

IN THIS CHAPTER • What Are You Building? • Create Display Deck • Default Markup • Create Input Deck for a Prompt • Create Action Link • Create Input Deck for a Selection • Relink an Unresolved Link • Add an Options Link • Run Application • The Limits of Markup • Q&A

CHAPTER

6

104


Even though WML is an easy-to-learn language, it’s even easier when you don’t have to code it yourself. This chapter looks at the markup code generated by the MobileDev wizards as you start building the TopMovies application introduced in the previous chapters. Along the way, you’ll learn the answers to the following questions: • Which wizard generates what? • How do I use browser variables? • Why does MobileDev generate undefined links and cards? • How do I use substitution variables?

What Are You Building? In this chapter you are going to create the markup, or presentation layer, of the TopMovies application introduced in the previous chapters. If you skipped the hands-on portions of the previous chapters but want to jump in now and start creating the application along with us, take a look at “The TopMovies Project” in Chapter 4, “Before Building,” and follow the steps to create a project named TopMovies. You’ll need a project to build this application. Building the TopMovies application will familiarize you with the MobileDev wizards and the WML markup they generate.

Create Display Deck As you have seen, MobileDev provides several wizards to help you build the type of deck you want. Use the Display Deck Wizard to create the deck and card that greets the user when the application is first accessed: 1. Open the TopMovies project in MobileDev and make sure the Application Map is displayed (if not, choose View, Application Map). 2. Double-click anywhere on the Application Map to display the Add Deck dialog box. 3. Double-click Display Deck Wizard. As you’ve seen several times already, this wizard creates a deck containing a display card that displays information to the user. Figure 6.1 shows the Add Deck and Display Deck Wizards. 4. In the first page of the wizard, enter Welcome as the deck name. 5. Type Welcome to Top-Rated Movies! as the display text. 6. Check Show Advanced Options. 7. Click Next. 8. In Advanced Options, uncheck Enable Back Key—the first deck in the application doesn’t need a Back key—and uncheck Show Generated Code.

Wizards and Markup CHAPTER 6

9. Make sure that Perl Template is selected as the application server. (It’s the default if you chose Perl Template when you defined the TopMovies project in Chapter 4).

FIGURE 6.1 Add a Welcome deck with the Display Deck Wizard.

The deck and default card are added to the Application Map. Take a look in the Document Editor for the code that was generated: <wml> <meta http-equiv=”Cache-Control” content=”max-age=0”/>
Welcome to Top-rated Movies!

6 WIZARDS AND MARKUP

10. Click Finish.

105

106


What’s a Back Key? We keep telling you to disable or enable something called a “Back key,” but you may be wondering exactly what it is. A Back key gives users a means of navigating backward through the application; it can be coded in several ways, but generally it provides a soft key label called Back or a link named Back that returns the application to the previous card. In WML code, the back functionality is achieved with the <prev> tag, which, as its name implies, takes the user to the previous card. The <prev> tag is often coded within an action link associated with the previous task, as shown in the following code, although it can also be coded in an anchor link. In the example that follows, notice that we’ve coded the <do> link in the template section of the card so the Back key will be available in all cards of the deck. <wml> <do type=”prev”><prev/>
Welcome to Pizza Land
<do type=”accept” label=”Enter”>
Please enter your ID:

Figure 6.2 shows what these cards look like on a Nokia browser. Notice that the first card in the application doesn’t display the Back key; this feature is controlled by the browser. On an UP.Browser, the Back key is available from the physical key on the phone labeled “Back.”

Different Browsers, Different Backs If you notice that your backward navigation differs from browser to browser, don’t be alarmed. Backward navigation is handled differently on different browser types, and even on different browsers of the same type. For example: • The UP.Browser provides a physical Back key even if you don’t code the <prev> task. You can, however, disable the functionality of this key by coding a <noop> (no operation) task instead of a <prev>, like this: <do type=”prev”><noop/>

• On UP.Browsers, don’t bother specifying a label in the <do> tag; it will be ignored.


Pizzaland.wml

Options

Via Service Options

Pizza Land Please enter your ID: […]

Options

Via Service Options

Back

Pizza Land What kind of pizza? [Cheese]

Options

Back

FIGURE 6.2 The browser doesn’t show the Back key on the first card.

• On some Nokia browsers, you can change the label displayed under the right soft key. You might use this feature to translate the label, like this (by the way, reculer is French for step back): <do type=”prev” label=”Reculer”><prev/>

However, many Nokia browsers do not change the soft key label; instead, they include a link called Reculer on the Service Options page that’s displayed when the user clicks Options.


<wml> <do type="prev"> <prev/> ...

Pizza Land Welcome to Pizza Land.

107

108


Default Markup We’ve been skipping that Advanced Options screen in the Display Deck Wizard, but now’s the time to take a closer look at it. This screen, which is available in all the MobileDev deck wizards, lets you specify access control, cache settings, and the generation of the Back key. If you don’t check Show Advanced Options, you’ll skip right over this page, shown in Figure 6.3, but sometimes you may want to use the options it contains.

FIGURE 6.3 Advanced Options are useful some of the time.

Browser Brand The options in the Browser Brand box are the browser and language choices you set when you created the project. You’ll often use the same settings for all decks in the project, but you can, for example, change the browser brand to UP.Browser and create a separate application based on the Openwave browser type.

Restricted Access The Restricted Access option enables extra deck-level security. By default, it is left unchecked, which means that this deck can be accessed by decks in the same domain. A domain is a computer or network of computers addressed by a name or IP address, such as speedware.com. Unless you check the Restricted Access option, all the WML decks in your application are considered public; that is, anyone can access them as well as any variables they may contain. If you are concerned about this potential security risk and want to control it, you can limit access to your application to only certain domains and/or to certain locations within the domain.


• Domain—Specifies the URL domain of other decks that can access the deck. • Path—Specifies the URL root of other decks that can access the deck. For example, the following code makes the deck available only to decks in speedware.com/internal.

Caching Control The Caching Control option enables phone memory caching and is enabled by default. Caching means that the most recently visited decks are kept in memory so that they can be quickly redisplayed without requesting them again from the Web server. When the cache exceeds the device’s memory capacity, the least-recently visited decks are dropped from memory. When a user navigates to a deck that exists in the cache, the phone’s browser determines, by comparing the deck’s time to live (TTL) to the elapsed time since the deck was last requested, whether to retrieve the deck from cache or to request it again from the server. If the elapsed time is greater than the specified TTL, the browser requests the deck from the server. Otherwise, the cached deck is displayed. For a dynamic application in which decks contain time-sensitive information, a short TTL is recommended. MobileDev’s default is for the deck to be reread every time. To change this default, specify another value. The following is the code that is generated in the deck: <wml> <meta http-equiv=”Cache-Control” content=”max-age=time” forua=”true”/> ...

To drop a deck from the cache after 1 hour, for example, specify max-age=3600 (3600 seconds). Keep in mind that it takes longer to retrieve information from a Web server than from cache.

Generate a Key to a Previous Task The Generate a Key to a Previous Task option creates an options-type action link to another deck in the application. To activate this option, specify the following:


When the Restricted Access option is activated, the phone browser compares the domain and path that you have specified to the URL of the requesting deck. The domain and path attributes are inclusive, meaning that the requesting deck must match both values to access the deck.

109

110


• Caption—A label for the action link, which will be displayed on the Service Options list in a Nokia browser or above the right button on an UP.Browser. (The actual location of the physical buttons differs, depending on the phone; confusingly, the Options button is sometimes on the left side.) • Previous Task—A deck defined in the current project. Here is the code that is generated: <do type=”options” label=”Caption”>

Generate a Key to a Previous Task is a way of creating a link while defining a deck. It is particularly useful to link to a “new task” deck; that is, a deck at the start of a set of related decks (see the option immediately following). You can link either to an existing deck or choose Undefined to specify the destination deck later.

Specify This Deck as a New Task When the Specify this Deck as a New Task option is checked, the deck will be considered a new task and the browser context, including its memory, navigation history, variables, and so on, will be cleared when it is loaded. This option is useful for grouping related tasks into distinct groups. The code that is generated looks like the following:

Enable Back Key As you have seen, the Enable Back Key option adds the functionality to navigate to the previous card within a context. This feature is especially useful on Nokia phones in which back functionality is not available by default, as it is on UP.Browser phones, which have a dedicated function key on the phone’s keyboard.

Create Input Deck for a Prompt Display decks are the basic type of deck. However, as mentioned previously, they’re not the only kind. Another useful deck is an input deck that contains a card that prompts users for information, such as the user’s name or access code. Getting back to the TopMovies application: after your Welcome page, you want to prompt the user for a name or ID. You’ll be able to store the ID or name in a browser variable so that you’ll always have access to it. Remember that it’s difficult for users to enter text into a wireless device, so ask only when it’s necessary.


To create a card that prompts users for their name:

FIGURE 6.4 This time you’re using the Input Deck Wizard.

2. In the Definitions page of the Input Deck Wizard, type GetName as the deck name, and leave the Input Style option as Individual Input Fields, as shown in Figure 6.5. Click Next.

FIGURE 6.5 The first page of this wizard is similar to the Display Deck Wizard.

3. In the Advanced Options page, check Enable Back Key and click Next. 4. In Data Entries (see Figure 6.6), type NameVar into the Variable Name box. This variable is called a browser variable and will hold the user’s input. You’ll learn about browser variables after you’ve made the deck. 5. In the Title and Caption boxes, enter the text that the user will see: What is your name?


1. Double-click an empty area of the Application Map and choose the Input Deck Wizard, as shown in Figure 6.4. This wizard was designed for gathering user input.

111

112


6. Leave the other options as they are; if you’re interested in what else you could be adding to this card, see the section titled “Other Options in the Wizard” for a description of everything we’ve left out.

FIGURE 6.6 All the options in this page are turned into WML.

7. Click Finish. The new deck is added to the Application Map, as you can see in Figure 6.7. The asterisk on the deck name reminds you to save the project; choose File, Save Project, or click the Toolbar icon.

FIGURE 6.7 Notice your new decks on the Application Map (we’ve changed the fonts for fun).

What’s a Browser Variable? When the end user enters text or makes a selection, that value can be stored in a variable in the phone’s browser. This handy feature is provided by the phone browser and saves you the time and trouble of storing and fetching all your variables on a server. After a browser variable has been defined—which you can also do with the <setvar> tag— you can retrieve its value anytime during the application by coding the variable name prefixed by a dollar sign ($). For example, if you create a browser variable named NameVar, you can access its value by coding $NameVar. At runtime, the phone browser will replace $NameVar with the value of the variable. You’ll see how to do this in the next deck you create in this application.


113

What’s “Undefined?”

6

Notice the Undefined card and link that is generated by the wizard. The link and card combination were created on the assumption that the variable was going to be used in another—as yet “undefined”—deck. In the following pages, you’ll replace the Undefined card and link with more functional ones, using the Link Wizard.

WIZARDS AND MARKUP

Where Did that Card Name Come From? When you created a display deck using the Deck Wizard, you may have noticed that a default card with the same name as the deck was created at the same time. For an input deck, this default card is named after the first browser variable that was defined in it. In this case, the card in GetName was automatically named NameVar, the same as the browser variable. This feature makes it easy for you to keep track of where variables are defined.

Other Options in the Wizard We’ve ignored quite a few options in the Deck Input Wizard because they’re not necessary right now or because the defaults are fine for our purposes. However, if you’re interested in what else you can specify using the Input Deck Wizard, the following is a short summary: • Grouped Input Fields—If you choose this option on the first page of the wizard, you can create a deck with several input fields organized in multiple cards. • Caption (in the Data Entries page)—The text displayed to the user in an editor, such as the text editor that Nokia browsers display to help with text entry. • Default Value—The value of the browser variable named in Variable Name if the user does not specify a value when prompted. • Advanced—An extra dialog box of advanced options: • Allow Empty Input—Lets the user leave the prompt field blank. The default is True, meaning the user can skip over the prompt without entering any text. If you were prompting for a bank code or some other identification that the application absolutely needs, you would check this box to make sure the user cannot leave the prompt field empty. (The WML code that is generated for this option is emptyok=”false or true”.) • Format—A pattern that the user must match when entering a value. • Max Length—The maximum length that the input value can be. • Password—Displays the user’s input as asterisks. You might check this option if you’re asking for a security code.

114


Create Action Link Now that you have two decks, one that welcomes the user and another that asks for the user’s name, how do you get from one to the other? Simple—you use the Link Wizard to define the application flow. If you need a refresher on link and link types, see the previous chapter. To create a link, follow these steps: 1. Select the Welcome card in the Welcome deck on the Application Map. 2. Move the mouse pointer over the center of the Welcome card until the pointer changes to an arrow. Click and drag the pointer to the NameVar card in the GetName deck, and then release the mouse button to launch the Link Wizard. (Make sure you draw the link between the two cards, not the decks. See “Drawing the Link” later in this chapter to understand why.) 3. In the Link Wizard, select Define an Action Key as the link type. 4. The other defaults, as shown in Figure 6.8, are fine for this purpose. On Nokia, your choices will add an option called OK to the Service Options screen; on the UP. Browser, this will create a soft key labeled OK. Selecting the option or pressing the soft key displays the GetName deck. 5. Click Next.

FIGURE 6.8 Define an Action Key adds a <do> link.

6. If you wanted to pass variables from Welcome to GetName, you could specify them on the Parameter Definition page. For the moment, however, you are not passing any variables, so just click Finish. You’ll learn about parameters in the next chapter. The link you just created is added to the Application Map, as you can see in Figure 6.9.


115

6

Notice that the link joins the cards.

Drawing the Link One of the interesting things about the Link Wizard is that it knows exactly where you drew the link using the mouse and offers you the type of link you’ll need to connect your two points. However, it’s important to understand how the Link Wizard thinks so you’ll always get the type of link you want. The following are some of the possibilities: • Deck-to-deck—If you draw a link between two empty areas of two decks, you’ll get a link to the next deck coded in the section of the first deck. For example: <do ...>

Links coded in the template are available in all the cards in the deck. You’ve seen that it’s useful to code a Back key in the template section so that you don’t have to code it for all the cards in the deck, but for most other purposes you don’t want a deck-level link. • Deck-to-card—If you draw the link between an empty area of the first deck and a specific card in the next deck, you’ll get a link to the deck and card in the template of the deck. For example: <do ...> ...

The card-to-card link is the most specific type of link, and in this case, it’s the one you want.

WIZARDS AND MARKUP

FIGURE 6.9

116


What’s That .PL Extension? In the preceding examples and in the links you’re creating as you go along, you’ll notice that the filenames that represent decks all have a .PL extension; for example, look at the href option in the tag. If they’re WML files, why don’t they have a .WML extension? The answer is that they are actually Perl files that in turn call WML files of the same name. When we created this project, we said that we wanted to use Perl Template as the application server. Therefore, instead of going directly to a WML file, the application goes first to a Perl file that does any necessary processing and then calls a WML file to display on the phone browser. So far in this application, you haven’t included any application processing in the Perl file; however, MobileDev automatically generates the Perl code required to simply run a WML file. In the next chapter, you’ll see how much more you can do using Perl script together with WML code.

Create Input Deck for a Selection Now that you have the user’s name, you can use it to ask the user to select a movie category. You’ll use a new variable called GenreVar to store the user’s choice. The last deck you created was an input deck in which users had to type in their input. What you want to do now is give the user an easier way to input values by selecting a choice from a list. Fortunately, the Input Deck Wizard has a Select option that lets you build a list effortlessly. Here’s how: 1. Double-click an empty area of the Application Map to display the Add Deck dialog box, and then choose the Input Deck Wizard. 2. In the Input Deck Wizard, type GetGenre as the deck name and click Next. 3. Enable the Back key and click Next. 4. In Data Entries, choose the Select option rather than the Input option that you used last time. Fill in the fields as shown in Figure 6.10: • Variable Name: GenreVar • Title: Hi $(NameVar), choose a genre: Notice that you’re including the value of NameVar, the browser variable that holds the value entered in the previous screen. Using the dollar sign ($) lets you access its value. At runtime, the browser will display the actual name that the user enters. • Change the style to Select and click the button under Advanced to display the Advanced Select dialog box where you’ll build a selection list.


117


FIGURE 6.10 This time you’re using the Select option instead of Input.

5. In Advanced Select, enter the following display text and values (and as shown in Figure 6.11) and click OK. Display Text Action Comedy Fantasy Sci-Fi Film-Noir Western

Value Action Comedy Fantasy Sci-Fi Film-Noir Western

The Display Text is what will be displayed in the list to the user, and the Value is the value that will be assigned to the browser variable, GenreVar, when the user chooses an item from the list. Note that these choices are hard-coded rather than obtained from a database (although, of course, they could be, and you’ll see how in the next chapter).

FIGURE 6.11 Advanced Select lets you set up the list of choices you’ll offer to the end user.

118


6. Back in Data Entries, click Finish to end the wizard. You’ll see your new deck displayed on the Application Map, as shown in Figure 6.12. Notice again that the default card created by the wizard is named GenreVar after the browser variable you defined.

FIGURE 6.12 Now you have three decks in the application.

Relink an Unresolved Link To define the application flow from the GetName deck to GetGenre, you can replace the undefined link with a link that really goes somewhere: 1. Click the NameVar card (again, remember to select the card, not the deck) and use the mouse to draw a link from NameVar to the GenreVar card in GetGenre, launching the Link Wizard. 2. As you can see in Figure 6.13, the Link Wizard knows that you want to resolve the undefined link. Click Next.

FIGURE 6.13 The Link Wizard prompts you to resolve the undefined link.

3. In the Parameters page, delete the variable by clicking Delete Var (you’ll see this page again soon), and then click Finish. 4. Click Yes when prompted to delete the undefined link card.


The Application Map is updated with the new link, as you can see in Figure 6.14. Notice that the undefined card in GetName has been replaced by the link to GetGenre.

119


FIGURE 6.14 Notice that your undefined card and link are gone.

What just happened? The undefined link was replaced with an action link that will appear on the Nokia browser as the Next option in the Service Options screen or on the UP.Browser as a soft key labeled Next. Open the Document Editor for the GetName deck to see the code that was added to the NameVar card:
<do type=”accept” label=”Next”> What is your name?

While you’re in the Document Editor, you could change the default label—next—that the wizard generated. For example, you could capitalize the first character: Next.

Add an Options Link So far, you’ve looked at two types of action links: the accept type that is tied to the accept task on the phone, and the prev type tied to a backward functionality. As you may recall, every browser type has a different way of implementing these tasks. For example, on a Nokia browser, the accept task is a link offered in the browser’s Service Options screen, whereas on an UP.Browser, the accept task is accomplished by pressing the left button on the phone. (As we mentioned, on some phones the Accept button is actually on the right.) Another useful action type is called options, which is connected to the right button on the UP.Browser or another Service Options link in the Nokia browser. The options task is often used to give users information about the current screen or an explanation.

120


In this application, you’ll use the options task to provide an About box. First you’ll add a card containing a description of the application and then you’ll link it to the Welcome card by means of an options link.

Deck Versus Card At this point you may be asking why you’re going to add a card and not another deck. You also may have been wondering all along why you are making so many decks instead of putting the cards that make up the application into one deck. The issues that you should consider are performance, memory, and server script access. Putting several cards into one deck improves performance because you are reducing the number of times that you need to contact the application server where the WML files are stored. When the end user first enters a deck, the deck and all its cards are loaded into the phone browser’s memory. As you might imagine, it’s quicker to access subsequent cards in the deck from the phone’s memory rather than fetching them from the application server. Technically speaking, you are reducing the latency, or waiting time. However, if you put too many cards into one deck, you will usually hit the memory limitations of the phone or of the transmission process. We touched on this subject in Chapter 1, “The Wireless World,” but to be on the safe side, you should keep your decks to a maximum of 600 bytes. Of course, this number is likely to increase with time, but it’s also likely that you’ll always face some sort of ceiling. Furthermore, every time you want to access server variables or perform any application processing or logic, you’ll need to contact the server script code on the server, so you’ll have to return to the application server anyhow. With these facts in mind, you should try to balance the card/deck ratio, putting extra cards into a deck if they are not big and if they don’t require any interaction with a server script file on the server.

The About Card and Options Link The About card you’re about to create is a good candidate for an extra card in an existing deck. It won’t add much size to the deck, and because the information will be hard-coded in the card, it won’t require any conversation with a server script. Follow these steps to create the About card and the options link: 1. Right-click the Welcome deck and choose Add, Card, which displays the Add Card dialog box. Double-click Display Card Wizard to launch the wizard that you can see in Figure 6.15. 2. Type About for the Card Name.


3. For the display text, type Top-Rated Movies is a teaching tool developed for MobileDev users.

FIGURE 6.15 The Display Card Wizard adds a card to an existing deck.

5. Draw a link between the Welcome and About cards, launching the Link Wizard. 6. In the Link Wizard, set the following, as you can see in Figure 6.16: • Type of Link: Define an Action Key • Key Type: Options • Key Caption: About

FIGURE 6.16 Choose Options as the Key Type.

7. Click Next and then Finish to complete the link. You’ll see the decks, cards, and links on the Application Map, as shown in Figure 6.17.


4. Click Finish. A new card called About is added to the Welcome deck.

121

122


FIGURE 6.17 Notice the two cards in the Welcome deck.

To see what your new card will look like at runtime, save the project and then run the Welcome deck. In the Welcome page, notice the new option called About. (See Figure 6.18 for the different behaviors on Nokia and UP.Browser types.) Select it and notice your description, and then click Back to return to the Welcome card.

TopMovies Welcome to Top-rated Movies!

Welcome to Top-rated Movies! Options

OK

About

Service options About OK Empty cache

Select

Top-rated Movies is a teaching tool developed for new MobileDev users.

Back

TopMovies Top-rated Movies is a teaching tool developed for new MobileDev users.

Options

FIGURE 6.18 Options links are useful for online help and About boxes.

Back Back


123

Run Application

6

Now run the whole application that you’ve made so far to see all the features in action: the browser variables, the different types of links, the input field, and the select list. To run the application, select the Welcome deck, right-click, and choose Run Deck. Figure 6.19 shows the whole sequence running on a Nokia browser; Figure 6.20 shows the same application on an UP.Browser.

WIZARDS AND MARKUP

The Limits of Markup You’ve now come to the limits of what you can do in this application using markup code alone. Although you probably didn’t notice it much, you were also using some default server script code; for example, the links you created actually called a Perl file (with a .PL extension), which in turn called a WML file of the same name. But so far you haven’t needed more than the default server script code that MobileDev generates to call WML files. (If you’re interested in seeing this default code, right-click a deck and choose View Script.) However, you’ll now want more than what browser variables, input fields, and select lists will give you; you’ll want to take the user’s choice of movie genre and use it to retrieve data from a database and then return the data to the phone browser. To do this, you need to enhance the default server script and access a database. It’s the combination of markup code and server script that makes a truly dynamic application. Read on to Chapter 7, “Script Plus Markup—A Dynamic Application,” to see how it’s done.

124


1 A display card welcomes users to the application



An About card describes the application

Options Options

Service options About OK Empty cache

Back

Service options provides links

Select

Back

TopMovies What is abc […] What is

Options

a

TopMovies b c What is your name? d [Leslie] e Leslie Back f

2 An input field prompts users to enter a name

Clear

OK Options

Back

Service options Next Back Empty cache

Select

3 A select list asks users to choose a movie genre

Back

TopMovies Hi, Leslies GenreVar [Action] Action TopMovies Comedy Hi, Leslie, choose a genre: Fantasy [Fantasy] Sci-Fidy Options […] Back Select

Back Options

FIGURE 6.19 The story so far. . .

Back


125



Welcome to Top-rated Movies! Top-rated Movies is a teaching tool developed for new MobileDev users. OK

An About card describes the application

About Back

What is your name? Fred_

Next



ALPHA

Hi, Fred, choose a genre: 1 Action 2 Comedy 3 Fantasy 4 Sci-fi OK

FIGURE 6.20 The UP.Browser runs the application slightly differently.

Summary In this chapter you used MobileDev’s wizards to generate the first part of a WAP application, learning more about WML markup code and the differences between browser types. In the end, however, you discovered that markup alone does not make the dynamic application you want, and so you’ll be turning to server script to add processing power and database access to your application.

126


Q&A Q. What is TTL and where can I modify it for a deck? A. TTL means “time to live,” or the length of time the browser should cache the deck. You can modify this value in the Advanced Options dialog box when the deck is created. To modify an existing deck, use the Document Editor to modify the value of the max-age option. Q. How many cards can I add to a deck? A. The answer depends on your network transmission limitations, but generally don’t add more than a few. Q. How do I remove an undefined card? A. Click the source card containing the undefined link (not the UndefinedLink card itself) and use the Link Wizard with the Resolve an Undefined Link option. If you aren’t planning to link the deck to anything, right-click the UndefinedLink card and select Delete. Q. What is the default name of the first card created by a wizard? A. It depends on the wizard. For the Display and Menu Deck Wizards, the first card will have the same name as the deck. For the Input Deck Wizard, the first card will have the name of the first variable defined.

Script Plus Markup—A Dynamic Application

IN THIS CHAPTER • Why Use Script? • Script Plus Markup • Server Languages • Required Code • Substitution Variables • Parameters • Database Access • Try It Yourself • ASP VBScript • WMLScript • Q&A

CHAPTER

7

128


You’re now familiar with the MobileDev wizards and can use them to generate the WML code that makes up the presentation layer of an application. However, as you’ve seen while building your TopMovies application, WML on its own is not enough. To access databases and perform other dynamic tasks, you need a server-side programming language. Here you’ll take a look at server-side script code and learn why it is required by dynamic applications. The Perl, VBScript and WMLScript programming languages are discussed. In the course of this chapter, you’ll also learn the answers to the following questions: • What is script? Are there different kinds of script? • What are substitution variables and how do they differ from parameters? • How do I access my database? • How do I use WMLScript with my application?

Why Use Script? Like most Web applications, WAP applications require both markup and server script code to create a dynamic application that accesses databases and manipulates values and logic. The need for script code is primarily a result of the limitations present in markup languages as they are defined today: they do not have the functionality required to perform calculations and business logic. Why are markup languages so limited? Mainly because of the memory limitations of the phone browser and the transmission process. In short, script is used to • Access, retrieve, and store data in a database. • Provide processing logic, conditional code, and all the other stuff that powers an application.

Script Plus Markup Exactly how do these two sets of code work together to create an application? The script code interprets the markup template file (the WML generated by the wizards enhanced with substitution variables) to produce standard WML for display. This is how it works: • An enhanced WML file called a template file is created using MobileDev wizards. This file contains variables that get their value from the server. • A server script file, created by the wizards but enhanced by the developer (that’s you), replaces the variables in the template file with real values taken from the script or from a database.

Script Plus Markup—A Dynamic Application CHAPTER 7

129

The interaction of these two files creates a standard WML file, which is displayed on the phone browser. Figure 7.1 shows the components and how they interact. Perl script file

Standard WML files 1

Database access, processing logic, substitution variables, interpretation of WML template

Enhanced WML code and server script act together…

Standard WML file, with substitution variables replaced with real values

7

Database

WML code enhanced with substitution variables that take their value from the server

3

2 … to produce standard WML code at run time

End Result Application is displayed on the phone browser.

… which is then displayed in a phone browser

FIGURE 7.1 Markup and server script interact at runtime to create a dynamic application.

Server Languages MobileDev supports the Perl and ASP VBScript server languages. MobileDev also supports WMLScript, a client script technology that is discussed in detail later in this chapter. For more information about application server technologies and how to select the one that is right for you, see Chapter 4, “Before Building.” MobileDev wizards automatically generate some basic server script for every deck you create. It is up to you as the developer to add the server code required by your application using the MobileDev Script Editor.

SCRIPT PLUS MARKUP

WML template file

130


You can do many things with server script—usually in several ways—but because this is not a book on Perl or ASP VBScript, this chapter shows you the three basic things you’ll want to use server script for in WAP applications: • Substitution variables—To display values from the server on the phone. • Parameters—To send values from the phone to the server. • Database access—To read, select, and update values. You’ll learn about each of these functions in detail in the pages that follow. Although MobileDev supports both Perl and VBScript, Perl is used as the server script in the examples that follow. However, if you’d rather use VBScript, you’ll find the equivalent code included toward the end of the chapter. Before you continue, take a quick look at Perl and ASP VBScript.

Perl Perl (Practical Extraction and Report Language) is a popular open-source scripting language that has enjoyed tremendous success in the programming community. Perl and its Windows version, called ActivePerl, is free—and some say easy to learn. If you plan to use Perl as your application server, you’re in luck because MobileDev installs ActivePerl by default. Although this chapter is not intended as a Perl tutorial, some resource suggestions are included and the examples are coded in Perl.

Resources Many Web sites are devoted to Perl, including the following: •

www.tpj.com—The

•

www.cpan.org—The

•

www.activestate.com—Perl

•

www.perl.com—Perl

•

cgi-lib.berkeley.edu—CGI

Perl Journal Comprehensive Perl Archive Network for Windows

for Unix (see the FAQ) scripting in Perl

ASP VBScript ASP (Active Server Pages) is a specification for dynamically created Web pages with .ASP extensions that use scripting—usually VBScript or JScript code. When a phone browser requests an ASP page, the Web server generates a page with WML or HDML code and sends it back to the browser for rendering. VBScript is short for Visual Basic, Scripting Edition—a scripting language developed by Microsoft. VBScript is based on the hugely popular Visual Basic programming language.


131

ASP is available with Microsoft’s Web server, Internet Information Services (IIS). IIS is not typically installed with the Windows operating system. For more information on installing IIS, ask your system administrator or visit the Microsoft Web site. After you’ve installed IIS, you will be able to create ASP pages that contain VBScript (and JScript as well, but that’s another story).

Resources You can find many Web sites devoted to VBScript (and its use in ASP). The place to start is •

msdn.microsoft.com/scripting/—Download

the VBScript documentation if you do

not already have it.

Required Code Processing directives, MIME types, and template processing code are required and are automatically generated by the MobileDev wizards in every script file. If you’re going to code your script files without the help of the wizards, you’ll need to add these lines of code yourself. Our recommendation: let the MobileDev wizards do the work for you.

Processing Directive A processing directive—called a shebang in Perl—must be specified at the top of each Perl file. The shebang contains the location of the Perl executable on the machine running the Web server. MobileDev automatically generates the following shebang: #!/usr/local/bin/perl

MIME Type MIME is the acronym for Multipurpose Internet Mail Extensions. The MIME content type is used by the Web to specify the type of data contained in a file. For example, the following is the code required to specify the content type for a WML file using Perl: print “Content-type: text/vnd.wap.wml\n\n”;

The Perl print function sends the contents of the string to the currently open file handle.

Template Processing Code An important function of the script code is to read and interpret the WML template file to generate standard WML that can be displayed on a browser. In Perl, this functionality is accomplished using the Template Toolkit, a Perl module that is automatically installed along with MobileDev.

SCRIPT PLUS MARKUP

• The documentation that comes with the Microsoft IIS Web server.

7

132


If you take a look at a Perl file for a deck created in MobileDev (right-click and choose View Script), you’ll see two sections: #Setup template environment and #Template processing code. These sections contain the code necessary to interpret and process a WML template file. You can ignore most of this code, but don’t delete it. The only part of this code that you’ll be using is the my $Substitution line, in which you’ll be defining server variables to return to the browser; more on that next.

Automatically Generated Perl Code The following is an example of the Perl code that was automatically generated by the MobileDev Deck Wizard for the Welcome deck. #!/usr/local/bin/perl # Document generated by MobileDev 2.0 # for (CPAN) Template-Toolkit 2.00 # on Wednesday, Jun 20, 2001 at 11:20:20 print “Content-type: text/vnd.wap.wml\n\n”; #Setup template environment... use Template; my $Pos = rindex($0, “\\”); if ($Pos == -1) { $Pos = rindex($0, “/”); } if ($Pos == -1) { my $Path = “” } else { my $Path = substr($0,0,$Pos); my $Tmpl = Template->new(INCLUDE_PATH => $Path, RELATIVE => 1); #Template processing code... my $Substitution = { }; $Tmpl->process(‘Welcome1.tmpl’, $Substitution);

Substitution Variables Now that you’ve seen the code that the wizards generate automatically to provide the basic functionality, take a look at the things you’ll be doing with server script. As previously mentioned, the first basic function of server script in a WAP application is to provide values for substitution variables. A substitution variable is a variable that is defined and given value in server script and then passed to the WML template file, where the combination creates a WML file that is displayed on the browser.


133

To use substitution variables, you need to code them in both the markup and server script: • In markup code, use the wizards and the @ symbol in front of a variable name; for example, @lunch, to create the substitution variable. MobileDev codes the appropriate substitution variable based on the application server. For Perl, [% GET lunch %] is coded in the WML template; for VBScript, is coded. • In server script, define and give a value to an identically named variable and then, for Perl only, add the variable to the my $Substitutions list. For example, in Perl: $lunch =”Extravaganza pizza and milk”; my $Substitution = { lunch => $lunch };

When working with Perl, MobileDev uses the Template Toolkit module as the basis of its template processing system. What this means is that any substitution variables that are to be passed to the WML template must be included in the my $Substitution list. You learn how to do this in the following example.

Hard-Coded Substitution Variables First, you’ll add a substitution variable with a value that is hard-coded in the server script. You’ll include this variable in a display deck and card called Info that gives users some help on using the application. Instead of entering the help as the display code, you’ll specify a substitution variable named desc. Follow these steps: 1. Double-click the Application Map and then double-click Display Deck Wizard to launch the wizard. 2. In the Definitions page of the wizard, enter the following, as shown in Figure 7.2: • Deck Name: Info • Display Text: @desc(@desc is a substitution variable that will be resolved using server script) 3. Click Next, enable the Back key, and then click Finish. Now you can link this new deck to GenreVar so that users can press Help while they’re choosing a movie category: 4. Draw a link between GenreVar and Info, launching the Link Wizard. 5. In the Link Wizard, enter the options shown next (and in Figure 7.3) and click Next. • Type of Link: Define an Action Key • Key Type: Options • Key Caption: Help

SCRIPT PLUS MARKUP

My $Substitution

7

134


FIGURE 7.2 The Display Text is a server variable named desc.

6. The Parameters Definition page prompts you to pass the value of the user’s movie category to the Info deck. You don’t need this parameter for the Info deck, so you can either ignore it or click Delete Var to remove it. Click Finish to create the link.

FIGURE 7.3 This action link is tied to the Options task.

Markup Code Look at the WML code that MobileDev generated by opening the Document Editor for the Info deck. Notice the [% GET desc %] in the place where you would expect to find the display text. This is the code that will be substituted with a value by the application server script at runtime.


135

<do type=”prev”><prev/>
[% GET desc %]

Script Code Look at the Perl code that MobileDev generated by looking at the Info deck in the Script Editor. Notice that a variable named ‘desc’ has been added to the list of substitutions:

However, MobileDev does not automatically include the value of this variable in the Perl code; that’s up to you. Follow these steps: 1. Add a line just above the #Template example:

processing code

to give the variable a value; for

$desc =”Select a genre from the list. You will then be presented with the top-rated movies for that genre.”;

2. And change the my

$Substitution

line as follows:

my $Substitution = { ‘desc’ => $desc, };

NOTE In case you don’t feel like doing the typing yourself, we’ve prepared the Perl script code that you’ll need for this and the following examples. Look on the CD for Info_pl.txt and copy the contents of this file into the Script Editor for the Info deck, replacing all the existing code.

After you’ve added the code, your file will contain the following lines: $desc =”Select a genre from the list. You will then be presented with the top-rated movies for that genre.”; #Template processing code... my $Substitution = { ‘desc’ => $desc }; $Tmpl->process(‘Info.tmpl’, $Substitution);

7 SCRIPT PLUS MARKUP

my $Substitution = { ‘desc’ => ‘UndefinedValue’, };

136


To see the new Help card, run the application and select the Help option when it is offered. See Figure 7.4 for an idea of what is going on behind the scenes at runtime. Info.PL

Info.TMPL <wml>

$desc = "Select a genre from the list ..."; my $Substitution = { 'desc' = $desc. };

1 Perl code gives value to ‘desc’ then interprets the WML template file.

$Tmpl->process('Info.tmpl'. $Substitution;

[% GET desc %]

Info.WML <wml>
Select a genre from the list ...

2 The substitution value is replaced with the value from the Perl file.

TopMovies Select a genre from the list…

3 The phone browser displays the result.

Options

FIGURE 7.4 Substitution variables get their value from server script.

Parameters Parameters are another server-script feature that you’ll probably want to use all the time. Although substitution variables are a way of passing data from the application server to the phone browser, you also need a way to pass data from the phone browser to the server. For this you need parameters and a passing method.


137

In this application, you want to pass the movie genre selected by the user to the server script, where server script code will use it to extract a list of movie titles from the database and display the list on the phone.

Create ShowMovies Deck First you’ll create a deck called ShowMovies that lists the movie titles extracted from the database. For this example, you’ll use the Menu Deck Wizard because you want the list of returned movies to be selectable. Follow these steps: 1. Double-click the Application Map and select the Menu Deck Wizard. The Menu deck is designed for creating menus intended for user navigation. • Deck Name: ShowMovies • Menu Style: Variable Number of Items. Your menu will be based on an unspecified number of items picked from a database.

FIGURE 7.5 The Menu Deck wizard specializes in creating lists of selectable items.

3. Click Next, enable the Back key, and click Next. 4. The Dynamic Substitutions page, as shown in Figure 7.6, prompts you for information about the menu list that will be built in the ShowMovies deck. What you are doing here is preparing the way for the last deck in the application—the deck that displays the plot of a chosen movie.

SCRIPT PLUS MARKUP

2. Fill in the first page of the wizard as follows (and as shown in Figure 7.5):

7

138


Change the Variable Name to MovieVar. The MovieVar variable will contain the user’s choice of movie title that will be passed as a parameter to the deck that displays the plot. The three names listed in the Substitution Variable Names box are variables that are used in the server script to create a collection of paired sets of values and text used to build the menu dynamically. These variables are always substitution variables, so they don’t have to be identified with an “@” prefix. 5. Accept the defaults and click Finish.

FIGURE 7.6 Choices, Text, and Value are substitution variables that will be given a value in the server script and used to create the next deck in the application.

Your new deck, complete with three cards, is displayed in the Application Map, as you can see in Figure 7.7.

FIGURE 7.7 Three new cards have been created.


139

What’s “doaction?” You’ll notice a card named ShowMovies_doaction, which has been automatically generated by the wizard. This card is part of the strategy that lets you display the movie titles selected from the database as anchor links and at the same time to transfer the user’s choice of movie title to the browser variable, MovieVar. Take a look at the WML code for ShowMovies in the Document Editor to see what it does. The following is an extract:

tag and its name option to display choices and store the user’s choice in a browser variable. In this deck you’ll use a list of links instead to display the list of movie titles. Anchor links are a straightforward way of displaying a list of choices, especially on Nokia browsers, because they don’t require the Service Options screen. The drawback of anchor links is that you cannot define a browser variable as part of the element, as you can in the <select> and elements. However, you can use a <setvar> statement inside the anchor to define a browser variable, give it a value, and then go to another card—the ShowMovies_doaction card—to perform the link to the next deck. If you look at the code for ShowMovies_doaction, you can see that the link to the next deck is undefined at the moment. You’ll define it when you create the link to the ShowPlot deck that displays the plot of the user’s movie. Then the ShowMovies_doaction card will contain the following link that includes the user’s movie choice in the MovieVar variable:


[% FOREACH Choice=Choices %] [% GET Choice.Text %] <setvar name=”MovieVar” value=”[% GET Choice.Value %]”/> [% END %]

140


Substitution Variables for ShowMovies While you’re in the Document Editor for ShowMovies, notice the three sets of substitution variables (the code between [% and %]) that have been generated. These values will be resolved in the application server script.

Pass Parameter in a Link To get to the ShowMovies card, you need to pass the value of the movie genre variable to the server script. As you may recall, you’ve already stored the movie genre in a browser variable, GenreVar, and can access its value as $(GenreVar). To pass this browser variable to the server is as easy as drawing a link. Follow these steps: 1. Click the GenreVar card (not the deck). 2. Drag the mouse cursor to the ShowMovies deck to launch the Link Wizard. 3. As you can see in Figure 7.8, the Link Wizard knows that you want to resolve the undefined link. Click Next. 4. In Parameter Definition, you are asked which variables you want to pass. In this case, you want to pass the movie genre chosen by the user. This value is in the browser variable, GenreVar, and its value is available as $GenreVar. MobileDev deduced that you plan to use the value as a parameter and presents it as the default. 5. Click Finish. 6. Click Yes when prompted to delete the undefined link and the UndefinedLink card.

FIGURE 7.8 The wizard prompts you to resolve the undefined link.


141

The Application Map shows the new link to ShowMovies that replaces the undefined link and card (see Figure 7.9).

7

The link to ShowMovies replaces the undefined link.

WML Code for GetGenre To see how MobileDev generated the link, look in the Document Editor for the GetGenre deck. The following code was generated: href=”/cgi-bin/TopMovies/ShowMovies.pl?GenreVar=$(GenreVar)”

As you can see, the user’s choice is passed as a parameter to the ShowMovies.pl script file using a URL. Figure 7.10 shows how this happens at runtime.

Receive Parameter in Server Script The final step in the parameters procedure is receiving the parameter in the server script. You’ll specify the necessary Perl code in the Script Editor. Follow these steps: 1. Open the Script Editor for ShowMovies, the server file that will receive the GenreVar parameter. 2. Open the ShowMovies_pl.txt file that you’ll find on the CD and cut and paste the contents of the file into the Script Editor, replacing the existing code. 3. Take a look at the code that receives the GenreVar parameter: use CGI; $query = CGI::new(); $Genre = $query->param(“GenreVar”);

SCRIPT PLUS MARKUP

FIGURE 7.9

142


The Code Explained If you’re familiar with Perl, you can see what this code does; a summary is shown next: •

•

use CGI;—Loads

the Common Gateway Interface (CGI) module, CGI.pm. This module, which comes with Perl and ActivePerl, facilitates the transfer of information between your Web server and the phone browser. $query = CGI::new();—Defines

a variable named $query containing a new CGI

object. •

$Genre = $query->param(“GenreVar”);—Defines

a parameter named $Genre and assigns it the value of GenreVar—the user’s movie category—passed from the phone browser.

Figure 7.10 shows what happens at runtime. GetGenre.WML <wml> <do>

1 A user chooses “Western” as her favorite movie genre

TopMovies Hi, Leslie, choose a genre: [Western]

Options

ShowMovies.PL 2 ... use CGI; $query = CGI::new(); $Genre = $query->param("GenreVar"); ...

The tag passes the browser variable and its value to the Perl file. …href=”ShowMovies.pl?GenreVar=“Western”…

3 ShowMovies.pl receives the variable name and value as a parameter

FIGURE 7.10 At runtime, the user’s movie category is passed to the Perl file.


143

Database Access The third basic function of server script is accessing a database, either to read records to return to the phone browser or to update the database with values input from the phone. In the application you’re building, you want to take the movie genre chosen by the user (and passed via a browser variable and then a server parameter) to select a set of movie titles from a database.

To return to the details of this example, database access is done via Win32::ODBC methods, such as Sql, FetchRow, and DataHash. This chapter shows you the code that makes it all work, but you should see your ActivePerl documentation if you’d like more information.

Code to Select Records If you copied the contents of ShowMovies_pl.txt into your Script Editor, you already have the code you need. (If you didn’t do that step, you can do it now; see the section “Receive Parameter in Server Script.”) Take a look at the Perl code that opens the Movies database and selects records: 1. Open the Script Editor for the ShowMovies deck. 2. Look at the following lines of code: #Open the Movies database and declare variables use Win32::ODBC; my $MovieList; $db = new Win32::ODBC(“Movies”); my @Choices = (); #SQL code to access the information in the database $SqlStatement = “SELECT [TITLE] FROM [TITLES] WHERE [GENRE] = ‘$Genre’”; $db->Sql($SqlStatement); while($db->FetchRow()) { %Data = $db->DataHash(); push(@Choices, { Value => $Data{‘TITLE’}, Text => $Data{‘TITLE’} }); } $db->Close();

As you can see, this code opens the Movies database and uses $Genre to select titles from the Titles table, and then loads the resultset into an array called Choices.


The following example accesses a Microsoft Access database called Movies that has been defined as a system DSN (Data Source Name), using the ODBC Win32 module, which ships with ActivePerl. You could just as easily have accessed the database using Microsoft’s ADO (ActiveX Data Objects) technology. It’s up to you to pick the access mechanism that best suits your situation (for example, your operating system, Web server, database type, and driver will affect this decision).

144


Code to Return Data to the Browser To return the data—the list of movie titles—to the browser, use substitution variables. Remember that when you created the ShowMovies deck, you specified a variable list of items and created three substitution variables to be used to construct the list of items. Follow these steps to look at the Perl code: 1. Make sure that the Script Editor is open for the ShowMovies deck. 2. Look at the my $Substitution line shown below. This statement will assign the contents of the Choices array to a substitution variable (also named Choices) that will in turn display the menu items on the phone browser: my $Substitution = { Choices => \@Choices, };

Figure 7.11 shows how this works. ShowMovies.PL

ShowMovies.TMPL

$SqlStatement = "SELECT [TITLE] FROM [TITLES] WHERE [GENRE] = $'Genre'";

1

my $Substitution = { Choices => \@Choices, }; $Tmpl -> process('ShowMovies.tmpl', $Substitution);

Movies database

ShowMovies.WML

TITLES table GENRE Sci-Fi Western Western Western

Perl code selects a list of movie titles from the database, then runs the WML template file.

[% FOREACH ... %] [% GET choice.Text %] <setvar name="MovieVar"...>

TITLE The Matrix The Good, the Bad… Once Upon a Time… The Searchers

The Good, the Bad... <setvar...> Once Upon a Time... <setVar...>

3 The phone browser displays the result.

2 The substitution values are replaced with the value from the Perl file.

TopMovies The Good, the Bad and the Ugly Once Upon a Time in the West The Searchers

Options

FIGURE 7.11 At runtime, records are selected from the database and returned to the phone.

Back


145

Try It Yourself Now it’s your chance to try all this stuff on your own. So far, you’ve got a list of movie titles displayed on the phone; this list is also a menu of anchor links that users can choose from. Your task is to take the final step in this application and show the plot of the movie the user has chosen. In summary, these are the steps: 1. Create a display deck called ShowPlot with @plot as the display text, and click Next. 2. Enable the Back key and click Finish. 3. Link the ShowMovies_doaction card to the newly created ShowPlot deck. In the Link Wizard: • Keep the MovieVar variable. • Click Yes to delete the undefined link reference. 4. Open ShowPlot in the Script Editor and copy the code in the ShowPlot_pl.txt file into the Editor (this text file is with the others on the CD). Like the code for ShowMovies, this code receives the MovieVar variable from the browser, retrieves the plot information from the database, and displays the results using substitution variables. 5. Save the project, run the application, and look at the plots for all the movies you like. Figure 7.12 shows the Application Map at the end of the application, and Figures 7.13 and 7.14 give you an idea of the entire application at runtime on the Nokia and UP browsers.

FIGURE 7.12 This is your Application Map of the completed application.

SCRIPT PLUS MARKUP

• Select the option to resolve the undefined link.

7

146





Options

Options Via

Back

Service options

TopMovies What is abc […] What is

Options

a

TopMovies b c What is your name? d [Leslie] e Leslie Back f


Clear

OK Options Via Service

Back

options

TopMovies Hi, Leslies GenreVar [Action] Action TopMovies Comedy Hi, Leslie, choose a genre: Fantasy [Fantasy] Sci-Fidy Options […] Back


Select

Back Options

Via Service

TopMovies Select a genre from the list. You will then be presented with the top-rated movies for that genre. Options

Back

options

4 Anchor links offer a choice of movie

TopMovies Star Wars Princess Mononoke Toy Story 2 My Neighbor Totoro Select

Back

5 The plot of the chose movie is displayed

Back

TopMovies Luke Skywalker leaves his home planet, teams up with other rebels, and tries to save Princess Leia from the evil clutches of Options

FIGURE 7.13 TopMovies runs in a Nokia browser.

Back


147


Welcome to Top-rated Movies! Top-rated Movies is a teaching tool developed for new MobileDev users. OK

About

7

Back

Next

SCRIPT PLUS MARKUP

2

What is your name? Fred_

An input field prompts users to enter a name

ALPHA


Top-rated Movies is a teaching tool developed for new MobileDev users.

Hi, Fred, choose a genre: 1 Action 2 Comedy 3 Fantasy 4 Sci-fi OK

Help

1 2 3 4 5

4

Back

Life is Beautiful Almost Famous Toy Story North by Northwest Wallace and Gromit

Anchor links offer a choice of movie

OK

5 The plot of the chosen movie is displayed

An advertising executive is mistaken for a spy and is pursued across the country while he looks for OK

FIGURE 7.14 TopMovies runs equally well in an UP.Browser.

148


ASP VBScript We chose Perl as the server script programming language for the examples in this chapter because we had to choose one—and we like Perl. We like that it’s open source and that it’s based on Unix, one of our favorite operating systems. But we like VBScript just as much, and in fact, we’ve developed all the examples in VBScript as well as in Perl, so we’re including the code you’ll need to do our examples should you choose to do so. Read on for the details of how and when to enter the code, or go get the files we’ve prepared containing the full text of the ASP code you’ll need (look for Info_asp.txt, ShowMovies_asp.txt and ShowPlot_asp.txt on the CD).

An ASP Template Project To get the most out of these examples, you should make a new MobileDev project so that you can create the application along with this section. Follow these steps: 1. Create a new project called ASPMovies using ASP Template as the application server technology. 2. Re-create the markup language for the TopMovies application using the wizards, starting from the previous chapter (where the Welcome deck was added). 3. Replace the default ASP script code generated by the wizards for the Info, ShowMovies, and ShowPlot decks with the code provided. To learn more about the ASP VBScript code, read on.

Processing Directive The ASP processing directive contains the information required by ASP to process the page. If you need to edit the directive, remember that it must appear as the first line of the file and that there must be a space after the at (@) sign. The standard directive is

MIME Type The Response object’s ContentType property specifies the HTTP content type for the response. Response is what is referred to as a built-in ASP object. For more information on built-in objects, see the IIS documentation. Here is the code:


149

Calling the Markup Template The markup template is called using a server-side include directive. The directive inserts the contents of another file into a file before the Web server processes it. To do this in ASP, MobileDev uses the #include directive. For example, the following calls the template file associated to the ShowPlot ASP file:
#include file=”ShowPlot.tmpl” —>

Substitution Variables

And the following is added to the server script:

Info To define the substitution variable for the Info deck, you should change the default value generated for desc from UndefinedValue. The final code looks like this:

ShowMovies To define the substitution variables for the ShowMovies deck, you should add the following script code just above the #include directive. The code will make sense only after you have added the database access code, detailed next.

ShowPlot To define the substitution variables for the ShowPlot deck, add the following script code just above the #include directive. Again, this code will make sense only after you have added the database access code, detailed next.

Retrieving Parameters Both the ShowMovies and ShowPlot decks display information that depends on a choice made by a user. To add the code that retrieves a browser variable that is passed as a parameter, add the following after the Response.ContentType line: • For ShowMovies, add

• For ShowPlot, add

Database Access Again, both the ShowMovies and the ShowPlot decks retrieve information from a database based on a selection made by the user. To access the database, add the following code: • For ShowMovies, add

You may need to adjust the Data Source line if your Movies database (Movies.mdb) is in another location. • For ShowPlot, add

SQLQuery = “SELECT DESCRIPTION FROM TITLES WHERE TITLE = ‘“& Movie &”’ “ Set rsTitleList2 = objConnection.Execute(SQLQuery) %>

The Code Explained The previous database access examples use an ADO (ActiveX Data Objects) database script to access an OLE DB-compliant database. OLE DB is a system-level programming interface that allows you to access a variety of data sources, including databases. In effect, OLE DB provides easy access to databases using scripting languages, such as VBScript. ADO also includes a specific OLE DB driver that allows access to Open Database Connectivity (ODBC) drivers. The following is an example of the code that identifies and opens a connection to the database: ‘Defines the database location strSource = “Provider=Microsoft.Jet.OLEDB.4.0; Data Source=C:\Data\movies.mdb;Persist Security Info=False” ‘Creates an instance of the object Set objConnection = Server.CreateObject(“ADODB.Connection”) ‘Opens a connection to the database objConnection.Open strSource

To close the connection (always recommended), add the following code: objConnection.Close

For more information on database access, a good place to start is the Microsoft IIS Web server documentation.

WMLScript WMLScript is a scripting language that complements and enhances the standard browsing and presentation capabilities of WML. WMLScript was designed to overcome some of the


<meta http-equiv=”Cache-Control” content=”max-age=0”/> <do type=”accept” label=”Again”> <setvar name=”NumVar” value=”” /> <do type=”prev”><prev/>
$(NumVar) is not in the range 25 to 50


<wml> <meta http-equiv=”Cache-Control” content=”max-age=0”/> <do type=”prev”><prev/> <setvar name=”NumVar” value=””/>
<do type=”accept” label=”Valid”> Enter a whole number between 25 and 50

156


Create the Valid Deck To create the deck that is displayed for a valid entry: 1. Launch the Display Deck Wizard and create a new deck called Valid. 2. For the Display Text, type: $(NumVar) is in the range 25 to 50. Uncheck Show Advanced Options and Generated Code if enabled, and then click Finish. 3. Modify the automatically generated code so that it ends up looking like the following (cutting and pasting code from the Invalid deck will save you some typing): <wml> <meta http-equiv=”Cache-Control” content=”max-age=0”/> <do type=”accept” label=”Again”> <setvar name=”NumVar” value=”” /> <do type=”prev”><prev/>
$(NumVar) is in the range 25 to 50

Create the Validator WMLScript To create the WMLScript: 1. If not already displayed, activate the Application Browser view by clicking View, Application Browser. 2. In the Application Browser, right-click WMLScripts and select Add, WMLScript. The Add WMLScript dialog box appears. 3. Enter Validator as the name and click OK. 4. Double-click the Validator entry in the Application Browser to display the WMLScript Editor. 5. Add the following code (remember, you can cut and paste this code from the Validator_wmls.txt file included on the CD): extern function Validate(){ var validNum = WMLBrowser.getVar(“NumVar”); var validNumAsInt = Lang.parseInt(validNum); var max = 50; var min = 25;

Script Plus Markup—A Dynamic Application CHAPTER 7 if (validNumAsInt) { if ((validNumAsInt < min) || (validNumAsInt > max)) { WMLBrowser.go(“/cgi-bin/WMLS/invalid.pl”); } else { WMLBrowser.go(“/cgi-bin/WMLS/valid.pl”);}} else { Dialogs.alert(“The number “ + validNum + “is not a whole number”); WMLBrowser.setVar(“NumVar”, “”); WMLBrowser.go(“/cgi-bin/WMLS/first.pl”); } }

After creating the decks and the WMLScript, the application is ready to be run. Go ahead and run the application by selecting the first deck and sending it to the MobileDev—Yospace simulator. Because this is the first time you’ve run this application, you’ll be prompted to enable auto mirroring: answer Yes and check Auto Mirror Documents and Scripts in the Settings dialog box.

Summary In this chapter you learned how to customize the script code that MobileDev automatically generates to create a truly dynamic application. While completing your TopMovies application, you looked behind the scenes at the interaction between WML and Perl server code, covering basic features such as substitution variables, parameters, and database access. You also explored two other scripting languages—ASP VBScript and WMLScript—that can provide the same dynamism for your applications. In the next chapter, you’ll see how to configure the MobileDev defaults and look at some of the MobileDev features that are available only in the registered version, including Multideveloper mode, database browsing, and automatic project deployment.

Q&A Q. What wizard should I use to create a dynamic selection list? A. The Menu Deck Wizard, using Variable Number of Items as the menu style. Q. How do I turn the variable MaxInt into a substitution variable? A. By prefixing the @ symbol to the variable: @MaxInt. Q. Can substitution variables be used in titles?


Run the Application

157

158


A. Yes. The help topic “Wizards and Substitution Variables” gives the details. Q. What symbol is used to specify a substitution variable in a wizard? A. The @ symbol. Q. Do you have to specify a preprocessor directive? A. No, it is automatically generated for you by MobileDev. Q. How do I access a WMLScript file for editing? A. Right-click it in the Application Browser.

Getting the Most Out of MobileDev

IN THIS CHAPTER • Multideveloper Mode • Database Browser • Deploy Project • Default Settings • Containers • Q&A

CHAPTER

8

160


You now have a good understanding of how you can use MobileDev to build a dynamic WAP application. This chapter looks at some of MobileDev’s advanced features, such as multidevelopment and database viewing and deployment, and describes how to set MobileDev defaults and how to use containers. Along the way, you’ll also learn the answers to the following questions: • How can several developers work on the same MobileDev project? • How can I view the structure of a database from MobileDev? • How do I deploy a project to another machine? • How do I change project and application defaults? Please note that many of the features described in this chapter are based on the registered version of MobileDev. If you are using the trial version of MobileDev (the one included on the CD), you can upgrade to the registered version by purchasing MobileDev. For all the details, see the MobileDev Web site at mobiledev.speedware.com.

Multideveloper Mode When developing even a simple WAP application, you may have more than one developer working on the project, perhaps a Perl or ASP specialist and a WML expert. Working as a team is a good idea because it allows developers to work with the programming language they know best. Moreover, if you’re creating a complex WAP application, you may have several developers all working together. In cases like these, you should take advantage of MobileDev’s multideveloper features. In fact, MobileDev was designed from the ground up to be used in a multideveloper world. By default, MobileDev’s locking mechanism automatically avoids access conflicts. In addition, if you have Microsoft’s Visual SourceSafe installed and are familiar with its operation, you can opt to use MobileDev’s SourceSafe options, which seamlessly integrate Microsoft’s product into MobileDev. Whatever option you choose to start with, it is always possible to change in mid-development.

Locking and Refreshing Whether you choose MobileDev or SourceSafe, the same two basic features are provided: object locking and refreshing.

Is It Locked? When a deck, card, or link is selected in the Application Map or Application Browser, the deck is automatically locked. Other developers cannot modify the deck until it is released.

Getting the Most Out of MobileDev CHAPTER 8

161

A red check mark next to the name indicates that an object is locked. For example, in Figure 8.1, the Welcome deck is locked because a developer has its Code Editor open.

FIGURE 8.1 A deck doesn’t have to be selected to be locked.

When you are the only developer working on a project, you can release a lock on a deck by selecting another object outside the deck or by clicking a blank spot on the Application Map. To release the lock on an object that has been modified, save the project. (An asterisk (*) next to an object name indicates that it has been modified.) When several developers are working on a project (you’ll learn how to set this up on the following pages) you can’t unlock objects that other developers are using. You can view their contents; you just can’t modify them. When viewing locked objects in a multidevelopment environment, you should be aware, however, that the object you are looking at is probably already out of date.

To see the most current contents, use the Refresh Project option.

Refresh Project The Refresh Project option allows you to view the latest version of the current project. If you have modified any decks, you will be asked to save them before the command is carried out. Be careful—if you do not save your changes, they will be lost. This option is accessed by clicking File, Refresh Project from the MobileDev main menu.

MobileDev in Multideveloper Mode To share a MobileDev project among multiple developers using MobileDev’s locking mechanism, follow these steps: 1. Create the project on a machine located on a network. 2. Share the project directory at the operating-system level, giving others developers full permission to read and write to the directory. 3. Have each developer open the project directory through the network or through a mapped network drive.

GETTING THE MOST OUT OF MOBILEDEV

NOTE

8

162


Visual SourceSafe Microsoft Visual SourceSafe is a version control system that enables you to manage your individual and team projects. When you use SourceSafe, the files in your MobileDev project are saved to a database that is controlled and managed by SourceSafe. One great advantage of using SourceSafe is that it keeps a history of changes made to every file in its database. With the file history, you can recover the file as it existed at a certain point. To use SourceSafe, you must first install it on all the machines that will be using it. For details about SourceSafe and how to purchase and install it, we recommend that you consult your Microsoft supplier or go to Microsoft’s Web site at msdn.microsoft.com/ssafe. To create a MobileDev project that will be shared among developers using SourceSafe, you first enable SourceSafe, specify some defaults, and then create the project. Follow these steps: 1. Launch MobileDev but don’t open a project. (You need to enable SourceSafe before opening or creating a project.) 2. From the main menu, choose Tools, Settings, and then click the SourceSafe tab. 3. In the MobileDev Settings dialog box, as shown in Figure 8.2, check Enable SourceSafe. (If you don’t have SourceSafe installed on your computer, you’ll be advised of that fact in a message box and the fields will be disabled.) Specify the location of your SourceSafe database and the username and password that let you access it, and then click Apply. The information you specify here will be used as the defaults when you apply SourceSafe to a new or existing project. If you are unsure of your username or password, talk to the SourceSafe administrator.

FIGURE 8.2 The SourceSafe database is often on a central computer.


163

4. Create a new project in MobileDev. (We’ve named our project CameraLand.) After you click Create, you are prompted to place the project under SourceSafe control. Click Yes. 5. The SourceSafe Login dialog box appears, as shown in Figure 8.3, displaying the information that was specified in the SourceSafe tab. Click OK.

FIGURE 8.3 You can specify a login other than the default one if you want.

6. In the New SourceSafe Project dialog box, make sure the Project option is selected (see Figure 8.4) and specify a name for the SourceSafe project. The default name is the same as the MobileDev project name—in this case, CameraLand.

8 GETTING THE MOST OUT OF MOBILEDEV

FIGURE 8.4 The project’s SourceSafe name is usually the same as its MobileDev name.

7. Click Add Project. The Application Map is displayed.

What Just Happened? What just happened? A master version of the project was added to the SourceSafe database and a copy was made on your local machine. Anything you add to the project will be local only. To make a change to the master project, you’ll use the standard SourceSafe commands: Check Out, Check In, and Undo Check Out, all available from the MobileDev Project menu or from pop-up menus.

Getting a Copy After it is created, the project is available to the other developers. Remember, SourceSafe must be installed on their computers. How do they get a copy of the project? By enabling

164


SourceSafe on their computer and then opening the project from SourceSafe. Follow these steps: 1. Launch MobileDev, choose Tools, Settings, and click the SourceSafe tab. 2. Check the Enable SourceSafe option. 3. Specify the location of your SourceSafe database along with your username and password, and then click Apply. If you are unsure of your username or password, talk to the SourceSafe administrator. Make sure your username is unique among the developers who are working on the project. 4. Click File, Get Project from SourceSafe. The SourceSafe Login dialog box appears, as shown previously in Figure 8.3, displaying the information that was specified in the SourceSafe tab. 5. Click OK. The Open SourceSafe Project dialog box appears, as you can see in Figure 8.5.

FIGURE 8.5 You’re creating a copy of the project on your machine.

6. In the Location field, specify a directory on your local machine. In the Location in SourceSafe Database box, specify the project directory and click OK. A local copy of the project is copied to the local machine, and the Application Map displays the contents of the project. Note, however, that this is just a local copy of the master project, so you cannot edit the objects without first checking them out.

Check Out, Check In, and Undo To edit anything in the master project, you use the standard SourceSafe commands: Get Latest Version, Check Out, Check In, and Undo Check Out, all of which are available from the MobileDev Project menu or pop-up menus.


165

When a command is selected, the corresponding dialog box is displayed (Figure 8.6 shows them all): • Check Out—Locks a project object so that you can edit it; other developers won’t be able to edit this object until you check it back in. • Check In—Releases the lock on an object and makes a copy of the edited object in the SourceSafe database. • Undo Check Out—Cancels a check out and rolls back all the changes you made while you had it checked out.


FIGURE 8.6 The Check Out and Check In concepts are standard source-control terms; they remind me of library books.

The dialog boxes all have a similar functionality: they list the available objects in a tree view; you select the objects you want to work on and then click OK. When working with these dialog boxes, keep the following in mind: • You can select one or more items in the SourceSafe dialog boxes. • Only project objects that make sense for the current dialog box are displayed in the tree view in the SourceSafe dialog boxes. For example, only objects that you have checked out are presented in the Check In dialog box. • Any objects that are selected on the Application Map or the Application Browser SourceSafe are checked by default in the SourceSafe dialog box.

166


• If you don’t want to see these SourceSafe dialog boxes every time you perform a SourceSafe operation, check the option labeled Show This Dialog Only When the Shift Key Is Down. To redisplay the dialog box, hold down the Shift key when selecting the SourceSafe operation. • When you check in an object, MobileDev automatically saves your project (without asking for a confirmation) before performing the check in.

Switching from SourceSafe to MobileDev Typically, after you decide to use SourceSafe, you stick with SourceSafe. However, if for some reason you decide to use MobileDev’s file mechanism instead, the following steps describe how to disable SourceSafe: 1. Make sure you have the most current version of the objects you want to edit: click Project, Get Latest Version, and then select the objects. 2. Close the Project and then disable SourceSafe: Click Tools, Settings, and uncheck the SourceSafe option in the SourceSafe tab. 3. At the operating-system level (using the Windows Explorer, for example), delete all the Source files (files with a .SCC extension) located in your local copy of the project. 4. Again using the Explorer, remove the read-only file permission on all the project files, including those in the Documents and Scripts folders (select the files, right-click Properties, uncheck the Read-only attribute, and click Apply). The project may now be reopened and edited using MobileDev’s default project-sharing mechanism.

Switching from MobileDev to SourceSafe You can also change your mind in the other direction. Suppose you start developing your application using MobileDev’s default file-sharing mechanism, but later you decide that you want to switch to SourceSafe. Follow these steps to place your project under SourceSafe control: 1. Install SourceSafe on all the machines that will be accessing the project. 2. Make sure no one is accessing the project. 3. Close any open projects, and then enable SourceSafe in the Settings dialog box. 4. Open the existing project. 5. Click Yes when prompted to place the project under SourceSafe control. 6. In the SourceSafe Login dialog box, click OK. 7. In the New SourceSafe Project dialog box, specify a name and location for the SourceSafe project. 8. Click Add Project.


167

Database Browser The Database Browser is one of the MobileDev windows that was mentioned in Chapter 2, “WAP Design Tools.” Like the multidevelopment feature, the Database Browser is available only in the registered version of MobileDev. In brief, the Database Browser lets you view the structure of a database and its components. It is a handy feature that you can use to check out the structure of a database or the exact names of its tables, columns, and views. From the Database Browser, you can copy the names of tables, columns, and views and paste them directly into a MobileDev editor, saving you a bit of typing and—more importantly—ensuring that your data objects are correctly spelled. However, you don’t need to use the Database Browser to access data in your application; that’s accomplished by coding the Perl, ASP, or other server script code that opens and accesses a database. In this book, we’ve developed several applications without using the Database Browser. In effect, the Database Browser is an alternative route to a database, on a read-only basis, provided for your convenience.

Loading a Database into the Browser When you first display the Database Browser (choose View, Database Browser), the window is empty, even though your application may be linked to a database. Before you can view objects in the Database Browser, you need to open, or load, a database. Follow these steps to load the Movies database into the browser: 1. Choose Tools, Load Data Source, or right-click the Databases entry in the browser, as shown in Figure 8.7. 2. In the Load a Data Source dialog box in Figure 8.8, enter a name, such as Movies Database, for the database you’re about to load. This name will be the database’s name within the Database Browser; it doesn’t have to be the physical name of the base. By default, MobileDev suggests an unimaginative name like Base1 or Base2. 3. Click Data Link Properties to define a data link, or access method, for the database. A data link is connection information saved in a Universal Data Link (UDL) file. The next time you access this database in a Database Browser, you’ll be able to use the same data link by selecting it from the Existing Data Link box.


The Database Browser uses ADO (ActiveX Data Objects) technology to access a data source. ADO is Microsoft’s strategic, high-level interface to all kinds of data. For more information on this hot new access technology, take a look at the Microsoft’s Web site, in particular www.microsoft.com/data/ado. MobileDev uses the ADO version packaged with MDAC (Microsoft Data Access Component) version 2.5.

168


FIGURE 8.7 First you have to load a database into the Database Browser.

FIGURE 8.8 The access method for a database is called a Data Link.

4. When you click Data Link Properties, the Data Link Properties dialog box is displayed, with the Connection tab shown, as you can see in Figure 8.9. The information displayed in the Connections tab varies depending on the provider selected in the Provider tab.

FIGURE 8.9 MobileDev uses Microsoft’s standard Data Link Properties dialog box.


169

5. To load this database, click the Provider tab and select Microsoft Jet 4.0 OLE DB Provider, as shown in Figure 8.10. This driver was installed with ADO and is the easiest way to access an Access database.

FIGURE 8.10 6. Click the Next button or return to the Connection tab and use the Browse button to locate the Movies.mdb file. (You’ll find it on the CD.) Leave Blank Password checked. Always check Allow Saving Password if your data source supports user security; otherwise, the Database Browser won’t be able to access your database (see Figure 8.11).

FIGURE 8.11 Specify the database location and access information.


Select the right provider for MS Access.

8

170


7. Click OK. You’ll be prompted to save the data link information; you should do this so you can reuse it later. In Save Data Link, as shown in Figure 8.12, save the data link file (it has a .UDL extension) with your project files. 8. Back in Load a Data Source, click OK to finish the loading process.

FIGURE 8.12 Save your data link file (.UDL) to reuse it.

Now that you’ve loaded the database, its structure and components can be seen in the Database Browser. Double-click the tree view to expand it and notice in Figure 8.13 that the window on the right displays the details of each component.

FIGURE 8.13 Column information is shown in the right window.

The following is a description of the information shown for each column: • Name—The name of the column. • Type—The column’s data type. • Precision—If the column’s data type is numeric, the maximum number of digits before the decimal point. • Scale—The number of digits to the right of the decimal point. • Maximum Length—The maximum length of a value in the column. • Null—Whether the column can contain null values, Yes or No. • Description—A description of the column data type.


171

Using the Data Information One of the Database Browser’s main functions is to enable you to paste column information into a MobileDev editor. To use this feature, right-click a column and choose Copy or Copy As. When you choose Copy, you’ll copy just the column name, but if you choose Copy As, you’ll also include the table and/or base name, as you can see in Figure 8.14. The Copy As feature is useful if you want to fully qualify your column names in the application code.

FIGURE 8.14 You can fully qualify your column names.

Deploy Project When building and testing a WAP application on a local machine, MobileDev’s Auto Mirror feature takes care of deploying project files to their correct locations under the Web server. However, when it comes to deploying to a production machine, you’ll need a file transfer utility to do the job. Fortunately, MobileDev has one built in—in the registered version, at any rate.

The Deploy Project Dialog Box The File, Deploy Project command deploys the current MobileDev project to another location or machine. When you choose this item, the Deploy Project dialog box appears, as shown in Figure 8.15. You fill in the Deploy Project dialog box in three stages: first connect, then select the files to deploy, and finally transfer the files.

Connect to the Destination Computer Fill in the fields at the top of the Deploy Project dialog box to specify where you want to transfer the application files. Click Connect when you’re done:


As with most MobileDev features, you can also activate this function from the main menu (Edit, Copy or Copy As) or with keyboard shortcuts (Ctrl+C, Ctrl+F1 or Ctrl+F2).

172


FIGURE 8.15 The Deploy Project dialog box copies your application to another computer.

• FTP—Use FTP (File Transfer Protocol) to transfer the files. • HTTP—Use HTTP (Hypertext Transfer Protocol) to transfer the files. The destination computer (named in the Server field just below) must have a Web server running and be configured to accept files. • Server—The domain name or IP address of the destination computer where the files will be transferred. For example, dblog6.speedware.com, 190.999.763.988. • User—A valid username on the server machine (FTP only). • Password—A valid password for the user on the server machine (FTP only). • Proxy—The proxy domain name or IP address of a Web server protected by a proxy (HTTP only). • Connection Timeout—The maximum time allowed for establishing a connection with the server. Remember that a busy server may not answer on the first try. The default is 5 seconds. A value of 0 means that there is no timeout. • Deployment Directory—A directory on the server into which the files will be transferred. This directory must exist before you transfer the files. If you are using HTTP, the Deployment Directory is a virtual directory (or an alias) specified in your Web server configuration.

Select the Files to Transfer After you’re connected to the destination machine, fill in the Client portion of the dialog box to select the files you want to transfer. As you look through the tree structure of your current


173

computer, the files in each directory are displayed in the box below it. Use the following buttons as shortcuts: • Go to Document Directory—Displays the files in the document directory for the current project. This directory contains the static pages (.WML or .HDML files), which should be deployed to a Web server’s document directory (for example, the htdocs directory). • Go to Script Directory—Displays the scripts directory. This directory contains the dynamic documents (.ASP, .PL, .TMPL files), which should be deployed to a Web server’s scripts directory (for example, the cgi-bin or cgi-shl directory).

Deploy Your Files After your files are selected, click the Deploy button to transfer them. If you are using FTP, you can select a file protocol: • Binary—Transfers the files using binary file protocol. Use this setting for images. • ASCII—Transfers the files using ASCII (text) file protocol. Use this setting for documents. If you want to overwrite files on the server, check Overwrite Existing Files.

FTP Operation • You can click the Delete button to remove a selected file on the server. This functionality is not available if you are transferring by HTTP. • The Refresh button refreshes the selected directory content.

HTTP Operation Please note the following points if you are using the HTTP option: • MobileDev uses the HTTP PUT command to transfer the documents. The Web server must be properly configured to accept the uploading of documents. • HTTP has certain built-in limitations: the list of files on the target directory cannot be seen, deleted, or refreshed, and identically named files will be overwritten without prompting. • The Connect button will attempt to connect to your LAN (local area network). If you have no connection, the Dial-Up dialog box will appear. It is only when you click the Deploy button that a real connection is established with the Web server. • If your Web server is down, you’ll receive an error message that says something like, The attempt to connect to the server failed. Start the server and press Retry.

• If the deployment directory that you specify does not exist, the error message will be something like, Resource not found or The directory requested was not found on the server. To remedy this situation, create the directory.


Please note the following points if you are using the FTP option:

8

174


• The deployment directory must have write permission. If you are using Microsoft IIS Manager, use the Advanced Option dialog box to configure the virtual directories. Some Web servers may require that a CGI be installed on the Web server.

Deploying with FTP The following is an example of how to deploy an application using FTP. Follow these steps to transfer the TopMovies application to another machine running an FTP server: 1. Make sure that the destination computer—the computer to which you are transferring files and where the application will be deployed—has an FTP server running. 2. Launch MobileDev and open the TopMovies application. 3. Choose File, Deploy Project from the main menu to display the Deploy Project dialog box. 4. Select FTP as the protocol and then provide connection information for the destination computer: the computer name or IP address plus a login username and password. 5. Click Connect. The Server box will display a list of files on the destination machine. 6. In the Client box, click Go to Document Directory to see the static pages in your application. In this case, the box is empty because the TopMovies is a dynamic application and does not use any static pages. If your application contained static pages, they would be listed here. 7. Click Go to Script Directory to list the application’s dynamic pages. By default, all the files are already highlighted, ready to be transferred. 8. In the Server box, locate the Web server CGI directory, as shown in Figure 8.16. 9. Click the ASCII button and then click Deploy. The files are transferred.

Testing the Deployed Application After an application has been deployed to its production environment, the next step is to test it using real phones and situations. One of the maddening things about WAP development is that simulators don’t always behave the same as the devices they are suppose to simulate. We recommend that you test your application carefully on a real phone. Testing with an actual phone is surprisingly easy (and it is great seeing the fruits of your labor in action). Access your phone’s Web access features and type the address of the server and the application you want to run. For example, to access the Welcome page of the TopMovies application, you would type: 142.255.118.16/cgi-bin/TopMovies/Welcome.pl


175

FIGURE 8.16 Use ASCII for everything but images.

After you are satisfied that your application works well on all targeted devices, the next step is to get your application listed on a portal and to publish your Web site so that it can be found when users perform WAP searches using keywords.

Default Settings Like any other software product, MobileDev comes preconfigured with default settings that the MobileDev designers thought you would appreciate. But they also made it easy to change these settings so that you can customize your development environment in any way you like. Most settings may be customized using the Settings dialog box, which is available from the main menu by choosing Tools, Settings. The Settings dialog box contains seven tabs, each detailing the defaults for a particular aspect of MobileDev. MobileDev has two types of settings: those that apply to users and that may differ from user to user and those that apply to the project as a whole. If you are working in a multideveloper environment, be careful when modifying project settings, because they will impact other users.


While testing, it’s a good idea to bookmark the site to save retyping the URL every time you want to access it. Using the IP address instead of the machine name saves you some typing, but you should also test using the machine name.

176


In case you are wondering if a default applies to a user or to the project, the settings tabs are broken down as follows: • Editor and Simulators—Have sections that apply to one or the other • Color, SourceSafe, and Log—Apply to user settings only • Project—Applies to project settings only

Editor The Editor tab, which you can see in Figure 8.17, contains the settings for the Code Editor and Document Editor.

FIGURE 8.17 The Editor tab contains settings for the Code Editor and Document Editor.

The settings at the top of the dialog box refer to your individual session; all these options are turned on by default: • Auto Indent Lines—Activates the automatic indent feature. When you press Enter, the next line will align with the first nonblank character in the preceding line. By the way, auto indent does not work when objects are pasted into a document. • Unlimited Undo/Redo—Keeps an unrestricted list of keyboard strokes in memory, one list per document. For global actions, such as Replace All, an undo removes all the replacements. If you uncheck this option, you can specify the undo level in the Undo/Redo Level box. For example, if you set this field to 2, only the two most recent actions will be kept in memory.


177

• Automatic Parsing—Controls whether MobileDev interprets the code in the Document Editor, letting you know whether it is valid or invalid. Automatic parsing—at least some of its features—is useful if you’re new to WML, HDML, or WMLScript. The disadvantage to parsing is that some of its features tend to get in your way as you code, and it may slow down your system when large or complex projects are interpreted. However, at least some of the automatic parsing features are really useful and should be left on all the time. Here’s the whole set: • Auto List Members—Displays a list of elements, attributes, and possible attribute values as you type. • For WML and HDML, lists appear after the on the first set of tags.

The settings at the bottom of the dialog box refer to the entire project; they are • Tab Width—Specifies the width of a tab, in spaces. The default is 2, which means the tab positions will be 1, 3, 5, and so on. • HDML Document Case—Specifies the treatment of HDML elements and attributes. In HDML, element and attribute keywords are not case sensitive, so MobileDev offers you the option to leave the keywords as typed (Default), to shift them to uppercase (UCASE), or to shift them to lowercase (LCASE). The keywords are shifted when the document is saved or read.

Color The Color tab specifies the colors that will be used in the Document Editor when you turn on the Chroma Color feature in the Editor tab. To change a color, click the Browse button beside a category and set a new color in the Color dialog box. Figure 8.18 shows both dialog boxes. Changes made to the default settings apply only to the current user.

SourceSafe The SourceSafe tab enables and configures Microsoft SourceSafe for the current user. For details about this tab, see the section “Visual SourceSafe” earlier in this chapter and Figure 8.2.


• Chroma Code—Displays elements and attributes in color. Colors are specified in the Color tab of the Settings dialog box. Even if you turn off all the other parsing features, you should leave this one on so you can tell when your code is valid. By default, your code goes red when it is not correct.

178


FIGURE 8.18 The Color tab sets colors for the Chroma Color feature.

Log The Log tab, shown in Figure 8.19, specifies how information and error messages will be logged for the current user. When this feature is activated, messages are displayed in the Log Window (activated by clicking View, Log Window) and may also be written to a file.

FIGURE 8.19 The Log tab sets the logging levels.


179

The fields in this tab let you set the following logging levels and options: • Show—The type of messages to log: Information, Warnings, Errors and/or Debug messages. By default, all message types are logged. Error messages are displayed in red in the Log Window; you cannot turn off error logging. • Message Format—Whether to include date, time, and other information as part of the message. If Time is checked, the message will include the hour, minute, and seconds; for Debug messages it will also include milliseconds. If Date is checked, the current date will be included. If Type is checked, the message type (Information, Warning, Error or Debug) will be included. • File Logging—When this option is checked, all messages are saved in a log file (with a .LOG extension). By default, file logging is not enabled. When you enable it, specify the name and location of the log file and whether MobileDev should overwrite the log file every time it is launched.

Simulators The Simulators tab, as shown in Figure 8.20, specifies the default user and project settings for the simulators. Simulators allow you to preview or run an application.

FIGURE 8.20 The Simulators tab lists your available phone simulators.


• NT Event Logging (available only for Windows NT and 2000)—Whether to include MobileDev logging information in the Windows Event Logging System file. When this option is checked, you can view MobileDev log entries by launching the Windows Event Viewer and clicking the Application Log in the Tree pane. MobileDev log entries are listed as a VBRuntime Source.

180


MobileDev’s default simulator is the Yospace 1.0 simulator, modeled on the Nokia 7110 browser, so this model is already checked in the Simulators dialog box. When you install other SDKs, such as the UP.SDK or Nokia WAP Toolkit, MobileDev automatically detects and displays the simulators installed with these SDKs. The Simulators tab contains the following fields: • Don’t Notify on Template Preview—When you preview a deck by right-clicking and choosing Preview Deck, MobileDev normally displays a message warning you that it temporarily removes server–script-related code. If you check this box, the warning message will not be displayed. • Run Project URL—The URL to use with the Run Project command. This URL should point to your production environment. • Run Deck Test Root—The partial URL to your development Web server. When the Run Deck command is used, the selected deck name and the Document Alias or CGI Script Alias is added to the URL. For example, if deck1 is selected and the Run Deck Test Root is set to http://shogue/ and the Document Alias is set to htdocs, the result is http://shogue/htdocs/deck1.wml. The default is the Windows system variable named localhost, which should work in your development environment. • Select a default simulator from the list. The contents of the list is based on the models selected from the table just below it. • Select the simulators to test your application with; up to 20 may be chosen. The selected simulators will appear in the Run Project, Run Deck and Preview Deck lists. When a project is created, MobileDev automatically selects one simulator per brand per markup language, for a maximum of 5. • Click Apply.

Application Map The Application Map tab, as seen in Figure 8.21 specifies the default look for the Application Map and the decks, cards, and links it displays. The following options apply to the look of the Application Map itself: • Use Custom Background Color—Defines a custom background color for the Application Map. The color is defined using a Custom Color dialog box. • Custom Color—Displays the Color dialog box where a custom color may be defined. • Zoom—Sets the default zoom value (default is 100%). • Select Mode—Turns the mouse cursor into a selection tool. You can select graphical objects by clicking and dragging the mouse over an area.


181

FIGURE 8.21 The Application Map tab sets display defaults for the Application Map.

• Show Grid—Superimposes a grid over the Application Map. A grid is useful when aligning objects. • Snap to Grid—Aligns the Application Map object to the closest grid line.

• Vertical—Sets the spacing between vertical grid lines in twips. Valid range is 36–600. The following options in the Project Default Configuration area let you set the visual properties of each type of object in the Application Map. Double-click Container, Deck, Card or Link to set the default size, shape, color, and font of the object. In Chapter 3, “Wizarding Up a WAP Application,” you learned how to use this feature to customize your Application Map and to apply the settings to individual objects. See “Changing the Look of the Application Map” in Chapter 3 if you need a refresher. For most purposes, you’ll probably just use the defaults that come with MobileDev, as illustrated in the Application Map in Figure 8.22. However, Figure 8.23 shows that you can make your Application Map look quite different. If you were developing an application for a customer, you might want to take advantage of some of these visual features to make your presentation more compelling. Remember that this dialog box sets the defaults for any new objects you’ll add to your project; it doesn’t automatically change existing objects. As you saw in Chapter 3, you can easily apply these settings to existing objects by selecting them and clicking the Default check box in the Properties dialog box.


• Horizontal—Sets the spacing between horizontal grid lines in twips. A twip is a screenindependent unit used to ensure that the placement and proportion of screen elements is the same on all display systems. There are approximately 1,440 twips per inch (567 per centimeter). Valid range is 36–600.

8

182


FIGURE 8.22 The factory defaults are fine for most purposes.

FIGURE 8.23 But you can also make the Application Map look quite different.

Project The Project tab, as shown in Figure 8.24, defines the default project properties for MobileDev. Except for Character Set and Auto Mirror, the options in this dialog box allow you to change the values specified in the New Project dialog box when the project was created. For details on the choices involved, see Chapter 4, “Before Building.” In summary, the fields represent the following: • Browser Brand—A browser brand: Generic, Nokia 7110, or UP.Browser. • Document Type and Version—The markup language—WML or HDML—and a version. Note that the HDML language is available only if you choose UP.Browser as the browser brand. • Application Server—The server runtime technology used to provide the application business logic. You can choose between ASP, Perl, or no server technology; again, these choices were discussed in more detail in Chapter 4.


183

FIGURE 8.24 The Project tab displays the technology choices made for the project.

• Application Title—A title for the application. Some browsers use the application title as a running header on all cards in the application, and other browsers ignore it. In any case, the application title can be modified for each deck and/or card that you create.

Content-type: text/vnd.wap.wml; charset=utf-8

MobileDev does not provide a default character set. • Document Path—The directory that holds the project’s static pages relative to your Web server’s document root directory. • CGI Script Alias—The directory that holds the project’s dynamic pages (for example, the WML or HDML template files and the server script files). Like the Document Path directory, this directory is relative to your Web server’s CGI directory. • Auto Mirror Documents and Scripts—Enables the Auto Mirror feature, which copies your static and dynamic documents from the project’s Documents and Scripts directories to the specified directories under your Web server, where they can be accessed by your Web server. • Doc. Folder—The physical location of your Web server’s document root directory followed by a directory for the project. For example, C:\Xitami\webpages\Project1. • CGI Folder—The physical location of your Web server’s CGI directory followed by a directory for the project. For example, C:\Xitami\cgi-bin\Project1.


• Character Set—The default character set for the WAP application. When a device generates a request to a server, it indicates the language it prefers to receive content in. This value maps to the charset parameter of the HTTP Content-type header. For example:

8

184


Containers As you’ve been working in the Application Map, you’ve probably noticed something called a container. A container is a MobileDev feature that lets you organize your decks on the Application Map in logically related groups (or even in illogically related groups, if you want). Figure 8.25 shows an example of decks grouped in containers. When you move a container, all its objects go along for the ride; and, of course, your application can have links that cross containers.

FIGURE 8.25 Containers let you group the objects in your Application Map.

To use containers in the Application Map, you can either create them at the beginning of the project and add decks as required, or you can add containers to an existing project and then put decks inside them.

Creating a Container Follow these steps to create a container: 1. Right-click an empty area of the Application Map and select Add, Container. 2. In the Add Container dialog box, specify a name for the container and click OK. The container is added to the Application Map and an entry is added to the Application Browser.

Establishing Ownership Containers contain decks and are said to “own” them. If you add a new deck inside a container, the ownership is automatically established. However, if you want to move a deck from one container to another or add an existing deck to a container, you need to establish the new ownership using the deck’s Properties dialog box. Right-click the deck and choose Properties, and then select a container from the Owner field, as shown in Figure 8.26. Another way to change ownership is to select a group of decks and then open the Properties dialog box. When you choose a container from the Owner field, it will be the owner of all your selected decks.


185

FIGURE 8.26 Change a deck’s ownership using the deck’s Properties dialog box.

To remove a deck from a container, first select it, and then open its Properties dialog box and choose None as the owner.

Summary

In the next chapter, you’ll be introduced to location-based applications, a WAP concept that offers a lot of potential both for wireless developers and users.

Q&A Q. How can you tell visually when an object is “locked” by another developer and cannot be edited? A. There is a check mark in the icon, the name is gray, and you cannot move or edit the object. Q. What is the difference between the Refresh Project and Get Latest Version commands? A. Both are meant to be used when working in a multideveloper environment and both update the project with the latest saved version. The difference is that Refresh Project should be used when the project is shared using a mapped network drive, whereas Get Latest Version should be used when working with SourceSafe.


In this chapter, you learned about some of MobileDev’s advanced features and how to customize MobileDev to better suit your needs. You looked at MobileDev’s multideveloper features, including SourceSafe or MobileDev’s own file-sharing mechanism. You experimented with the Database Browser and you went through the process of deploying an application for production. At the end of the chapter, you discovered what a container is and how to use it.

186


Q. What is the keyboard shortcut that lets you paste table and column information from the Database Browser? A. Ctrl+F1. If you forget a shortcut, you can always look it up in the online help or look in the MobileDev menus. Q. Where do you set the default simulator? A. In the Simulators tab of the Settings dialog box, accessed by clicking Tools, Settings.

PART

Advanced Topics

III

IN THIS PART 9 Location-Based Services

189

10 More Fun for WAP Fanatics 11 Java and MobileDev

203

223

12 The Future of the Wireless Internet

239

Location-Based Services

IN THIS CHAPTER • What Are Location-Based Applications? • Find Me a Movie Theater • Simulating the Experience • Creating the Application Using MobileDev • Q&A

CHAPTER

9

190

Advanced Topics PART III

You now know how to make the most of MobileDev advanced options and how to personalize your MobileDev development environment. In this chapter, you’ll take a look at how to use MobileDev to create a location-enabled application using the UP.SDK. As you build the application, you’ll learn the answers to the following questions: • What does location based mean? • How do I create a location-based application using MobileDev? • How do I configure the UP.SDK for location simulation?

What Are Location-Based Applications? Imagine the following scenario: you’re in an unfamiliar city, it’s boiling hot, and you’re in the mood to see the latest blockbuster movie in a nice air-conditioned theater. You know there must be a movie theater somewhere nearby, but you don’t know exactly where it is. Fortunately, a consortium of movie theater owners have gotten together to create a WAP site that has implemented a location-based service—based on your current location, they can tell you where their closest theater is.

The Technology Some WAP gateways have a Mobile Location Server, a server that can determine and forward the geographic location of a cell phone to applications that have been designed to use the location information. The Mobile Location Server sends the location information by way of a Geography Markup Language (GML) document, along with the access request, to a location-enabled WAP site and then handles the response. As you will see in the following example, it is actually pretty easy to configure a WAP site to accept location information and use it to provide customers with the kind of information they need. Nothing about a GML document is complicated, and ready-made Perl or ASP routines are available that can sift through GML documents to extract the embedded location information. Although the following example is fun and demonstrates the possibilities of this technology and its revenue-making potential, the sad fact is that location-based services haven’t been implemented in most operator networks. So, before you start building a WAP application that implements this technology, you should talk to your gateway operator. The following example is based on one found in the Openwave UP.SDK documentation, adapted for use in the MobileDev development environment. For more information and other examples, refer to the Openwave documentation.

Location-Based Services CHAPTER 9

191

Find Me a Movie Theater Back to our scenario. The movie consortium saw the opportunity to increase profitability by making it easier for drivers and visitors to find the movie theater closest to their current location. In summary, what they did was • They contacted their gateway operator to let them know where to send location-enhanced information. Details on how to do this may vary depending on the gateway, so again, contact your gateway operator for details. The following example uses the UP.SDK to simulate the location-enabled experience. • They designed their WAP application to use the location information. In summary, when a user accesses the consortium’s WAP site and asks for the location of the closest theater, the user’s current location—in this example, the ZIP code—is sent to the WAP application. The application matches the ZIP code with a theater location stored in a database on the corporate site, builds a response using the information, and sends it back to the user where it is displayed in the phone.

Simulating the Experience One of the trickiest things about creating a location-based application is testing it. One option is to send out hordes of friends to different locations in your city and have them access your site. However, that may be impractical, so the UP.Simulator has provided a way to simulate the experience. It lets you simulate the process of registering with the gateway and lets you create imaginary friends with cell phones to test your application. Currently, only the UP.SDK allows for location-enabled simulation. To do the following demo, you need to have the UP.SDK 4.1 installed on your computer. See Appendix A, “Setup,” for details on how to install it.

As previously mentioned, one of the first things you need to do when building a locationenabled application is to register your WAP site with the gateway operator. Registering a site as a location-enabled one means that the gateway, by way of the Mobile Location Server, will include location data with all requests to access the site. In a development environment, you don’t want to register your WAP site for real. However, the UP.Simulator lets you simulate the location-enabled WAP site registration, as follows: 1. Launch the Up.Simulator. You can either run it from the Programs menu (look for UP.Simulator under your Openwave menu) or right-click a deck in MobileDev and choose Run Deck, UP Browser.

LOCATION-BASED SERVICES

Registering a Location-Enabled Site

9

192


2. Choose Location, Set Access List from the menu of the simulator, as you can see in Figure 9.1. 3. In the Location Access List dialog box, click Add to display the Whitelist URL dialog box.

NOTE A whitelist is the opposite of a blacklist; it’s a list of people or objects that are explicitly admitted. For an explanation of this and other fascinating hacker terms, see the Jargon File (we consulted the online version 4.3, April 2001, at tuxedo.org/~esr/jargon/html).

4. In the Whitelist URL dialog box, specify the location of your location-enabled applications in the Whitelist URL field; for example: localhost/cgi-bin/GML_Apps

At runtime, when users access an application that’s anywhere under the GML_Apps directory, their location information will be included with their request to access the application. We will, of course, be building our location-based application under this directory.

NOTE We recommend that you specify localhost as the machine name, as shown in Figure 9.1, or make sure the machine name is the same as that specified in the Run Deck Test Root field of the Simulators tab of the MobileDev Settings dialog box.

5. Check the Zip/Postal Code option to specify the type of location information that the gateway should provide. In this example, you want it to include the ZIP code of users accessing your GML_Apps applications. 6. Click Add and then OK.

Creating Imaginary Users So far, you have asked the gateway provider to include the ZIP code of users accessing applications under the GML_Apps directory on your Web server. The next step is to define a series of imaginary users in different ZIP codes so you can test the application. Follow these steps:


193

FIGURE 9.1 The UP.Simulator lets you simulate the process of registering with the gateway.

7. Click Location, Set Location to display the Location Settings dialog box. This dialog box lets you enter location information for a simulated cell phone that you’ll use to test your application. The information that you enter will be encoded in the GML document provided to location-enabled programs.

9. Enter a value into the Address Line 1 field. In this example, the ZIP code is the only location information that you’ll need for your application, but the UP.Simulator makes you enter an address as well before you can add the location to the Address Book. You can enter anything you like into the Address fields, as you can see in Figure 9.2. 10. Click Add to Address Book; your entry is displayed in the Location Address Book tab. 11. Select the new entry in Location Address Book and click Set as Current. As shown in Figure 9.3, an icon indicates the current selection. By selecting an entry, you are simulating a user’s current cell phone location. Other locations may be created and selected for testing purposes. 12. Click OK.

9 LOCATION-BASED SERVICES

8. In the Zip/Postal Code field, enter a ZIP code of 90210. The value you enter represents the location of our imaginary user. You want to know where the user is so you can direct him or her to the nearest movie theater.

194


FIGURE 9.2 Create a phone location for testing purposes.

FIGURE 9.3 The Address Book contains possible phone locations.

Enabling the Simulation To enable the whole location-enabled simulation: 13. Click Location, Simulation On and verify that there is a check mark, as shown in Figure 9.4, to the left of the option.


195

FIGURE 9.4 Turn on the simulation feature.

Creating the Application Using MobileDev Now that the UP.Simulator has been configured to simulate location-enabled services, you can create the WAP application itself using MobileDev. The application consist of two decks; Figure 9.5 shows what it will look like in the Application Map when you’re done. The bulk of the programming occurs in the server script of the Found deck.

FIGURE 9.5 The application consists of two decks: Find and Found.

How the application works is actually pretty simple: when users access the consortium’s WAP site, they are given the option to locate the closest outlet. When the user selects the option, the gateway sends location information to the Found deck, where the server script • Parses the GML code to extract the ZIP code information. • Accesses a database to locate an address based on the ZIP code provided. • Interprets the WML template, replacing the substitution variables. • Returns a standard WML file to the user’s phone for display.


How It Works

196


WML Code Displays the Application To create the presentation side of the application in WML code, you’ll create a MobileDev project with two decks. Follow these steps: 1. Choose File, New Project to create a new project and specify the project information as follows (see Figure 9.6): • Name: Theaters • CGI Script Alias: Make sure you specify an alias under the directory you specified in the Whitelist URL (refer to Figure 9.1) when you simulated the registration of a location-enabled WAP site earlier in this chapter. In this example, specify /cgi-bin/GML_Apps/Theaters • You can ignore the Document Path because it is not used in this example. • Browser Brand: UP.Browser. Remember, this demo works only with the UP.SDK. • Application Server: Perl Template.

FIGURE 9.6 Make sure the CGI Script Alias is under your location-enabled directory.

2. Use the Settings dialog box (choose Tools, Settings, Project tab) to set up auto mirroring so that your application will be deployed in the correct location. As shown in Figure 9.7, you should • Check Auto Mirror Documents and Scripts. • Change the CGI Folder information so that it points to the physical location of the CGI Script Alias location you specified; in this case: D:\Website\cgi-bin\GML_Apps\Theaters • Click Apply, Yes, and then Close.


197

FIGURE 9.7 Setting the Theater defaults.

3. Create the Find deck by launching the Display Deck Wizard and specifying the following, as shown in Figure 9.8: • Deck Name: Find • Display Text: We’ve got your blockbuster! Press Direct Me to find the closest movie theater. (You’ll create the link called Direct Me in step 5.) • Click Next, disable the Back key, and then click Finish.


FIGURE 9.8 The first deck of the application will offer a Direct Me link.

4. Run the Display Deck Wizard again to create the Found deck, as shown in Figure 9.9: • Deck Name: Found • Display Text: @Location • Click Next, enable the Back key, and then click Finish.

198


FIGURE 9.9 The second deck of the application shows the location, which will be provided by Perl code.

5. Link the two decks by launching the Link Wizard and specifying the following: • Type of Link: Define a New Link • Link Text: Direct Me • Click Next and then click Finish.

FIGURE 9.10 The Link Text is what the user will see and select.

Perl Code Provides the Logic As in most dynamic WAP applications, it’s the server-side code that provides the processing logic. Follow these steps to add the necessary Perl code:


199

1. Open the Code Editor for the Found deck. 2. Replace the automatically generated Perl code with the code in a file we’ve prepared (Found_pl.txt; it’s on the CD). This code is well commented so you’ll be able to figure it out pretty easily. In brief, the code parses the information received from the gateway to retrieve the ZIP code information, uses the ZIP code to locate an address in the database file, assigns the address to the Location substitution variable, interprets the WML file, replacing the substitution variable with the address, and sends the resulting WML file to be displayed on the phone. 3. Copy the database file Locations.txt (like all the other files, it’s located on the CD) to the Theaters directory under the Web server CGI directory. For example: D:\Website\cgi-bin\Theaters\Locations.txt

This file is used by the application to match the ZIP code information received from the gateway to an address.

Run the Application Run the application to see it in action (well, in simulated action): 1. Right-click the Find deck and select Run, New Generic—UP Browser 4.1. 2. On the Theaters welcome deck, select the Direct Me link. When the link is selected, the following code is sent to the server script from the UP.Link Server (the gateway) after it has verified that the URL should be sent the GML information: ‘ <property typeName=”zip”>90210 ’

LOCATION-BASED SERVICES

You can see the information for yourself by looking at the Phone Information dialog box that is partnered with the UP.Browser simulator. See Figure 9.11 for an idea of how it all goes together.

9

200


1 When a user clicks Direct Me, the gateway sends the user’s zip code with the URL.

We’ve got your blockbusters! click [Direct Me} to find the closest movie theater.

Direct Me

WAP Gateway …/GMA_Apps/Theaters/Found.pl

…/GMA_Apps/Theaters/Found.pl zip code=90210

Found.TMPL

Found.PL <wml> #Receive 90210 as users’ zip code #Find theaters in 90210 area #transfer to substitution variables #Process TMPL file $Tmpl->process('Found.tmpl', $Substitution);

2 Perl code finds the theaters and interprets the WML template.

[% GET Location %]

Found.WML <wml>
The Goshawk Theater, 42 Ariadne Drive

3

The Goshawk Theater 42 Ariadne Drive

The phone browser displays the movie theatres in the 90210 zip code area.

OK

FIGURE 9.11 This application directs users to the nearest movie theater.

About


201

Summary In this chapter, you learned how to simulate a WAP application that uses GML to provide location-based information to a user. You used tools provided with the Openwave UP.SDK to simulate the gateway setup required, and then used MobileDev to create an application that gives users the location of their closest movie theater. Although you didn’t have the chance to test this scenario using a real phone and gateway, it gave you an idea of what you need to do to implement this feature. In the next chapter, you will see a miscellaneous collection of interesting things you can do in a WAP application, including user customization and internationalization.

Q&A Q. Are location-based applications in use today? A. Not really, but this example gives you a heads up. Ask your gateway operator for future implementation details. Q. Why is the relationship between the URL specified in the Access List and that specified in the MobileDev New Project CGI Script Alias field? A. The project’s decks must be deployed under the URL specified in the Access List to be eligible to receive the location (GML) information.


More Fun for WAP Fanatics

IN THIS CHAPTER • Subscriber ID • Regular Phone Calls • Animated Images Again • Optimizing for the Browser Brand • Internationalization • Optimizing for the Language • Security • Notifications • Q&A

CHAPTER

10

204


Even though location-based applications and services are not yet widely available, the concept is exciting and you now know something about them. But there are other features specific to the wireless world, such as subscriber ID and alerts. You’ll look at these features along with voice calls, animated images, and internationalization within the MobileDev context. In the course of the chapter, you’ll learn the answers to the following questions: • What is a subscriber ID? • How do I initiate a voice call? • How do I use, edit, and animate images? • How can I optimize for the user’s browser brand? • How do I deal with character sets? • What about security and notification alerts?

Subscriber ID This chapter contains a miscellany of features, hints, and tricks that you may find useful in some situations. The first is a feature known as subscriber ID. A subscriber ID is the globally unique number of a cell phone as registered with an UP.Link Server. It is a string of up to 32 characters, including numbers and the hostname of the UP.Link Server. For example, it might be something like 574957204-4657_devgate.uplanet.com

When developing wireless applications, you can—in theory at least—use subscriber IDs to build personal profiles of your users based on information gathered every time someone hits your WAP site. You’ll then be able to offer users services that are uniquely tailored for their needs, without asking them to fill in questionnaires. However, although subscriber IDs are unique across all UP.Link Servers in the world, they are available only within the UP system, so you can’t use them if you are writing for Nokia or other systems. Of course, subscriber ID is not a substitute for security login information. For secure transactions such as banking and purchasing, you will always ask the user to set up an account based on a name and password that is stored in the user’s head, not in the user’s cell phone.

Retrieving the Information When a user accesses your application via an UP.Link Server, the server includes the subscriber ID in a header attached to the access request. The subscriber ID is converted to an environment variable named HTTP_X_UP_SUBNO, which you may retrieve using Perl or ASP.

More Fun for WAP Fanatics CHAPTER 10

205

To retrieve the subscriber identification using MobileDev, add a line similar to the following in your Perl script. $Upsubno=$ENV{‘HTTP_X_UP_SUBNO’};

This line declares a Perl variable that we have named Upsubno and assigns it the value of the environment variable, HTTP_X_UP_SUBNO. You can then use the Upsubno variable as a key to store information about this subscriber.

Regular Phone Calls Another interesting feature that’s available in a wireless application is the capability to initiate a regular voice phone call from within the application. This capability is based on an interface developed by the WAP Forum called the Wireless Telephony Application Interface (WTAI), which is a function library stored on cell phones that use the UP.Browser. The MobileDev online help describes the commonly used functions. The WAP Forum’s specification for WTAI is available at http://www.wapforum.org. Click WAP Technical and search for a document named WAP-170-WTAI.

Coding with WTAI For example, to initiate a voice call from a WML deck, you could use the WTAI function named wtai://wp/mc in a task attached to the options key: 1. Open an existing deck with the MobileDev Document Editor. 2. Add the following code: <do type=”options” label=”Call Home”>

When the user chooses the Call Home option, the phone number 514-555-6789 is dialed and the user connects and talks. After the user hangs up, the application returns to the card that initiated the call.

Animated Images Again

MORE FUN FOR WAP FANATICS

In Chapter 5, “Learning About Wireless Markup Language,” you learned how to use images and saw a simple example of how to animate them using card timer events. In this chapter, you’ll learn how to use timer events and WMLScript to animate an image.

10

206


An Animated Logo for Big Thrills In this example, we’ll create an animated logo for the WAP site of an imaginary amusement park called Big Thrills. This example works by alternately displaying two WBMP images (we’ve named them Whirly1.wbmp and Whirly2.wbmp) to display a spinning pinwheel for a few seconds when users first come to the site. You can find these image files on the CD at the back of this book. To create this example, you’ll add WML and WMLScript code in a MobileDev project.

WML Code Displays the Images First, add the WML code to display the images: 1. Open the MobileDev project called BitsNPieces and use the Deck Wizard to add an empty display deck called BigThrills. 2. Use the Document Editor to modify the automatically generated WML code for this deck, adding , , <setvar>, , and tags so it looks like this (this code is available in a text file called BigThrills.txt on the CD, if you don’t like typing): <wml> <meta http-equiv=”Cache-Control” content=”max-age=0”/> <setvar name=”Iterations” value=”15”/> <setvar name=”Image” value=”Whirly1.wbmp”/> <setvar name=”AltText” value=”Twirling”/>

Big Thrills Amusement Park

Big Thrills Amusement Park


207

This WML code • Specifies the first image and the number of times the images will alternate. • Executes a WMLScript file every two seconds to change the image and count down the iterations. • Displays the alternating images. • Finally, when the iterations have completed, it displays an All Done message containing a third image, Whirly.wbmp.

WMLScript Code Switches the Images Then, create the WMLScript code to switch the images and count down the iterations: 1. In the Application Browser box, right-click WMLScripts and choose Add, WMLScript, as you can see in Figure 10.1. In the Add WMLScript dialog box, enter a name for the file—Switch is used in this example—and click OK.

FIGURE 10.1 Add a WMLScript file named Switch to the project.

2. Use the Code Editor to add the following code to the Switch file (it’s also available on the CD in the file Switch_wmls.txt).

10 MORE FUN FOR WAP FANATICS

extern function main() { var ImageVar = WMLBrowser.getVar(“Image”); var IterationsVar = WMLBrowser.getVar(“Iterations”);

208

Advanced Topics PART III IterationsVar = IterationsVar - 1; WMLBrowser.setVar(“Iterations”, IterationsVar); if (IterationsVar > 0){ if (ImageVar == “Whirly1.wbmp”) { WMLBrowser.setVar(“Image”, “Whirly2.wbmp”); WMLBrowser.setVar(“AltText”, “Whirling”); WMLBrowser.refresh(); } else { WMLBrowser.setVar(“Image”, “Whirly1.wbmp”); WMLBrowser.setVar(“AltText”, “Twirling”); WMLBrowser.refresh(); } } // end first if if (IterationsVar == 0) { WMLBrowser.go(“/BitsNPieces/BigThrills.wml#Done”); } } }

This WMLScript code, triggered by the ontimer event in the WML file, uses the Iterations and Image values initialized in the markup code to set and then decrement an iteration value and to switch the current image (and alternate text) with another. Every time the ontimer event is triggered, the iteration value is decreased and the image is switched. When the iteration value hits zero, the Done card is displayed, containing a third image. For all this to work, the WMLScript uses the WMLBrowser library functions named setVar, getVar, and refresh to modify the phone’s memory.

Run the Application Finally, make sure the images are in the correct location and run the application: 1. Copy the Whirly1.wbmp, Whirly2.wbmp, and Whirly.wbmp images to the BitsNPieces directory under the document directory of your Web server. For example, if your Web server is WebSite Professional, you’d put them in: ... WebSite\Htdocs\BitsNPieces\Whirly1.wbmp, Whirly2.wbmp, Whirly.wbmp

2. Run the application and watch your pinwheel spin for a few minutes before it settles down to a stationary pinwheel. See Figure 10.2 for an idea of what it will look like.


209

Big Thrills

Big Thrills Amusement Park Big Thrills

Options

Big Thrills Amusement Park Options

Big Thrills

Big Thrills Amusement Park Options

FIGURE 10.2 You could use this spinning pinwheel as a logo for an amusement park site.

Optimizing for the Browser Brand Several WAP features are based on the environment variables that come ready packaged with every request to access a WAP site. You’ve already looked at location-based services and subscriber ID. A similar feature uses an environment variable that tells you the browser brand of the user’s phone. Although it’s a good idea to create generic WAP applications that work well on both Nokia and UP browsers, this strategy doesn’t take advantage of the individual behaviors and extra features that each browser has to offer. Sometimes you may want to create multiple versions of an application, each geared to a particular browser brand. MobileDev’s development environment makes this an easy thing to do. In fact, both versions can coexist in the same project and on the Application Map. You can cut and paste both the markup and server script code from one version to another. In addition, running the decks on


210


their respective browsers for testing purposes couldn’t be simpler: right-click the deck, choose Run Deck, and select a browser from the list. After you have created a multi-browser application, you’ll need a method that makes sure a browser is matched to the right application. An easy way exists to test for the browser brand using server script and header information. Header information that identifies the browser brand is added by the WAP gateway and is automatically converted to an environment variable named HTTP_USER_AGENT by the Web server. (At the beginning of this chapter, you saw how the user’s subscriber ID is converted to an environment variable in the same way.) To find out the browser brand, all you have to do is access the environment variable.

Choosing Between Nokia and UP In the following example, you’ll use Perl code to retrieve the user’s browser brand from HTTP_USER_AGENT and then transfer the value to a substitution variable in the WML file that points to a browser brand-specific application.

WML Code Calls Browser-Specific Applications The WML code in this example uses a tag in an onenterforward event to point to the first deck of either a Nokia- or an UP-based application, based on the value of a substitution variable received from the Perl script file. We’ve named the browser variable BrandVar because it will contain a browser brand. (In the next section, you’ll see how the Perl file retrieves the browser brand.) Follow these steps to set up the WML side of the application: 1. Create a new MobileDev project called Travelers with Perl Template as the application server technology. The default browser can either be Nokia or UP.Browser; you are going to set the browser brand explicitly in each deck. 2. Create a display deck that will redirect users to either a Nokia or an UP.Browser application. Because users won’t see this deck, it can be based on either browser brand: • Deck Name: Access • Display Text: (This deck starts a Nokia-based or UP-based application.) The user won’t actually see this display text because this deck immediately redirects them to the appropriate application, but you could type it in to remind you what is happening in the deck. 3. Use the Document Editor to edit the markup language by adding an element and a tag to the card in the WML file. The tag calls either a Nokia or an UP application. The final code for the card should look like this:


211

(This deck stars a Nokia- or UP-based application.)

The href option in the tag includes a substitution variable that will resolve to a Perl file under your CGI directory. In this environment, the Web server CGI directory is cgi-bin and the project directory is Travelers. If your directory path is different, modify it so that it applies to your environment. Although we’re not showing you how to create the two browser-specific applications in this example, you should at least create the starting deck of each application to test that it works. 4. Create a display deck to represent the starting deck of the UP application: • Deck Name: UP_deck • Display Text: Welcome to your UP-optimized app. • Browser Brand: UP.Browser • Version: UP SDK 4.1 • Application Server: Perl Template 5. And a display deck to represent the first deck of the Nokia application: • Deck Name: Nokia_deck • Display Text: Welcome to your Nokia-optimized app. • Browser Brand: Nokia 7110 • Version: WML 1.1 • Application Server: Perl Template You now have three decks on your Application Map, as you can see in Figure 10.3. The link from Access to the other decks is not shown; it is resolved only at runtime, when the Perl code provides the name of the deck to run.

Perl Code Retrieves the Browser Brand Now you can add the Perl script to complete this example.


The Perl script associated with this deck needs to retrieve the browser brand from an environment variable, use the value to choose an UP- or a Nokia-customized deck, and then transfer the deck name to a substitution variable named BrandVar, which is used in the WML file you just created.

10

212


FIGURE 10.3 UP_deck and Nokia_deck represent the starting decks of two applications.

Follow these steps: 1. Use the Code Editor to edit the Perl code for your Access deck by adding the following code before the #Template processing code . . . line: $useragent = $ENV{“HTTP_USER_AGENT”}; if ($useragent =~”UP”) {$brand = “UP_deck.pl”;} if ($useragent =~”Nokia”) {$brand = “Nokia_deck.pl”;} #Template processing code ...

2. And add the BrandVar substitution variable to the my correct deck name back to the WML file:

$Substitution

list, to pass the

#Template processing code my $Substitution = {BrandVar => $brand,}; $Tmpl->process(‘Access.tmpl’, $Substitution);

Run the Application When this application runs, users will see the application that has been customized for their browser brand. Figure 10.4 shows how it works behind the scenes.


213

Access.TMPL

Access.PL <wml> $useragent = $ENV{"HTTP..."}; if $useragent =~ "UP" {$brand = "UP_deck.pl"}; if $useragent =~ "Nokia" {$brand = "Nokia_deck.pl"}; my $Substitution = {BrandVar = $brand }; $Tmpl->process{'Access.tmpl', $S};

1 Perl code gives value to BrandVar then interprets the WML template file.

2 If statements produce one of two different WML files.

Access.WML

Access.WML

<wml>

<wml>

Travelers The app that follows you everywhere. Start

Travelers The app that follows you everywhere.

Options

Start

3 The phone browser displays the correct application.

Users don’t see any of the behind-the-scenes processing to choose the correct application.


FIGURE 10.4

10

214


Internationalization Internationalization is the process of making your application available across a number of languages and character sets. If you plan to make your application global, you will need to consider the following: • Language—If you intend to provide content in different languages, you will have to include conditional logic that points to different versions of the application and the translated content itself. • Character Sets—Character sets are handled by a process called transcoding; during transport, the data is automatically mapped from one character set to another. The WAP gateway software makes sure the phone and the Web server running the application server understand each other. All you need to do is select a character set for the project and the required code is added to the decks.

Language If you plan to offer your application in different languages, you will have to create languagespecific versions of the application and then determine the user’s language when the application is accessed via a phone. Fortunately, the user’s language information is available in the form of an environment variable. When a user accesses the application, the WAP gateway adds a header that provides information about the language that was initially provided by the phone. This header is converted by the Web server to an environment variable named HTTP_ACCEPT_LANGUAGE, which you can retrieve. To retrieve the information using MobileDev, add a line similar to the following one to your Perl script: $acceptlang=$ENV{‘HTTP_ACCEPT_LANGUAGE’};

The line assigns the value of the environment variable containing the language information to another variable—in this case, Acceptlang—for use in your application. After you know the language, it is an easy matter to provide content localized for that language. The complete list of language codes is available at http://www.unicode.org.

Character Sets For your character set to be properly transcoded when sent to the WAP gateway and then to the phone, you must properly identify it. In MobileDev, character set identification is done by selecting a character set in the Project tab of the Settings dialog box, as you can see in Figure 10.5.


215

FIGURE 10.5 Select a character set in the Settings dialog box.

When you choose a character set in this dialog box, MobileDev includes a character set parameter in the XML declaration that it generates for every deck and in the server script file for dynamic applications. For example, if you choose ISO-8859-1, MobileDev generates the following: • WML:

“Content-type: text/vnd.wap.wml; charset=ISO-8859-1\n\n”;

The UTF-8 character set is handled slightly differently. On the WML side, the character set is specified as a charset parameter in the HTTP header that is generated for every deck. In a dynamic application, the information is added to the server script print statement found at the top of the file. For example, in Perl: print “Content-type: text/vnd.wap.wml; charset=UTF-8\n\n”;

Browser Limitations Before embarking on an internationalization endeavor, make sure the phones you are targeting support the character sets you are planning to implement. For example, the Nokia 7110 phones support only ISO-8859-1, UTF-8, and ISO-10646-UCS-2 character sets. Another important issue you need to consider is that the font glyphs for certain character sets require a localized version of the Windows operating system and the corresponding fonts.

You can simulate language and character set settings on the UP.Simulator (unfortunately, this functionality doesn’t seem to be available for the Yospace simulator or the WAP Toolkit for the Nokia 7110). Simulation is a good way to test a language or character–set-specific application.


Simulating Internationalization

10

216


To change the default language and character set on the UP.Simulator: 1. Launch the UP.Simulator, either within MobileDev (right-click a deck and choose Run Deck, UP Browser) or on its own (from the Programs menu). 2. Click Settings, Device Settings to display the Device Settings dialog box that you can see in Figure 10.6. 3. Modify the Language and Charset settings as required. For more information, see the UP.SDK documentation. You will get a chance to change these values in the following example.

FIGURE 10.6 The UP.Simulator lets you test different languages and character sets.

Optimizing for the Language If your intended market audience speaks several languages, it may make sense for you to offer your customers a WAP service customized to their language needs. MobileDev’s development environment makes it easy to do this; multiple versions of an application, based on language, may be developed simultaneously. You can cut and paste both the markup and server script code from one version to another. After you have created multiple language versions of the application, you’ll need a method that makes sure that users and their language is matched to the right application. As mentioned at the beginning of this section, information that identifies the phone’s language is added by the WAP gateway and is automatically converted to an environment variable by the Web server. (At the beginning of this chapter, you saw how the user’s subscriber ID is converted to an environment variable in the same way.) To find out the language, all you have to do is access the environment variable.


217

In the following example, you’ll use Perl code to retrieve the user’s language from HTTP_ACCEPT_LANGUAGE and then transfer the value to a substitution variable in the WML file that points to a language-specific application.

WML Code Calls Language-Specific Applications The WML code in this example uses a tag in an onenterforward event to point to the first deck of either an English or French-based application—or a Sorry deck if the phone’s language is not French or English—based on the value of a substitution variable received from the Perl script file. In this example, the browser variable is named LangVar because it will contain language information. (In the next section, you’ll see how the Perl file retrieves the language information.) Follow these steps to try out the example: 1. Create a new MobileDev project with the following properties: • Name: Speedair • Browser Brand: UP.Browser • Version: UP.SDK 4.1 • Application Server: Perl Template 2. Use the Settings dialog box to change the default character set to ISO-8859-1. Specifying a character set for your project is a good idea because it makes sure that the character set is properly transcoded by the WAP gateway. 3. Create an empty display deck in a MobileDev project: • Deck Name: Speedair • Display Text: (This deck starts an English or French language-based application.) The user won’t see this display text, because this deck immediately redirects them to the appropriate application, but it reminds you what is happening in the deck. • Uncheck Enable Back Key. 4. Use the Document Editor to edit the markup language by adding an element and a tag to the card in the WML file. The tag calls either an English or a French language-based application. The final code for the card should look something like this:


218

(This deck starts an English or French language-based application.)

The href option in the tag includes a substitution variable that will evaluate to a Perl file under your CGI directory. In this environment, the Web server CGI directory is cgi-bin and the project directory is Speedair. If your directory path is different, modify it so it applies to your environment. We’re not showing you how to create the language applications themselves, but you should create the starting deck of each to test that it works. 5. Create a display deck to represent the starting deck of the English application: • Deck Name: English • Display Text: Welcome aboard Speedair, the airline that’s always at your fingertips. 6. And a display deck to represent the first deck of the French application: • Deck Name: French • Display Text: Bienvenue à bord de Speedair, la ligne aérienne qui est toujours au bout des doigts. To create the special French characters, use Alt+0224 for the à and Alt+0233 for the é. 7. Add another display deck, which is displayed if the phone’s language is not English or French. • Deck Name: Sorry • Display Text: Sorry, your language is not supported. You now have four decks on your Application Map, as you can see in Figure 10.7. The link from the Speedair deck to the other decks is not shown; it is resolved at only runtime, when the Perl code provides the name of the deck to run.

FIGURE 10.7 Your Application has four decks in it.


219

Perl Code Retrieves the Language Information Now you can add the Perl script to complete this example. The Perl script associated with this deck needs to retrieve the language information from an environment variable, use the value to choose an English or French language customized deck, and then transfer the deck name to a substitution variable named LangVar, which is used in the WML file you just created. Follow these steps: 1. Use the Code Editor to edit the Perl code for your Speedair deck by adding the following code before the #Template processing code . . . line: $acceptlang = $ENV{“HTTP_ACCEPT_LANGUAGE”}; if ($acceptlang =~”en”) { $lang = “English.pl”; } elsif ($acceptlang =~”fr”){ $lang = “French.pl”; } else { $lang = “Sorry.pl”; } #Template processing code ...

2. And add the LangVar substitution variable to the my

$Substitution

list:

#Template processing code... my $Substitution = { LangVar => $lang, }; $Tmpl->process(‘Speedair.tmpl’, $Substitution);

When this application runs, users will see the application that has been customized for their language. Figure 10.8 shows how it works behind the scenes.

Test the Application To test the application and make sure the correct deck is displayed to the user, follow these steps: 1. Run the Speedair deck using the Generic UP.Browser 4.1, and then modify the device settings as described previously so that the Language is (fr) French and the Character Set is Western Europe (ISO-8859-1). 2. Reload the deck (press F9). The French page should appear, as displayed in Figure 10.8.


220

Advanced Topics PART III Speedair.TMPL

Speedair.PL <wml> $acceptlang = $ENV{"HTTP..."}; if $acceptlang =~ "English" {$lang = "English.pl"}; if $acceptlang =~ "French" {$lang = "French.pl"}; my $Substitution = {LangVar = $lang }; $Tmpl->process('Speedair.tmpl',$S);

1 Perl code gives value to LangVar then interprets the WML template file.

2 If statements produce one of several different WML files.

Speedair.WML

Speedair.WML

<wml>

<wml>

Speedair Welcome aboard Speedair, the airline that’s always at your fingertips.

Speedair Bienvenue a` bord de Speedair, la ` ligne aerienne qui est toujours au bout des doigts.

Options

Options

3 This is the first screen that the user sees.

FIGURE 10.8 Choosing a language is similar to choosing a browser brand.

Security From the point of view of the WAP application developer, security issues are transparent. That’s right, you don’t really need to bother with security at all. Security is automatically handled by


221

the various servers and transmission protocols that shuffle the communications between a phone and an application server running your application. Don’t get us wrong, lots of complex security issues are involved in the whole process; it’s just that various decisions on how to handle security issues—for example, what encryption technology to use—are made by system administrators and do not impact WAP application development. If you are interested in this topic, you can find good information in the WAP Security chapter in the book Professional WAP by Charles Arehart et al., (Wrox Press Inc., 2000)).

Notifications A notification, also known as a push or an alert, is information that is sent to a user’s phone without the user asking for it specifically. Notifications are based on a user’s interests, detailed in a profile; the usual example is stock prices, but other examples could include plane seat availability, e-mail, press releases concerning certain companies, or even the release of a new movie. Alert notifications typically contain a short message and a URL that the user can access to get the information that has been sent. How the user is alerted to a new message varies, depending on the phone and on the urgency of the alert. The phone may vibrate, beep, or display an Alert icon. For more details on other notification, refer to UP.SDK or Nokia WAP Toolkit documentation. From a WAP application developer’s point of view, MobileDev can be used to create the application that drives the notification and deck-creation process. Although the revenue potential for this technology is apparent, notifications are not yet supported by many phones and operator networks. Make sure you do your research before you start developing a WAP application that uses notification technology.

Summary

Next you’ll take a brief introductory tour of Java technology and learn how you can incorporate your WAP applications using MobileDev and Enhydra.


In this chapter, you took a look at some advanced WAP features and learned how to enable them within the MobileDev environment. Some of them, such as subscriber ID and notification alerts, are not yet widely implemented, but others can be used right now. In particular, applications can take advantage of the information that comes bundled with every WAP request and is transferred to environment variables. You’ve seen how to use these environment variables to customize applications for browser brand and for language. And you’ve also learned another way to animate images by making a cool spinning logo.

222


Q&A Q. What’s the name of the environment variable that holds the user’s subscriber ID? A.

HTTP_X_UP_SUBNO

Q. When you should not use subscriber ID? A. You shouldn’t use subscriber ID in place of a security logon. Q. Can you make a regular phone call from a mobile application? A. Sure, using a function called wtai://wp/mc. Q. Do you have to duplicate your applications for every type of browser? A. No, only if you want to take advantage of a feature that’s offered on only one browser. Q. Do you have to write separate applications for different languages? A. No, just include conditional code that chooses a language.

Java and MobileDev

IN THIS CHAPTER • Introducing Java and Enhydra • Creating an Application: An Overview • About the CameraLand Application • Creating the MobileDev Project • Creating the Enhydra Project • Modifying the Default Enhydra Project • Compiling the Enhydra Application • Running the Application • Q&A

CHAPTER

11

224


In this chapter you’ll learn how to use Java technology in the MobileDev development environment. Along the way, you’ll learn the answers to the following questions: • What is Java? • What is Lutris Enhydra? • Why should I use MobileDev with Enhydra? • How do I go about creating an application using MobileDev and Enhydra?

Introducing Java and Enhydra The Java programming language is undeniably one of the hottest technologies for the Internet. Programmers have embraced the elegant design of Java technology, which makes it easy to write robust, error-free object-oriented code. Portability and security features have also helped Java garner high praise across the industry. Given the popularity of Java technology, we thought it would be a good idea to devote a chapter to Java and how to use it with MobileDev. As you may have noticed, MobileDev does not offer Java as an application server technology when you define a new project or when you use the wizards to create your decks. But don’t let that stop you; using MobileDev with Java—or any other application server technology—is easy. This chapter shows you how. The examples in this chapter use Enhydra 3.1 from Lutris Technologies. Enhydra is a popular open source Java/XML application server. For your convenience, the Enhydra installation package is included on the CD at the back of this book. Why Enhydra? We like its sophisticated application framework, which divides application objects into presentation, business, and database objects. Dividing your application this way makes sense because it allows you to isolate the data and business objects from the presentation objects, minimizing application maintenance costs. Another plus for Enhydra is its Application Wizard, which effortlessly generates a “stub” wireless application.

How Enhydra Works When a microbrowser requests an Enhydra URL (it’s a file with a .po suffix), Enhydra passes the request along to the corresponding presentation object. For example, if SearchBy.po is called, the presentation object SearchBy is called. When called, the presentation object is created dynamically by a Java file and a template WML file. For example, SearchBy is created by SearchBy.java using SearchBy.wml. In these examples, you will be creating and editing default Java files created by the Enhydra Application Wizard and using template WML files created in MobileDev.

Java and MobileDev CHAPTER 11

Installing Enhydra

• Java 2 Software Development Kit (SDK) 1.3. • Lutris Enhydra 3.1 for Windows (the open source version). See Appendix A, “Setup,” for installation instructions.

Creating an Application: An Overview The procedure for creating a Java application using MobileDev and Enhydra is actually fairly simple. In summary, the steps are as follows: 1. Use MobileDev to create a static application. By using MobileDev to create your WML or presentation layer, you will benefit from MobileDev’s many strengths; for example, the Document Editor’s syntax-checking features. 2. Use Enhydra to create the Java project, along with the presentation objects and required classes. 3. Modify the default Enhydra project to work with the decks created with MobileDev. In the pages that follow, you’ll use these steps to build an application called CameraLand.

About the CameraLand Application The application you are going to create is pretty basic but shows the types of things you would normally expect to see in a business-scale application, such as variable substitution, passing parameters, and data access. The CameraLand application, shown in Figure 11.1, consists of three decks that allow a user to find camera information based on brand and model name. The information returned includes the price and a description of the selected camera.

FIGURE 11.1 The CameraLand application contains three decks.

11 JAVA AND MOBILEDEV

To follow along with this chapter, you will need to install the following software products, both of which are available from the CD at the back of the book:

225

226


Creating the MobileDev Project To create this application, the first thing to do is to make a static MobileDev project containing three decks. Follow these steps: 1. Launch MobileDev. 2. Create a new project (see Figure 11.2) with the following properties: • Name: CameraLand • Browser Brand: Nokia 7110 • Type: WML • Application Server: Static Documents

FIGURE 11.2 Create a new static project using MobileDev.

NOTE If you create the project using a Document Path that is different from /CameraLand, you will have to modify the link information (URLs) used in the examples that follow. Alternatively, you could edit the Enhydra configuration file and establish /CameraLand as the URL root.

The SearchBy Deck The first deck in the project asks users to select the camera brand, or manufacturer, that they want to research: Canon, Nikon, or Pentax. After it is selected, the brand information is passed to another deck that lists models made by this manufacturer. Follow these steps to create the SearchBy deck:


1. Choose Project, Add Deck, and run the Input Deck Wizard. This wizard can either create an input field or a selectable list of options; in this case, you’re going to create a list.

NOTE Do not use underscores for deck or card names. Java does not support them.

3. In Advanced Options, uncheck Enable Back Key and click Next. 4. In Data Entries, define the following variable to hold the user’s choice of camera brand and then click the button under Advanced (see Figure 11.3): • Variable Name: SelVar • Title and Caption: Select a brand: • Style: Select

FIGURE 11.3 Click Advanced and fill in the list of camera manufacturers.


2. Specify SearchBy as the deck name and click Next.

227

228


5. In Advanced Select, specify the choices that will be listed for the user and click OK: Display Text Value Canon Canon Nikon Nikon Pentax Pentax In a more sophisticated application or in an application with a changing set of values, you could take these values from a database, but here you’re hard-coding them for simplicity. 6. Click Finish. You’ll see the SearchBy deck on your Application Map, along with the automatically generated undefined deck and link. Remember that whenever you define a browser variable, MobileDev assumes you’ll want to pass it somewhere, so it creates a temporary card to receive the variable. However, because you are working with Java instead of with one of MobileDev’s supported application servers, you cannot resolve the undefined link with the Link Wizard. Instead, you can use the Document Editor to add the link manually. 7. Open SearchBy in the Document Editor and change the link to the UndefinedLink card as follows: • Change the value of href=”#UndefinedLink” to href=”/CameraLand/ SelModel.wml?SelVar=$(SelVar)”

• You can delete the UndefinedLink Card—it won’t be used in this example. 8. Close the Document Editor and save the project.

The SelModel Deck The second deck in the project presents the user with a menu of camera models of the brand they have chosen and asks them to select the model they are interested in. Their choice of camera is passed to the next deck, where information about their camera is displayed. Because MobileDev does not completely support Java as an application server, you can’t use the Menu Deck Wizard to create this menu automatically; however, you can add the WML code manually. Follow these steps to create the SelModel deck: 1. Launch the Display Deck Wizard, add a deck called SelModel, and then click Next and Finish. 2. Open SelModel in the Document Editor and replace the automatically generated code for the card with the following code (you can cut and paste the code from the SelModel_wml.txt file included on the CD):


<prev/>

This markup code is similar to the code generated by the Menu Deck Wizard for a dynamic menu. It will generate a list of selectable items based on results obtained from a data source. When a user requests this deck, the Enhydra application server will replace the anchor text, This is the text to replace, and the <setvar> value, valtoreplace, with real values before the list is displayed. You’ll learn more about the Enhydra side of this application in a minute. 3. Close the Document Editor and save the project.

The Details Deck The last deck in the project displays a description and the price of the camera the user has chosen. Follow these steps to create the Details deck: 1. Launch the Display Deck Wizard and add a deck called Details. Click Next and then Finish. 2. Open Details in the Document Editor and replace the automatically generated code for the card with the following code (you can cut and paste the code from the file Details_wml.txt, included on the CD):
Camera information:

The price

The description


<do type=”prev”><prev/>
Available models:

This is the text to replace <setvar id=”AnchorSet” name=”VarMod” value=”valtoreplace”/>

229

230


If you have done the Enhydra Getting Started, you already know that the text for the Price and Desc paragraphs is just a placeholder; it will be replaced with real information at runtime. In this case, it will be replaced with camera price and description information from a data source. 3. Close the Document Editor and save the project.

Creating the Enhydra Project After the MobileDev project and the decks have been created, the next step is to create the “stub” Enhydra application.

NOTE To do this section, you must have Enhydra installed on your computer. See Appendix A, ”Setup,“ for details. If you are not already familiar with Enhydra, we recommend that you do the Enhydra Getting Started. Doing the Getting Started serves two purposes: it introduces you to the Enhydra way of doing things and tests your installation.

Create the new “stub” WML application using the Enhydra Application Wizard as follows: 1. Open the Enhydra Shell. 2. Type appwizard and press Enter to launch the Enhydra Application Wizard. 3. In the Select a Generator page (see Figure 11.4), specify Enhydra Super-Servlet as the Generator and click Next.

FIGURE 11.4 Select Enhydra Super-Servlet.


4. In the Client Type and Directory Details page, specify WML as the Client Type and then specify a Project Directory Name, Package name, and path, as shown in Figure 11.5.

Note that the Package name follows Java naming conventions—no mixed case allowed.

FIGURE 11.5 Specify the name of your WML project.

5. The other wizard defaults are fine, so click Finish. 6. Click OK when the AppWizard Complete message appears.

Modifying the Default Enhydra Project When you create the Enhydra project, a number of directories containing default Java and WML files are generated. To make the Enhydra project work with the MobileDev project, you’ll need to edit these files, which are all located in the . . ./CameraLand/Src/CameraLand/ Presentation directory. For brevity, we will call this directory the Presentation directory. Follow these steps to modify the default Enhydra project to use with the MobileDev decks: 1. Copy the MobileDev WML files (they are in the CameraLand\Documents directory) to the Presentation directory. 2. Make three copies of the WelcomePresentation.java file found in the Presentation directory and name the files SearchBy.java, SelModel.java, and Details.java.


NOTE

231

232


You will modify the default Java code generated by Enhydra to work with your MobileDev application. The default code contains almost everything you need to drive the application, so it is a good place to start.

The SearchBy Java Page As you just saw, the SearchBy.java page was created by copying the WelcomePresentation.java page. Because the .java file contains instructions on how to create a particular presentation object, in this case WelcomePresentation, you need to edit the file to create a new object called SearchBy and then add more Java code to define the dynamic substitutions and other logic. The SearchBy.java file doesn’t need to do any processing; it simply sends the SearchBy presentation object to be displayed on the user’s microbrowser. Follow these steps to edit the SearchBy.java file (the code is available in the file Searchby_ java.txt located on the CD): 1. Open the SearchBy.java file in a text editor. 2. Change the name of the class from WelcomePresentation to SearchBy. 3. Change all occurrences of WelcomeWML to SearchByWML. 4. Change all occurrences of Welcome to SearchBy. 5. Comment out the following statement using the comment symbol, //: SearchBy.getElementTime().getFirstChild().setNodeValue(now);

This line isn’t required by the application, and if it’s left in, it will cause a problem when it tries to fetch the first child of an element that doesn’t exist. 6. Add the following lines after the last import statements: •

import org.enhydra.wireless.wml.dom.*;

•

import org.w3c.dom.*;

7. Save the file and exit.

The SelModel Java Page Next you can edit the SelModel.java file to add code that will do the following: • Receive the camera brand chosen by the user and included in the URL query string sent by the SearchBy page. • Replace the substitution variables in the WML file with a list of cameras from an array in the Java file. (In this example, you are using an array in the Java file instead of a separate database.) • Send the presentation object containing the list of cameras to the user’s microbrowser.


Follow these steps to edit the SelModel.java file (the code is available in the file SelModel_ java.txt located on the CD):

2. Change the name of the class from WelcomePresentation to SelModel. 3. Change all occurrences of WelcomeWML to SelModelWML. 4. Change all occurrences of Welcome to SelModel. 5. Use // to comment out the following statement: SelModel.getElementTime().getFirstChild().setNodeValue(now);

6. Add the following lines after the last import statements: •


•


7. To simulate accessing data from a database, you can add an array in the Java file. Add the following array definition under the public class SelModel statement: String[][] cameraList = { {“Nikon”, “F5”, “3049.95”, “Totally professional performance.” }, {“Nikon”, “F100”, “1799.95”, “3D matrix metering.” }, {“Nikon”, “F90X”, “1199.95”, “The F90X delivers.” }, {“Canon”, “EOS-1”, “2750.00”, “The ultimate in professional vision.” }, {“Canon”, “EOS-3”, “1759.95”, “A victory for photography.” }, {“Canon”, “ELAN 7”, “639.95”, “A superb piece of craftsmanship.” }, {“Pentax”, “MZ-5N”, “549.95”, “Auto-exposure multi-mode 35mm SLR.” }, {“Pentax”, “MZ-7”, “394.95”, “Compact 35mm autofocus SLR camera.” }, {“Pentax”, “MZ-M”, “290.00”, “TTL auto-exposure multi-mode 35mm SLR.” } };

8. Now you’ll add code that receives the user’s choice of camera brands, retrieves the information from the array, and enters it into the WML file. Add the following code under the //SelModel.getElementTime() statement to accomplish all three things: String selvar = comms.request.getParameter(“SelVar”); WMLAnchorElement startLoop = SelModel.getElementStartLoop(); WMLSetvarElement myvar = SelModel.getElementAnchorSet(); startLoop.removeAttribute(“id”); myvar.removeAttribute(“id”); Node discTable = startLoop.getParentNode(); for(int numCameras = 0; numCameras < cameraList.length; numCameras++) { if (selvar.equals(cameraList[numCameras][0])) { SelModel.setTextStartLoop(cameraList[numCameras][1]);


1. Open the SelModel.java file in a text editor.

233

234

Advanced Topics PART III myvar.setValue(cameraList[numCameras][1]); discTable.appendChild(startLoop.cloneNode(true)); } } discTable.removeChild(startLoop);


The Details Java Page The Details.java file is very similar to the SelModel.java file; it needs to receive the user’s chosen camera, find the information about that camera from an array in the Java file, and then display the presentation object to the user. Follow these steps to add the required code to the Details.java file (the code is available in the file Details_java.txt located on the CD): 1. Open the Details.java file in a text editor. 2. Change the name of the class from WelcomePresentation to Details. 3. Change all occurrences of WelcomeWML to DetailsWML. 4. Change all occurrences of Welcome to Details. 5. Comment out the following statement using //: Details.getElementTime().getFirstChild().setNodeValue(now);

6. Add the following lines under the last import statements: •


•


7. To simulate database access, add the following array definition under the public class Details statement: String[][] cameraList = { {“Nikon”, “F5”, “3049.95”, “Totally professional performance.” }, {“Nikon”, “F100”, “1799.95”, “3D matrix metering.” }, {“Nikon”, “F90X”, “1199.95”, “The F90X delivers.” }, {“Canon”, “EOS-1”, “2750.00”, “The ultimate in professional vision.” }, {“Canon”, “EOS-3”, “1759.95”, “A victory for photography.” }, {“Canon”, “ELAN 7”, “639.95”, “A superb piece of craftsmanship.” }, {“Pentax”, “MZ-5N”, “549.95”, “Auto-exposure multi-mode 35mm SLR.” }, {“Pentax”, “MZ-7”, “394.95”, “Compact 35mm autofocus SLR camera.” }, {“Pentax”, “MZ-M”, “290.00”, “TTL auto-exposure multi-mode 35mm SLR.” } };


String camera = comms.request.getParameter(“VarMod”); for(int numCameras = 0; numCameras < cameraList.length; numCameras++) { if (camera.equals(cameraList[numCameras][1])) { Details.setTextPrice(“$$” + cameraList[numCameras][2]); Details.setTextDesc(cameraList[numCameras][3]); }}discTable.removeChild(startLoop);


Compiling the Enhydra Application Enhydra uses a make utility and the contents of various make files to specify which components of an application should be compiled and linked. For this application to work, you must add the Java files you’ve just created and edited (and their associated classes) to the make file located in the presentation directory. Follow these steps to add the information to the make file: 1. Using a text editor, open the make file; it’s a file named Makefile located in the presentation directory. 2. Add the following entries to the WML_CLASSES section: SearchByWML SelModelWML DetailsWML

3. Add the following entries to the CLASSES section: SearchBy SelModel Details

4. Save the file and exit. After the information has been added for your application, the contents of your make file should look like this: # # CameraLand # ROOT = ../../.. PACKAGEDIR = Cameraland/presentation WML_CLASSES = WelcomeWML SearchByWML SelModelWML DetailsWML WML_DIR = .


8. Add the following to receive the user’s camera choice, find information about the camera in the array, transfer the information to the WML file, and then display it to the user. Add the following code under the //SelModel.getElementTime() statement:

235

236

Advanced Topics PART III CLASSES = WelcomePresentation SearchBy SelModel Details XMLC_WML_OPTS_FILE = options.xmlc include $(ROOT)/config.mk

Mapping File The CameraLand MobileDev application uses embedded links (URLS) that reference WML files. You need to map these to .po files for the application to work in the Enhydra environment. Fortunately, there is an easy way to do this—by editing the options.wmlc file. To remap the links: 1. Open the options.wmlc file located in the project’s presentation folder. 2. Add the following mappings: -urlregexpmapping ‘/CameraLand/Details.wml’ ‘Details.po’ -urlregexpmapping ‘/CameraLand/SelModel.wml’ ‘SelModel.po’

3. Save the file and close it.

Making the Application To make and start the CameraLand application, follow these steps: 1. Open the Enhydra Shell. 2. Use the CD (change directory) command to go to the top-level (also called the application root) CameraLand directory. 3. Type make and press Enter. 4. After the application compiles, type CD output. 5. Type ./start and press Enter.

Running the Application Now that you’ve created the application, try it out to see if it works as you expect. Figure 11.6 shows what’s going on: 1. Launch your phone simulator from the Programs menu; for example, the OpenWave UP.Simulator. 2. Type the URL into the URL field. For example, http://localhost:9000/SearchBy.po Note the .po extension. 3. The simulator displays a list of camera manufacturers and prompts you to choose one. Go ahead and pick your favorite camera brand.


4. Next, you’re shown a list of camera models by that manufacturer, and again you are prompted to choose one. 6. Use the Back button to select other models or brands, and then close the simulator when you’re done.

1 The user chooses a camera manufacturer…

Select a brand: 1 Canon 2 Nikon 2 Pentax

OK

Available models: 1 [EOS-1] 2 [EOS-3] 3 [Elan 7]

Link

2 …and a camera model.

Back

Camera information: $369.95 A superb piece of craftsmanship.

Back

FIGURE 11.6 The CameraLand application gives information about cameras.

3 The application displays information about the chosen camera.


5. The price of your chosen camera is shown, along with a brief description.

237

238


Summary In this chapter you learned how to integrate the WML pages created in a MobileDev project into an Enhydra project to create a WAP application that takes advantage of MobileDev’s unique strengths—its visual environment, wizards, and helpful editors—and Enhydra’s Javabased application server technology.

Q&A Q. What are the advantages to using MobileDev to develop your application? A. You can use the Document Editor to help compose your markup code and verify its syntax and use the integrated simulator to see how the decks display. Q. What Java code should you use to receive the value of a parameter that has been passed in the following URL: “/CameraLand/SelModel.wml?SelVar=$(SelVar)”? A. The following Java code will receive the value of the SelVar parameter and assign it to a string called selvar: String selvar = comms.request.getParameter(“SelVar”);

Q. Where is the best place to get information on the Enhydra Java development environment and its packages, classes, and methods? A. Take a look at the Enhydra Application Server 3.1 API documentation, available where Enhydra was installed (for example: /usr/local/enhydra3.1/doc/user-doc/index.html).

The Future of the Wireless Internet

IN THIS CHAPTER • Reality and Dreams • WAP 2.0 • What Else Is There? • Complementing Technologies • Open Technology—It’s Up to You • What Others Say • The Future of MobileDev

CHAPTER

12

240


In this final chapter, we’ll look at some of the forces driving the wireless Internet phenomenon and make a few guesses about where it’s all going. We’ll also answer—or try to answer—the following questions: • When will we have videos and music on cell phones? • What are 2G, 2.5G and 3G? • What is XHTML and what does it mean for the wireless Internet? • Where is MobileDev going?

Reality and Dreams Trying to predict the future of any technology and how it will affect us is not an easy task. There is no shortage of information, commentaries, predictions, and promises about the wireless Internet. You can read articles by industry analysts on the Web and in magazines, and you can look at company brochures and documentation from the technology contributors and from the stakeholders in the wireless Internet industry. Some of the information out there is based on reality—on what is actually available today—but a lot of it is what we call “proof of concept,” otherwise known as dreams. Let’s not discount dreams entirely; don’t forget that it is by dreaming that we push forward the boundaries of technology and our world. So it may turn out that some of our dreams will come true, after all. But here we’d rather concentrate on what we think is realistically possible for the WAP world in the next few months and years. Let’s look at some of the technology that exists today and see where it may lead us. Factors that are likely to affect the future of the wireless Internet include • The user interface, or the capabilities of the wireless device • The network bandwidth, or the size and speed of the transmission • Markup language advancements, in particular something called XHTML • Competing standards such as I-Mode in Japan

User Interface The most visible factor affecting the quality and success of the wireless Internet is the user interface of the cell phone itself. Today’s clunky interface, and its limited graphical capabilities and sound features make it difficult for users to fall in love with the idea of wireless applications. People may think that if we can have a 2-inch color television with high-resolution color, action, and sound, why can’t we have the same thing on a cell phone?

The Future of the Wireless Internet CHAPTER 12

241

In one sector of the wireless industry, in fact, much progress has been made to enhance the visual and interface capabilities of a wireless device: we mean, of course, the PDA or Personal Digital Assistant. PDAs are handheld devices that combine a larger screen (more like 3"×4") with computing, telephone, and Internet features. Moreover, PDAs have addressed the problem of data entry by letting you enter data with a tiny keyboard or a touch screen and stylus. One of the latest offerings is the Palm m505 handheld shown in Figure 12.1, which provides 65,000 colors, movie-clip capability, and an Internet connection.

12 THE FUTURE OF THE WIRELESS INTERNET

FIGURE 12.1 The Palm m505 handheld provides Internet connectivity.

We believe that the future will see the convergence of cell phones and PDAs, and it seems that this is no dream. Already the market is introducing smartphones, which combine features of PDAs and mobile phones. These devices are slightly larger than regular cell phones but offer the graphical, data-entry, and extra computing features of PDAs. Examples being introduced are the Kyocera smartphone shown in Figure 12.2, the LG smartphone, the Samsung SPH-1300, the Microsoft smartphone, the Ericsson R380, and the Symbian quartz-based models, which all offer mobile phone and PDA features.

242


FIGURE 12.2 The Kyocera smartphone integrates a Palm handheld and an Internet-capable cell phone.

It’s important to note the difference between PDAs with cell-phone capabilities and cell phones with PDA features. In theory, both devices provide the same functionality; however, we believe that cell phones with PDA features stand the best chance of being accepted in a market dominated by cell phones. The smartphone developers may well be onto something big. Of course, there are wrinkles to be ironed out with the smartphones: some reviewers complain that smartphones don’t properly integrate the functions of a phone and a PDA and that they give us the worst of both worlds rather than the best. (That’s Stewart Alsop’s opinion in “Convergence Is Still a Myth,” in the May 28, 2001 edition of Fortune magazine.) But another reviewer in the same Fortune magazine edition sees the possibilities that convergence may bring. As mobile phones incorporate display features of the PDA, the difference between the Web browser and the WAP browser will become significantly smaller, to a point where accessing Web pages and mobile Internet pages will probably be very similar.


243

You may think that improved graphical capabilities are required only for playing games, showing movies, or engaging in other forms of entertainment. Although it’s true that games are big business in the world of technology, let’s not forget that graphics can be important in a strictly business sense, as well. Imagine, for example, a pipeline engineer on the road who receives a notification on his cell phone to warn him of a problem with a pipe. Wouldn’t it be useful for our engineer to be able to view the pipe in two, or even three, dimensions and to receive all the data needed to troubleshoot the problem?

Network Bandwidth

Luckily, the network infrastructure companies have been taking action to enhance their products to give us that greater speed and bandwidth. Let’s take a look at what is being currently cooked up for the near future to improve the type, quality, and usefulness of wireless Internet data services.

2G, 3G and 2.5G Networks Currently, the main cellular phone network technologies are said to be 2G, or second generation. (The principal feature of 2G is that it uses digital technology, compared to the first generation of cell phones, which were analog.) This technology delivers wireless Internet content at speeds that average 14.4Kbps but that are often as slow as 9.6Kbps in parts of Europe. This relatively slow speed directly affects the type and quality of information that users can access from their cell phone. Our pipeline engineer wouldn’t be able to access all that graphical information and data without faster speeds. For some time, we were told that the future of network bandwith would be 3G, a third generation to replace the second. This new 3G technology is meant to increase bandwidth to 384Kbps in mobile applications and up to 2Mbps for fixed users. Both of these numbers represent a huge increase over the current 14.4Kbps. However, it would seem that 3G is stalled—not solely for technological reasons, but also for regulatory reasons. In most countries, cellular network companies must purchase the right to


However, all the graphical improvements in the world will not improve the wireless Internet experience for users if the speed of the transmission and the network bandwidth are not increased. In fact, the continuing enhancement of both interface and transmission speed is necessary to improve the success and user acceptance of wireless Internet data services. These two factors must come together; improving the network speed without improving the device capabilities doesn’t offer much, because the user will still be limited by the capability of the device. Similarly, improving the device interface without improving the network speed won’t do much good either, because the amount of data transfer will not be adequate to serve the rich content that the device would support.

244


use government-controlled frequency spectra. This added complexity has slowed the deployment of 3G technology to the point where we are now being offered a short-term compromise, nicknamed 2.5G. This half-generation solution uses existing technology and in-place government regulation of frequencies, but it is still able to promise faster transfer rates (up to 144Kbps). In addition to offering faster throughput, these wireless networks technologies will enable devices to be “always connected,” meaning that they will not have to establish a connection with the network operator for each data transfer, as is the case today. Also, 2.5G technology will enable network operators to charge the subscriber based on packets (“packet-switched” networks) instead of air time (“circuit-switched” networks), which will potentially translate into savings for the public. GPRS (General Packet Radio Service) is one such network technology that may be introduced for public use in certain geographical areas by the time this book is released.

What Does “Up To” Really Mean? These bandwith numbers are estimates provided by the companies involved in creating the network technologies. The real transfer speed available to consumers depends on the mobility of the user and whether the bandwidth is shared between people. For example, when we’re told that 2.5G networks will offer speeds of “up to 144Kbps,” it means that a stationary user may experience that top range, but users who are walking will get a slower rate, and users in cars an even slower one. Furthermore, as the shared bandwidth increases, so will the amount of data that will be transferred, and in the end we may end up facing similar transfer speed issues that we are currently experiencing. From this point of view, WAP has an advantage over standard Web pages using HTML and HTTP because WAP was created specifically to work with devices that have limited capabilities over relatively low bandwidth, by offering things such as effective data compression.

Markup Languages and XHTML The third factor in the future of the wireless Internet is something that is invisible to users: the language in which content is delivered to wireless devices. Currently, several markup languages are used with the wireless Internet. The major ones are • WML, supported by the WAP protocol, and its predecessor, HDML • CHTML, used in NTT DoCoMo’s I-Mode technology in Japan Both the WAP Forum and DoCoMo have announced that they plan to migrate their markup languages to XHTML (Extensible HTML) within the next year or so. XHTML is a new form of HTML based on the XML technology that is intended to provide a standard that will serve both wired and wireless devices.


245

NOTE What’s XML? XML is short for eXtensible Markup Language; it’s not so much a language itself as a specification for languages, defining the standards they must adopt.

The premise of WAP based on XHTML is that as the user interface and network bandwidth improve, XHTML content will be able to offer formatted text, better images, and an overall improved screen layout. Added to these improvements are other XHTML extensions that will push back the current multimedia limitations and may let you include animation, music, and even videos in your wireless applications.

WAP 2.0 The next version of WAP, version 2.0, is expected shortly (the WAP Forum is scheduled to vote on this standard in the fall of 2001). If it goes forward as planned, WAP 2.0 will support XHTML as well as WML and will offer a range of other improvements. In fact, this next revision of the WAP technology promises to really rock your world. It is said to have the potential to significantly increase the WAP user acceptance by offering a wide range of new technologies based on Internet standards and new services. Leading WAP Forum members have been hard at work for some time designing the new version to be in accord with the natural evolution of the Internet industry and in sync with the demands of wireless consumers. WAP 2.0 is said to be able to offer streaming media and music downloads, color display, location-specific content, animation, and it allows users to synchronize information with personal information manager (PIM) software on a desktop PC in a remote location. These new features will be possible because WAP 2.0 will support XHTML and TCP (Transmission Control Protocol), two technologies that follow Internet standards, and open doors to new wireless Internet services possibilities. When will you be able to use services based on WAP 2.0 and XHTML? Well, this depends on a few things: device support, WAP gateway support, network operator offering, phone carrier


XHTML is very similar to HTML 4.0, and it will enable developers to create applications that are more versatile, easier to maintain, and able to serve content to both wireline and wireless devices. It is expected that within a relatively short time (one or two years, depending on the acceptance rate), both traditional Web browsers and WAP browsers as well as PDA browsers and even I-Mode browsers will support XHTML. This standardization of markup language should make the life of developers much easier and will ultimately let you access the Internet from any device without sacrificing features or efficiency.

246


offering, not to mention consumer readiness. Here are a few reasons why it may take some time until you are able to access XHTML applications from your phone: • Microbrowser manufacturers do not yet support the new technology. Fortunately, they have been investigating it for some time, so they should be able to support it soon. • Phone manufacturers will have to update their existing phones, create new models that support the new microbrowser, and replace their inventory already out in the stores. • WAP gateway manufacturers do not yet support the new WAP technology. However, like the microbrowser manufacturers, they should be able to support it soon. • Network operators must support the new gateways, and the phone carriers must offer the new models. • Consumers may already own a wireless Internet phone and may not want to replace it right away. • New phones that will support WAP 2.0 will cost more than the older models, which will make some consumers wait for the price to drop. It may take up to a year and a half from the time WAP 2.0 standards are accepted before they become mainstream worldwide. And of course, by then, work will probably have started on the next evolution of these technologies. It’s a never-ending cycle of evolution!

Is WAP Dead? But what about those who say that WAP is dead, or at least dying? Recently, some Web articles and reports have painted a negative picture of WAP technology, of WAP applications, and of WAP’s acceptance by users. However, as you probably know, you shouldn’t form an opinion based on just one or two Web articles. To understand the current state and future success of WAP, you should really consider a number of factors—some related to WAP itself, others related to enabling technologies such as cellular networks, and yet others related to the overall user experience spanning all geographic areas and all types of industries. Those who are well informed about the current state of WAP consider all these factors and base their views on proven, objective wireless magazines, information from the WAP Forum, and articles and reports written by trusted and objective writers. When viewed together, these sources paint a very different picture—one that is objective, constructive, and downright positive. That there are many negative articles is not necessarily a reflection of WAP’s actual condition, but rather the result of a snowball effect caused by writers who decided to write about the WAP concept without taking all the information into consideration. In fact, you will find that many


247

of those articles were written by people located in areas that do not benefit from an enjoyable WAP user experience because of problems related to their cellular networks’ speed and stability—or lack of it. One of those reports is the famous “WAP Usability Report” written in December 2000 by the Nielsen Norman Group and available (for a fee) from www.nngroup.com/reports/wap. This report gave a negative view of WAP and its acceptance largely because it didn’t take the geography factor into consideration. Some articles that provide a more balanced treatment of the WAP phenomenon include the following:

• Web Review’s “The Great WAP Debate,” by Meryl Kaplan Evans, which is a response to the Nielson Norman report and features opinions from Speedware Corporation, the creator of MobileDev. Evans ends the article by suggesting that “Rumors of WAP’s death have been greatly exaggerated.” This article is available from www.webreview.com/ 2001/02_16/strategists/index01.shtml. When everything is taken into account, we strongly believe that WAP is doing just fine and that it has achieved the first of its goals, which is to provide a technology that works within the limitations of today’s mobile devices and networks. As we see it, WAP is • Perfect for what is was designed to do • Tailored to the limitations of the current technology • Used in hundreds of useful sites and applications • An important technology innovation that will follow a natural evolution to the next stage, whatever that may be But even in the worst-case scenario, our advice is what we’ve been saying throughout this book: invest in a good design tool that will shield you from the fluctuations of the technological choices in the wireless industry. In future versions of MobileDev, for example, things such as protocol, language, and end user device could all just be choices in a dialog box. The whole point of using a design tool is that you can concentrate on the logic of your application and let the design tool worry about the underlying technology.

THE FUTURE OF THE WIRELESS INTERNET

• ZDNet’s conversation with Dr. Jacob Nielson, in which Nielson gives many hints and tips for creating good WAP applications. He says, among other things, that what is needed is a different writing style, one that provides “small pearls of content,” rather than the wordier style of the Web and the printed world. This conversation is available (and it’s free) at www.zdnet.com/products/storie/reviews/0,4161,2699359,00.html.

12

248


What Else Is There? As mentioned in Chapter 1, “The Wireless World,” WAP is not completely alone as a provider of standards for the wireless Internet. There are other protocols and technologies out there that provide the same service but in a more limited way. Some of these include I-Mode, J2ME, and BREW. (Yes, more acronyms.)

I-Mode Consideration I-Mode is the name given to a technology introduced by NTT DoCoMo in Japan for mobile Internet services. It is based on CHTML (compact HTML), a form of HTML that is already XML compliant, so the proposed migration toward XHTML should be relatively painless for the players involved. There are even some rumors about I-Mode merging with WAP, but there’s no confirmation on this yet, so we’ll see what happens. Currently, I-Mode has more than 23 million subscribers in Japan. Compared with WAP’s estimated 8 million subscribers, I-Mode has a larger—much larger—user adoption. DoCoMo has formed alliances with large companies such as AOL/Time Warner and AT&T and is planning to introduce I-Mode into Europe, North America, and other parts of the world. What this means is that what happens to I-Mode is of interest to wireless Internet developers.

Other Emerging Technologies We should also pay attention to other offerings in the wireless arena that are promising to improve the user interface and other services. One such product is Sun’s J2ME (Java 2 Micro Edition), which is basically a scaled-down version of Java. J2ME will be supported by various wireless devices, including mobile phones. Another product is Qualcomm’s BREW (Binary Runtime Environment for Wireless), which lets you write applications for a whole range of cell phones, without needing to make the usual adjustments for each phone type. As with the devices and networks, the success or adoption of these technologies will help drive forward the wireless Internet concept and hopefully improve its public acceptance.

Complementing Technologies In conclusion, we believe that in the end, the various technologies will merge in a complementary way to offer better wireless services to the consumer. Some issues remain unresolved, such as voice synthesis, voice recognition, alert notifications and location-based services, and will need research, development, and a bit of luck before they become mainstream. However, we can already get a picture, fuzzy though it may be, of what will be possible in the wireless world within a few years. Our ideas are that:


249

• Internet information will be available in a visual form, no matter which device you have. Sitting at your desk at work, at home with your PC, or while you are on a mobile phone, PDA, or smartphone, you will have access to the Internet. • This same information will also be accessible to users who are not in a position to read and interact through the use of telephones or mobile phones, enabling the consumer to speak and listen to information. • Services will be able to bring you information in a much more sophisticated manner than is available today. You will not only be able to access information by asking or looking for it but will also be able to request “push” information so that you are notified of a certain event of interest.

• We’ll use wireless for business more and more. Mobile commerce (M-commerce) and Business to Employee (B2E) applications will become increasingly popular. Wireless Internet commerce is expected to surpass traditional e-commerce in the near future because buyers will be able to purchase things no matter where they are located physically. Similarly, because employees are more and more out of the office, they will benefit from having remote access to information located on a private intranet. In fact, one of the most popular uses of WAP today is with Personal Information Managers (PIMs) that let people access their e-mail, contacts, and various other tidbits of personal information. Businesses are today introducing intranet wireless extensions and are helping the efficiency and productivity of blue-collar workers, warehouses workers, sales agents, and many others.

Open Technology—It’s Up to You But the success of the wireless Internet is not just the responsibility of individual network operators and gateway service providers. It’s also related to a concept called openness: network operators working together to pool their knowledge and share their sites to provide users with the applications they want. What do we mean by openness? When users start their microbrowser on their mobile phone, they are typically presented with a menu of options provided by the operator. Some operators use a method called a closed garden or walled garden and believe that, by limiting what users can access from their phone, they can provide organized and high-quality services. However, this approach is somewhat controversial because many users would prefer to make their own choices about what they access.

THE FUTURE OF THE WIRELESS INTERNET

• We’ll continue to use wireless for fun. The original wireless applications—weather, news, lottery, cinema listings, restaurant listings, games, etc.—will still exist and will benefit from improved graphics and bandwidth.

12

250


Others operators take the open garden approach that lets users create the menu they want and access and bookmark any sites they like. In the end, the approach that will become standard is the one that users like. If they prefer an open approach, for example, they will go with the operator offering this type of service. Network operators have a big role to play in the success of the wireless Internet because they have control of the initial information and choices displayed to the consumer. In Europe and other parts of the world, users can configure their phones to select a WAP provider; however, this practice is not yet prevalent in North America. So it’s up to you as a user to make your preferences known. And it’s up to you as a developer to create and publish applications that users will want to visit again and again. You can sit back and let the pros develop the technologies and improve the devices, the services, and the applications. Or you can participate in this exciting part of history by creating cool and useful applications for the wireless Internet.

What Others Say We asked our friends and contacts in the wireless industry if they had any thoughts they’d like to share on the future of the wireless Internet; this is what some of them had to say: “We are now starting to move beyond the hype as people have started to realize that there’s no such thing as the mobile Internet or wireless Web. We’ll probably not see big 20-inch color screens with huge data pipes going into every pocket anytime soon, but we are starting to see some very exciting mobile e-services and applications pop up on mobile phone screens all over the place. The next generation of WAP technology will accelerate the deployment of valuable me-services and help transform the mobile phone into a true personal trusted device.” Peter E. Vesterbacka Founder HP Mobile E-Services Bazaar “WAP technology holds the promise of extending information and application access well beyond the desktop into the hands of ordinary people. The evolution of mobile technology will make the cell phone an integral part of IT strategy in the coming years.” Bob Petrovic Telus


251

“The growth of WAP in North America has been phenomenal. Every month our growth statistics astonish me and I can honestly say that this ongoing growth in WAP has surpassed my most aggressive forecasts.” Ken Truffen Associate Director & Group Manager, WAP Bell Mobility

The Future of MobileDev

As WAP and the wireless Internet evolves toward XHTML, MobileDev will also follow this natural evolution by continuing to offer features and services that will further increase developers’ productivity and add value to wireless Internet applications. You can expect future versions of MobileDev to provide features to support an improved user interface, database access, Java, and various innovative tools and services.


How does MobileDev fit into this changing pattern of the wireless Internet industry? Since the early design days, the objective of MobileDev’s developers was to help wireless Internet application developers increase their productivity. The idea was that offering developers a proven development methodology and useful timesaving features would enable them to develop better applications, faster.

Appendixes

IN THIS PART A Setup

255

B Glossary

275

PART

IV

APPENDIX

Setup

A

IN THIS APPENDIX • Checklist • Suggested Configuration • Internet Explorer 4 • Web Server • Perl • MobileDev • Ready to Go • Other Goodies • Installing the Openwave and Nokia SDKs • Installing the Java SDK and Lutris Enhydra • Installing WAPDraw

256

Appendixes PART IV

This appendix contains all the information you need to install and configure the software that accompanies this book, so you’ll be able to follow along with the book in creating wireless applications.

Checklist If you want to build the applications that the book describes, you need to have the following software components installed on your PC: • Internet Explorer V4 (SP1)—Included with Windows operating system • A Web server • Perl for Windows or Microsoft ASP • MobileDev 2.0 For the advanced examples, you will need: • The Openwave and Nokia SDKs • The Java SDK and Lutris Enhydra • WAPDraw, a utility for creating wireless bitmaps You’ll see detailed instructions on the following pages.

Suggested Configuration The following system configuration is recommended for running MobileDev: • An IBM-compatible PC with a Pentium II CPU or later • A Microsoft Windows operating system: • Windows NT with service pack 3 • Windows 98 with service pack 1 • Windows 2000 • Windows Me • 64MB application RAM • 12MB hard disk space (full install) plus more for third-party products.

Internet Explorer 4 Before you can install MobileDev, you must have Microsoft Internet Explorer version 4.01 with service pack 1 (or later) installed on your PC. You can download Internet Explorer for free from the Microsoft Web site: www.microsoft.com/ie

Setup APPENDIX A

257

Web Server A Web server is software that lets your computer deliver content over the Internet using a markup language (HTML, HDML, WML, and so on). It complies with HTTP (Hypertext Transfer Protocol), a standard that defines how messages should be formatted and transmitted and what actions Web servers and browsers should take in response to commands. For example, a URL is an HTTP command that every Web server knows how to interpret. Several HTTP Web servers are on the market; for example, Microsoft’s Internet Information Server (IIS), WebSite Professional from O’Reilly and Associates, Inc. or the free Apache Web server from the Apache Software Foundation. You should look at your Web needs and check with the various vendors to find the one that best fulfills your requirements. During the MobileDev installation, you’ll be prompted to install the Xitami Web server. If you already have a Web server on your PC, you can use the one you have.

Remember These Directories There are two pieces of information that you should know about your Web server after you’ve installed it. A Web server depends on two directories:

C:\WebSite\htdocs

• CGI directory—The directory location on your computer, under your Web server, where the CGI (common gateway interface) or script files are kept and from which they may be accessed by URLs. It is often named cgi-bin. For example, if you have the Xitami Web server, your CGI directory might be C:\Xitami\cgi-bin

Document and CGI Directories in MobileDev When working with MobileDev, the document root and CGI directories appear in the New Project dialog box when you create a new project, and in the Project tab of the Settings dialog box (see Figure A.1 and A.2). The Document Path field is the directory in which your project’s WML or HDML files will be stored; it starts under your document root directory. For example, if you have the WebSite Pro Web server and you enter the following: Document Path: /TopMovies

SETUP

• Document directory—The directory location on your computer where HTML, HDML, or WML files can be found and from which they may be accessed by URLs. This directory is located within your Web server directory structure and is often named htdocs or webpages. For security reasons, your Web server will never look above this directory for files. If you have WebSite Pro as your Web server, your document root directory might be

A

258

Appendixes PART IV

The files for the TopMovies project will be stored in the following directory: C:\WebSite\htdocs\TopMovies\

The CGI Script Alias field is the directory in which the script files for the project will be stored; it starts under the Web server root and must include the CGI directory name itself or an alias for the CGI directory as specified in the Web server configuration. For example, if you have the Xitami server and you enter the following: CGI Script Alias: /cgi-bin/TopMovies

The files for the TopMovies project will be stored in the following directory: C:\Xitami\cgi-bin\TopMovies\

FIGURE A.1 The Document Path field starts at your document root, but CGI Script Alias includes the CGI directory.

FIGURE A.2 You can view or modify these locations in the Settings dialog box.

Setup APPENDIX A

259

What About Aliases? The CGI Script Alias field is so named because it doesn’t have to be the physical location of the CGI directory under your Web server; it could instead be an alternate name, or alias, as specified within your Web server. For example, if you have WebSite Pro, your CGI directory is named cgi-shl, but you could map the name “/cgi-bin/” to this directory, as shown in Figure A.3. This strategy is useful in a multideveloper environment, in which each developer may have a different Web server, because it lets the developers all use the same directory name (cgi-bin) in their URLs, regardless of their Web servers and the actual physical name of their CGI directories.

A SETUP

FIGURE A.3 Use the Web server’s mapping utility to create an alias.

Auto Mirror Fields The Auto Mirror fields in the Settings dialog box (see Figure A.2) refer to the location of the documents and scripts on your computer, from where they will be accessed in a testing environment when you choose the Run Deck option. These fields—Doc. Folder and CGI Folder—should specify the complete path in your computer’s file system to the document root and CGI directory, and they must use the physical name of the CGI directory, not its alias. For example, if you are using WebSite Pro, you would enter the following: Doc. Folder: C:\WebSite\htdocs\TopMovies CGI Folder: C:\WebSite\cgi-shl\TopMovies

260

Appendixes PART IV

Web Server Versus Browser The difference between a Web server and a Web browser or microbrowser is that a Web server provides content that browsers can access. A browser is the client; it can locate and display content but cannot provide it. In a wireless application, the browser in the phone or other device is often called a microbrowser because it does not have all the functionality of a regular Web browser.

Configure Web Server After the Web server is installed, you need to configure it to let it recognize and handle WML or HDML files. Although the actual steps are slightly different for each Web server, the procedure is essentially the same: you need to specify a MIME content type for the two file extensions. For WML, you’ll specify the following: • File extension: .wml • MIME content type: text/vnd.wap.wml And for HDML, you’ll specify the following: • File extension: .hdml • MIME content type: text/x-hdml The following sections give detailed instructions for specifying the MIME type on different Web servers.

WebSite Pro If you have installed O’Reilly’s WebSite Professional, click the Mapping tab in the WebSite Server Properties dialog box (as shown in Figure A.4) and follow these steps: 1. Click Content Types in the List Selector. 2. Look for .wml or .hdml in the list of File Extensions. 3. If you find it, check that the MIME Content Type is correct. 4. If you don’t find it, display any file extension in the list and modify it for WML as follows: • File Extension: .wml • MIME Content Type: text/vnd.wap.wml Or for HDML as follows: • File Extension: .hdml • MIME Content Type: text/x-hdml 5. Click Add (the Add button is enabled when you change one of the boxes), and then click Apply or OK.

Setup APPENDIX A

261

FIGURE A.4 Use the Mapping tab to add new MIME types.

Apache If you’re using the Apache Web server, you need to edit the httpd.conf file in the Conf directory to add an extra AddType line:

A

• For WML: AddType text/vnd.wap.wml .wml

Xitami If you’re using the Xitami Web server, you need to edit the Xitami.cfg file in the Xitami directory to add an extra line to the [MIME] section: • For WML: wml=text/vnd.wap.wml • For HDML: hdml=text/x-hdml

IIS If you’re using Microsoft’s Internet Information Server (IIS), the procedure for setting the MIME type varies depending on your operating system and version of IIS. The following describes how to configure IIS V5.0 on Windows 2000. If you are running IIS on another platform, please refer to your IIS documentation. To add HDML and WML MIME types to IIS V5.0 on Windows 2000, follow these steps: 1. Click Control Panel, Administrative Tools, Internet Services Manager. 2. Click your machine name and choose Properties. 3. In the Properties dialog box, shown in Figure A.5, click Edit under Computer MIME Map.

SETUP

• For HDML: AddType text/x-hdml .hdml

262

Appendixes PART IV

FIGURE A.5 The Properties dialog box lets you access the MIME types.

4. In the File Types dialog box, shown in Figure A.6, look for .wml or .hdml in the list of registered file types.

FIGURE A.6 The File Types dialog box lets you view the MIME types.

5. If you find it, check that the Content Type (MIME) is correct. 6. If you don’t find it, click New Type and then enter the WML or HDML file extension and MIME Content Type, as shown in Figure A.7: • For WML: text/vnd.wap.wml • For HDML: text/x-hdml

Setup APPENDIX A

263

FIGURE A.7 The File Type dialog box lets you associate an extension with a MIME type.

7. Click OK (several times) to apply your changes and exit. 8. Start or restart the Web server if it was already running. For IIS, you will also need to associate the .pl extension to your Perl executable. Here is how to do it: 1. Click Control Panel, Administrative Tools, Internet Services Manager. 2. Expand the listing under your machine name and select Default Web Site. 3. Right-click and then select Properties. 4. In the Properties dialog box, shown in Figure A.8, click the Home Directory tab and then the Configuration button.

A SETUP

FIGURE A.8 The Configuration button accesses the configuration settings.

5. In the App Mappings tab, shown in Figure A.9, check to see whether you already have Perl mapped to the .pl extension. If not, continue this procedure.

264

Appendixes PART IV

FIGURE A.9 In this figure, Perl has been associated to a .pl extension.

6. Click Add. 7. In the Add/Edit Application Extension Mapping dialog box, shown in Figure A.10, associate the Perl .pl extension to the Perl executable; for example: C:\Perl\bin\Perl.exe %s. Note that the “%s” is required and the “s” must be lowercase.

FIGURE A.10 Make sure you include the %s directive.

8. Click OK, Apply, OK, and OK again to return to the Internet Information Services dialog box. 9. Start or restart the Web server if it was already running.

Setup APPENDIX A

265

Images If you plan to use images or icons in your WAP applications, you need to configure your Web server for the WBMP file type by adding the following MIME content type to your Web server: .wbmp

image/vnd.wap.wbmp

Use the procedure described in the previous section for adding a MIME type to your Web server.

Starting Your Web Server How you start your Web server will depend on your operating system and on the choices that were made during its installation. Typically, a Web server may be launched in one of two ways: • Automatically, as a service, every time you boot your machine • Manually, in which you launch the Web server program when you need it After a Web server is launched, it is always a good idea to test it to make sure it is working properly.

During application development, Web server log files are a great source of information when debugging. Take the time to locate the logs and to familiarize yourself with their content. Some Web servers allow you to customize the log content, so you may want to experiment with this option. Another hint: as a general rule, make sure you relaunch the Web server (stop it and run it again) every time you change one of its configuration options. For example, if you add a new MIME type for WML, make sure you relaunch the Web server.

Service If you installed your Web server as a service, it should start automatically after it is installed. To stop, pause, or relaunch the Web server, open the Windows Control Panel, find your Web server, select it, and perform the required operation.

Manual Launch If your Web server needs to be launched manually, look for the program in the Start, Programs menu or from an icon on the desktop.

SETUP

Log Files and Other Aides

A

266

Appendixes PART IV

Testing a Web Server Testing a Web server to make sure it is running properly is easy: just point your Web server to a URL such as the following: http://localhost/

You should get the default Welcome page that was installed with the Web browser (unless of course you replaced it with one of your own).

Perl MobileDev is open to all runtime technologies and provides specific features to support Microsoft ASP and Perl. Most of the examples in this book are based on Perl because of its popularity and readily-available features that let you create, manage, and access databases. ActiveState provides the binary package of Perl for Windows, called ActivePerl, for free. ActivePerl is installed for you by the MobileDev installation utility, along with the following required modules: • AppConfig Version 1.52 • Template Toolkit Version 1.52 If you chose not to install Perl when you installed MobileDev, you can do so later by launching the installation utility and choosing the Custom option.

MobileDev To install MobileDev, run the setup program and follow the onscreen instructions (for the details, see below). MobileDev is available from the download site or the CD included with this book. After you have installed MobileDev, you will have to register your copy to obtain a trial license key that activates the product. To register your copy, go to the MobileDev Web site: mobiledev.speedware.com/download_center

MobileDev is available in Trial and Registered versions. The version included on the CD is a Trial version.

Trial Version The Trial version of MobileDev is free but requires a license to activate the software. The trial license is available from Speedware. In a Trial version, the following features are deactivated: • Project deployment

Setup APPENDIX A

267

• SourceSafe and multiuser capability • Print dialog box • Loading of data sources • Yospace simulators other than those in the Nokia family Purchasing MobileDev will unlock these features. Most of the features in this book are based on the Trial version, but some require the Registered version.

Registered Version A Registered version of MobileDev is a purchased one. To purchase MobileDev, click Help, Purchase MobileDev, and follow the instructions. You will need a major credit card and a browser with 128-bit security. To upgrade your version of MobileDev from a Trial to a Registered version, click Help, Update License Information, and enter the license information that has been sent to you by e-mail. You will not have to reinstall MobileDev.

Installing MobileDev

1. Insert the MobileDev CD-ROM into your CD-ROM reader. The MobileDev multimedia presentation should start automatically. Take a few moments to view the presentation as it introduces you to MobileDev and to Speedware. If the presentation does not start, use your Windows Explorer to find the MobileDev.exe file and double-click it. 2. To launch the MobileDev installation utility after you have viewed the CD-ROM Intro, access the main Menu, Software Installation, Install MobileDev option. To launch the MobileDev installation manually, use your Windows Explorer to doubleclick the Install.exe file in the \Software folder. The Welcome page appears (see Figure A.11). 3. Click Next. The License Agreement page appears (see Figure A.12). 4. Read the agreement and indicate whether you accept it. If you do not accept the agreement, you will not be able to proceed with the installation. 5. Click Next. The About This Installation page appears (see Figure A.13). This page lists the third-party software installed with MobileDev.

SETUP

To install MobileDev on your machine, follow these steps (please note that the following steps may vary a little depending on your version of Windows):

A

268

Appendixes PART IV

FIGURE A.11 The Welcome page contains version and build information.

FIGURE A.12 The License Agreement page contains important information about the Trial version you are installing.

FIGURE A.13 The About This Installation page details what is going to be installed on your machine.

Setup APPENDIX A

269

6. Click Next. The Installation Options page appears (see Figure A.14). 7. Select an installation option. We recommend that you use the Full option even if you already have some of the third-party products installed; the utility will not replace existing installations.

FIGURE A.14 In Installation Options, choose the Full option.

A

8. Click Next. The Choose Destination Location page is displayed (see Figure A.15).

FIGURE A.15 In Choose Destination Location, specify where you want MobileDev to be installed on your machine.

10. Click Next. The Web Server Installation and Configuration page appears (see Figure A.16). 11. Specify whether you want to install the Xitami Web server that is packaged with MobileDev or whether you want to use one that is already installed on your machine. Although it is possible to use MobileDev without a Web server, having one makes viewing and testing a WAP application a whole lot easier.

SETUP

9. Specify where you want to install MobileDev.

270

Appendixes PART IV

FIGURE A.16 In Web Server Installation and Configuration, specify whether you want to use Xitami or another Web server.

12. Click Next. If you opted to install Xitami, the Xitami installation is launched. Follow the instructions that appear. After Xitami is installed, the Perl Installation page appears (see Figure A.17). 13. Specify where you want ActiveState’s ActivePerl installed. Perl is required to run the MobileDev demo. We highly recommend that you install Perl in the suggested location (C:\Perl). If you install Perl in another location, you may encounter configuration issues.

FIGURE A.17 In Perl Installation, accept the default location.

14. Click Next. The Select Program Folder page appears (see Figure A.18). 15. Accept the default program folder or specify a new or existing one. The program folder specifies where you can access MobileDev from the Windows Start, Programs menu. 16. Click Next. The Start Installation page appears (see Figure A.19). 17. Click Next to start the installation of MobileDev.

Setup APPENDIX A

271

FIGURE A.18 Click Next in Select Program Folder to accept the default.

A SETUP

FIGURE A.19 Click Next in Start Installation to install MobileDev.

During the installation, the Installing page (see Figure A.20) is displayed. Ignore the Time Remaining values because they have nothing to do with reality. After installing the required files on your machine, the Installation Completed page appears (see Figure A.21). 18. In the Installation Completed page, leave the two options checked; reading the readme file is a good idea to make sure you have the latest info on MobileDev, and launching MobileDev means you can get started programming a WAP application right away. Before you start running the MobileDev demo or creating your own application, remember to configure your Web server and to make sure it is started. 19. Click Finish and have fun!

272

Appendixes PART IV

FIGURE A.20 The Installing page lets you know what is being installed.

FIGURE A.21 Make sure you take a look at the readme file.

Ready to Go After you’ve installed the software, you’re ready to start developing wireless applications using MobileDev. Make sure you take a look at the readme file included with the installation, because it will detail any last-minute changes in the software.

Other Goodies The companion CD included with this book contains third-party software and code examples mentioned in the book. We have included these for your convenience and hope you take advantage of them.

Setup APPENDIX A

273

Look in the 3rdparty directory to find the following software: • Openwave SDK 4.1 • Nokia WAP Toolkit 2.1 • Enhydra 3.1 • Java SDK 1.3 • WapDraw Look in the Examples directory to locate any code file examples mentioned in the book. Use a text editor, such as Notepad, to cut and paste from these files as much as you want.

Got Questions? Should you have any questions, the MobileDev Forum is the place to get your answers. To post a question, to make an enhancement request, or to view the latest hint and tips topic, point your browser to mobiledev.speedware.com/support and click the link to the forums.

Installing the Openwave and Nokia SDKs

To install these products, copy the installation package file from the CD to a directory on your hard disk and then double-click the file to launch the installation utility. We recommend that you use the SDK versions shipped with MobileDev. If you have any questions about versions, or about anything else that is MobileDev related, post them on the MobileDev Forum (see the previous section) and someone will get back to you ASAP.

Installing the Java SDK and Lutris Enhydra To do the examples discussed in the Java chapter of this book, you will need to install: • Java 2 Software Development Kit (SDK) 1.3 • Lutris Enhydra 3.1 for Windows (the open source version) The installation programs for these components is included on the MobileDev CD.

A SETUP

For your convenience, both the Openwave and Nokia Software Development Kits (SDKs) are included on the MobileDev CD at the back of this book. Both of these products may be installed and used, as described in their respective software licenses, free of charge.

274

Appendixes PART IV

Java SDK To install the Java SDK on your machine: 1. Copy the j2sdk_1_3_0_02-win.exe file from the CD to a directory on your hard disk. 2. Double-click the file to launch the installation utility. 3. Follow the instructions that are presented to you.

Lutris Enhydra To install Lutris Enhydra on your PC: 1. Copy the Enhydra3.1.exe file from the CD to a directory on your hard disk. 2. Double-click the file to launch the installation utility. 3. Follow the instructions that are presented to you.

Installing WAPDraw WAPDraw version 1.3 is a nifty WBMP editing program that is also included on the MobileDev CD. To install WAPDraw: 1. Copy the wapdraw130.zip file from the CD to a directory on your hard disk. 2. Double-click the file to extract the contents of the zip file. You will need the WinZip file extraction utility to do this. 3. Double-click the WAPDraw.exe file to launch the WapDraw program.

Glossary

APPENDIX

B

276

Appendixes PART IV

This glossary defines terms that you may find unfamiliar and others that are used in a specific sense in the MobileDev environment.

NOTE For more information about terms from the Windows environment, please see your Microsoft manuals.

2G The second generation of wireless technology, currently in effect, which is identified by the use of digital rather than analog technology. 2.5G A promised intermediate step between 2G and 3G, which is intended to provide faster transmission speeds and other benefits. 3G The widely anticipated next generation of wireless technology, which promises huge increases in transmission speed and improved graphical capabilities. acronym An abbreviation made up of the initial letters of several words. For instance, DBMS is an acronym for Database Management System. action link In a wireless application, a link presented via a button on the device or on an onscreen menu. See anchor link. ActivePerl A version of Perl for Windows, available for free from ActiveState (www.activestate.com). ADO (Microsoft ActiveX Data Objects) A high-level interface for data objects. ADO is one of the main components of Microsoft’s Universal Data Access (UDA) specification, which provides a consistent way of accessing data regardless of how the data is structured. alert See notification. alphanumeric character Any displayable or printable character, including numbers and punctuation, in the character set of the current system. See string. anchor link In a wireless application, a link presented within the display text. See action link. Apache A public-domain Web server. applet A small (usually single-purpose) application that is launched by some other application. application A set of software components executed by an end user to perform a given task. Common business applications include inventory control, order processing, customer list maintenance, and payroll administration.

Glossary APPENDIX B

277

Application Map In MobileDev, a graphical representation of the decks, cards, and links in your application. Application server The server-side technology or programming language that provides processing logic and database access for an application. API (Application Programming Interface) A set of routines that an application uses to request services from the operating system or from the lower levels of the network. APIs are provided with many DBMSs. ASCII character set The American Standard Code for Information Interchange 7-bit character set, consisting of 128 (0-127) basic characters. ASP (Active Server Pages) A specification for a dynamically created Web page with a .asp extension that uses scripting—usually VBScript or JScript code. When a browser requests an ASP page, the Web server generates a page with HTML, WML, or HDML code and sends it back to the browser. B2E (Business to Employee) A form of e-commerce or m-commerce based on services and information provided by a company to its employees. An intranet is a form of B2E commerce. See intranet. bandwidth The amount of data, in bytes, that can be transmitted at one time. The speed at which messages are transmitted over a network is determined by the bandwidth plus the latency. See latency. browser Software application used to locate and display Web or WAP pages. Examples include Microsoft Internet Explorer (a Web browser) and UP.Browser (a WAP browser). browser variable In a wireless application, a programmer-defined named value that is stored in the memory of the cell phone or wireless device and whose value may be retrieved and used in the application.

card A screen of information to be displayed in a wireless application. Cards exist in several types, such as display, choice, entry, and nodisplay. card event A predefined action that occurs at runtime during the processing of a card, for which the developer may define another action. carrier Cellular phone service provider, such as Bell Mobility. case sensitive The capability to distinguish between lowercase and uppercase characters. In a case-sensitive program, CUSTNO, CustNo, and Custno are all different names.

GLOSSARY

cache A portion of memory or disk that stores a copy of data that is expected to be used frequently. Access to a cache is very fast.

B

278

Appendixes PART IV

CE (Choice Entry) Items in a list from which the user can select. cell 1. An element or subitem of an array. 2. A value from a table or the graphic equivalent columns on a bar chart, layers on an area graph, and so on. 3. In telecommunications systems, a section of a geographic region served by a wireless telephone transmitter. cell phone see mobile telephone. cellular network Cell phones work on cellular networks, each managed by a network provider. WAP applications can run over nearly all these networks. The cellular network provides the transmission of the signal, and the mobile phone and WAP gateway interpret and handle the content. CGI (common gateway interface) A specification for transferring information from a Web server to a CGI program. CGI program Any program that can accept and return data conforming to the CGI specification. character set The set of characters that a specific computer system recognizes, including letters, digits, and nonprintable characters. CHTML (Compact HTML) A programming language for wireless applications based on HTML. The I-Mode standard uses CHTML. client A process (usually an application program) that requests services (data or another program) from a server process running on a local or remote host computer. See host, server. client/server computing A networked, distributed, multi-CPU computing system in which resources and tasks are shared between processes that request and manipulate data (front ends or clients) and database managers that can manipulate, store, and provide data (back ends or servers). comment A message written by the programmer among the code lines for system documentation. Comments are delimited by special characters so that they will be ignored by the computer. configuration A systematic arrangement of the computers, peripherals, applications, character sets, and so on in an installed computer system. constant A value to be accepted as specified; can appear in an expression. data aware A mobile telephone that is able to access the Internet. Also called Internetcapable or .COM ready. database A structured set of data, organized for a particular purpose.

Glossary APPENDIX B

279

database interface See API. DBMS (database management system) The data ultimately used by an application (names, dates, amounts, codes, and so on) is stored in a database and manipulated through the DBMS. deck A WML or HDML file containing one or more cards that make up a wireless application. default A value supplied without being specified. deploy To transfer an application to a production computer and make it available to end users. design time The time during which an application is being built by a developer. See runtime. desktop The area on a screen on which windows are displayed. See window. developer Anyone (programmer, analyst, and so on) who creates or modifies an application. device A network entity that is capable of sending and receiving packets of information and that has a unique device address. device driver The software that the system uses to communicate with a device such as a display, printer, mouse, or communications adapter. display card In a wireless application, a card that presents formatted text and/or images to the user. DNS (domain name system, or service) An Internet service that translates domain names into IP addresses. docked A subordinate window that is fixed to the side of the main window of an application. See floating and MDIChild.

dynamic An application in which some or all of the presentation layer code (HTML, WML, or HDML) is generated at runtime by a server-side technology such as Perl, ASP, or Java. e-commerce Conducting marketing, sales, and other business online, via the Internet. end user The person who interacts with an application but does not modify it, as distinct from the programmer or developer who creates and maintains the application. Editor The title of the MobileDev Script Editor when it is handling a Perl or ASP file. Enhydra An application server from Lutris Technologies that incorporates Java technology.

GLOSSARY

domain name A name that identifies one or more IP addresses. For example, the domain name speedware.com represents four IP addresses.

B

280

Appendixes PART IV

entry format A group of characters that provides a pattern or picture of acceptable input values. Entries that do not match the pattern are rejected. environment Computer hardware and software components available for a specific purpose. See platform. environment variable A string containing information about a computing environment, such as platform, speed, and so on, that may be referenced by name. expression A sequence of variables, constants, functions, and operators within a server script statement; evaluated when the statement is executed. An expression may supply any unit of information required by the application. In its simplest form, an expression is a constant. external application Any other program available on the computer, such as e-mail, apart from the active application. extension The period and letters at the end of a filename, which identify the type of information contained in the file, such as .exe for executable programs. firewall A system designed to prevent unauthorized access to or from a network. All messages entering or leaving the network pass through the firewall, which examines each message and blocks those that do not meet the specified security criteria. floating A subordinate window that is not docked to the edge of the main window and which can be moved and resized. FTP (File Transfer Protocol) computer systems.

A set of rules for transferring files to and from remote

GML (Geography Markup Language) A programming language that is specialized in providing the geographic location of a person or other object. HDML (Handheld Device Markup Language) Currently used in North America as the presentation language used for Internet applications on mobile devices or cell phones. It consists of tags and options in the familiar format, plus URLs (Uniform Resource Locators) to specify pages or services to access. Files containing HDML use the .HDML suffix. See WML. HDML Editor The title of the MobileDev Document Editor when it is handling an HDML deck. HDML template In MobileDev, a WML or HDML file that includes MobileDev proprietary tags and elements. The template page is translated by MobileDev into standard WML or HDML at runtime. host In a distributed or client/server environment, the computer on which server processes are running. See server.

Glossary APPENDIX B

281

HTML (Hypertext Markup Language) The programming language that defines how Web pages are formatted and displayed. HTTP (Hypertext Transfer Protocol) The underlying protocol of the Web. Defines how messages are formatted and transmitted and what actions Web servers and Web browsers should take in response to various commands. HTTPd A Web server running as a daemon process. hyperlink An element in an electronic document, including Web pages, that links to another place in the same document or to an entirely different document. icon A pictorial or graphical representation of an object or function available on a computer. IDE (Integrated Development Environment) A programming environment integrated into an application. I-Mode A wireless Internet protocol developed in Japan by DoCoMo, an offshoot of NTT, Japan’s telephone operator. See also WAP. IIS (Internet Information Server) Microsoft’s Web server that runs on Windows NT and 2000 platforms. input card In a wireless application, a card that defines a prompt field that asks users to enter information. Internet A global network connecting millions of computers. The Internet has more than 300 million users worldwide, and that number is growing rapidly. Unlike online services, which are centrally controlled, the Internet is decentralized by design. Each Internet host computer is independent.

intranet An internal network, usually within a company, that provides Internet-like services to employees and other internal users. IP address A unique identifier for a computer or device on a TCP/IP network. The format of an IP address is a 32-bit numeric address written as four numbers separated by periods. Each number can be zero to 255. For example: 192.134.45.204. Java

A programming language developed by Sun Microsystems. See also Enhydra.

JavaScript A scripting language developed to enable the design of interactive Web sites.

B GLOSSARY

Internet-capable cell phone A mobile phone containing a microbrowser that interprets and displays information, also called a data-aware phone. It typically has a small display screen and a limited keyboard that lets users display and enter data.

282

Appendixes PART IV

JScript A Microsoft Windows scripting language. JScript can be used both for simple tasks (such as mouseovers on Web pages) and for more complex tasks (such as updating a database with ASP). JSP (Java Server Pages) Invented by Sun Microsystems, it allows the easy creation and maintenance of server-side HTML pages. Conceptually, JSP pages are similar to ASP pages. latency The time it takes a message or a part of a message to travel over a network. The speed at which messages are transmitted over a network is determined by the latency plus the bandwidth. See bandwidth. license key In MobileDev, a username and password combination that activates the Trial version or upgrades to the Registered version. License keys are available from the MobileDev Web site (mobiledev.speedware.com); the license key for the Trial version is free. link See hyperlink. linked object A program or operation accessed via another program or operation—automatically or at the user’s request. local database A database residing on the same computer as the application that uses it. logic layer The server-side programming code that provides the processing logic and database access for an application. The logic layer is paired with a presentation layer, which defines the user interface of an application. location The fully qualified name or pathname of a file. lock A procedure that restricts access to the data in a file. Locks prevent more than one process from reading or updating data at the same time. Log Window In MobileDev, a window that provides an easy means to trace system activities and to spot and resolve errors in your application development process. login, logon The keywords or keystroke sequence entered by an end user to identify himself or herself to the application system. mandatory A value that must be supplied to the application. If it is omitted, the application will not proceed. m-commerce Conducting marketing, sales, and other business on wireless devices. MDIChild In MobileDev, a subordinate window that is not docked to the edge of the main window but that can be positioned in any location. menu A list of choices available to the end user of an application.

Glossary APPENDIX B

283

menu bar A list of choices displayed to the end user in the form of a horizontal bar across a screen or window. microbrowser A type of Web browser with small file sizes that can accommodate the low memory constraints of handheld devices and the low bandwidth constraints of a wireless handheld network. MIME (Multipurpose Internet Mail Extensions) A specification for handling different types of data contained in a file. mobile telephone Also called a cell phone; a handheld telephone device that uses wireless (radio) transmissions to communicate with other telephone subscribers. network operator The operator of a cellular network. network protocol Standards that control how networked computers communicate with each other and exchange data. notification In a wireless application, information sent to a cell phone or other handheld device by prearrangement with the user but without the user asking for it explicitly every time. NSAPI (Netscape Server API) NSAPI allows programmers to create Web-based applications that are more sophisticated and run much faster than applications based on CGI scripts. numeric expression An expression containing variables, constants, functions, and operators that yields a numeric value. The expression need not be composed only of numerals or digits. object 1. Anything that can be defined and addressed as a unit. The components that make up an application: databases, Web pages, script logic, and so on. 2. In object-oriented programming, a set of properties and methods with a user interface. object expression In object-oriented programming, a specification for a particular object; can include any of its containers.

operator A symbol or word for an operation. Examples: arithmetic operators are + – / * and logical operators are AND, OR, NOT. OS (operating system) The underlying system that manages the basic functions of a computer. Examples: HP-UX, Windows NT, MPE/iX. parameter The variable name of a value passed to and from a subprogram; its scope ends when the subprogram ends.

GLOSSARY

ODBC (Open Database Connectivity) In the Microsoft operating system environment, a set of intelligent database drivers that translate a request for data from an application on a PC into the native server access language of various vendors’ databases, and then route the request from the application to the database.

B

284

Appendixes PART IV

password A string of characters that confirm a user’s eligibility and identity. Passwords are usually set and changed by the individual. pathname See location. PDA (Personal Digital Assistant) A handheld device combining voice, computing, and networking features. Perl (Practical Extraction and Report Language) A programming script language designed for processing text. Because of its strong text-processing capabilities, Perl has become one of the most popular languages for writing CGI scripts. Perl is popular on Apache Web servers. physical location See location. PIM (Personal Information Manager) A wireless handheld device that provides e-mail, contacts, addresses, and other organization features. platform Computer hardware and its specific operating system. See environment. plug-in A program that extends the capabilities of another program in a specific way. preprocessor directive A command in the source code that will be compiled and executed before the rest of the application. For example, the Perl Script preprocessor directives start with a #!. presentation layer The markup code that defines the user interface, or look, of an application. The presentation layer is usually complemented by a logic layer, which provides the processing logic and database access. See logic layer. print To display information on a computer screen or on paper via a printing device. procedure A named sequence of statements executed as a unit. programmer See developer. prompt field An area in an application that asks the user to input information. property An attribute of an object. proxy server A Web server located on a firewall machine. push See notification. record A set of values for one occurrence of the columns in a table; a logical unit of information. Example: a table contains the columns Name, Age, and Region; one record might hold AARDVARK, 21, DESERT.

Glossary APPENDIX B

285

Registered version In MobileDev, the full-featured version of the MobileDev software that may be purchased from the MobileDev Web site (mobiledev.speedware.com). When you purchase the Registered version, you receive a license key that upgrades your Trial version. resource A network data object or service that can be identified by a URL. runtime The time when an end user interacts with the application; the compiled code is being executed. The runtime environment consists of program files. See design time. script An ASCII file that can be executed to generate an executable file or to carry out a given operation. SDK (Software Development Kit) A collection of software tools that helps developers create, test, and maintain software applications. Wireless SDKs typically include a cell phone simulator, programming language documentation, code examples, but no integrated development environment. select card In a wireless application, a card that prompts users to choose an option from a list and defines one or more actions to occur when they do so. self-describing database A database that contains the definition of its own structure. server A process that provides services or data to a client process. Client and server processes can be local (on the same computer) or remote (on different computers linked by a network). server script A relatively simple programming language or file that provides processing logic that will run without user interaction. server-side technology A programming language such as Perl, ASP, or Java that provides processing logic and database access to an application.

shortcut key A keystroke or sequence of keystrokes that invoke a command; alternative to one or more mouse clicks on menus or dialog boxes. simulator In the wireless development context, a piece of software that provides the appearance and functionality of a mobile phone or other device; it is used by developers to test wireless applications without requiring a real mobile phone. smartphone A combination cell phone and PDA, providing voice calls, Internet access, e-mail, and other computing features. sort To arrange items in a specified sequence, usually alphabetical or numerical; can be ascending order (A to Z, low to high) or descending order (Z to A, high to low).

B GLOSSARY

servlet An applet that runs on a server. The term usually refers to a Java applet that runs within a Web server environment.

286

Appendixes PART IV

spawn To create a nested context. SQL (Structured Query Language) A language for managing a relational database system; the de facto standard for such languages. stateless session A stateless session can be thought of as a one-transaction session. Each transaction is a new session, with a new context, that is discarded when the session is terminated—that is, when the transaction is completed. The Web is intrinsically stateless because each request for a new Web page is processed without any knowledge of previous pages requested. state-oriented session The Web is intrinsically stateless. Because a state-oriented session is extremely useful, developers have developed a number of techniques to add state to the Web. static A Web or WAP application in which the source code that makes up the application is hard-coded in HTML, WML, or HDML. See dynamic. string One or more alphanumeric characters. subscriber ID A unique code that identifies a mobile phone or other handheld device. substitution variable A variable whose value is set in a script program and then displayed in HDML or WML files via server script code. template 1. In MobileDev, a WML or HDML file with a .TMPL extension containing substitution variables whose value is dynamically supplied at runtime by a server-side application technology. 2. An application based on template files. text Strings of ASCII characters intended for reading by a programmer or end user, rather than code to be compiled and executed. text editor Any software that handles text electronically; also called an ASCII editor, line editor, and so on. toggle A control that alternates between two states, usually on/off. ToolTip A standard Windows control that provides a small pop-up window with descriptive text, such as a label, for a control or graphical object. Trial version In MobileDev, the free version of the MobileDev software. In the Trial version, some features are not available and users are reminded from time to time that they may want to upgrade to the Registered version. twip A typographical measurement equal to 1/20 of a point, which in turn is 1/72 of an inch. UP.Browser The microbrowser software from Openwave Systems Inc. (formerly Phone.com, formerly Unwired Planet) that is incorporated into most phones available in North America.

Glossary APPENDIX B

287

UP.Link Server A product suite from Openwave that includes a WAP gateway. Also referred to as UP.Link. UP.Phone A cellular phone that incorporates the UP.Browser. UP.Simulator Software included in the UP.SDK that simulates the behavior of the UP.Browser. UP.SDK The Software Developer Kit from Openwave. Contains many tools required by developers to create WAP applications aimed at the Openwave family of microbrowsers. URI (uniform resource identifier) A generic term for all types of names and addresses that refer to objects on the Web. A URL is an example of a URI. URL (uniform resource locator) The global address of documents and other resources on the Web. The first part of an address indicates what protocol to use; the second part specifies the IP address or the domain name where the resource is located. user agent Any software or device that interprets HDML, WML, WMLScript, or resources. variable An object with a specified name and attributes, which stores values during application execution; not necessarily a column in the database. Valid values for any variable depend on its type. See browser variable, substitution variable. VBScript (Visual Basic Scripting Edition) A scripting language developed by Microsoft based on the Visual Basic programming language. viewer A phone simulator attached to the MobileDev design environment that lets you see and test your application. A simulator is available from phone.com as part of its software development kit. W3C (World Wide Web Consortium) An international consortium of companies involved with the Internet and the Web.

WAP (Wireless Application Protocol) An international standard designed to let users access Internet-based information and services from mobile phones, pagers, two-way radios and Personal Digital Assistants (PDAs). WAP application An application developed for the wireless Internet. To use a WAP application, users need a mobile phone containing a microbrowser that interprets and displays information. Mobile phones with these capabilities are called Internet capable or data aware. They typically have a small display screen and a limited keyboard to display and enter data.

GLOSSARY

WAE (Wireless Application Environment) The environment that enables a wide range of applications to be used on wireless devices.

B

288

Appendixes PART IV

WAP gateway A bridge between a cellular network and the Internet. WBMP (Wireless Bitmap) A graphical format optimized for mobile computing devices. Web (World Wide Web) A global network of servers (the Internet) that supports the display of graphical and interactive documents created with programming tools such as MobileDev. Browsers such as Internet Explorer and microbrowsers such as the UP.Browser make it easy to access the Web. Web page A document on the Web. Every Web page is identified by a unique URL. Web server A computer that delivers Web pages to browsers. Every Web server has an IP address and sometimes a domain name. A computer becomes a Web server by installing server software—such as Apache, IIS, WebSite, or Xitami—and connecting to the Web. WebSite Professional A Web server from O’Reilly Software. whitelist A computer hacker term for a list of people or objects that are explicitly admitted, in contrast to a blacklist. Win32::ODBC An ODBC extension for ActivePerl, a Windows version of Perl. This extension mimics the ODBC interface within Perl, making it easy to port ODBC code to and from other languages. (The :: in the name comes from the C++ double colon scope resolution operator that lets you qualify a function to uniquely identify it.) window A defined area on a screen. Any section that displays information on the screen can open a window, which closes when the section terminates. A section that does not open a window can use an active window opened by another section. wireless Internet A set of interconnected protocols and technologies that let users access Internet services and information from an Internet-capable mobile phone or other handheld device. The wireless Internet includes the WAP protocol, Internet-capable cell phones, cellular networks, WAP gateways, the HDML and WML languages, and the Internet itself. wizard A utility within an application that helps you use the application to perform a particular task. For example, the MobileDev Deck Wizard leads you through the steps of adding a deck to the Application Map. WML (Wireless Markup Language) Currently the de facto standard in Europe as the presentation language used for Web pages. It consists of tags and options in the familiar format, plus URLs to specify pages or services to access. WML Editor The title of the MobileDev Document Editor when it is handling a WML deck. WMLScript A scripting language used to program a mobile device. WMLScript is an extended subset of the JavaScript scripting language.

Glossary APPENDIX B

289

WMLScript Editor The title of the MobileDev Script Editor when it is handling a WMLScript file. WSP (Wireless Session Protocol) The binary equivalent of HTTP, supporting the transmission of encoded WML. WTA (Wireless Telephony Application) An environment that provides a means to create telephony services using WAP. See WTAI. WTAI (Wireless Telephony Application Interface) A set of telephony related functions in a wireless device that can be invoked using WML or WMLScript. WWW (World Wide Web) See Web. Xitami An open source Web server. XHTML (eXtensible HTML) An upcoming programming language combining HTML and XML, designed both for Web and wireless applications. XML (eXtensible Markup Language) A specification developed by the W3C, designed especially for Web documents.

B GLOSSARY

2.5G networks, 244 2G networks, 243 3G networks (future of WAP), 243

A About card, 120 option links, 122 accepting languages, 214 Access (Microsoft), 143 accessing databases, 143-144 accessing databases, 143-144 ASP, 150 action links, 88 options, 89 WML, 88 ActivePerl, 266 ActiveX Data Objects. See ADO Add Deck command (Project menu), 226 Add Deck dialog box, 46, 77, 104-105, 116 Add WMLScript dialog box, 156 Add/Edit Application Extension Mapping dialog box, 264 adding action links, 89-90 anchor links, 91 images, 85-87 WMLScript, 128, 153

INDEX

292

adjusting display properties

adjusting display properties, 49 ADO (ActiveX Data Objects), 167 alerts. See notifications aliases (CGI), 259 anchors, 91 adding, 91 WML code, 91 animated images, 93-94 logos, 206 running, 208 Apache Web servers, 261 appearance, application map, 49 application, 71 Application Browser (MobileDev), 24-27 Application Map (MobileDev), 24-27, 141 links, 52 Application Map (MobileDev), 180 application maps, 48 appearance, 49 application servers, 69 ASP, 69 design choices, 67 static documents, 69 technologies, 71 applications, 7, 9 Auto Mirror, 54 browsers, testing, 55 decks, 46, 48

developing multiple browsers, 71 dynamic, 128 Enhydra, 235 example, 42-44 international, 214 Java, 225-229 decks, 228 running, 236 location-based, 190-191 markup code, 70 MobileDev, 20 dynamic, 24 static, 24 Movies, 34 Nokia 7110 browsers, 42 running, 53 server code, 70 testing, 29 troubleshooting, 55 ASP (Active Server Pages), 15, 69-71 see also VBScript databases, 150 processing directives, 148 templates, 69 calling, 149 template project, 148 variables, retrieving, 150 VBScript, 130, 148 Auto List Members, 98 Auto Mirror, 54 Auto Mirror fields, 259 Automatic Parsing, 177

B Back keys, 106 browsers, 106 bandwidth future of WAP, 243-244 limitations, 244 BitsNPieces project, 72-78 browsers Back keys, 106 brands, retrieving, 211 cell phones, 10-11 choosing, 67 creating applications, 58 Database Browsers, 167-174 designing choices, 67 Display Deck Wizard options, 108 generic, 68 HDML, 69 image optimizing, 209-213 languages, 216-218 limitations, 215 Nokia 7110, 68 simulators, 11 supported brands, 68 testing, 55-57 UP.Browser, 69 variables, 95, 112 WML, 69

Database Browsers

C caching (Display Deck Wizard), 109 calling templates (ASP), 149 card events, 93 animated images, 93-94 WML, 93 card-to-card links, 115 cards, 26, 43 About, 120 creating, 104-105 decks, comparing, 120 doaction, 139 naming, 113 undefined, 113 WML, 81 CD (included with book), 272 cell phones benefits, 10 future, 242 limitations, 10 microbrowsers, 11 MobileDev, 21 simulators, 11 cellular networks, 13 CGI (Common Gateway Interface), 142 Perl code, 142 script alias, 259 CGI Script Alias, 42 character sets, 214 checklists (software requirements), 256

choosing browsers, 67 server technology, 71 Chroma Code, 99 CHTML (Compact HTML), 14 closed gardens, 249 Code Editor, switches, 207-208 codes language-specific applications, 217 Perl, automatically generated, 132 viewing, 53 WML, 77, 79 action links, 89-90 anchors, 91 animated images, 94 editing, 98 examples, 78 coding, WTAI, 205 colors (MobileDev default settings), 177 columns, pasting information, 31 commands File menu Deploy Project, 171 New Project, 42 Refresh Project, 161 Project menu Add Deck, 226 View menu Application Browser, 27 Script Editor, 28 Toolbars, 31

companion CD, 272 comparing different browser applications, 58 WML and HDML, 76 compiling Enhydra applications, 235 configuring Web server, 260 connecting decks, 43 to destination computers, 171-174 containers, 184-185 controlling cache (Display Deck Wizard), 109 creating cards, 104 greetings, 104-105 customizing toolbars, 32

D data loading into browsers, 167, 170-174 parameters, 136 pasting (Database Browser), 171 Data Link Properties dialog box, 168 Database Browsers (MobileDev), 24, 30, 167 ADO, 167 loading into browsers, 167, 170-174 pasting information, 171

293

294

databases

databases accessing ASP, 150 script, 143-144 Deck Default Properties dialog box, 49 Deck Input Wizard options, 113 allow empty input, 113 Format, 113 Max Length, 113 password, 113 options link, 120 resolving links, 118-119 Deck Wizard, images, 206 deck-to-card links, 115 deck-to-deck links, 115 decks, 26, 43, 56-57, 79 cards, comparing, 120 connecting, 43 creating, 46-48, 104-105 dynamic, 145 font, 50 input, 110-112, 116-117 Java applications, 225-229 linking, 52, 114 locking, 160 markup code, 70 second deck, 51 server script code, 70 welcome, 105 WMLScript, 154-156 default properties, changing (application map), 50

demos, simulators, 35 Deploy Project FTP, 174 transferring files, 171-174 Deploy Project command (File menu), 171 Deploy Project dialog box, 171 deploying projects, 171 designing adding images, 85 application server choices, 67 browsers, 67 markup language choices, 67 style guides, 64-66 tips, 65-66 Details Java page, 234 developing applications, multiple browsers, 56-57 browsers, 67 choosing markup language, 67 locally (MobileDev), 21 MobileDev, 21 projects, sharing, 162-164 WAP, 16 with script, 131 dialog boxes Add Deck, 46, 77, 116 Add WMLScript, 156 Add/Edit Application Extension Mapping, 264

Data Link Properties, 168 Deck Default Properties, 49 Deploy Project, 171 Load a Data Source, 167 Location Access List, 192 Location Settings, 193 New Project, 43 New SourceSafe, 163-164 Settings, 26 SourceSafe, 165 Login, 163 WebSite Server Properties, 260 Whitelist URL, 192 Dialogs library (WMLScript), 153 directives, 131 Perl, 131 directories, 257 CGI, 42 disabling Back keys, 106 SourceSafe, 166 Display Card Wizard, 44 display cards, 45 WML, 81 Display Deck Wizard, 44-46, 51, 104-105 Advanced Options, 108 browsers, 108 caching control option, 109

future of WAP

Generate a Key to Previous Task option, 109 restricting access option, 108 Specify This Deck as New Task option, 110 location-based applications, 197 display properties (application maps), 49 displaying font, 49 location-based application, 196 text, 49 doaction, 139 docking toolbars, 31 windows (MobileDev), 24 Document Editor, 28, 98 (Mobile Dev), 24 Document Path, 42 document prologue, 80 document types, 69 domains, 108 dynamic applications, 128, 145 MobileDev, 24

E editing markup code, 98 projects (SourceSafe), 164-165 WMLScript, 153 Editor tab (MobileDev), 176 editors, 36 emerging technologies, 248 Enhydra, 224 example project, 230-231 compiling, 235 modifying projects, 231, 233-235 examples accessing databases (Perl), 143-144 anchors (WML), 91 animated images, 93-94 creating input decks, 117 Enhydra project, 230 Hello World application, 42-44 separate browsers, 56-57 Java application, 225-229 decks, 228 language-specific applications, 217-218 MobileDev projects, 23-24 parameters, 137-138 style guides, 65-66

substitution variable ASP script, 149-150 switch files, 207-208 TopMovies projects, 72 WML code, 14, 91 images, 206 usage, 72, 77 WMLScript, 153-156

F File menu Deploy Project command, 171 New Project command, 42 Refresh Project command, 161 files server script, 128 template, 128 transferring (Deploy Project), 171, 173-174 Float library (WMLScript), 153 floating toolbars, 31 fonts appearance, 49 application map, 49 deck, 50 FTP (Deploy Project), 174 future of WAP, 240, 246 2G, 243 bandwidth, 243-244 complementing technologies, 248

295

296

future of WAP

emerging technologies, 248 I-Mode, 248 interfaces, 240 limitations, 246 negative articles, 247 PDAs, 241 smartphones, 242 speed, 243-244 WAP 2.0, 245-246 XHTML, 244

G gateways, 13 Generate a Key to Previous Task option (Display Deck Wizard), 109 generic browsers, 68 Geography Markup Language. See GML global applications, 214 GML (Geography Markup Language), 190 location-based applications, 195 grouping objects (container), 184-185 guides, styles, 65-66

H Handheld Device Markup Language. See HDML

HDML (Handheld Device Markup Language), 14, 69, 76 comparing with WML, 76 MobileDev, 21 templates, 69 viewing code, 53 Hello World application, 42 help MobileDev, 32 WMLscript, 100, 152 highlighting lists, 35 history of WAP, 9 HTML, 14

I I-Mode, 248 icons, 87 IIS (Microsoft Internet Information Server), 261-263 images, 84-85, 205, 265 animated, 93-94 logos, 206 MIME types, 85 optimizing for browser brands, 209-213 switching, 207-208 WAPDraw, 86 WBMP, 85 WML, 85-87, 206 imaginary users, 192 improving bandwidth, 243-244

initiating voice calls, 205 input cards, 46 WML, 82 Input Deck Wizard, 44, 111 users, 116-117 input decks, 110-112, 116-117 installing Enhydra, 225 Java, 225 MobileDev, 21, 267 UP.Simulator, 38 interfaces, future, 240 international applications, 214 simulating, 215 Internet cell phones, 10 finding help, 33

J-L Java, 15, 71, 224 decks, 225-229 Details page, 234 example application, 225-229 running, 236 example applications, remapping links, 236 SearchBy page, 232 SelModel page, 232 Land library (WMLScript), 153 language-based applications, testing, 219

MobileDev

language-specific applications, 217-218 languages, 214 future of WAP, 244 global, 214 optimizing, 216 retrieving with Perl, 219 support, 215 learning WML, 72, 78 libraries (WMLScript), 152 limitations, 246 browsers, 215 cell phones, 10 WML, 123 Link Wizard, 44, 52, 114, 145 linking decks, 43, 52, 114 parameters, 140 links, 26, 43, 52, 57, 88 action, 89-90 adding, 52 anchor, 91 card events, 93 card-to-card, 115 deck-to-card, 115 decks-to-deck, 115 options, 119 remapping, 236 unresolved, 118-119 lists highlighting, 35 my Substitution, 133 Load a Data Source dialog box, 167 loading databases into browsers, 167, 170-174

Location Access List dialog box, 192 Location Settings dialog box, 193 location-based applications, 190-191 Mobile Location Server, 190 movie theater example, 191-192, 195-200 Perl, 198 registering sites, 191 running, 199 testing, 191-192, 195-200 locking decks, 160 objects, 160 Log tab (MobileDev), 179 logic layers, 15 logos (animated), 206 running, 208 Lutris Enhydra. See Enhydra

M mapping files, 236 markup languages, 14-15, 69, 76 choosing, 67 codes, 70 markup templates, calling ASP, 149 MDI Child window (MobileDev), 24

Menu Deck Wizard, 44, 137 menus, 45 pop-ups, 32 microbrowsers, 10-11 Microsoft Access. See Access Microsoft Visual SourceSafe. See SourceSafe MIME, 131 types, 85 Mobile Location Server, 190 location-based applications, 190 MobileDev, 20, 266 Application Browser, 27 Application Map, 25-27 applications dynamic, 24 static, 24 browsers, supported brands, 68 cell phones, 21 CGI directories, 257 Database Browser, 30, 167 default settings, 175-177, 181-183 Application Map, 180 color, 177 containers, 184-185 Editor, 176 Log tab, 179 Project, 182 Simulators tab, 179 SourceSafe, 177

297

298

MobileDev

demo, 24 document directories, 257 Document Editor, 28 environment, 24 features, 21 HDML, 21 help, 32 installing, 21, 267 interface, 22 Java applications, 226 local development, 21 location-based applications, 195 MDI Child window, 24 multideveloper mode, 160-161 Phone Simulator, 29 projects, 23-24 protocol, 21 Script Editor, 28 SDKs, 30 server-side technologies, 21 toolbars, 31 views, 24, 30 Wizards, 44 WML, 21 MobileDev Deck Wizard, automatically generated code, 132 modifying Enhydra projects, 231-235 movie theater example (location-based applications), 191-200 Movies applications, 34 moving toolbars, 31

multideveloper mode, 160-161 my Substitution list, 133

N naming cards, 113 projects, 48 navigating Back keys, 106 simulators, 35 negative articles (future of WAP), 247 networks cellular, 13 closed gardens, 249 open garden, 249 New Project command (File menu), 42 New Project dialog box, 43 New SourceSafe Project dialog box, 163-164 Nokia optimizing images, 209-213 style guide, 66 Yospace, 11 Nokia 7110, 68 Nokia WAP Toolkit, 20 noop tags, 106 notifications, 221

O objects grouping (containers), 184-185 locking, 160 refreshing, 160 unlocking, 161 online help MobileDev, 33 options links, 122 WML, 100 open gardens, 249 openness, 249 Openwave UP.SDK kit, 20 UP.Simulator, 11 WML Application Style Guide, 65-66 WML Language Reference, 87 optimizing for languages, 216 images for browser brands, 209-213 options links, 119-120 online help, 122

P Parameter Definition, 140 parameters, 136 examples, 137-138 linking, 140 Perl code, 142 retrieving ASP, 150

retrieving

parsing WML files, 80 passing parameters, 140 pasting columns, 31 data (Database Browser), 171 paths, 109 PDAs (Personal Display Assistants), 240 Perl, 15, 71, 130, 266 accessing databases, 143-144 automatically generated code, 132 location-based applications, 198 parameters, 141 code, 142 retrieving browser brand, 211 script, 212 retrieving language information, 219 Script Editor, 29 shebang, 131 Template Toolkit, 131 templates, 69 variables, adding values, 135 Web site help, 130 Personal Display Assistants. See PDAs personal information location. See PIM Phone Simulator, 29 (Mobile Dev), 24 phone simulators, 11 UP.Simulator, 11

phones. See cell phones photographs. See images PIM (personal information location), 245 PL extension (add in front), 116 pop-up menus, 32 prev (add carrots) tag, 106 processing directives (ASP), 148 programming languages, 15 styles, 64 Project menu, Add Deck command, 226 Project tab (MobileDev), 182 projects (MobileDev), 23-24, 33, 72 application maps, 48 decks, 46, 48 deploying, 171 editing (SourceSafe), 164-165 Enhydra example, 230 Hello World, 42-44 saving, 48 sharing (SourceSafe), 162-164 TopMovies, 72 VBScript, 148 prologue, 80 prompt fields, 35 prompting users for name, 110, 112

Properties dialog box (MobileDev), 26 property sheets (WML), 100 protocol, 9 MobileDev, 21 push. See notifications

R receiving parameters, 141 Refresh Project, 161 Refresh Project command (File menu), 161 refreshing objects, 160 project, 161 registering location-based sites, 191 relinking unresolved links, 118-119 remapping links, 236 requirements software checklist, 256 system, 256 resolving links, 118-119 resources (WMLScript), 152 restricting access (Display Deck Wizard), 108 retrieving browser brands (Perl), 211 data with ASP, 150 parameters (ASP), 150

299

300

retrieving subscriber ID information

retrieving subscriber ID information, 204 retrofitting objects, 50 returning data, 144 rules (WML), 97 running applications, 53, 123 Java, 236 location-based applications, 199

S saving projects, 48 script, 128 adding to WML, 128 databases, 143-144 parameters, receiving, 141 Perl, 130 substitution variables, 133-135 VBScript, retrieving data, 150 WMLScript, 152, 156 script alias (CGI), 259 Script Editor (Mobile Dev), 24, 28 Perl, 29 Script Editor command (View menu), 28 SDKs (Software Development Kits), 20 simulators, 30 SearchBy Java page, 232 second decks, 51

security, 221 select cards, 82 SelModel Java page, 232 server script code, 70 server script files, 128 Settings dialog box, 26 shared projects (SourceSafe), 162-165 shebangs (Perl), 131 ShowMovies Deck (example), 137-138 WML code, 139 simulating internationalization, 215 location-based applications, 194 simulators, 29, 35 cell phones , 11 MobileDev, 30 navigating, 35 text editors, 36 UP.Simulator, 11 installing, 38 Yospace, 11 Simulators tab (MobileDev), 179 smartphones, 242 software checklist, 256 Web server, 257 SourceSafe default, 177 disabling, 166 sharing projects, 164 switching to MobileDev, 166

SourceSafe dialog box, 165 SourceSafe Login dialog box, 163 speed (future), 243-244 static applications, 24 static documents, 69 String library (WMLScript), 153 styles, 64 guides, 64-66 tips, 65-66 Web sites, 65 subscriber ID, 204 retrieving information, 204 UP.Link Servers, 204 substitution variables, 132 script, 133-135 ShowMovies example, 140 VBScript, 149-150 WML, 133 support, languages, 218 supporting character sets, 215 switches (Code editor), 207-208 switching images, 207-208 MobileDev to SourceSafe, 166 system requirements, 256

WAP

T tags noop, 106 prev, 106 template files, 128 templates, 70 ASP, 69 Perl, 69 testing across simulators, 38 applications, 29 browsers, 55 deployed applications, 174 language-based applications, 219 location-based applications, 191-200 text appearance, 49 editors, 36 tips (WML), 97 toolbars customizing, 32 docking, 31 floating, 31 MobileDev, 31 moving, 31 Toolbars command (View menu), 31 tools, 20 MobileDev, 20 SDKs (Software Development Kits), 20 static, 20

TopMovies project, 72 transferring files (Deploy Project), 171-174 troubleshooting applications, 55

U undefined cards, 113 unlocking objects, 161 UP.Browser, 69 Back key, 106 optimizing images, 210 UP.Link Servers, subscriber ID, 204 UP.Simulator (Openwave), 11 installing, 38 languages, 216 location-enabled applications, 191 users imaginary, 192 input, 111 prompting for name, 110, 112

V variables adding values, 135 browsers, 95, 112 substitution, 132 WML, 133

VBScript, 148 see also ASP, 149-150 help, 131 projects, 148 substitution variables, 149-150 version types, 69 View menu Application Browser command, 27 Script Editor command, 28 Toolbars command, 31 viewing code, 53 projects, 33 refreshed projects, 161 views (MobileDev), 24, 28-30 visual (future), 240 Visual SourceSafe. See SourceSafe

W walled gardens, 249 WAP cell phones, 10 developing, 16 future, 240 3G networks, 243 bandwidth, 243-244 gateways, 13 HDML, 14 history, 9 Web sites, 9 HTML, 14 limitations, 246

301

302

WAP

markup languages, 15 styles, 64 WML, 14 WAP 2.0, 245-246 WAP applications, 7 see also applications basics, 16 cellular networks, 13 features, 16 WAP protocol, 9 WAP Service Designers Guide to Nokia Handsets, 66 WAPDraw, 86 WBMP images (wireless bitmap), 85-87 Web servers, 257 Apache, 261 configuring, 260 IIS, 261-263 images, 265 starting, 265 Xitami, 261 Web sites basic WAP information, 9 Perl examples, 15 Perl help, 130 styles, 65 VBScript help, 131 WebSite Server Properties dialog box, 260 welcome decks, 105 Whitelist URL dialog box, 192

windows (Database Browser), 167 Wireless Application Protocol. See WAP wireless bitmaps. See WBMP wireless design tools, 20 Wireless Markup Language. See WML, 14 Wireless Telephony Application Interface. See WTAI wizards, 44 Display Card, 44 Display Deck, 44-46, 104-105 Input Deck, 44, 111 Link, 44, 52, 114 Menu Deck, 44, 137 WML (Wireless Markup Language), 14, 69, 76 action links, 88-90 adding script, 128 anchors, 91 animated images, 93-94 Auto List Members, 98 basics, 72, 77 card event links, 93 cards, 81 Chroma Code, 99 codes, 79 comparing with HDML, 76 decks, 79 editing, 98

examples, 14, 77 help, 100 images, 85-87, 206 input cards, 82 language-specific applications, 217-218 limitations, 123, 128 links, 88 MobileDev, 21 parameters, link, 141 property sheets, 100 rules, 97 select cards, 82 substitution variables, 133-134 templates, 69 viewing code, 53 WML Application Style Guide, 65-66 WML Language Reference, 87 WMLBrowser library, 153 WMLScript, 152-153 decks, 154-156 editing, 153 examples, 153-156 help, 152 images, 207-208 libraries, 152 Float, 153 String, 153 writing WML, 78 cards, 81 decks, 79 input cards, 82 rules, 97 select cards, 82

Yospace simulator

WTAI (Wireless Telephony Application Interface), 205 coding, 205

X-Y-Z XHTML, 14 future of WAP, 244 Xitami Web servers, 261 Yospace simulator (Nokia), 11, 29

303

315

JAVA 2 SOFTWARE DEVELOPMENT KIT STANDARD EDITION VERSION 1.3 SUPPLEMENTAL LICENSE TERMS These supplemental license terms (“Supplemental Terms”) add to or modify the terms of the Binary Code License Agreement (collectively, the “Agreement”). Capitalized terms not defined in these Supplemental Terms shall have the same meanings ascribed to them in the Agreement. These Supplemental Terms shall supersede any inconsistent or conflicting terms in the Agreement, or in any license contained within the Software. 1. Internal Use and Development License Grant. Subject to the terms and conditions of this Agreement, including, but not limited to, Section 2 (Redistributables) and Section 4 (Java Technology Restrictions) of these Supplemental Terms, Sun grants you a non-exclusive, nontransferable, limited license to reproduce the Software for internal use only for the sole purpose of development of your Javaapplet and application (“Program”), provided that you do not redistribute the Software in whole or in part, either separately or included with any Program. 2. Redistributables. In addition to the license granted in Paragraph 1above, Sun grants you a nonexclusive, non-. transferable, limited license to reproduce and distribute, only as part of your separate copy of JAVA 2 RUNTIME ENVIRONMENT STANDARD EDITION VERSION 1.3 software, those files specifically identified as redistributable in the JAVA 2 RUNTIME ENVIRONMENT STANDARD EDITION VERSION 1.3 “README” file (the “Redistributables”) provided that: (a) you distribute the Redistributables complete and unmodified (unless otherwise specified in the applicable README file), and only bundled as part of the JavaTM applets and applications that you develop (the “Programs:); (b) you do not distribute additional software intended to supersede any component(s) of the Redistributables; (c) you do not remove or alter any proprietary legends or notices contained in or on the Redistributables; (d) you only distribute the Redistributables pursuant to a license agreement that protects Sun’s interests consistent with the terms contained in the Agreement, and (e) you agree to defend and indemnify Sun and its licensors from and against any damages, costs, liabilities, settlement amounts and/or expenses (including attorneys’ fees) incurred in connection with any claim, lawsuit or action by any third party that arises or results from the use or distribution of any and all Programs and/or Software. 3. Separate Distribution License Required. You understand and agree that you must first obtain a separate license from Sun prior to reproducing or modifying any portion of the Software other than as provided with respect to Redistributables in Paragraph 2 above.

316

4. Java Technology Restrictions. You may not modify the Java Platform Interface (“JPI”, identified as classes contained within the “java” package or any subpackages of the “java” package), by creating additional classes within the JPI or otherwise causing the addition to or modification of the classes in the JPI. In the event that you create an additional class and associated API(s) which (i) extends the functionality of a Java environment, and (ii) is exposed to third party software developers for the purpose of developing additional software which invokes such additional API, you must promptly publish broadly an accurate specification for such API for free use by all developers. You may not create, or authorize your licensees to create additional classes, interfaces, or subpackages that are in any way identified as “java”, “javax”, “sun” or similar convention as specified by Sun in any class file naming convention. Refer to the appropriate version of the Java Runtime Environment binary code license (currently located at http://www.java.sun.com/jdk/index.html) for the availability of runtime code which may be distributed with Java applets and applications. 5. Trademarks and Logos. You acknowledge and agree as between you and Sun that Sun owns the Java trademark and all Java-related trademarks, service marks, logos and other brand designations including the Coffee Cup logo and Duke logo (“Java Marks”), and you agree to comply with the Sun Trademark and Logo Usage Requirements currently located at http://www.sun.com/policies/trademarks. Any use you make of the Java Marks inures to Sun’s benefit. 6. Source Code. Software may contain source code that is provided solely for reference purposes pursuant to the terms of this Agreement. 7. Termination. Sun may terminate this Agreement immediately should any Software become, or in Sun’s opinion be likely to become, the subject of a claim of infringement of a patent, trade secret, copyright or other intellectual property right.

What’s on the CD-ROM The companion CD-ROM contains the code developed in the book and related software packages.

Windows Installation Instructions 1. Insert the disc into your CD-ROM drive. 2. From the Windows desktop, double-click the My Computer icon. 3. Double-click the icon representing your CD-ROM drive. 4. Double-click the icon titled MobileDev.exe to run the installation program. 5. Follow the onscreen prompts to finish the installation.

NOTE If you have the AutoPlay feature enabled, the MobileDev.exe program starts automatically whenever you insert the disc into your CD-ROM drive.

Use of this software is subject to the Sun Microsystems, Inc. Binary Code License Agreement contained on page 315 of the accompanying book. Read this agreement carefully. By opening this package, you are agreeing to be bound by the terms and conditions of this agreement. By opening this package, you are also agreeing to be bound by the following agreement: You may not copy or redistribute the entire CD-ROM as a whole. Copying and redistribution of individual software programs on the CD-ROM is governed by terms set by individual copyright holders. The installer and code from the author(s) are copyrighted by the publisher and the author(s). Individual programs and other items on the CD-ROM are copyrighted or are under GNU license by their various authors or other copyright holders. This software is sold as-is without warranty of any kind, either expressed or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Neither the publisher nor its dealers or distributors assumes any liability for any alleged or actual damages arising from the use of this program. (Some states do not allow for the exclusion of implied warranties, so the exclusion may not apply to you.) NOTE: This CD-ROM uses long and mixed-case filenames requiring the use of a protected-mode CD-ROM Driver.

Building Dynamic WAP Applications with MobileDev

Building Web Applications with SVG

Building Web Applications with UML

Building Web Applications with UML

Building Web Applications with SVG

Building Web Applications With UML

Understanding Wap : Wireless Applications, Devices, and Services

Building Applications with Microsoft Outlook Version 2002

Programming C#: Building .NET Applications with C#

Understanding WAP: Wireless Applications, Devices, and Services

Building Applications with the Linux Standard Base

Practical PHP and MySQL: Building Eight Dynamic Web Applications

Getting started with WAP and WML

Building Dynamic Websites with Macromedia Studio MX 2004

Building Dynamic Web 2.0 Websites with Ruby on Rails

Building Dynamic Web 2.0 Websites with Ruby on Rails

Experimenting With Dynamic Macromodels

Wap: A Beginner's Guide

Пособие по написанию WAP-сайтов

Dynamic games theory and applications

Dynamic Laser Speckle and Applications

Building Oracle XML Applications

Building eCommerce Applications

Building Oracle XML Applications

Dynamic Equations on Time Scales: An Introduction with Applications

Cocoon: Building XML Applications

Building Oracle XML Applications

Building eCommerce Applications

Dynamic Games: Theory and Applications

Building Dynamic WAP Applications with MobileDev

Building Web Applications with SVG

Building Web Applications with UML

Building Web Applications with UML

Building Web Applications with SVG

Building Web Applications With UML

Understanding Wap : Wireless Applications, Devices, and Services

Building Applications with Microsoft Outlook Version 2002

Programming C#: Building .NET Applications with C#

Understanding WAP: Wireless Applications, Devices, and Services

Building Applications with the Linux Standard Base

Practical PHP and MySQL: Building Eight Dynamic Web Applications

Getting started with WAP and WML

Building Dynamic Websites with Macromedia Studio MX 2004

Building Dynamic Web 2.0 Websites with Ruby on Rails

Building Dynamic Web 2.0 Websites with Ruby on Rails

Experimenting With Dynamic Macromodels

Wap: A Beginner's Guide

Пособие по написанию WAP-сайтов

Dynamic games theory and applications

Dynamic Laser Speckle and Applications

Building Oracle XML Applications

Building eCommerce Applications

Building Oracle XML Applications

Dynamic Equations on Time Scales: An Introduction with Applications

Cocoon: Building XML Applications

Building Oracle XML Applications

Building eCommerce Applications

Dynamic Games: Theory and Applications

Recommend Documents