Introduction to the Microsoft Mobile Internet Toolkit

Microsoft spoke for the first time of the .NET architecture at the Professional Developers' Conference in Orlando in July 2000. Its various features and components were explained to the large audience by a number of speakers. In this article Jean-Baptiste is going to introduce us to the MMIT and also show us how we can use it to develop a mobile web application for several types of devices.

Author Info:

By: Jean-Baptiste Minchelli

Poor Best

Rating:

/ 14

May 06, 2002

TABLE OF CONTENTS:

· Introduction to the Microsoft Mobile Internet Toolkit
· Architecture
· Your first application
· Conclusion

Introduction to the Microsoft Mobile Internet Toolkit - Your first application
(Page 3 of 4 )

Before speaking about the MMIT and his functionalities, we will create the typical "hello world" application.

Here it is the source code for our example:

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="VB" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile"%>
<mobile:Form runat="server">
<mobile:Label runat="server" Text="Hello World!"/>
</mobile:Form>

Create a file with a .aspx extension in the Mobilequickstart virtual directory and navigate to it. Here is the result in my WAP browser:

The result with the OpenWave browser

Notice how the Web Server generated WML? If you access the URL with another browser, then you will receive the most appropriate language type. For instance, here's the code generated (HTML) for Internet Explorer 6.0:

<html><body>
<form id="_ctl0" name="_ctl0" method="post" action="test.aspx?__ufps=897416">
<input type="hidden" name="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" value="">
<script language=javascript>
</script>
Hello World!</form></body></html>

The server controls render the appropriate markup-language from the same code. MMIT currently supports the most common device types using cHTML, WML 1.1 and HTML 3.2. As we saw previously, this is possible with the machine.config file. The client device type is matched against the file and its capabilities are automatically associated with it.

Please note that you have two ways to fill those properties:

machine.config file: this file is accurate for all the servers (and all the applications running on the server).
web.config: this file is valid just for the application. You can extend or change properties for supported device types.

Extract of the machine.config file:

<case match="(UP\.Browser)|(UP/)">
browser = "Phone.com"
inputType = "telephoneKeypad"
canInitiateVoiceCall = "true"
canSendMail = "false"
cookies = "true"
preferredRenderingType = "wml11"
preferredRenderingMime = "text/vnd.wap.wml"
rendersWmlDoAcceptsInline = "false"
rendersWmlSelectsAsMenuCards = "true"

In my examples I did not change the machine.config / web.config files. The browsers I used (Openwave SDK and Internet Explorer) are already defined in the configuration file.

Building a complete application
In this section I will present more of a complete example using Mobile Web Forms. I will use C# as the programming language; of course I could have used Visual Basic .NET or any other .NET language also. Mobile Web Forms have the peculiarity to be able to generate several physical pages for a single page of code. I will use this feature in my example.

Let's start from scratch for our application:

Create a new virtual directory under the default web site. You can use the wizard if you need to.
Set its properties to "Low Process" and "Script and Executable".
Copy the web.config file and the bin directory from the QuickStart directory into your applications directory.
Finally, create the default.aspx file with the following code:

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="C#" %>
<%@ Register TagPrefix="M" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<%-- Change the current form --%>
<script runat="server">
protected void OnChange(object Send, ListCommandEventArgs Dest)
{
if(Dest.ListItem.Value == "About")
ActiveForm = About;
else
ActiveForm = Editorial;
}
</script>
<%-- Stylesheet --%>
<M:Stylesheet runat="server">
<Style name="Title" Font-Size="Large"/>
</M:Stylesheet>
<%-- Index form --%>
<M:Form id="Index" runat="server">
<M:Image runat="server" ImageURL="servauto.gif" AlternateText="ServAuto.org">
<DeviceSpecific>
<Choice Filter="IsWML" ImageURL="servauto_wap.wbmp" />
</DeviceSpecific>
</M:Image>
<M:List id="ListIndex" runat="server" Decoration="Bulleted" OnItemCommand="OnChange">
<Item Text="Editorial" Value="Editorial" />
<Item Text="Aims" Value="About" />
</M:List>
</M:Form>
<%-- About form --%>
<M:Form id="About" runat="server">
<M:Label Text="The two aims of ServAuto are" runat="server" StyleReference="Title"/>
<M:List Wrapping="NoWrap" id="ListAbout" runat="server" Decoration="Bulleted">
<Item Text="Develop a free car-sharing service." />
<Item Text="Build and maintain a directory reserved of motorcar website."/>
</M:List>
</M:Form>
<%-- Editorial form --%>
<M:Form id="Editorial" runat="server" Paginate="true">
<M:Label Text="What is ServAuto.org" runat="server" StyleReference="Title"/>
<M:Label Text="ServAuto is a non profit organization founded in March 2000." runat="server" />
<M:TextView runat="server">
Blablabla blabla ...
</M:TextView>
</M:Form>

In our example we have three Mobile Forms:

The index.
The editorial.
General Information.

Your first form will be called when the page is loaded. It uses the list control that will call the "Onchange" method. This method just changes the current form. We added a picture to this form. It will be displayed respectively to the device capabilities. The second form is very similar to the first one.

Our third form will display the editorial. With the value "True" for the "Paginate" attribute, we allow the web server to paginate content according to the device capabilities (screen size, file size, etc):

Paginating in action

Notice that the text has been cut? The link allows you to navigate to the second page of the article.

Here's how it looked in Internet Explorer 6.0:

Result in I.E. 6.0

Here's how it looked with the OpenWave SDK:

Result with OpenWave SDK

We see that the picture shown in Internet Explorer is a colored GIF. In our WAP browser, it is a monochrome bitmap.

Here's the source code sent to the WAP browser:

<?xml version='1.0'?>
<!DOCTYPE wml PUBLIC '-//WAPFORUM//DTD WML1.1//EN' 'http://www.wapforum.org/DTD/wml_1.1.xml'><wml><head>
<meta http-equiv="Cache-Control" content="max-age=0" />
</head>
<card>
<p><img src="/myapp/(wbaew1bclbaclvzhryydqj55)/servauto_wap.wbmp" alt="ServAuto.org" /><do type="accept" label="Go"><go href="mos_pbc2"><setvar name="mcsvt" value="ListIndex"/><setvar name="mcsva" value="$(ListIndex)"/></go></do><select name="ListIndex"><option value="0">Editorial</option><option value="1">Aims</option></select></p></card>
<card id="__pbc2">
<onevent type="onenterforward"><go href="/myapp/(wbaew1bclbaclvzhryydqj55)/my.aspx" method="post"><postfield name="__VIEWSTATE" value="aDxfX1A7QDw73LjnjJDtsrzgo4QsMDs+Oz4=" /><postfield name="__EVENTTARGET" value="$(mcsvt)" /><postfield name="__EVENTARGUMENT" value="$(mcsva)" /></go></onevent>
<onevent type="onenterbackward"><prev /></onevent>
</card>
</wml>

Next: Conclusion >>