Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET
Article

On the Road with .NET Mobile Controls

Rate me:
Please Sign up or sign in to vote.
3.06/5 (5 votes)
28 Feb 20069 min read 34K   39   4
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.

Introduction

 

On the Road with .NET Mobile Controls

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.

1003_productDon'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

1003_supplierFor 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 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.

 

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.

1003_explorerOne 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.

1003_multiformsBoth 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?

The Code is below


On the Road with .NET Mobile Controls

HTML stands for HyperText Markup Language 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"> 
<BR> <mobile:Form id="Products" runat="server" Paginate="True"> 
<BR> <mobile:ObjectList id="ObjectList1" runat="server" 
 <BR> OnItemSelect="getSupplierInfo" 
 <BR> OnItemCommand="ObjectList1_ItemCommand" 
 <BR> LabelStyle-StyleReference="title" 
<BR> CommandStyle-StyleReference="subcommand"> <BR><Command 
Name="View" Text="View"></Command> <BR></mobile:ObjectList> 
<BR> </mobile:Form> <BR><BR><mobile:Form id="SupplierInfo" 
runat="server" Paginate="True"> <BR>   <mobile:TextView 
id="TextView1" runat="server"> <BR>  
 TextView</mobile:TextView> <BR> </mobile:Form> 
<BR><BR></body>

This is pretty straightforward stuff if you've programmed any ASP, is Microsoft's IIS based server side scripting architectureASP .NET .NET is an application framework from Microsoft." . 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, 
 <BR>System.EventArgs e <BR>{ <BR>// Put user code to initialize the page 
here <BR>ActiveForm = Products; <BR>}

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, 
 <BR>System.EventArgs e) <BR>{ <BR>getProductList(); 
<BR>}

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() <BR>{ <BR>try <BR>{ 
<BR>string strSQL = "select productname, supplierid from products 
 <BR>order by productname"; <BR>clsMsSQL oSQL = new clsMsSQL(); <BR>DataSet 
oDS = oSQL.getSqlDataSet(strSQL); <BR>ObjectList1.DataSource = 
oDS.Tables[0].DefaultView; <BR>ObjectList1.DataBind(); <BR>} 
<BR>catch(System.Exception e) <BR>{ <BR>string x = e.ToString(); <BR>} 
<BR>}

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, 
 <BR>System.Web..MobileControls.ObjectListSelectEventArgs e) <BR>{ 
<BR>TextView1.Text = getSupplier(Convert.ToInt32(e.ListItem[1])); <BR>ActiveForm 
=  SupplierInfo; <BR>}

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

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
India India
Hi i m a final year IT
In Vellore institute of Technology

Comments and Discussions

 
QuestionWhere is the connection with the database Northwind Pin
LuizItatiba8-Jul-08 18:01
LuizItatiba8-Jul-08 18:01 
Generalplz Attach project as zip or rar.. Pin
eashwar v21-May-08 3:21
eashwar v21-May-08 3:21 
GeneralBroken links Pin
Bernhard Hofmann28-Feb-06 4:29
Bernhard Hofmann28-Feb-06 4:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.