http://www.developer.com/

Back to article

From Mobiles to Microwaves with the Mobile Internet Toolkit


August 21, 2003

For a long, long time, Microsoft has been touting this dream of information on any device, anywhere, anytime. But, at least when it comes to Visual Basic developers, the company hasn't done much to prove it. That is, until now.

Coinciding with the first release of Visual Studio .NET, Microsoft unveiled the Mobile Internet Toolkit, a neat Visual Studio .NET-integrated extension to the .NET Framework. MIT is a program that allows you to write your own Web applications that can be displayed on almost anything—from mobile phones to microwaves, Internet Explorer to handheld PDAs. Develop once, and run anywhere.

How does it work? Well, after installing the MIT, you get to create a new type of project, a Mobile Web application. Here you can design your minimalist application. It can do anything that your regular ASP.NET applications can, but, due to the limitations of some of the devices that may use your application, you're best keeping the actual graphical side to a minimum. Next, you make your application available as you would a regular ASP.NET Web app.



Click here for larger image

Figure: Creating a new ASP.NET Mobile Web application

When your application gets requested over the Net—through whatever device—the MIT steps in and figures out exactly what sort of machine is asking to view your pages. It then configures the output appropriately (that is, a certain dropdown box-style control will look like a regular dropdown on some devices, whereas on others it will render as a clickable list), and then sends your page down the wire in the language spoken by the device—HTML, cHTML (Compact HTML), or WML (Wireless Markup Language).

In short, the MIT allows you to create intelligent, mini "Web pages" that can be viewed on practically any device. You design once and let the MIT handle all that sticky "plumbing" you really don't want to get involved in.

TOP TIP Microsoft is slowly renaming the Mobile Internet Toolkit to ASP.NET Mobile Controls. It is, however, being awfully inconsistent about the process. Many parts of the Microsoft site use the terms interchangeably. Just keep in mind that the two terms refer to the same thing. During the rest of this section, I'm going to stick with Mobile Internet Toolkit.

Creating Your Mobile Web Application

How do you go about creating your own mobile applications? First off, you'll need to access the MIT. If you're using Visual Studio .NET 2003 (Everett), it's actually built into Visual Studio. If you aren't, however, or you want to access the latest device updates, you'll need to surf down to msdn.microsoft.com/vstudio/device/mitdefault.asp. The main MIT setup is a cool 4MB download. Just follow the simple installation wizard to get started.

