Developing Mobile Applications Using the Microsoft Mobile Internet Toolkit

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:

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.

devx-admin

devx-admin

Share the Post:
5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this

5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in Japan. This innovative approach will

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial intelligence (AI) in journalism. These

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this autumn sale has already created

Cisco Splunk Deal

Cisco Splunk Deal Sparks Tech Acquisition Frenzy

Cisco’s recent massive purchase of Splunk, an AI-powered cybersecurity firm, for $28 billion signals a potential boost in tech deals after a year of subdued mergers and acquisitions in the

Iran Drone Expansion

Iran’s Jet-Propelled Drone Reshapes Power Balance

Iran has recently unveiled a jet-propelled variant of its Shahed series drone, marking a significant advancement in the nation’s drone technology. The new drone is poised to reshape the regional

Solar Geoengineering

Did the Overshoot Commission Shoot Down Geoengineering?

The Overshoot Commission has recently released a comprehensive report that discusses the controversial topic of Solar Geoengineering, also known as Solar Radiation Modification (SRM). The Commission’s primary objective is to

Remote Learning

Revolutionizing Remote Learning for Success

School districts are preparing to reveal a substantial technological upgrade designed to significantly improve remote learning experiences for both educators and students amid the ongoing pandemic. This major investment, which

Revolutionary SABERS Transforming

SABERS Batteries Transforming Industries

Scientists John Connell and Yi Lin from NASA’s Solid-state Architecture Batteries for Enhanced Rechargeability and Safety (SABERS) project are working on experimental solid-state battery packs that could dramatically change the

Build a Website

How Much Does It Cost to Build a Website?

Are you wondering how much it costs to build a website? The approximated cost is based on several factors, including which add-ons and platforms you choose. For example, a self-hosted

Battery Investments

Battery Startups Attract Billion-Dollar Investments

In recent times, battery startups have experienced a significant boost in investments, with three businesses obtaining over $1 billion in funding within the last month. French company Verkor amassed $2.1

Copilot Revolution

Microsoft Copilot: A Suit of AI Features

Microsoft’s latest offering, Microsoft Copilot, aims to revolutionize the way we interact with technology. By integrating various AI capabilities, this all-in-one tool provides users with an improved experience that not

AI Girlfriend Craze

AI Girlfriend Craze Threatens Relationships

The surge in virtual AI girlfriends’ popularity is playing a role in the escalating issue of loneliness among young males, and this could have serious repercussions for America’s future. A

AIOps Innovations

Senser is Changing AIOps

Senser, an AIOps platform based in Tel Aviv, has introduced its groundbreaking AI-powered observability solution to support developers and operations teams in promptly pinpointing the root causes of service disruptions

Bebop Charging Stations

Check Out The New Bebob Battery Charging Stations

Bebob has introduced new 4- and 8-channel battery charging stations primarily aimed at rental companies, providing a convenient solution for clients with a large quantity of batteries. These wall-mountable and

Malyasian Networks

Malaysia’s Dual 5G Network Growth

On Wednesday, Malaysia’s Prime Minister Anwar Ibrahim announced the country’s plan to implement a dual 5G network strategy. This move is designed to achieve a more equitable incorporation of both

Advanced Drones Race

Pentagon’s Bold Race for Advanced Drones

The Pentagon has recently unveiled its ambitious strategy to acquire thousands of sophisticated drones within the next two years. This decision comes in response to Russia’s rapid utilization of airborne

Important Updates

You Need to See the New Microsoft Updates

Microsoft has recently announced a series of new features and updates across their applications, including Outlook, Microsoft Teams, and SharePoint. These new developments are centered around improving user experience, streamlining

Price Wars

Inside Hyundai and Kia’s Price Wars

South Korean automakers Hyundai and Kia are cutting the prices on a number of their electric vehicles (EVs) in response to growing price competition within the South Korean market. Many

Solar Frenzy Surprises

Solar Subsidy in Germany Causes Frenzy

In a shocking turn of events, the German national KfW bank was forced to discontinue its home solar power subsidy program for charging electric vehicles (EVs) after just one day,

Electric Spare

Electric Cars Ditch Spare Tires for Efficiency

Ira Newlander from West Los Angeles is thinking about trading in his old Ford Explorer for a contemporary hybrid or electric vehicle. However, he has observed that the majority of

Solar Geoengineering Impacts

Unraveling Solar Geoengineering’s Hidden Impacts

As we continue to face the repercussions of climate change, scientists and experts seek innovative ways to mitigate its impacts. Solar geoengineering (SG), a technique involving the distribution of aerosols

Razer Discount

Unbelievable Razer Blade 17 Discount

On September 24, 2023, it was reported that Razer, a popular brand in the premium gaming laptop industry, is offering an exceptional deal on their Razer Blade 17 model. Typically

Innovation Ignition

New Fintech Innovation Ignites Change

The fintech sector continues to attract substantial interest, as demonstrated by a dedicated fintech stage at a recent event featuring panel discussions and informal conversations with industry professionals. The gathering,

Import Easing

Easing Import Rules for Big Tech

India has chosen to ease its proposed restrictions on imports of laptops, tablets, and other IT hardware, allowing manufacturers like Apple Inc., HP Inc., and Dell Technologies Inc. more time