By: Tiberius OsBurn

January 28th, 2003

Reader Rating: 8

Interested in .NET? Don't miss SitePoint's .NET Feature Guide [1] -- it's an excellent resource!

Here's the scenario: your boss wants information on the go, but he hates to haul along his laptop. He's sick of the hassle of bringing it on airplanes and lugging it around. He wants a mobile application that provides him with the information he usually accesses on your extranet.

Now let's say the boss is on his way to a big meeting with one of our top suppliers in Boston. He tells you he wants you to design an application where he can pull up supplier information for each product that your company sells -- so all of the data is available to him while he's on the road... he needs it available on his cell phone and he needs it done by this Thursday.

Don't worry. When the boss whips out his Nokia to check on the suppliers of Boston Crab Meat, one of your top sellers, he's going to get all the supplier info we've got in the database. That includes the contact's name, title, and the company's address and phone number -- the boss is looking forward to a big crab dinner with this client and he has to know where to go and who to contact.

Much like the explosion of PC-based browsers in the 1990's, the penetration of Internet-enabled phones has skyrocketed in the last few years, leaving IT developers scrambling to provide information-hungry clients with the content they desire. Previously, you would have to hand code multiple mobile Web pages -- remaining aware of the many different protocols your clients may be connecting with and the different languages used by the client. This proved to be a nightmare for any understaffed IT department, as it meant not only keeping pages up to date, but also keeping a keen eye on the technological changes that happen in the infancy of the Internet telephony community.

Getting Started

For this scenario, I installed the VS.NET Mobile Internet Toolkit and was finished with this code in under an hour -- all because of the amazing ease and integration of the .NET framework. The Mobile Internet Toolkit is a collection of controls that allow developers to create mobile applications that can connect and communicate with your Web server -- dishing up content onto your cell phone, PDA or other portable device. It's available as a free download from MSDN -- just search for the Microsoft Mobile Internet Toolkit.

I'm going to walk you through some of the features of using the Mobile Internet Toolkit, and then we'll build that application for the boss.

Before you begin, I suggest you go out onto the Web a get yourself a phone emulator. This will help you design a bit more realistically than will the view that VS.NET displays. The good folks at phone.com [2] have been hard at work creating top-notch emulation software that allows you to mimic the many different phone browsers available. Before you release your mobile application to the world, you'll want to make sure that the functionality is what you expect -- and the best way to do this is with an emulator [3].

It's all .NET

The really cool thing about the Mobile toolkit is that it takes advantage of the .NET Framework. That means you can program software designed for your mobile devices in the same languages that you use when creating windows and Web applications. If you're familiar with how a Web or Windows application is created in Visual Studio .NET, you'll quickly pick up on creating mobile applications.

Once you've loaded the Mobile Toolkit, you'll create an ASP.NET project and add to it a Mobile Web form. Once you've defined a Mobile Web form, you can use it almost exactly like a regular Web form.

Getting There Fast

Creating an application so your boss can browse the company's supplier information is pretty easy to accomplish. We'll use the NorthWind database we're all so familiar with to illustrate how easy it is to get a mobile application up and running.

One of the secrets for creatiile application is to break it down into its most simplistic parts. Remember, we're coding for a screen that fits into your pocket, so we need to follow one simple rule: Keep it Simple, Stupid.

Creating a mobile application is just as easy as creating a Web application, with a few differences. One key difference is that you'll be working with multiple forms on one mobile page. You can think of a collection of forms as a stack of cards that you can flip around and display on a mobile device. You could use only one form per page, but it's easiest to group two or three forms with related functionality on the same page. This will make your application more legible and cleaner -- it also helps reduce your code if you're passing information from form to form. You switch between forms by setting the ActiveForm property of the mobile page -- this allows you to push new information "to the surface" in your application.

Our main page, productsView.aspx, houses two forms: Product and SupplierInfo.

Both forms are simple -- containing only a single control per form. The Product form displays the many products we sell in a browsable list, the control we'll be using is the ObjectList. The SupplierInfo form displays all of the information we have on our supplier in the database -- we're using a TextView object. Here's the gist of how the application will work: the boss can select a particular product on one form and view the related information for the Supplier on another. When the boss selects a Product, the SupplierInfo form is activated and populated with all the information we have about that supplier. Pretty simple, eh?

If we view the HTML of our page, productsView.aspx, we see a few familiar features and some new concepts:

<body Xmlns:mobile="http://schemas.microsoft.com/Mobile/WebForm">  
 <mobile:Form id="Products" runat="server" Paginate="True">  
 <mobile:ObjectList id="ObjectList1" runat="server"  
 OnItemSelect="getSupplierInfo"  
 OnItemCommand="ObjectList1_ItemCommand"  
 LabelStyle-StyleReference="title"  
 CommandStyle-StyleReference="subcommand">  
<Command Name="View" Text="View"></Command>  
</mobile:ObjectList>  
 </mobile:Form>  
 
<mobile:Form id="SupplierInfo" runat="server" Paginate="True">  
   <mobile:TextView id="TextView1" runat="server">  
   TextView</mobile:TextView>  
 </mobile:Form>  
 