Next, launch Visual Studio .NET and create a new ASP.NET Mobile Web Application project (or quite simply a Mobile Web application, if you aren't using Visual Studio .NET 2003). You'll be shown MobileWebForm1.aspx. On the page, you have a small Form1 object. This represents a "page" on your device. Because most mobile pages will be relatively small, Microsoft decided to allow you to create a bundle on just one page (along with, naturally, a code method of switching between them). The first form on the page is the first to be displayed when the page is accessed.

You can either simply start typing in this Form control, or add controls, by dragging and dropping from the Mobile Web Forms tab in the toolbox. You'll be able to instantly figure out most of these from their icons: the Label, the TextBox (with its useful Numeric property for number-only input), the multi-line TextView, the Command button, the Link, the SelectionList, the Image control, the excellently rendered Calendar control, and the validation controls. You can add code to respond to most of these items just as you would a regular ASP.NET Web application.



Click here for larger image

Figure: Designing our Mobile Web application

Other controls aren't quite so obvious however. The DeviceSpecific component allows you to target content at devices bearing particular properties, for example. One real favorite, however, is the PhoneCall control. Set its Text and PhoneNumber properties, and, on supporting phones, it'll turn into a link that allows your user to directly call that number. By default, if a device doesn't support dialing (Internet Explorer, for example), it'll display the Text and PhoneNumber properties alongside each other instead ("{0} {1}", the AlternateFormat default). Another way of handling this could be to put your own text in the AlternateFormat property and specify a link for the AlternateUrl.

So, you've added a few neat controls to your first form. Next, you begin coding in practically the same way as you would an ASP.NET Web application. Respond to Click events, change properties, add code to respond to the form Activate event (the Web page Load equivalent).

Writing Mobile-Aware Code

Most of your code will be relatively standard and nothing special. But there are points where it's useful to write code that specifically finds out more about the device using your application. Enter stage left, the aptly-named Device object. To demonstrate its use, I might run code similar to the following behind my form Activate event:

   Dim blnMail As Boolean
   blnMail = Device.CanSendMail

Here, I'm checking whether the device can respond to the "mailto:" tag. If it can, I might set a certain Link control to an email "mailto:" link. Otherwise, I might change it to point to a Web site. Here are the top dozen Device properties:

  • Browser: Whether it's IE, Pocket IE, Microsoft Mobile Explorer, MyPalm, or some other beast, the Browser property gives you the name of your client browser.

  • CanInitiateVoiceCall: Returns a True if the device can call someone.

  • CanSendMail: Returns a True if the device supports the "mailto:" method of sending email, such as a Link control that has the NavigateUrl property set to mailto:karl@karlmoore.com.

  • Cookies: Returns a True if the device supports cookies.

  • HasBackButton: Can your user move back? This property returns a True if they can. This is great for deciding on whether to hide or implement your own Back button mechanism.

  • IsColor: Returns a True if the device uses a color monitor.

  • IsMobileDevice: Now, is that really a mobile, or are they just faking it with Internet Explorer? This property returns a True if a recognized mobile device is being used.

  • PreferredImageMime: Returns the MIME type of the image content preferred by the device. You may wish to check this before setting the ImageUrl property of an Image control. If a GIF file is preferred, it'll return "image/gif", and, for a WBMP, it'll return "image/vnd.wap.wbmp"—otherwise, you're probably safe displaying a regular bitmap.

  • ScreenCharactersHeight: Returns the approximate number of lines you can get onto a screen.

  • ScreenCharactersWidth: Returns the approximate width of the display in characters.

  • ScreenPixelsHeight/ScreenPixelsWidth: Returns the approximate height and width of the display in pixels.

  • SupportsBodyColor: Returns a True if the device can display the backcolor of a form.

  • SupportsBold/SupportsItalic/SupportsFontName/SupportsFontColor/ SupportsFontSize: Allows you to check whether certain text properties are available on the device.

  • Plus all the regulars: When using the Device object, you get all the usual things you find when working with the Request.Browser property, such as the ability to retrieve the browser version, check the platform, and so on.
TOP TIP Instead of writing code to check the capabilities of a device and then changing its properties accordingly, you can configure your controls to "override" certain properties automatically depending on a "filter." This helps cut down on plumbing code. You can learn more about this by looking up "mobile controls, overriding properties" in the help index—or check out the "Going Mobile" chapters in my book: Karl Moore's Visual Basic .NET: The Tutorials. This title also demonstrates fresh techniques for handling images, without having to handle the aforementioned PreferredImageMime property.

While writing your code, you might also want to watch out for a couple of state management differences between regular ASP.NET Web applications and your mobile sites. Firstly, most mobile devices do not support cookies. If you absolutely need to store something on the user's machine, insert it into the query string and get the user to bookmark the page. Secondly, any ViewState information is stored on the server (a history of ViewState is also maintained). As an alternative, use the Session object to store information for a user: it's more flexible than ViewState, you can access it from any page, and only one copy is stored at a time.

So, you've designed your first form, used a handful of nifty controls, and added a little mobile-aware code—now you're ready to move on and create the second. Well, to add another form, simply drag and drop a new Form control onto your page, set its ID and Title properties (optional), and begin adding controls and coding as before.

You'll also want to know how to move between two forms. You can do this in two different ways. Firstly, you can use a Link control and select your second form from the dropdown list of options in the NavigateUrl property. However, the most common method is to do it in code, by setting the ActiveForm property of your mobile page to your form control, like this:

ActiveForm = Form2

If you want to add a whole new mobile page to your project, select Project ~TRA Add New Item, then select a new mobile Web form and click on Open. You can now continue designing as normal. But watch out: you can't redirect from one mobile Web page to another using a regular ASP.NET Response.Redirect. Instead, you have to use the following function of your mobile page (don't look at me!):

RedirectToMobilePage("mypage.aspx")

Testing Your Mobile Web Application

What next? Well, you've learned all you need to put a mobile Web application together, so finish off your project and get testing! Hit F5 to test your program in Internet Explorer. Better still, download the Microsoft Mobile Explorer emulator, which is available from the MIT download address given earlier. Other recommended test browsers include the Nokia Mobile Internet Toolkit from www.forum.nokia.com and the OpenWave Mobile Browser at developer.openwave.com/download/.

Figure: My sample application in the Nokia simulator

And, when you're ready to roll your site out to the world, what do you do? Simply treat it just like a regular ASP.NET Web application.

That's all you need to know to develop applications that can run anywhere, any time, and on any device! Amazing stuff, and definitely something you can incorporate into that next big project, right?

About the Author

Karl Moore (MCSD, MVP) is an experience author living in Yorkshire, England. He is author of numerous technology books, including the new "Ultimate VB .NET and ASP.NET Code Book" (ISBN 1-59059-106-2, $49.99), plus regularly features at industry conferences and on BBC radio. Moore also runs his own creative consultancy, White Cliff Computing Ltd. Visit his official Web site at www.karlmoore.com.

# # #

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date