Introduction
These days mobile devices are part of our life style and most of us can’t live with out them. When these mobile devices are connected to the Internet, the powers of the mobile devices are endless. We can deliver timely data to the user at any place and any time. Traditionally mobile applications are developed using WML, WMLScript and WBMP with a server.
For dynamic WML applications, developers used ASP, JSP, PHP, etc. Still these applications serve WML on the fly. The Mobile Devices includes Cell Phones, Two Way Pagers, Palm Pilots, Pocket PC’s and Auto PC’s. Few of these devices support WML, few support HTML and few support both WML and HTML. If you want to satisfy all the mobile devices then you must build your mobile web application in both WML and limited HTML.
Recently, Microsoft introduced a revolutionary application development platform called the “.NET Framework”. This .NET framework includes ASP.NET (next version of ASP) for Web development. ASP.NET-based Web development supports traditional Web clients such as IE and Netscape as well as mobile clients such as Phone.com, Nokia Cell phones and Pocket PC’s. ASP.NET applications can be developed on any .NET enabled language such as VB.NET (Next version of VB), JScript, Managed C++, C# (Pronounced as C Sharp), etc. In this article we’ll see how to develop mobile applications using the .NET Mobile Web SDK, ASP.NET and VB.NET.
Introduction To .NET
Before moving further, I want to give you a brief introduction to .NET and how it works. .NET is a developmental platform introduced by Microsoft at their 2000 Professional Developers Conference (PDC). The .NET framework is currently in Public Beta 1. The following figure shows a simple architecture of the .NET framework application development.
When an ASP.NET page request comes from a web client such as IE or a mobile device, IIS will pick up the request and forward it to the .NET framework. If the ASP.NET page is requested for the first time then the .NET framework will compile the ASP.NET page into the intermediate language (IL). Then the IL code will be complied in to native code by a Just-In-Time (JIT) compiler. As you can see, the .NET framework is the heart of the ASP.NET application. The .NET framework will supply the need resources and the language compiler of your choice to compile the code.
Requirements for development
To develop mobile applications with .NET, you must download and install the following components. IE and the .NET SDK can be downloaded from the Microsoft MSDN site for free.
- Windows 2000 Professional/Server/Advanced Server OS
- Internet Explorer 5.5
- .NET framework Beta 1
- .NET Mobile Web SDK Beta 1
- Your favorite WAP simulator.
Let’s Start Developing!
To develop mobile applications with .NET, we must to include the Mobile Web namespace (System.Mobile.UI) exposed by the .NET Mobile Web SDK (Via the MobileUI.DLL file). For those who are new to the term namespace, namespaces are something like header files in C++ and References in Visual Basic. Basically the namespaces will provide the required classes to develop the application.
Developing a mobile web application with the .NET framework is very easy.
- Create an ASP.NET page
- Include the Mobile Web Namespace System.Mobile.UI
- Design the page with Mobile Controls
Simple isn’t it?!?
Mobile Controls
Mobile Controls are the building blocks for developing mobile applications. For those who come from the GUI/Web development field with any of the Integrated Development Environments (IDE) such as VB or MS Frontpage, Mobile Controls are similar to the HTML Button control and Grid control in VB. Mobile Controls simplify application development by providing the capabilities that the programmer needs.
For example, If you want to draw a WML Card tag, you can use the “Mobile Form Control”. There are similar equivalent Mobile Controls available for all the WML tags. The beauty of the Mobile Controls is that they are not only limited to the WML tags; instead, they go beyond the WML tags and create useful Mobile Controls such as the “Calendar Mobile Control” which is not available in WML.
Let’s see an example of a ASP.NET page which displays “Hello, World!”.
| &lt;%@ Page Inherits=”System.Mobile.UI.MobilePage”&gt; &lt;%@ Register TagPrefix=”Mobile” Namespace=”System.Mobile.UI”&gt; <mobile:form runat=”server”> <mobile:label runat=”server”>Hello, World!</mobile:label> </mobile:form> |
Step By Step
- In the first line we’re inheriting the mobile page namespace into the ASP.NET page object. If we don’t do it, ASP.NET will follow its usual page handling defined for regular web applications.
- In the second line, we’re registering a tag prefix for the namespace. You can see that the rest of the code uses the word “Mobile” as the namespace tag prefix for all Mobile Controls. If you want, you can set the tag prefix to any name you want.
- In the third line, we’re creating a mobile form with the runat attribute set to server. This forces the ASP.NET runtime to interpret the mobile control in to the target tag.
- In the fourth line, we’re including a mobile label control and including the text “Hello, World!”.
- Finally, we’re closing the mobile form tag.
Let’s run the above code and see the result.
This is how it looks in the “Phone.com Simulator with the ALCATEL skin”. Looks good, so now let’s see the code generated by ASP.NET.
Cool, huh? ASP.NET generated WML code for us and the Mobile Form control has been transformed into the WML card tag; likewise, the Mobile Label control has been transformed into a WML paragraph tag.
Let’s see how this looks in Pocket IE.
Let’s look at the code generated for Pocket IE.
| <html> <body> <form id=”ctrl1″ name=”ctrl1″ method=”post” action=”Exp1.Aspx?631169274439268880″> <div>Hello, World!</div> </form> </body> </html> |
Wow! Mobile controls generated HTML code for Pocket IE. Yes, mobile controls have the capability of detecting the browser and spooling the content they support. So, when we open the ASP.NET page in a WAP simulator we got WML code. When we opened it in Pocket PC, we got HTML code. This gives us the capability to “develop once and serve any mobile device”. Very cool, isn’t it?!?
Mobile Applications Design Concepts
The .NET Mobile Web SDK supplies three container objects: MobilePage, Form and Panel. The MobilePage control is the primary container for the mobile application. A single MobilePage can have one or more Form controls. A Form control can have zero are more Panel controls. Panels are used to group mobile controls.
Mobile Controls Shipped With .NET Mobile Web SDK
Mobile controls can be grouped into three main groups. They are User Interface (UI) controls, Validation Controls and Utility controls. The UI controls are things such as Label controls that allow us to manipulate the UI. The validation controls allow us to validate the user input such as RequiredFieldValidator control. These controls validate the data entered by the user before the data gets submitted to the server. The utility controls are items such as the Calendar control, which supports the viewing a calendar with out writing any code.
The following tables show the controls shipped in the above categories.
UI Controls
| Control Name | Description |
| Command | A Command control performs actions such as submitting information. |
| Form | Form control is a container for one or more mobile controls. |
| Image | Displays an image on the mobile device. |
| Label | Displays output text on the mobile device. |
| Link | Creates a hyperlink in the mobile form. |
| List | Displays a list of items on the mobile device. |
| MobilePage | Container control for all mobile controls. |
| TextBox | Displays single line text box. |
| Textview | Displays multilane text box. |
Validation Controls
| Control Name | Description |
| CompareValidator | Compares two mobile controls. |
| CustomValidator | Custom validator provides us to call our own validation procedure from the control. |
| RangeValidator | Range validator validates the data within a range. |
| RegularExpressionValidator | Validates the data against the expression specified in the control. |
| RequiredFieldValidator | Verifies that the user enter some data in these fields. |
| ValidationSummary | Displays a summary of all the validation that occurred. |
Utility Controls
| Control Name | Description |
| Call | Supports calling a Telephone number. |
| Calendar | Displays a calendar for date picking functionality. |
| AdRotator | Displays random advertisement. |
Automatic pagination is one of the main advantages of the .NET Mobile Web SDK. The .NET runtime will take care of the paging for the targeted device. The pagination is handled differently for each different Mobile control. For example, for the List control, the pagination is handled by the PageSize property of the control. This property is set automatically based on the target device. When the paging takes place at runtime the controls included in the panel control will stay together.
A Simple Example
Let’s write a simple application that displays a text box to accept your name and displays the entered name in the next form.
| &lt;%@ Page Inherits=”System.Mobile.UI.MobilePage” %&gt; &lt;%@ Register TagPrefix=”mobile” Namespace=”System.Mobile.UI” %&gt; <script language=”VB” runat=”server”> Sub Btn_OnClick(Src As Object, E As EventArgs) ‘Move to the next mobile form ActiveForm = frm2 ‘redisplay the name. EnteredName.Text = “Your name is: ” &amp; YourName.Text End Sub </script> <mobile:form id=”frm1″ runat=”server”> <mobile:label runat=”server”>Your Name:</mobile:label> <mobile:textbox runat=”server” id=”YourName”/> <mobile:command runat=”server” id=”btn” onclick=”Btn_OnClick”>Ok&lt;/mobile:Command&gt; </mobile:form> <mobile:form id=”frm2″ runat=”server”> <mobile:label runat=”server” id=”EnteredName”/> </mobile:form> |
In the above code, we built two mobile forms. The first form has the id of frm1 and the next form has the id as frm2. By the way, the Mobile Form control doesn’t support the name attribute. Instead, it supports the id attribute. That’s how the ASP.NET runtime identifies the forms. In the first form, we’ve added a label control, text box control and a command button control. When the command button is clicked, the server-side VB sub routine (Btn_OnClick) will be called. Those who are familiar with VB will feel right at home now. In the event handling VB sub routine, we’re moving to the next form by setting the ActiveForm method to frm2. Then we’re accessing the label control defined in the frm2 and setting the value submitted by the user.
Here is the screen shot of the above code in action simulated in the Phone.com and Pocket IE simulators.
Here is the view of the code generated for the Phone.com simulator by ASP.NET.
As you can see, ASP.NET generated the WML code necessary to handle the text input from the user and post it to the server. It also generated the WML output to display the user-entered name in the next WML card.
Pros and Cons Of The .NET Mobile Web SDK
There are a few pros and cons of using the Mobile Web SDK.
Pros
- No need to do browser checks and deliver WML or HTML content based on the target device.
- Only thing to learn is ASP.NET and .NET Mobile Controls. No need to learn WML.
- Easy to use programming model and drag and drop application development with Visual Studio.NET
- Server-Side event handling support.
- Automatic paging support.
Cons
- You are limited to Microsoft products and operating systems.
- When a new version of WML or HTML is released, you’ll wait until Microsoft announces support for the new version with its Mobile Web Controls.
Supported Devices
The .NET framework is still in development (Beta 1). Currently .NET Mobile Web SDK has been fully tested on following devices:
- Pocket PC with Microsoft Pocket Internet Explorer version 4.5
- Mitsubishi T250 phone
- Nokia 7110 phone
- Nokia WAP Toolkit 2.0 Beta simulator for the Nokia 7110
The .NET Mobile Web SDK has undergone limited testing on the following devices:
- Samsung Touchpoint phone
- Sony CMD-z5 phone
- Microsoft Mobile Explorer™ v 2.01 simulator
- Phone.com UP.SDK 4.0 simulator with the generic skin
- Phone.com UP.SDK 3.2 for WML simulator with Mitsubishi T250 skin
Many other devices are supported but have not yet been tested with the .NET Mobile Web SDK. You will notice that I’ve used an untested skin with the Phone.com WAP simulator in this article.
Summary
In this article, we’ve demonstrated the capabilities of the .NET Mobile Web SDK and how .NET Mobile Web SDK supports various devices. We’ve also seen a sample used to generate Mobile Applications with .NET Mobile Web SDK. For further information about the .NET Mobile Web SDK check out the related links that I’ve included.
Until next time, Happy Programming!