Microsoft’s Mobile Internet Toolkit

When the capital markets look back at the “bursting Internet bubble”, it will more likely look like a sensible correction that every new major industry has to endure several times. There were a lot of companies that were supported solely by investor capital with no viable product or profit, which probably isn’t a good thing. As I sit here in the airport in Detroit, Michigan I can already sense an increase in the pulse of the American economy by the bustle of early morning commuters.

With the quickening of the economy there will likely be a new round of e-businesses with a marked de-emphasis on their .com-ness. As a developer I am caught squarely between the bleeding edge of new technologies and the lagging edge of making a living. One of the growing trends is the interest in building applications for mobile devices. Building software for mobile devices is a pretty safe and smart bet because of the ubiquity of these devices. People are already using web-enabled cell phones, personal digital assistants, and pagers, and they will need software for these devices. While we have no where near sated the need for desktop applications, the new frontier is building applications for mobile devices and PCs. This is what I wanted to write to you about today.

A coherent, cohesive, and comprehensive framework is a critical must for any software tools vendor. Microsoft has such a frame work in .NET. If you have been following VB Tech Notes then you already know about some of the amazing aspects of the .NET Framework, like asynchronous Web Services, multithreading, the CodeDOM, Reflection, Attributes, ADO.NET, and ASP.NET. Built upon this framework is Microsoft’s Mobile Internet Toolkit (MMIT).

The Mobile Internet Toolkit is available as a free download from Microsoft and is an extension to the .NET Framework. MIT allows you to visually design Mobile Web Pages almost identically to the way that you would design an ASP.NET Web Page-visually, adding code behind to support behaviors. The upshot here is that you can run and test these Mobile Web Pages in Visual Studio .NET and Internet Explorer. Because MIT is part of the .NET Framework you and the Microsoft developers have all of the access to .NET. As a direct benefit of being part of the .NET Framework, the Microsoft developers were able to make Mobile Web Pages capable of rendering on a wide variety of devices using one body of code. To be clear, you design the Mobile GUI using a visual designer, add code behind, and connect to a database if you need one. The same Mobile GUI can render CHTML, WML, or HTML depending on the needs of the device.

MIT can render a Mobile Web Page in any of these three markup languages, resulting in your mobile applications being displayed on a huge variety of devices, including WAP phones, Handhelds and PDAs, and pagers. For a complete list of devices tested for MIT refer to the http://msdn.microsoft.com/vstudio/device/mitdevices.asp. In this article I will be providing you with a quick overview of Mobile development with .NET and the Microsoft Mobile Internet Toolkit. If you will be building applications for mobile devices and want to leverage one body of code for the greatest number of devices then I recommend picking up a copy of my soon-to-be-released .NET Mobile Application Development from Wiley (to be published Winter 2002).

Configuring for Mobile Application Development

The Mobile Internet Toolkit does not ship with Visual Studio .NET. For this reason you will need to do a little extra configuring of your workstation to build mobile applications. Here is a quick overview of the kind of configuration your workstation will need to have.

If you are going to develop mobile applications on your workstation then your configuration needs to be similar to that for developing ASP.NET applications. You will need to be running Windows NT service pack 6.0 or higher, Windows 2000, or Windows XP. You will need to install Internet Information Services (IIS), the Microsoft .NET Framework, and Microsoft’s Mobile Internet Toolkit. Optionally, you could implement mobile applications, as you could ASP.NET applications, without Visual Studio .NET, but it is much easier to use Visual Studio .NET then it is to use a plain old vanilla editor like Notepad. (The specific list of system requirements can be found in the Visual Studio .NET help.)

After you have installed the Mobile Internet Toolkit, there will be additional classes, controls, designers, and project templates in Visual Studio .NET. It is these additional items that install with the MIT that we will use to create our sample application.

Creating Mobile Internet Toolkit Project

Assuming you have the correct configuration and have installed the Mobile Internet Toolkit, you can create a new project in Visual Studio .NET. Refering to figure 1, select File|New|Project and select the Mobile Web Application applet from the New Project dialog. This step will create a new project on the host server you selected, containing files almost identical to those for an ASP.NET Web Application. The most notable difference is that an ASP.NET Web Page inherits from System.Web.UI.Page and a Mobile Web Page inherits from System.Web.UI.MobileControls.MobilePage. You will also note that the designer for a Mobile Page looks a bit different (refer to figure 2).

Figure 1: Select the Mobile Web Application applet from the New Project dialog, shown.

Figure 2: The designer view of a Mobile Web Page in Visual Studio .NET.

The Form (see figure 2) is the region that we paint our user controls onto by dragging and dropping them from the Mobile Web Forms toolbox tab (refer to figure 3). (The Form is defined in System.Web.UI.MobileControls.Form.)

Figure 3: Shows the Mobile Web Forms controls for designing mobile user interfaces.

Creating the User Interface

Based on the current advancement of small mobile devices we have to be cognizant of the modest amount of screen space we have on various devices. For example, a WAP phone generally has a much smaller screen than a handheld. If we are creating an interface for both devices then we may want to create a simpler design for the smallest device or create a specific version of each page for various device types.

