Creating mobile applications is easy with ASP.NET mobile controls from Microsoft (http://msdn.microsoft.com/downloads/list/netdevmit.asp). In this article, learn to create mobile applications that target a variety of mobile browsers with very little development effort. If you are new to wireless development, this is an excellent primer for developing a simple "Hello World" page to a full fledged portal application.
In the past, we typically relied on XML and XSLT to create sites that needed to target multiple client platforms. Take XML data, pump it into an XSL document and allow it to produce the correct markup output for the exact device(s) with which we felt our target market would be viewing the site. This was extremely cumbersome because even though many devices claimed to target a specific markup language version, we quickly noticed that many actually failed to do so. Thus, the programmer was forced to perform a bunch of browser checks, making sure they targeted correct versions and outputted the correct markup for that browser and device. With ASP.NET mobile controls, Microsoft doesn't want the average developer to be concerned with the specific device or markup standard. The company wants the developer to focus solely on creating the application.
I will assume that you have downloaded and installed the Microsoft Mobile Internet Toolkit 1.0, the Device Updates, and Microsoft Visual Studio .NET (VS .NET). In order to test different devices, it is also recommended to download and install the Openwave SDK 6.1 (at the time of publication I had too many problems with 6.2, so I chose 6.1 for all of the testing I will do for this article). The SDK can be downloaded from http://developer.openwave.com/resources/sdk.html. If you do plan on using the Openwave client with VS .NET, take a look at http://msdn.microsoft.com/library/en-us/dnmitta/html/mmit_openwave.asp. This describes how to setup VS .NET to work directly with the Openwave emulator. Another emulator to consider testing your mobile pages with is the Pocket PC emulator from Microsoft http://msdn.microsoft.com/library/default.asp?url=/downloads/list/pocket2002.asp.
Let's start with the basics of the mobile development experience by creating a simple "Hello World" page. Then we will create a simple control. These simple concepts also will be applied to creating an entire portal. Included is a basic administration application for the portal, which you can dissect to see exactly how it works.
Open up VS .NET into a new C# Mobile Web Application at the location http://localhost/HelloWorld.
Once the project finishes loading, the default form's designer will appear. Click and drag a Label into the "Form1" object already on the designer. Change the "Text" property to "Hello World" and then click the Run button. This should default to open up Internet Explorer with the "Hello World" label simply showing. Take time now to View the source for the page in IE, "View, Source". Notice that it has rendered the label with HTML specific markup.
Now open the same page (http://localhost/helloworld/MobileWebForm1.aspx) in the Openview SDK Client emulator and then click the F5 button which will show you the source.
<!-- WBXML public ID number 0x0001: <unknown or missing> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title/>
</head>
<body>
<form id="Form1" method="post" action="MobileWebForm1.aspx?__ufps=319778">
<div>
<input type="hidden" name="__ET"/>Hello World
</div>
</form>
</body>
</html>
Next let's examine how easy it is to create user controls in order to modularize our entire mobile site into separate pluggable units.
Our First Mobile User Control
Our first control will be fairly straight forward and easy to create. It will simply consume an XML Web service and display the result. For this example I have chosen to consume the Homeland Security Level service (http://www.tinetics.com/main.cfm?action=webservice_detail&webservice=14), which returns a string indicating the current level of security for the United States. First register with http://www.tinetics.com to receive a username and password for the Web service.
In your HelloWorld project, in the Project Explorer, right click the "HelloWorld" project node, and Add a New Item. Choose a "Mobile Web User Control" with the name "SecurityControl.ascx", and hit "Open".
Once the project finishes loading, you will be in the Designer for the SecurityControl.ascx. Click and drag a new Label from the toolbox into the Designer. Rename the Label to "ResultsLabel" and clear the value in the "Text" property.
We will now need to add in the Web Reference to the Web service. Right click the Project again, and this time choose "Add Web Reference" and use the URL: http://www.tinetics.com/webservices/securitylevel.cfc?WSDL, and then hit the Add Reference button. In the Solution Explorer, rename the new reference to "Security".
Now we need to setup our control to consume the new Web Reference. Double click the Designer, which should bring you to the code behind. In the Page_Load() event handler, add the following source:
Security.securitylevelService
s = new Security.securitylevelService();
where "user" and "pass" are the authentication details you received from the http://www.tinetics.com registration (e-mail).
Finally click and drag the control from the Solution Explorer onto the Form within our MobileWebForm1.aspx page. So open up the MobileWebForm1.aspx page in the Designer and click and drag over the "SecurityControl.ascx" into the Form object, and then run the application. You should see "Hello World" and then the actual status returned back from the service, for example "ELEVATED".
You have now created a very simple mobile form and user control. There were no worries about any of the specific details regarding the supported markup languages or the devices which are hitting the pages. Take time now to test it out on any device.
In the next section we will concentrate more on actual portal development.
Creating the Portal - Introduction
Wireless applications I have created are fairly simple menu systems with a few actual pages that perform some sort of work, with or without user input. I guess that holds true for most Web sites today, but I think it is more apparent for wireless applications. With this in mind, the portal's core will be a collection of menus, and when we need to display data or get the users' input, we will use controls, like the Security Control in the previous example.
In VS .NET, create a new C# Mobile Web Application at the Location: "http://localhost/wirelessweb".
First is to put into place the foundation for a menu system. Every menu system includes a list of available options, so the list control provided by Microsoft will be an excellent choice to handle this. Now since each portion of the menu system could contain controls, a Panel Control will need to be added to the form also. I will cover exactly how to dynamically load our controls into this panel later on. For now, let's examine exactly how to store our settings for the portal.
Creating the Portal - Settings
In order to keep the portal as simple as possible, I have used an XML document to store all of the settings. The majority of the site will be a menu system, so we will need an XML document to reflect that. Take a look at the following markup and see how it meets our needs:
Here is a description of the XML document's nodes and attributes:
menu
node : used to indicate a menu section
name
attribute : a unique id for that menu, used for navigation
title
attribute : the display title for the current menu
contains
0 to many item nodes
item
node : used to indicated a menu item itself
title
attribute : the display title for the item
type
attribute : has two possible options to control rendering of the item
i.“link” : used to indicate this item is a link to another menu
ii.“Control” : used to indicate this item is a control we need to
render
location
attribute : use to specify a destination or control location
i.if this item is a “link” it will be the name of the menu that
it points to, with a pre-pended @ for tagging purposes (so we are sure it is a
menu it is pointing to, and not an external http link).If the location attribute does not contain
an @ as the first character we know it will be an external link to an external
site.
ii.If this item is a “Control” the it will be the file location
and name of the control which we created and want shown.
args
attribute : used to specify option arguments to the item when the item is
a “Control”.The included project
shows an example of when and how to use this.
With this markup we have the ability to string together a menu system that could eventually either lead to a control or to an external HTTP site, solving the basic needs of our portal completely. Let's move on and see how to use this XML file within the portal.
The first thing to do is take our XML file and allow the framework to create a Serializable class for us. This will greatly simplify reading and writing the settings. If you are not familiar with this process, consider reading over my past article on serialization with .NET (http://www.15seconds.com/issue/020903.htm). Since we will want to be able to reuse the serialization functionality (the actual process of (de)serialization) within this project, I recommend taking a look at and using the Serialization.cs file within the downloadable ZIP file. Also follow the instructions for the XSD.exe tool at the command line to create the actual class based on the XML document above.
Notice that the mobile list control provided by Microsoft uses properties to determine which field to pull information from when data binding, but serialization uses fields (not get/set accessors, but public variables in our class). I solved this problem by editing the Serializable class and adding in the Property Get for the SettingsMenuItem class. Also notice I modified the Location Getter to handle the URLs properly. Here is the full class:
Of course, all of this is included in the download.
Within the VS .NET solution you have opened, view the main form's code behind. We will need to add a single method that will read the XML document into our Serializable class.
First you will notice that we created this method as static and passed in the reference to the local server on the page. This means the calling application need not have an instance of the class in order to call this method, and it can use the server to determine the location of the settings XML file. This allows us to reuse this LoadSettings() method later in the portal administration application. This method is simply reading the settings XML file off of the disk and then sending it to our DeSerialzeXML() method to deserialize our XML. We now have an object "settings" loaded with the entire settings for our portal.
In the next section you will see how we use this settings object to render the menu list and then how we handle the control items.
Creating the Portal - Loading and Navigating the Menus
In this section we will examine how to load up our menu based on our settings object and the location in the system. To do this, we call a RenderList method, passing in the current menu which the user is requesting. The code below is a partial list of this RenderList method:
//found it, get a
reference to the item and break the loop
item = settings.menu[x].item;
break;
}
}
//we need a list of link items, and
control items
//that we will be rendering
SettingsMenuItem[] listitems=null;
SettingsMenuItem[] controlitems=null;
bool hasListItems=false; //marker to indicate
if we have any menu items
bool hasControls=false; //marker to indicate
if we have any controls to show
int index=0; //how many list items we find
int controlindex=0; //how many controls we find
//if we found an item
if(item!=null) {
//initially set the size of
the lists to the max length
//this will avoid nasty
resizing later
listitems=new
SettingsMenuItem[item.Length];
controlitems=new SettingsMenuItem[item.Length];
//now loop for each item in
the currently selected menu
for(int x=0;x<item.Length;x++) {
//if we got a link,
add it to the list of links
if(item[x].type.ToLower()=="link")
{
listitems[index]=item[x];
index++;
hasListItems=true;
}elseif(item[x].type.ToLower()=="control") {
//if we have a
control, add it to the control list
controlitems[controlindex]=item[x];
controlindex++;
//we actually
have controls to place in the form
hasControls=true;
}
}
//if we added any list items
we will need to resize the array
//to the actual size, so when
we bind this to the List Control
//it will only show valid
list items and not break the app
if(listitems.Length>index)
{
SettingsMenuItem[] tmplist = new SettingsMenuItem[index];
for(int x=0;x<index;x++) {
//copy the items
over
tmplist[x]=listitems[x];
}
listitems=new
SettingsMenuItem[index];
//copy them back
tmplist.CopyTo(listitems,0);
}
}
//**1 Partial section removed and
will be explained later
//do we have any menu items to show?
if(hasListItems) {
//yes, bind the list to the
items list
List1.DataSource=listitems;
List1.DataBind();
}
}
If you read through that section of code and its comments, you should understand what most of it is doing. Notice how we are simply processing the menu section we want to show and creating two arrays -- one for the menu items and another for the controls. This gives us the ability to have 0 to many list items and 0 to many controls in each section of our menu system. We then use these two lists to either place new dynamic controls within our panel or to bind the list of link items to the list on the form. In the next section we will cover how to load the controls dynamically.
Creating the Portal - Processing and Loading Controls
Loading controls dynamically in the .NET Framework is a fairly simple task. All of the controls that we will be creating will all eventually derive from System.Web.UI.MobileControls.MobileUserControl, which gives us the ability to simply load the control using our LoadControl() method and treat that control as an instance of that base class. The following section of code demonstrates this. The code is also a portion of missing code from the previous section (indicated by "**1").
Once this code block is finished executing, we will have our collection of controls added to the wireless form dynamically, within the DynControslPanel Panel object. You will notice that there is still one more final piece indicated by the "**2" in the code block above. We will cover this in the next section.
Creating the Portal - Creating and Adding a New Control
A menu system is very useful for any application, but it would be useless unless we actually showed some data or retrieved the user's input and handled it accordingly. For this, we will be using custom mobile user controls. In a previous section we walked through creating a very simple mobile user control. Let's expand upon this example and integrate it within our portal. Take time now to either go through the steps I outlined in that section above or copy what you have already accomplished into the project that you have running now.
If we take a look back at our settings XML document, there is an area in which we can specify controls to use:
All we need to keep track of is the location from the current application to the .ascx file (control) and the fixed arguments with which we want to supply the control. We need some sort of mechanism to supply the control with this "args" value. What I have chosen to do in this case is to create a class that is directly derived from the System.Web.UI.MobileControls.MobileUserControl base class, and within this class we will specify our args property. We then will derive our controls that we create from this new class. This allows for all of our new controls to exhibit this "Args" properly and still be treated as a normal MobileUserControl. The new base class:
using System;
namespace WirelessWeb {
///<summary>
/// A common base class to derive our custom controls from, in
order to be able
It is important to realize here that our new class is not marked as abstract. This is because the designer in VS .NET will actually attempt to create an instance of the class in order to render it properly on the designer page. Since you cannot directly create an abstract class, this will not be handled well by the designer.
Here is the final source version of my SecurityLevelControl for you to review:
SecurityLevel.securitylevelService
s = new SecurityLevel.securitylevelService();
LevelLabel.Text="Current
Level: ";
//query
the service
string
level =s.getsecuritylevel(user, pass);
LevelLabel.Text=level;
//show
the colors also
switch(level)
{
case "LOW":
LevelLabel.Text+="
(Green)";
break;
case "GUARDED":
LevelLabel.Text+="
(Blue)";
break;
case "ELEVATED":
LevelLabel.Text+="
(Yellow)";
break;
case "HIGH":
LevelLabel.Text+="
(Orange)";
break;
case "SEVERE ":
LevelLabel.Text+="
(Red)";
break;
default:
break;
}
}
}
}
Again, notice that we are actually deriving from our custom base class, "ControlsBase".
If you recall in the previous section, I stated that I left one small section of the code out on purpose (as indicated with the "**2"). With your new knowledge of how we are going to be dealing with arguments, we can fill in this minor detail.
If you recall, we were dynamically loading controls onto a panel in our Mobile Web Form. Here is the new section of code:
//if our control has any args that we need to pass int
First we check our arguments coming from the settings document, and if we have a value, we take the newly created control and cast it as our ControlsBase class. This will give us access to the "Args" property in that base class, which we then set the new value into.
If you have been following along and creating the portal as you work through this article, take time now to attempt to run your solution. If you have any issues, consider downloading the accompanying zip file which includes my final release of the portal and about 10 or 11 basic portal controls, mostly using Web services to retrieve data.
Take time to modify the settings XML document and play with each of the menu and item sections and even add and remove new controls. In the next section we will step through the process of creating a very quick and simple administration interface for the portal.
Portal Administration
Since we have a single XML file that represents the entire portal settings, all we need to do to facilitate administration is to create some sort of interface to edit the XML document itself. I recommend simply opening up my solution for the Portal Administration (WirelessAdmin) and use it. It is not a mobile application, but a normal Web application because I didn't think too many people would want to modify an entire portal on their mobile device.
The Administration application takes advantage of Forms Authentication, so make sure you read over Jeff Gonzalez's article (http://www.15seconds.com/Issue/020220.htm) covering this topic. For now, I set the default username and password to "rob@santra.com", and "mypass".
Conclusion
In this article you have seen how easy it is to use the ASP.NET mobile controls to create everything from a simple Hello World Wireless Web Form to a full blown and very useable wireless portal solution. Some things to remember are that you did not directly work with any devices and their capabilities, instead you relied upon the ASP.NET support for these devices. If you find that the ASP.NET mobile controls do not meet your needs, you could easily take a look at creating your own device adapters (http://msdn.microsoft.com/library/en-us/mwsdk/html/mwconDeviceAdapterCode.asp).
I hope you find this article useful, and if you do create a public portal site, feel free to drop me a line; I would love to see the different and exciting ways people use this portal.
About the Author
Robert Chartier has developed IT solutions for more than nine years with a diverse background in both software and hardware development. He is internationally recognized as an innovative thinker and leading IT architect with frequent speaking engagements showcasing his expertise. He's been an integral part of many open forums on cutting-edge technology, including the .NET Framework and Web Services. His current position as vice president of technology for Santra Technology (http://www.santra.com) has allowed him to focus on innovation within the Web Services market space.
He uses expertise with many Microsoft technologies, including .NET, and a strong background in Oracle, BEA Systems, Inc.'s BEA WebLogic, IBM, Java 2 Platform Enterprise Edition (J2EE), and similar technologies to support his award-winning writing. He frequently publishes to many of the leading developer and industry support Web sites and publications. He has a bachelor's degree in Computer Information Systems.
Learn how to use .NET to communicate with the X10 Firecracker Home Automation System through a PC's serial port. Then build a mobile Web form to access all X10-enabled appliances from a wireless device. [Read This Article][Top]
In the third and final installment of the Programming for the Palm series, Robert Chartier shows how to create a Windows Installer that will install and register the Palm application and Palm conduit on the target machine. [Read This Article][Top]
In the second part of this three-part series on programming for the Palm, Robert Chartier shows how to work with the Palm synchronization process and how to handle data transferring, importing, and uploading to various destinations using the Palm Conduit Developer Kit and VS .NET. [Read This Article][Top]
The first part of this three part series walks through the process of creating a mobile blog application using a BASIC development environment for Palm OS devices called NS Basic.
Subsequent articles will focus on synchronizing the data to the desktop using C# and creating an installer. [Read This Article][Top]
Even though SMS is now in high gear, developers remain slated with restrictive limits to carrier resources. Sending an SMS message via e-mail requires the acceptance of several hidden flaws. Joe Lauer shows how to avoid these complications by sending a wireless text-message through the use of ASP. [Read This Article]</
