Webmaster''''s Guide to the Wireless Internet part 25 doc

212 Chapter 5 • Wireless Development Kits
pane shows the current project files and lets you navigate through various ele-
ments of the WML deck you are currently working with.The bottom-left pane
shows information about the current element you have selected: card titles, the
WML version of the deck, and so on.The right pane shows the source of the
current WML deck. Finally, the bottom pane shows you status messages about the
WapIDE, such as validation errors in WML decks.
Accessing and Editing Local Files
Let’s create a new project and add our hello.wml file. From the main window,
choose the File | New | New Project menu item.You will be asked if you
want to save the changes to the current project; unless you have already been
working on a project that you wish to save, click No.You will then be prompted
with the dialog box to fill in information about your project.We set ours up as
shown in Figure 5.23.
You can use three different methods to accomplish most tasks in the WapIDE:
menu choices, the toolbar, and keyboard shortcuts. Let’s focus on the menu
choices, and you can explore the other two options on your own.To add a new
WML file to the project, select File | New | New WML Deck from the
menu bar. Now, you can edit the WML deck to contain the text you want.You
can edit the file in the right pane. Go to the spot after the open <p> element
and insert the text “Hello World!” into the file.Also add the ID and title
attributes to the card so that the hello.wml file looks like this:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
" />www.syngress.com
Figure 5.23 Creating a New Project in the Ericsson WapIDE
159_wi_wg_05 10/22/01 4:35 PM Page 212
Wireless Development Kits • Chapter 5 213
<wml>
<card id="hello" title="Hello World">
<p>Hello World!

</p>
</card>
</wml>
The editor will not show you updated information about the WML deck
until you validate it.You can validate the file by selecting the Tools | Validate
“hello.wml” menu option. Once you validate your document, the left panes
will be updated with the information you just typed in, as shown in Figure 5.24.
We can now view the document in a WAP device by selecting the Tools |
Test “hello.wml” menu option This will launch the WapIDE browser in a new
window with the hello.wml file we just created. Figure 5.25 shows the R520m
with our new deck in it.
www.syngress.com
Figure 5.24 Updated WML Deck Information in the Ericsson WapIDE
159_wi_wg_05 10/22/01 4:35 PM Page 213
214 Chapter 5 • Wireless Development Kits
Notice that a Back button is not included by default. Ericsson browsers
require you to explicitly put in WML to perform backward navigation if you
want it to be available to the user. Each card from which the user can navigate
backwards requires the following piece of code:
<do label="Back" type="prev"><prev/></do>
Not all browsers require this, but be careful not to omit it because you could
end up with areas of your WAP site that users cannot get out of. If the browser
provides a Back button by default, it will simply ignore this portion of WML code.
Accessing Files through a Gateway
The browser component can retrieve files locally on your file system or on the
network through a gateway.The default behavior is to use the public gateway
Ericsson has set up for Developer Zone members, but you can use any gateway
you have access to. Ericsson provides information on their Web site for down-
loading and installing their gateway on your local machine.We add the Ericsson
gateway to our configuration even though it is included by default, just to run

you through the steps required.
Select the View | Settings menu option from your browser window.You
will see a configuration dialog box with multiple tabs across the top. Select the
Gateway tab then click Add to create a new gateway entry. Fill out the name as
DevZone and enter the IP address 195.58.110.201.The gateway that Ericsson
provides does not require a username or password, so leave those fields empty.
When you click OK, you will be taken back to the gateway selection screen.
www.syngress.com
Figure 5.25 Ericsson R520 Emulator Viewing hello.wml
159_wi_wg_05 10/22/01 4:35 PM Page 214
Wireless Development Kits • Chapter 5 215
From the pull-down list, select the DevZone entry and then click OK at the
bottom of the dialog box to save your changes. Now, whenever you request a
document from a network address using HTTP, it will request the file from the
gateway, and the gateway will actually retrieve the document before sending it
back to you.
Debugging Techniques
The WapIDE provides good error messages that help you debug your application.
Let’s take our simple WML file and remove the </p> element, so that our para-
graph line looks like this:
<p>Hello World!
When we validate this file, we get some error messages in the bottom pane, as
shown in Figure 5.26.
This is pretty good information.We know that we opened a paragraph ele-
ment and did not close it.The line numbers and columns that are reported match
up with the next tag it encountered, but the message is clear and points outs the
www.syngress.com
Figure 5.26 Ericsson WapIDE with Error Messages
159_wi_wg_05 10/22/01 4:35 PM Page 215
216 Chapter 5 • Wireless Development Kits

problem quite well—even if it does miss the location a bit. If we correct the
problem and revalidate, we get a comforting message indicating that no errors
were found.
The WapIDE does not provide information such as cache status, variable
values, or compiled WML size.This is unfortunate because the rest of the envi-
ronment is nice for building and testing applications.You can open the Trace
window to view information about the current status of the emulator, which can
be helpful when you are trying to track down a network problem.
The WapIDE allows you to clear the device cache or disable caching alto-
gether.This is handy during repetitive testing, but be sure to test your application
with caching on once you believe it is working.You can reach the cache setup by
selecting View | Settings from the browser window and going to the Cache
tab, as shown in Figure 5.27.
The Yospace SmartPhone Emulator 2.0
The Yospace SmartPhone Emulator Developer Edition is the only SDK in our
lineup that isn’t developed by a browser manufacturer.This Yospace SmartPhone
Emulator is designed to emulate browsers from multiple vendors simultaneously,
thus speeding up your development.The SmartPhone Emulator is written
entirely in Java; you can run it on any platform that has a Java 1.1.8 compatible
VM installed (this includes Java2 VMs).This is the only SDK we’ve looked at that
is truly cross-platform. Linux,Apple MacOS, Sun Solaris, and Microsoft Windows
are all known to work well with the SmartPhone Emulator.
www.syngress.com
Figure 5.27 Cache Settings for the WAP Browser in the Ericsson WapIDE
159_wi_wg_05 10/22/01 4:35 PM Page 216
Wireless Development Kits • Chapter 5 217
Installing the Yospace SmartPhone Emulator
Many versions of the SmartPhone Emulator are available from Yospace.The
Developer Edition is for use on your local machine to access files both remotely
or on your local file system and is the one that we installed.The Web Site Edition

allows you to demo your WAP application to people who visit your site with a
regular Web browser.You can use the JavaBean Edition to build your own appli-
cation that can access WAP services by emulating popular handsets.
We cover only installing the Windows version of the SmartPhone Emulator
Developer Edition.The instructions for other platforms are documented on the
Yospace Web site at www.yospace.com.We go step-by-step through the system
requirements, downloading the SmartPhone Emulator, and installing it on your
computer.
System Requirements for the
Yospace SmartPhone Emulator
The Yospace SmartPhone Emulator is written entirely in Java and can therefore be
run on any computer system that has a Java 1.1.8 or compatible VM installed.As
mentioned earlier,Yospace has packaged the SmartPhone Emulator in installation
programs for Microsoft Windows,Apple MacOS, Solaris, and Linux/other UNIX
platforms. If you download the Windows or MacOS version, you can choose to
download it without the JVM if you already have one installed on your system.
Yospace gives no specific processor or memory requirements because the software
can run on such a wide variety of machines. If you find the program doesn’t run
fast enough perhaps you should get a faster processor or add more memory.With
that said, the Windows install program that we used is a Win32 application, so you
must have Windows 9x, Me, NT, or 2000 to install the software.
Obtaining the Yospace SmartPhone Emulator
You can download the SmartPhone Emulator from the Yospace Web site at
www.yospace.com in the Products section.Yospace requires you to register in
order to download the software. Once you download the software,Yospace will
e-mail you a license that is good for five days.After this license expires, you will
need to purchase a license from Yospace to continue using the software.
www.syngress.com
159_wi_wg_05 10/22/01 4:35 PM Page 217
218 Chapter 5 • Wireless Development Kits

Installing the Yospace SmartPhone Emulator
You will download a file called SPEDE2_0.zip, which contains one file, from the
Yospace Web site. Unzip it with a zip extractor such as WinZip (www.winzip.com)
or Aladdin StuffIt Expander (www.aladdinsys.com). Run the spede2_0.exe appli-
cation (which is the file that you extract) and, after some initial splash screens, you
will be greeted with a dialog box requiring you to accept the license agreement for
the SmartPhone Emulator. If you agree with the terms of the license, click Ye s and
then click Next to continue the installation process.You can accept the default
installation location on the next screen and then click Install to start the actual
copying of files to your computer.The software will be installed while a dialog box
like the one shown in Figure 5.28 updates you on the status of the installation.
Once the installation completes, click Done, and the software is installed.
Developing with the Yospace
SmartPhone Emulator
You can now start the SmartPhone Emulator by choosing Programs |
SmartPhone Emulator | SmartPhone Emulator 2.0 from the Start menu.
The first dialog box you see will ask you for your name, e-mail address, and
license key.These must match the registration info you gave to Yospace.You will
only be asked for this information when you first run the program or the license
expires.The license screen is shown in Figure 5.29.
You can choose what mode you would like to run the program in from this
screen: Development Mode or Display Mode. Display Mode shows just one emu-
lator in its own window so that you can demo your WAP application without
www.syngress.com
Figure 5.28 The Yospace Installation Screen
159_wi_wg_05 10/22/01 4:35 PM Page 218
Wireless Development Kits • Chapter 5 219
having a complete development environment cluttering the screen. Development
Mode is where we spend most of our time. It allows you to view multiple emu-
lators at the same time, load a file or location into multiple emulators with one

command, and view variable names and values and other status information.
The initial window may seem intimidating at first, but figuring it out is quite
easy. Figure 5.30 shows the default workspace when you start in Development
Mode.
www.syngress.com
Figure 5.29 Yospace SmartPhone Emulator License Screen
Figure 5.30 Default Development Mode Workspace
159_wi_wg_05 10/22/01 4:35 PM Page 219
220 Chapter 5 • Wireless Development Kits
The windows in the main part of the screen are emulators for various mobile
phones.The SmartPhone Emulator allows you to create and save groups of emu-
lators as workspaces.You can have one workspace per manufacturer, per browser
type (UP.Browser, Nokia Browser, and so on), or any other scheme you can
come up with.You can save these workspaces and recall them later when you
need to test the same combination of devices again.
The default workspace includes an Ericsson R380, Ericsson R320, Nokia
6210, and Motorola Timeport. Because it includes multiple devices, you must tell
the SmartPhone Emulator which emulator you want to work with.You can
select the emulator window or its corresponding name from the list in the top-
right pane. If you select the Workspace, everything you do will apply to all the
emulators. Select the Workspace as shown in Figure 5.30 before we start loading
files in the next section.
Accessing and Editing Local Files
You will have to use a separate text editor to create WML and WMLScript files.
The Yospace SmartPhone Emulator does not include text-editing capabilities.We
use the same file we created in other examples and saved as c:\wap\hello.wml.
If you haven’t already created it, save the following WML deck to that location:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"

<wml>
<card id="hello" title="Hello World!">
<p> Hello World! </p>
</card>
</wml>
Load this file into all the emulators at once by selecting the File | Open
File menu option.This will bring up a dialog box asking what file to load. Find
and select our file (c:\wap\hello.wml) and click Open to load the file in all the
emulators.You can see how easily you can view your WAP application on mul-
tiple devices with the SmartPhone Emulator.
Accessing Files through a Gateway
The Yospace SmartPhone Emulator does not allow you to change the gateway
used to access WAP content.The gateway functionality is encapsulated in the
www.syngress.com
159_wi_wg_05 10/22/01 4:35 PM Page 220
Wireless Development Kits • Chapter 5 221
emulators.This is unfortunate because testing through multiple gateways is a
good way to find many problems.
Debugging Techniques
The Yospace SmartPhone Emulator provides very precise debugging information.
Let’s break the hello.wml file so that it does not close the paragraph element.The
resulting file looks like this:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"
<wml>
<card id="hello" title="Hello World!">
<p> Hello World!
</card>
</wml>

We have to empty the cache before we reload the file by selecting the
Workspace | Empty Cache menu option.Then we can load our file the same
way we did before.This time, every emulator will give you an error message.
These error messages are exactly what each individual phone would show you if
you were holding it in your hand—not very informative. However, a new mes-
sage appears in the status bar along the bottom of the window:“! Last Error:
502.” Click on this message and a dialog box (shown in Figure 5.31) will appear
giving you more detailed information about the problem.
The error message tells us that the paragraph tag on line 6 does not have a
corresponding close tag.This is the most descriptive error message from any of
the SDKs we’ve looked at.Although the error message is clear, it is somewhat
difficult to find inside the variety of HTTP status messages.This is especially
confusing because we were loading a local file.The extraneous error messages are
www.syngress.com
Figure 5.31 Yospace SmartPhone Emulator Invalid WML Error Dialog Box
159_wi_wg_05 10/22/01 4:35 PM Page 221