The significant benefit here is that we can use a rapid application design approach for the GUI with MIT for mobile applications, sharing a common code base. In keeping with tradition, Figure 4 shows a simple Mobile Page with a Label, TextBox, and Command button painted on the Form.

Figure 4: You can paint a graphical user interface for Mobile Web Forms just as you have become accustomed to doing for ASP.NET and Windows Forms.

The next step is to write some code-behind. If this is your first foray into .NET then code-behind is simply the code associated with a Mobile Web Page. (Think of the code-behind the same way that you would think of the code for a Windows Forms-based application: it is the code that makes the GUI work.)

Writing the Code Behind

Adding code to a Mobile Web Page is just like adding code to an ASP.NET Web Page or Windows Form. Double-click on the control in the designer to create the default event or switch to the code editor to pick the control and event that you want to write code for. Of course, the code-behind is just a class, which means that you can add other methods, properties, fields, events, and delegates just as you would for any other kind of class.

To add some code behind for our application I double-clicked on the Command button containing the text “Click Me!” and added the statement on line 28. To demonstrate that if you know how to write Visual Basic .NET code and understand objects then you could write the code for Mobile Web Pages, I included all of the code from the sample program in listing 1.

Listing 1: The code for a simple Mobile Web Page.

1:  Public Class MobileWebForm1
2:   Inherits System.Web.UI.MobileControls.MobilePage
3:   Protected WithEvents TextBox2 As System.Web.UI.MobileControls.TextBox
4:   Protected WithEvents Command1 As System.Web.UI.MobileControls.Command
5:   Protected WithEvents Label1 As System.Web.UI.MobileControls.Label
6:   Protected WithEvents Form1 As System.Web.UI.MobileControls.Form
7:
8:  #Region " Web Form Designer Generated Code "
9:
10:     'This call is required by the Web Form Designer.
11:      _
12:     Private Sub InitializeComponent()
13:
14:     End Sub
15:
16:     Private Sub Page_Init(ByVal sender As System.Object, _
17:       ByVal e As System.EventArgs) Handles MyBase.Init
18:         'CODEGEN: This method call is required by the
            'Web Form Designer
19:         'Do not modify it using the code editor.
20:         InitializeComponent()
21:     End Sub
22:
23: #End Region
24:
25:   Private Sub Command1_Click(ByVal sender As System.Object, _
26:     ByVal e As System.EventArgs) Handles Command1.Click
27:
28:     TextBox2.Text = "Hello " & TextBox2.Text
29:
30:   End Sub
31: End Class

The only code I added is the code on line 28. The Mobile Internet Toolkit designer generated the rest of the code based on my interactions with the visual designer.

Testing and Debugging Your Mobile Application

You can test and debug your mobile applications in Visual Studio .NET and Internet Explorer. (Recall that I said that MMIT will render CHTML, HTML, or WML depending on the target device.) When you test your application in Internet Explorer the target device is a PC; hence MMIT renders the code as HTML. The added benefit is that all of the skill you have acquired in using Visual Studio .NET for testing and debugging can be employed to test your mobile applications as you are building them. Figure 5 shows the mobile HelloWorld.sln stopped at a breakpoint in Visual Studio .NET.

Figure 5: You can leverage all of your skills with Visual Studio .NET for mobile application development too.

Of course you will want to test your mobile applications in a wide variety of devices, too. A first means of doing so is to download emulators from the various vendors. You can try www.motorola.com and www.nokia.com to obtain some web-enabled phone emulators. (Check with other vendors for additional emulators.)

Finally, when you have developed and tested your mobile applications you will want to deploy them for testing on physical devices. Configuring various servers for cell phones, handhelds, and pagers represents problems particular to the physical device.

Summary

Microsoft’s Mobile Internet Toolkit is a quantum leap forward in software development for mobile application developers. You can take the same database and business objects and build one set of GUIs that run on a wide selection of mobile devices. An excellent example of this in action can be explored on the IBUYSPY portal application from Microsoft; the source for the IBUYSPY portal is available for download from www.asp.net.

The future is here. No longer do developers have to use several different kinds of tools and languages to build and deploy applications for proprietary hardware devices. Use Visual Basic .NET for your object-oriented code and the .NET framework to design user interfaces. With the Mobile Internet Toolkit, if your Mobile Page is rendered in a desktop browser then you get HTML; if the Mobile Page is rendered in a Web-enabled phone then you get WML. This sort of convenience will make it possible to build applications for a wide variety of devices more cost efficiently than ever before.

About the Author

Paul Kimmel is a freelance writer for Developer.com and CodeGuru.com. Look for his recent book “Advanced C# Programming” from McGraw-Hill/Osborne on Amazon.com. Paul will be a keynote speaker in “Great Debate: .NET or .NOT?” at the Fall 2002 Comdex in Las Vegas, Nevada. Paul Kimmel is available to help design and build your .NET solutions and can be contacted at pkimmel@softconcepts.com.