</body>

This is pretty straightforward stuff if you've programmed any ASP.NET. We're using two <mobile:Form> tags to delineate out our forms and the objects that reside in them. Pay special attention to the <mobile:ObjectList> tag -- this is the control that we've dropped on our Products form. This object is almost exactly like the DataList object in ASP.NET, so you'll have no troubles programming for it. Notice that the OnItemSelect event fires our getSupplierInfo() method. When the boss is viewing a list of our Products, the selection he makes fires off the getSupplierInfo() method, which looks up the supplier's info and displays the Supplier form.

The Code

Let's start a walkthrough of some code to show how we created this simple, yet effective application for the boss. When we first hit our products.aspx page, our Page_Load event fires and we set our active form to our products form, which displays the names of the products we sell.

private void Page_Load(object sender,  
System.EventArgs e  
{  
// Put user code to initialize the page here  
ActiveForm = Products;  
}

Once we have set our ActiveForm to our Products form, the magic starts to happen. Our Products form has an Activate event in which we fire off a method that retrieves and formats the information we need.

private void Products_Activate(object sender,  
System.EventArgs e)  
{  
getProductList();  
}

The getProductList() method makes a SQL statement call to our database, grabs out a DataSet and binds it to our Mobile Web Control.

public void getProductList()  
{  
try  
{  
string strSQL = "select productname, supplierid from products  
order by productname";  
clsMsSQL oSQL = new clsMsSQL();  
DataSet oDS = oSQL.getSqlDataSet(strSQL);  
ObjectList1.DataSource = oDS.Tables[0].DefaultView;  
ObjectList1.DataBind();  
}  
catch(System.Exception e)  
{  
string x = e.ToString();  
}  
}

What we're doing is making a call to the NorthWind database to retrieve the productname and supplierid of all the products in the table. We're setting the DataSource and DataBinding just as if we're using a DataList control in a regular Web form. It couldn't get any easier, could it?

Now, when the boss selects one of his products, the Suppliers form is fired up and the TextView object is filled with the selected supplier information. He's free to scroll around on his cell phone and view the Supplier's information.

Let's take a look at the code that snags the supplier information from the database.

public void getSupplierInfo(object sender,  
System.Web.UI.MobileControls.ObjectListSelectEventArgs e)  
{  
TextView1.Text = getSupplier(Convert.ToInt32(e.ListItem[1]));  
ActiveForm =  SupplierInfo;  
}

getSupplierInfo calls the method, getSupplier, and passes in the SupplierId via the t_id parameter and finally, sets the SupplierInfo form's TextView object to display the supplier's information.

public string getSupplier(Int32 t_id)  
{  
string strSupplier = "";  
Int32 i = 0;  
Int32 x = 0;  
try  
{  
string strSQL = "select * from suppliers where supplierid = " + t_id;  
clsMsSQL oSQL = new clsMsSQL();  
DataSet oDS = oSQL.getSqlDataSet(strSQL);  
System.Text.StringBuilder oSB = new System.Text.StringBuilder();  
//Loop through the DataSet and get our what we want...  
for (i=0;i<oDS.Tables[0].Rows.Count;i++)  
{  
for (x=0;x<oDS.Tables[0].Columns.Count;x++)  
{  
oSB.Append("<b>" + oDS.Tables[0].Columns[x].ColumnName.ToString()  
+ "</b> " + oDS.Tables[0].Rows[i][x].ToString() + "<br>");  
}  
}  
strSupplier = oSB.ToString();  
}  
catch(System.Exception e)  
{  
string xyz = e.ToString();  
}  
return strSupplier;  
}

All we're really doing in our getSupplier method is concatenating the column name and associated value out of our NorthWind's Suppliers table. We tag the name of the column with the HTML element <b> for some rudimentary formatting, and we're set for business. We return a formatted string that the TextView object displays - and viola! The boss gets his info, makes it to the corporate party, eats a huge crab dinner and everyone's happy!

Final Words

Obviously, this is a rudimentary example of the power behind the Mobile toolkit -- I hope that it illustrates the underlying capabilities of what you could be doing while using this tool. If you already have a Website that you use to provide information, you could always create a mobile-based version of your application with minimal effort. At the very least, you could expose only those features of your application that provide critical, dynamic information. End-users could connect to the site and get the most up-to-date information available.

The Microsoft Mobile Internet Toolkit makes it very quick and easy to develop and deploy mobile applications for te Enterprise. If you're familiar with programming ASP.NET, you'll have no problems at all in making the jump into programming for mobile devices. The Europeans and Japanese have already embraced these tiny, cell phone browsers -- and all signs point to a huge push in the good ol' USA. Microsoft is now updating Visual Studio .NET 1.1 to include native support for Mobile forms -- this means more and more mobile applications will be rising to the surface. Take my advice: jump on this now.

This article is part of SitePoint's .NET Feature Guide [4] -- an excellent resource for aspiring and experienced .NET developers. Don't miss it!

[1] http://sitepoint.com/special/4/
[2] http://developer.phone.com
[3] http://developer.phone.com/download/index.html
[4] http://sitepoint.com/special/4/