Building Mobile Web Applications with .NET Mobile Web SDK & ASP.NET
by Srinivasa Sivakumar.S
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!”.
|
<![CDATA[
<%@ Page Inherits="System.Mobile.UI.MobilePage">
<%@ Register TagPrefix="Mobile" Namespace="System.Mobile.UI">
<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.
|
<![CDATA[
<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?!?
Next: Mobile Application Design Concepts
|
