Developing Mobile Applications Using the Microsoft Mobile Internet Toolkit

ne of the ever-present challenges facing mobile application developers is maintaining the look and feel of applications across different devices. There is an untold number of mobile devices such as PDAs and cell phones on the market today and each device has different behaviors and a different graphical user interface. Historically, developers have had to maintain multiple versions of an application?one for each device it is intended to run on. But due to the large number of devices that is no longer a viable option for developers today.

The Mobile Internet Toolkit (MMIT) from Microsoft is an extension to the .NET Framework and ASP.NET that allows developers to write mobile Web applications that target multiple devices such as cell phones and PDAs. The MMIT frees the developer to concentrate on the application logic and leave the UI rendering to the runtime.

In this article, you’ll learn how to develop a mobile application using MMIT and how to test your application using emulators.

Installing MMIT
To install MMIT, you need to have the Microsoft .NET Framework version 1.0. Because MMIT is an extension of ASP.NET you must also have IIS running. Download and install MMIT. You can verify a successful installation by creating a new project in Visual Studio .NET (see Figure 1).

Author’s Note: At press time, the MMIT had been renamed to ASP.NET Mobile Controls. ASP.NET Mobile Controls requires .NET version 1.1, which is currently in final beta. For more information about ASP.NET Mobile Controls, visit http://msdn.microsoft.com/downloads/default.asp?url=/downloads/sample.asp?url=/MSDN-FILES/027/002/061/msdncompositedoc.xml.

Figure 1. Creating a Mobile Web Application Using Visual Studio .NET: When MMIT is installed the icon to create new mobile projects will show up in the start pane of VS.NET.

Figure 2. Designing Your Mobile Application: Designing apps in MMIT will be very familiar to ASP.NET developers.

As you can see in Figure 2, the design pane by default contains one form. In ASP.NET, you can have one and only one form in a page. In MMIT, you can have multiple forms in a page. Also notice that the toolbox contains a subset of the controls that you can find in an ASP.NET application (only a partial list is shown in Figure 2). Thus programming MMIT is very similar to programming ASP.NET.

Comparing MMIT to .NET Compact Framework
There are two main types of mobile application: Web-based and local. The first type runs on the server, typically the Web server, and is accessed by mobile devices through the Internet. This is where MMIT comes in. The second type is standalone applications running on the devices itself, with or without Internet access. For this type of application, Microsoft provides a scaled-down version of the .NET Framework?the .NET Compact Framework (.NET CF). The .NET CF is currently in beta and will appear in the next version of .NET (Everett) as the Smart Device Extension.

Configuring Visual Studio .NET
When you run mobile applications in Visual Studio .NET it will use Internet Explorer to test your code. If you are only targeting users of Pocket PC devices, that is quite sufficient. But if you are targeting cell phones users as well, then you also need to test your code using an emulator. For this article, I have used three ways of testing my application:

• Using Internet Explorer
• Using the Pocket PC 2002 emulator, downloaded from http://www.microsoft.com/mobile/downloads/emvt30.asp. The emulator is part of the embedded Visual Tools 3.0
• Using the WAP emulator from Openwave. (Though the latest emulator from Openwave is version 6, I still prefer the older version 4.0.) You can download the emulator from http://www.openwave.com.

Figure 3. Test with an Emulator: You have to configure your project in VS.NET ahead of time to launch the desired emulator during testing.

Of course when you deploy your application, you need to test it on real devices. I have also tested the code in this article with a Compaq iPaq 3870 equipped with an 802.11b wireless access card.

To ensure that your emulator is launched every time you run your application, go to Solution Explorer and select the current project. Right click on the project name and select Properties. Then specify the path that contains your emulator in the “Start external program” textbox (see Figure 3).

As the UP.Simulator accepts command line arguments, you can specify the commands in the “Command line arguments” textbox. I am specifying the URL that the emulator should load when it is started:

-go http://localhost/MobileWebApplication1/MobileWebForm1.aspx 

However, I have noticed that this method doesn’t always direct the emulator to open the page. In any case, you can enter the URL yourself through the “Go” textbox of the emulator. Another way to set the default browser is to go to Visual Studio’s File menu and select the “Browse With” option to add in a new browser.

Our Sample Application?Phone Number Lookups

Figure 4. Creating the Database: The finished application will use the information in this database to look up an employee by name and return his or her phone number.

The best way to learn a new technology is to develop a simple application and then enhance it. For this article, I’ve chosen to build a phone directory service that allows users who are out of the office to look up the phone numbers of colleagues. The best way to implement this is to build and host the mobile application on a Web server; the client device (PDA or WAP-enabled cell phone) will access the application to check for phone numbers.

Figure 5. Populating the First Form: You’ll need just three controls to build the basic form that users will use to request phone number data from the Employee database.

First I need to create my database. I used Microsoft SQL Server and created the EmployeeInfo database containing a table called Employees. Populate the database with some sample records (see Figure 4).

Use Figure 5 to help you begin building the first form. Drag and drop each control onto your form in the configuration shown.

You can configure the various properties of the controls via the Property window. For the Password textbox control, set the Password property value to true so that the entered text is replaced by dots on the screen.

Once the controls are in place, you can write the application logic of the Login button:

VB.NET

    Private Sub cmdLogin_Click	(ByVal sender As System.Object, ByVal e As System.EventArgs) 	Handles cmdLogin.Click        If txtName.Text = "weimeng" And txtPassword.Text = "secret" Then            ActiveForm = Form3        Else            ActiveForm = Form2        End If    End Sub

C#

private void cmdLogin_Click(object sender, System.EventArgs e){   if ((txtName.Text == "x") && (txtPassword.Text == "x")) {      ActiveForm = Form3;   }   else {      ActiveForm = Form2;   }}

