From Mobiles to Microwaves with the Mobile Internet Toolkit
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:firstname.lastname@example.org.
- 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.
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!):
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.
# # #
Page 2 of 2