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.
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 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.
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?
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">
<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, 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,
System.EventArgs e
{
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..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();
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.