The code above performs a check to authenticate the user. Your application should also check against a database of valid users. If the user is authenticated, the user will be transferred to Form3, else to Form2, which will be built later in this article. The ActiveForm property sets the current active form to display.

At this point I want to test the output thus far using my two emulators (see Figure 6).

Figure 6. Viewing Form1 in Pocket IE and UP.Simulator: You can preview the user interface for your initial ASP form on both the Pocket PC emulator (left) and the Openwave emulator (right).

Figure 7. Populating Form2 and Form3: Two more simple forms complete the user interface for the sample application..

Obviously, the look and feel for each browser differs wildly. While the Pocket IE displays all the controls in a single page, the UP.Simulator prompts the user name and password in different cards.

Now I’ll build the remaining forms that I need for my completed app (see Figure 7).

Form2 contains the TextView control to display the error message. The use of the TextView control is very similar to that of the Label control, that is, to display text. However the Label control appends a line break
after it so the next control will appear below it. The TextView control allows you to turn off the line break so that controls can be positioned on the same line.

Figure 8. Displaying Form2 in Pocket IE and UP.Simulator: Form 2 simply directs a user back to Form 1 in the event of an invalid login.

Form2 also contains the Link control. The Link control creates a hyperlink to link to another page or another form. In this case, I have set the NavigateURL property of the control to “#Form1” (note the “#” character in front of the form name). Figure 8 shows Form2 completed and loaded in Pocket IE and UP.Simulator.

In Form3, I used a SelectionList control (see Figure 9) to display all the unique locations available in the database. I did this in the Activate event of the form to ensure that the list is populated when the user sees it.

Here’s the code to activate Form3, in VB.NET and C#:

VB.NET

    Private Sub Form3_Activate	(ByVal sender As System.Object, ByVal e As System.EventArgs) 	Handles Form3.Activate        Dim sql As String = "SELECT DISTINCT Location FROM Employees"        Dim conn As New SqlConnection		("server=localhost; uid=sa; password=; database=EmployeeInfo")        Dim comm As New SqlCommand(sql, conn)        Dim reader As SqlDataReader        conn.Open()        reader = comm.ExecuteReader        lstLocation.Items.Clear()        lstLocation.Items.Add("All Locations")        While reader.Read            lstLocation.Items.Add(reader("Location"))        End While        conn.Close()        conn = Nothing        comm = Nothing        reader = Nothing    End Sub

C#

private void Form3_Activate(object sender, System.EventArgs e){   string sql = "SELECT DISTINCT Location FROM Employees";   SqlConnection conn = new SqlConnection    ("server=localhost; uid=sa; password=; database=EmployeeInfo");   SqlCommand comm = new SqlCommand(sql, conn);   SqlDataReader reader;   conn.Open();   reader = comm.ExecuteReader();   lstLocation.Items.Clear();   lstLocation.Items.Add("All Locations");      while (reader.Read())       lstLocation.Items.Add(reader.GetString(0));   conn.Close();   conn = null;   comm = null;   reader = null;}

When Form 3 is loaded and tested, it should look like Figure 9.

Figure 9. Looking Up Locations: With Form3 completed, you can test it in the Pocket IE and UP.Simulator.

Performing the SQL Lookup

Figure 10. Populating Form4: Use a List control to display the results of the SQL query.

When the user clicks on the Search button, we will formulate the SQL statement, retrieve the results, and display them in Form4. For simplicity I am creating the SQL statements directly?beware of SQL injections. (See Listing 1 for the code in VB.NET and Listing 2 for C#.)

In Form4, I used a List control to display the results returned from the SQL query. I need to do some configuration for the List control to make it look like the finished output in Figure 10.

Figure 11. Displaying Form4 in Pocket IE: By setting the ItemsPerPage property to three, only three of seven results are displayed at once. The full result set is paginated.

Set the Decoration property to Numbered, so that items will display with a serial number. Set the ItemsPerPage property to whatever number you wish. I set it to three so that, at most, three items will be shown on the screen. You also need to set the Paginate property of Form4 to true, so that the List control can paginate its list in multiple pages (see Figure 11 and 12).

Figure 12. Displaying Form4 in UP.Simulator: By setting the ItemsPerPage property to three, only three of seven results are displayed at once. The full result set is paginated, though, unlike in Pocket IE, the numbering restarts at one on each page.

To ensure that the items in the List control are clickable, you need to service the ItemCommand event of the List control. When an item is clicked, we will display the next form, which is Form5 (see Figure 13.)

Figure 13. Populating Form5: Form 5 is where the user finally gets the phone number he/she requested.

The Image control in Form5 can be customized to display different image formats depending on the type of device that is viewing the page. The PhoneCall control allows devices (such as cell phones) that support making phone calls to directly call a number. For devices that do not support this feature, it will display text.

Figure 14. Display Form5 on Pocket IE and UP.Simulator: finished employee record can be seen here in both of our test environments.

When the user clicks on an item on the List control, it will display the photo of that person (the image name is the EmployeeID and stored in the current working Web directory). Other employee information is also retrieved from the database. Listing 3 shows the code to activate Form5 in VB.NET; Listing 4 shows the same in C#.

If you click on the email link on the Pocket IE, you can directly send an email using Inbox. On the UP.Simulator, you can select the “Phone:” entry and make a call (on a real phone you would be able to make a call directly).

That’s it! Using the MMIT is pretty similar to programming ASP.NET. The only difference is that one of the devices that is actually accessing the application. As a mobile application developer, you need to ensure (with a lot of testing) that your application runs correctly on all devices that it is designed for.