Introduction to ASP .NET Mobile
12/7/2004 12:37:13 PM
The mobile controls provided by ASP .NET target, as the name suggests, mobile devices (cell phones, Palms, etc.). This article will give you an idea of how to develop mobile web applications using ASP .NET and the Microsoft Visual Studio .NET environment. It will describe some of the most important mobile specific controls but won't go deep into the subject. At the end we'll also take a look at the Pocket PC Emulator 2002 which is included in Visual Studio .NET.
The ways mobile pages are organized differ from the classic web pages that you see on your computer. One mobile page is represented by a Form and a typical file (MobileWebForm1.aspx) can contain multiple forms, therefore multiple pages. This way when you open a page with the WAP browser actually multiple pages will be loaded (represented by forms) and when you click a link to one of the other forms there will be no loading time because they are in the same page. There is a good reason for this. Some WAP browsers disconnect after they retrieve the webpage to save the battery of the mobile phone and the money if the connection is charged per minute. This way they won't have to reconnect every time a new form is loaded, if it is located in the same file.
Create a new ASP .NET Mobile Web Application project in Visual Studio .NET.
MobileWebForm1.aspx is created with a form on it:
Also if you look in the HTML code you can see the tags that define this form:
<mobile:Form id=Form1 runat="server"></mobile:Form>
If you wish, you can add some content to it and view it on your mobile phone:
<mobile:Form id=Form1 runat="server">
Hello <i>visitor</i>!
</mobile:Form>
If you don't have one (do you live in a cave?) you can compile and see the result in the IE window. Or you could download a simulator like the popular Openwave. The result is nothing extraordinary, just some simple text.
Earlier in the article I said that an ASP .NET mobile page can contain multiple forms. In the following example we add a second form, Form2 and we link to it from Form1:
<mobile:form id=Form1 runat="server">
Hello <i>visitor</i>!<br /><br />
<mobile:link id="Link1" Runat="server" NavigateUrl="#Form2">
- About us
</mobile:link>
</mobile:form>
<mobile:form id=Form2 runat="server">
<b>About us</b><br /><br />
Here goes some information about the website.
</mobile:form>
The linking is not done with the typical <a href> tag. Of course, after the code is compiled the HTML actually uses an <a href> tag but that's its job and not ours. As you can see the linking to the other form is done exactly like when using anchors.
The result in the Openwave simulator is the following:
When you click that link you get to Form2 which displays the text "About us. Here goes some information about the website.".
Displaying a graphic on a mobile phone is as easy as displaying it in a usual web browser. You don't use an <img> tag, but this one:
<mobile:Image id="Link2" Runat="server" NavigateUrl="#Form3" ImageUrl="http://www.yourwebsite.com/logo.gif" />
The List control
This is a basic control that you'll be using in almost any WAP website. It provides sufficient functionality to prove itself useful. Let's see it in action.
First add a link to the Form that includes the control:
<mobile:link id="Link2" Runat="server" NavigateUrl="#Form3">
- Get product list
</mobile:link>
As you can see here, "Get product list" links to Form3, so let's create this form:
<mobile:form id="Form3" runat="server"><B>Product list</B><BR><BR></mobile:form>
Let's add to this form a specific ASP .NET mobile control - List.
<mobile:form id="Form3" runat="server"><B>Product list</B><BR><BR>
Currently we have the following products for sale:
<mobile:List id="List1" runat="server">
<Item Text="Microsoft Natural Keyboard" />
<Item Text="Philips 5.1 Surround Sound" />
<Item Text="HP LaserJet Printer" />
</mobile:List>
</mobile:form>
If you run this application you can see that the result is just a simple list of the products we entered, if you look at the source code in Internet Explorer you can see that it's created with the help of a table. So what's so special about this control? Well depending on which device the page containing the control is opened, it will be displayed differently. For example on the web browser the list is created using a HTML table, while on a WML browser it will be created much simpler, by separating the items with <br /> tags.
Another feature of Lists is that you can bind them to different data sources, like databases or XML files.
The AdRotator control
Banner advertisements on WAP page appeared a short while after WAP was born. The AdRotator mobile control acts in the same way as the original AdRotator control does. The mobile control has a very useful feature - you can choose to display one type of image for typical computer browsers and other type of image for WML browsers.
The Calendar control
Let's take a look at another mobile control - the Calendar. Adding a functional calendar to a WAP page was a very difficult task in the past, but with the Calendar control it's just a matter of dragging and dropping.
So add a new link in Form1 that points to a new form, Form4:
<mobile:link id="Link3" Runat="server" NavigateUrl="#Form4">
- Calendar
</mobile:link>
Also add Form4 now:
<mobile:form id="Form4" runat="server"><B>Calendar</B><BR><BR></mobile:form>
If you drag and drop the Calendar control from the Toolbox inside Form4, the following tag will be added:
<mobile:Calendar id="Calendar1" runat="server"></mobile:Calendar>
The calendar control offers great functionality, of course a bit limited for WAP devices. The most important event of this control is called Calendar_SelectionChanged() and, as the name implies, occurs when the visitor selects a date on the calendar.
You could build an entire mobile website based on this control. For example the user picks a day on the calendar and he can see the TV guide for that day, or the movies that run at some cinema.
The SelectionList control
This control acts exactly as a typical DropDown control and also looks like one. Only that it can be made to look like a ListBox also, or like a radio control, or checkbox, or a ListBox that allows multiple items to be selected. This control can change its functionality by changing one of its properties called SelectType:
Also the tags generated by this control are different depending on the devices on which the page is loaded. On an usual computer browser it would display the typical HTML controls. Whereas on a WML browser it would be rendered using WML compatible tags. From a cell phone browser the visitor will have to select the item he wants by using the numeric key pad or by navigating to the wished item.
Pocket PC 2002 Emulator
This emulator comes with the Microsoft Visual Studio .NET package and it's a really nice software to play with if you don't own a Pocket PC. After you're tired of playing with it you can use it for more productive purposes, developing and testing applications and web applications with it. You can fire up this emulator from the Tools menu, Connect to Device item. Choose Pocket PC 2002 Emulator (Default). You probably noticed there's a Windows CE .NET emulator also. Click Connect and the emulator should start in a few seconds. The first thing you'll want to do is set up your internet connection on it. You can do that from the Start menu -> Settings -> Connections tab -> Connections icon.
Aside from the fact that this emulator is a very useful tool for testing your Pocket PC applications, you can also use it to see how your ASP .NET mobile pages look like on the Internet Explorer mobile browser. Open the MobileWebForm we created earlier in this article to see how the forms and controls we added look like on this device. Here's the calendar, for example:
You can apply some stylesheet to it so it will look much better than it does now.
So this emulator can also be used for testing web application, not just Windows mobile applications. A useful tool along with the emulators from Openwave and your WAP enabled cell phone. Using these you can develop perfect mobile applications.
Andrei Pociu
Geekpedia.com
|