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!
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
An Introduction to WAP Application Development
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
The Basics of WAP Application Design
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
BUILDING DYNAMIC WAP APPLICATIONS
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
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
BUILDING DYNAMIC WAP APPLICATIONS
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:
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.
An Introduction to WAP Application Development
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
An Introduction to WAP Application Development PART I
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
The Wireless World CHAPTER 1
• 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
An Introduction to WAP Application Development PART I
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.
The Wireless World CHAPTER 1
• 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
An Introduction to WAP Application Development PART I
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.
The Wireless World CHAPTER 1
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.
1 THE WIRELESS WORLD
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
An Introduction to WAP Application Development PART I
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.
The Wireless World CHAPTER 1
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.
1 THE WIRELESS WORLD
Should you be learning these languages?
15
16
An Introduction to WAP Application Development PART I
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.
The Wireless World CHAPTER 1
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
An Introduction to WAP Application Development PART I
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
An Introduction to WAP Application Development PART I
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.
WAP Design Tools CHAPTER 2
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
An Introduction to WAP Application Development PART I
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.
WAP Design Tools CHAPTER 2
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
An Introduction to WAP Application Development PART I
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.
WAP Design Tools CHAPTER 2
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
An Introduction to WAP Application Development PART I
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.
WAP Design Tools CHAPTER 2
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
An Introduction to WAP Application Development PART I
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.
WAP Design Tools CHAPTER 2
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
An Introduction to WAP Application Development PART I
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.
WAP Design Tools CHAPTER 2
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
An Introduction to WAP Application Development PART I
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
WAP Design Tools CHAPTER 2
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
An Introduction to WAP Application Development PART I
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.
WAP Design Tools CHAPTER 2
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
An Introduction to WAP Application Development PART I
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.
WAP Design Tools CHAPTER 2
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
An Introduction to WAP Application Development PART I
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
An Introduction to WAP Application Development PART I
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
An Introduction to WAP Application Development PART I
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).
Wizarding Up a WAP Application CHAPTER 3
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
An Introduction to WAP Application Development PART I
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.
Wizarding Up a WAP Application CHAPTER 3
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.
3 WIZARDING UP A WAP APLLICATION
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
An Introduction to WAP Application Development PART I
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.
Wizarding Up a WAP Application CHAPTER 3
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.
WIZARDING UP A WAP APLLICATION
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
An Introduction to WAP Application Development PART I
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.
Wizarding Up a WAP Application CHAPTER 3
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.
3 WIZARDING UP A WAP APLLICATION
2. Double-click Display Deck Wizard.
52
An Introduction to WAP Application Development PART I
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.
Wizarding Up a WAP Application CHAPTER 3
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.
WIZARDING UP A WAP APLLICATION
FIGURE 3.19
54
An Introduction to WAP Application Development PART I
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:
Wizarding Up a WAP Application CHAPTER 3
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.“
WIZARDING UP A WAP APLLICATION
Options
56
An Introduction to WAP Application Development PART I
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.
Wizarding Up a WAP Application CHAPTER 3
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.
WIZARDING UP A WAP APLLICATION
Create the Second Card
3
58
An Introduction to WAP Application Development PART I
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.
Wizarding Up a WAP Application CHAPTER 3
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.
3 WIZARDING UP A WAP APLLICATION
PART
The Basics of WAP Application Design
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
The Basics of WAP Application Design PART II
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.
Before Building CHAPTER 4
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
The Basics of WAP Application Design PART II
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.
Before Building CHAPTER 4
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
The Basics of WAP Application Design PART II
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
Before Building CHAPTER 4
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
The Basics of WAP Application Design PART II
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:
Before Building CHAPTER 4
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
The Basics of WAP Application Design PART II
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
The Basics of WAP Application Design PART II
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
The Basics of WAP Application Design PART II
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: <wml> <meta http-equiv=”Cache-Control” content=”max-age=0”/> <do type=”prev”><prev/>
Go ahead, play with fire.
If you want to see what this deck will look like to your users, you can test it right now by sending it to the viewer. If you need a reminder, the steps are 1. Right-click the deck and choose Run Deck, New MobileDev—Yospace 1.0. 2. You may be prompted to configure the Auto Mirror feature (see Chapter 3 for details about this feature). Answer Yes if you are, and then check Auto Mirror Documents and Scripts at the bottom of the Settings dialog box. When you click Apply or Close, MobileDev creates the required directories and files. If you check In the Future, configure this feature again.
Do Not Show This Message,
you won’t be prompted to
3. You’ll see your deck displayed in the phone browser, as shown in Figure 5.2. If you don’t see anything in the simulator, make sure your Web server is running (see Appendix A for details). After you’ve taken a look at your little deck, close the simulator. The next section discusses the WML code that it uses and what else you can add to this file.
Learning About Wireless Markup Language CHAPTER 5
79
BitsNPieces Go ahead, play with fire.
Options
FIGURE 5.2 Your text is displayed in the simulator.
Decks A deck is a file containing one or more cards that appear on a wireless device. You can see why the originators of wireless markup language used the terms “deck” and “card” instead of the Web term “page”; they provide a visual image of a small stack of screens. The term “deck” actually refers to two things: the physical file—named Deck1.wml or Blog.wml—that contains the WML statements, and the markup code found between the <wml> and tags. The terms WML file and deck are often used interchangeably. A WML file must contain a <wml> opening tag right after the document prologue (see the following section called “Document Prologue”) and a closing tag at the end of the file. Everything inside these tags is considered the deck. The easiest way to build decks with MobileDev is to use one of the deck wizards. You’ve seen how easy it is to make the most common type of deck—a display deck. The first things that are usually specified in a deck are and elements. Take a look at the deck you created (Deck1.wml) in the Document Editor. It contains a element but no . These two elements consist of the following: • —Specifies metadata, such as cache information and access information. You’ll learn more about these features later in this chapter.
5 WIRELESS MARKUP LANGUAGE
• —Specifies characteristics that apply to all the cards in the deck. An example of a template characteristic would be the binding of the ACCEPT soft key to the label OK and to a specified URL for all cards contained in the deck.
80
The Basics of WAP Application Design PART II
The following is an example of a deck with both and elements defined: <wml> <meta http-equiv=”Cache-Control” content=”max-age=0”/> <do type=”accept” label=”OK”>
NOTE Note the href option in the code. Like an HTML file, a WML file can be identified by a Uniform Resource Locator (URL). For example, the following URL will take a user to a WML deck named Fastcars.wml on a Web server named www.hermes.com. http://www.hermes.com/Fastcars.wml
Document Prologue The document prologue contains information intended for the microbrowser so that it knows how to parse the WML file. For example:
Luckily, the prologue is generated automatically at the top of all the WML documents you create in MobileDev. Here are the details, in case you ever have to code or modify one yourself (or are asked about it on Who Wants to be a Millionaire): • The first line specifies the XML version that this file uses. • The other lines identify the file type and the location of the Document Type Definition (DTD) used for compiling the file. If you don’t know what XML (eXtensible Markup Language) and DTDs are, don’t worry about it—they are Web protocols that define the structure of WML documents. All you really need to know is that MobileDev takes care of adding the required prologue for you.
Cards A card represents one or more screens of information in a wireless application. A card is identified with the tag within the <wml> tags that define a deck. A card can display formatted text, images, fields that prompt the user for input, selection lists, and more. The
Learning About Wireless Markup Language CHAPTER 5
81
major types of cards are display cards, input cards, and select cards, each defined with different elements within the card. When you create a deck in MobileDev, a default display card is also automatically created.
Display Card A display card displays formatted text, such as text in bold or italic, along with images. Each card starts with a tag and a variety of card options, such as an identification name and a title. The main tag in a display card is the paragraph tag,
. In WML, most other tags must be enclosed (“nested”) within a
element. You can see an example of a
element in the deck you generated. Look for the
and
tags: <do type=”prev”><prev/>
Go ahead, play with fire.
You’ll notice that the card (the id) and the paragraph have been given the same name as the deck: Deck1. Don’t let this confuse you; when you give your decks more meaningful names, it will make more sense. You can modify any of the code in the Document Editor; for example, you might want to change the title of the card, which is displayed on some types of browsers. If you delete the title option, the browser won’t display any title at all. For example, you could change it to:
You can add extra cards to a deck, either manually, by entering the code in the Document Editor, or using an Add Card wizard. The following steps show you how to add another card by hand: 1. Open the Document Editor for Deck1. 2. Add the following code immediately before the closing tag:
Have your extinguisher handy.
WIRELESS MARKUP LANGUAGE
Enter the text in upper and lowercase, as shown, and don’t forget the quotation marks. As you will see later, the WML language is case sensitive and always requires quotations around option values.
5
82
The Basics of WAP Application Design PART II
Input Card An input card requests information from the end user. The MobileDev Input Deck Wizard can be used to create input fields, or you could code it yourself. For example:
Please enter your customer ID:
If you want to try out this example, you should create a new display deck and replace the default code in the Document Editor. Figure 5.3 shows the results of this code at runtime. Notice the different functionality of the input card on the Nokia browser compared to the UP.Browser. The Nokia browser provides a built-in text editor to help you enter text, which can be useful if you want to use the scroll roller instead of the keypad to enter characters; however, this feature involves an extra screen, which you may find cumbersome. The UP.Browser, on the other hand, gives no assistance with text entry, but the benefit is that it allows you to enter text in the same screen as the input prompt.
Select Card A select card prompts the end user to choose an option from a list. In a WAP application, it is often better to give your users a list to choose from rather than have them fill in an input field. To create a select card, you can use either the MobileDev Input or Menu Deck Wizards, or you can code it yourself using the <select> and , 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 Basics of WAP Application Design PART II
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 <, space, or = characters. Values may be selected from the list. The Esc key closes the list; if you never want to use the lists, you can uncheck the option in the Settings dialog box.
Learning About Wireless Markup Language CHAPTER 5
99
FIGURE 5.11 You can activate all or none of the editor features.
FIGURE 5.12 Automatic lists show you your code choices as you type.
Auto Complete When Auto Complete is activated, a closing element tag is automatically added after you type the > on the opening tag.
Chroma Code
WIRELESS MARKUP LANGUAGE
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
The Basics of WAP Application Design PART II
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.
Learning About Wireless Markup Language CHAPTER 5
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
