Is That a Script in Your Pocket?
Andrew Clinick
Microsoft Corporation
August 14, 2000
Download Script0800.exe.
Contents
Which Languages You Can Use and Where
Using Script to Build Applications
Hosting Script in Your Applications
Summary
The great thing about working in the Windows Script group is that you get to see your product used in so many applications, both internally at Microsoft and externally in the hundreds (nay, thousands) of applications using script written by people like you. Traditionally, script has been used in Web applications that run mostly on PCs (be they Windows-, Unix-, or Mac-based)—but now people are starting to develop Web applications for smaller form factors, ranging from WAP-based cell phones to the new Pocket PCs running on Windows CE. I recently received the latest in the Pocket PC range, a Compaq iPaq. I was quite taken by my new Compaq iPaq (it's shiny and silver, and it has an on/off button), so I thought I'd look at how you can use your existing script knowledge to develop applications, both local and Web-based, on Pocket PCs.
All Pocket PCs run Windows CE 3.0, a version of Windows designed to be as compact and modular as possible. As a result, not all the features you've come to expect on a Windows PC are present—but a surprising number are available, including the Windows Script engines. JScript and Visual Basic Scripting Edition (VBScript) are available on all Pocket PCs to provide access to the script engines in applications such as Pocket Internet Explorer and perhaps your next application.
Which Languages You Can Use and Where
If you're going to develop an application for the Pocket PC, it's important to know what is available to you. Pocket PC ships with a version of Internet Explorer, affectionately known as PIE (Pocket Internet Explorer). PIE has a bunch of interesting features, one of which is the ability to run script code in an HTML page. Because memory is at a premium on Pocket PCs, PIE allows only one script language, JScript, to be used in HTML pages. This provides the best coverage in terms of Web content already out there, and keeping just one language reduces the amount of memory PIE requires when loading a Web page. This means that you can't use VBScript in PIE, but the decision to conserve memory is one you'll probably appreciate when you're running code on a Pocket PC.
The JScript version that runs on Pocket PC is based on the JScript 3.0 code base. The Pocket PC team took the sources from the Windows Script team and looked at how they could reduce the size of the .dll file that implements JScript. The Pocket PC version of JScript is 347 KB, compared with 541 KB for the current 5.5 desktop version. To cut down on size, the Pocket PC version of JScript doesn't have some features, such as regular expressions and VBArray. Apart from that, it's pretty much JScript 3.0. For more information on what's in JScript 3.0, check out the Version Information table. This page tells you exactly which feature was introduced and in which version.
Although PIE doesn't support VBScript, that doesn't mean that VBScript isn't on the Pocket PC platform. VBScript forms the basis of the Visual Basic runtime that is used when you run eMbedded Visual Basic programs. The folks in the embedded tools division took the VBScript source code from the script group and extended it to allow the features required in eMbedded Visual Basic. Like JScript, VBScript is based on the Version 3.0 code base—so it doesn't have the new classes feature added in VBScript 5.0. I highly recommend eMbedded Visual Basic, and best of all, you can order it for just the price of packaging from the Windows CE Web site.
To illustrate how to use the script engines on a Pocket PC, I wrote a simple HTML page and eMbedded Visual Basic application that display the versions of the script engines. If you're a script developer, you're probably aware of the scriptengine, scriptenginemajorversion, and scriptengineminorversion functions in VBScript and JScript. These are useful functions in themselves, because they allow you to check the version of the script engine that your users are running. If it's an old version, you can redirect users to an update.
Using eMbedded Visual Basic, you can create a simple project with a single form, and put a text box and button on the form.
For the onclick event handler on the version button, you can add one line of Visual Basic code.
Once this is done, just run the code. To get the application running on your Pocket PC (or the supplied Windows-based emulation), eMbedded Visual Basic does some magic, and up comes the Visual Basic application on your Pocket PC. Click the button, and the relevant version information about VBScript is shown in the text box.
It's pretty simple to accomplish the same thing in JScript and HTML. Just create an HTML page with a text area and a button object, and hook up some JScript code to the onclick event of the button. You do this on a Pocket PC exactly the same way you would on a normal HTML page.
<html>
<body>
<script language="JScript">
function getVersion()
{
txtVersion.value = ScriptEngine() + " version " +
ScriptEngineMajorVersion() + "." + ScriptEngineMinorVersion() + "." +
ScriptEngineBuildVersion()
}
</script>
<p align="center"><textarea rows="7" cols="33" name="txtVersion"></textarea></p>
<p align="center"><input type="button"
value="Version" name="btnVersion" onclick="getVersion()"></p>
</body>
</html>
Running the HTML on a Pocket PC is not as straightforward as it is on a PC, because it's likely that your Pocket PC isn't connected to a network. PIE does allow direct connection to the Internet via a modem, by using infrared to a cell phone, or by plugging in a compact flash network card. So if you're lucky enough to be able to do that, you can just type in the address of the page, and PIE will load the page.
PIE also provides a great way to deal with offline pages via Mobile Favorites. To use Mobile Favorites, navigate to a page on your Windows Internet Explorer, then choose Create Mobile Favorite from the Tools menu. (All this assumes you have ActiveSync 3.1 installed.) As soon as you add the page as a Mobile Favorite, ActiveSync will synchronize the page to your Pocket PC. Once the page is downloaded onto your Pocket PC, you can access it via PIE's Favorites (or Favourites) menu. Here's what the JScript version page looks like in PIE.
Using Script to Build Applications
To illustrate how you might use script to build applications on Pocket PCs, I've built some simple applications that use some of the features available to you, and work around the difficulties imposed by working in an offline Web world. One of the key challenges is how to get some form of dynamic content to the user without access to the rich object model that Internet Explorer on Windows provides. This is a little like going back to Internet Explorer 3.0 or HTML 3.2—but with the added challenge of having only a 320 x 240 screen to work with (and to think we used to complain about designing for 640 x 480). PIE has a great feature that tries to shrink the page to fit the screen; this certainly helps, but you still need to consider the smaller screen to provide the best user experience.
Getting dynamic content in an HTML 3.2 world means that you have to rely on some old favorites, in particular, alert and document.write. Luckily, both methods are supported in PIE, and they work pretty much identically to their counterparts in the desktop version of Internet Explorer. A word of caution, though: PIE is stricter about properly formatting your HTML page, so be sure that you have <HTML> and <BODY> tags in place, or you'll spend many a fruitless hour trying to figure out why your script isn't working. (Not that I ever write HTML pages with just <SCRIPT> tags, of course!)
**Tip **A Microsoft Word version of the HTML object model reference for PIE is available for download. I hope they'll have an HTML version soon.
PIE doesn't support the notion of being able to open new windows, so calling window.open in your script code won't work. As a result, the only way you can get information to and from the user is via the alert and prompt methods. Using alert results in a slightly different title on the dialog box, and the OK button is on the title bar, à la all Pocket PC applications. Apart from those differences, it's pretty much identical to the alert method in Internet Explorer.
The only real way to change the format of a page when it loads is via document.write. I'm sure many of you are familiar with document.write and its limitations. It does, however, allow you to change the output of a page based on script, and it is as close as you'll get to dynamic content until PIE has full DOM support. Adding DOM support to PIE is not for the faint of heart, especially given the memory footprint of Pocket PCs. I hope Moore's law will come to the rescue, and we'll be able to do all the cool DHTML tricks on Pocket PCs.
<HTML>
<BODY>
<H2>Writing Text to an HTML Page</H2>
This page demonstrates the use of <b>document.write</b>
to output text to an HTML page.
This writes to the page only when the page is initially loaded;
that is, it cannot be used to update the page once it is displayed.
<BR>
<SCRIPT LANGUAGE=JScript>
<!-- Start of Script --
document.write ("This text is written using <b>document.write</b>.<BR>");
document.write ("Note the need to include HTML tags within the text.<BR>");
<!-- End of Script -->
</SCRIPT>
</BODY>
</HTML>
I've written a small program to show off some of the possibilities of using script and HTML on a Pocket PC. The application is a simple tip calculator, JScript Tipometer, which lets you work out how much tip you should give and, I hope, solves the eternal problem of how much everyone's share of the check should be. (Side note: As an Englishman, I'm forever confused by how you can pay a check with a check—which came first?) The cool thing about doing this in HTML and script is that my Pocket PC is always running the latest version, because my Mobile Favorite synchronizes whenever I change the page on my Web server. This makes distributing code updates to users a snap; as long as they have their synchronization schedule set up, they'll be up to date.
The Tipometer user interface is built with standard HTML form elements. I tried to keep the UI simple, and, where possible, to make it easy for users to enter data without having to use the character recognition software. The character recognition software can be used, but I figured that in a restaurant it would be much easier to use your fingers.
The first thing the Tipometer needs is the amount of the bill. To get this, I added a standard text box and some buttons to ease data entry. The buttons are pretty large, so you can enter data with your finger. Each button has an onclick event handler that updates the value property of the text box with the value of the button:
onclick="txtValue.value += this.value"
It's pretty simple, but it works. In addition to the numbers, there's a CE button (pardon the pun) that clears the text box.
Once the bill has been entered, the Tipometer asks the user to rate the meal for service and food via a set of radio buttons. By means of a patent-pending tip calculation routine, Tipometer uses the ratings to calculate the tip. This is a pretty low-tech way of working out the tip amount, but you could change it to meet your requirements—and I guess that Tipometer 2.0 would present you with a text box with the calculated tip so you could change it. To align the radio buttons on the smaller screen, I deliberately chose a small font. As you can see, it's clear on screen and pretty readable. To further control the display, I put the radio buttons in a table and centered the table. Putting them in a table seemed to give the best results in this particular case. I recommend that you experiment with what works best for your application.
Once the user has voted on the meal, the only other piece of data required is the number of people among whom the bill will be split. I spent quite a while trying out UI designs for this text box. I finally decided on a simple spinner-control-like UI—because it's unlikely that there are going to be large numbers of people in the party, and I didn't want to take up space with another set of keypad buttons. Because HTML doesn't provide a spinner button, I used a text box (with size set to 2, to minimize space) and two buttons, – and +. Users can click on the buttons the same way they can on a spinner control in Windows, and the Split between text box is automatically incremented or decremented. The script to achieve this was pretty trivial—converting the value of the text box to a number and adding or subtracting 1 from it. On the decrementor button, I added a simple check to ensure that you can't reduce the number below 1. Because the number is in a standard text box, the user can also use the character recognizer provided by the operating system, rather than the buttons.
<input type="text" size="2" name="txtParty" value="1">
<input type="button" value="-" name="btnMinus"
onclick="if (txtParty.value != 1)txtParty.value = Number(txtParty.value) - 1">
<input type="button" value="+" name="btnPlus"
onclick="txtParty.value = Number(txtParty.value) + 1">
Once the data has been collected, all that's left is to calculate the final bill and divide it among the number of people in the party. Nothing is that simple, and trying to put in the arcane rules of tipping and dividing the bill is not a simple task. Because this is a demo application, I took the easy way out and rounded the share of the bill to the nearest dollar. This works most of the time—but if you get an odd number of people in the party, the waiter can be shortchanged by a dollar or so on the tip. It gets worse if you don't leave a tip—but I hope Pocket PC owners are discerning enough to go only to restaurants that offer good service and food. You're free to change the code to meet your needs, and I'd be happy to post updated versions if you send them to msscript@microsoft.com.
function btnCalculate_onclick() {
var foodtip
var servicetip
var bill
var total
var billshare
// Get the users view on the food
for (var i=0;i<Food.length;i++)
{
// Get the appropriate value for the food tip
if (Food[i].checked) foodtip = Number(Food[i].value)
}
// See if the service was any good
for (var i=0;i<Service.length;i++)
{
// Get the appropriate value for the service tip
if (Service[i].checked) servicetip = Number(Service[i].value)
}
// Add the food and service tip together
var tip = Number(servicetip + foodtip)
/* If the tip is less than zero, you shouldn't eat there
again but you can't give a negative tip, so reset to zero
*/
if (tip < 0) tip = 0
bill = Number(txtValue.value)
tip = Number(bill * (tip/100))
total = bill + tip
billshare = total / Number(txtParty.value)
alert("Total Bill: $" + (Math.round(billshare)*
Number(txtParty.value)) + "\n" + "Each pay: $" + Math.round(billshare))
}
Once the bill and share have been calculated, an alert tells the user what to pay. Initially, I had a text box, but it took up valuable screen real estate, and it wasn't immediately obvious that the result was being shown. An alert seemed to make it obvious.
If you have a Pocket PC, you can try out the JScript Tipometer and add it to your Mobile Favorites.
Hosting Script in Your Applications
A large number of programs that run on Windows host script (VBScript or JScript) in their applications via the Windows Script Interfaces (IActiveScript) and the Windows Script Control. The good news is that the IActiveScript interfaces are fully supported on Windows CE (that's how Pocket IE hooks up JScript), so you can port your existing Windows applications to Windows CE with the embedded tools and take advantage of the script engines that ship with the operating system. At the moment, we don't have the Window Script Control running on Windows CE, but we'd love to hear feedback on how useful it would be for people, so please e-mail us at msscript@microsoft.com. There are already a number of articles (The Visual Programmer, MSJ October 1999 and Say Goodbye to Macro Envy with Active Scripting, for example) about using the Windows Script Interfaces, so I won't go into detail here.
Summary
Pocket PC provides a really rich programming environment that you can take advantage of today. The scripting support provided in the operating system and within Internet Explorer makes it even easier to get up to speed with application development. I hope I've given you an insight into what is possible to build today with your existing scripting skills and a little imagination. I recommend that you take a look at the Pocket PC and embedded tools Web sites for more information about developing applications for Pocket PC.
Andrew Clinickis a program manager in the Microsoft Script Technology group, so chances are, if there's script involved, he's probably had something to do with it. He spends most of his spare time trying to get decent rugby coverage on U.S. television and explaining cricket to his American colleagues.