I will also create a simple web mobile application as an example, using a component developed in VFP8 to show data in a cell phone's screen.
Introduction to The ASP.Net mobile controls
Nowadays, portable devices with Internet access are very common. With the possibilities available to us by means of this technology, it is only logical that we developers begin to think very seriously about making applications accessable from this kind of devices.
Unfortunately, when we entered the world of development of wireless devices, we used to find ourselves with some difficulties to overcome obstacles. One of them originates in the different technical specifications in which developers can base their applications.
These different issues, among which I can mention the browser type, screen size and resolution, language supported, capacity for state management and session variables handling, "cookies" support, etc., forced us to design different applications for different types of devices. Besides, developers had to know the different markup languages that those devices interpret.
There was an obvious need to have a design tool oriented to this type of devices, enabling the developer to separate himself from the technical specs, focusing all his energies to development. That's why many people celbrates today the arrival of ASP.Net mobile controls.
ASP.Net mobile controls increase the capacity of the Microsoft .Net Framework and Visual Studio .Net, allowing us to build web mobile applications oriented to a great variety of devices, because as ASP.Net does, it uses server side controls providing the developer with an abstraccion layer which allows him to build the application focusing on a generic device, without having to worry about the specifics of each actual device.
ASP.Net mobile controls are now included with .Net Framework 1.1 (to this date still in beta version). However, they were first released as independent products that were distributed separately under the name Microsoft .Net Mobile Web SDK, and more recently as Microsoft Mobile Internet Toolkit (MMIT). The latter is integrated with the Visual Studio .Net IDE, making it even easier to develop applications.
As I said earlier, these mobile controls provide a number of components which facilitate the developer's work and allow for the creation of a Web Mobile application once, and its use on any of the supported devices, without any kind of adjustment.
Besides, this device list is easily extensible, because support for new devices can be added without changing previously developed applications, thus ensuring that they will be perfectly usable in the new generations of mobile devices.
Another advantage is its lack of an additional learning curve for those developers who have already built conventional ASP.Net applications. They can also reuse business logic and data access code from common or desktop web applications already developed, to which you desire to add a web mobile client.
Supported Markup languages
Before start developing my first web mobile application I would like to talk briefly about the markup languages supported. As I said earlier, code is intelligently generated by ASP.Net, and supported languages are detailed in the following table:
Table 1: Supported markup languages
But there are also other non supported languages, such as HDML (Handheld Device Markup Language), used by the first cell phone browsers, and WML 1.3, recently released. Any device that only handles this type of languages will not be suitable for applications developed using ASP.Net mobile controls. However, we must be aware of any new available Device Update Packs adding new devices to the compatibility list.
How does ASP.Net analyze the devices' characteristics?
When a browser requests a web age, it sends certain information to the web server about its features, capabilities and limitations, which are used by the server to decide what type of code better adapts at the time of generating the ASP.Net page output for that browser (rendering). These browser features are also accessible to the developer and are very useful.
Suppose we want to show on our welcome screen our company logo. However, depending on the browser capabilities we can use anything from a color GIF image to just pure text. The following code snippet exemplifies this scenario:
<Mobile:Form runat=”server”> <DeviceSpecific> <Choice Filter=”IsHtml32”> <img scr=”MyLogoColor.gif”> </Choice> <Choice> <Mobile:Label runat=”server” Text=”Welcome choice”> </Choice> </DeviceSpecific> </Mobile:Form>
Analyzing the above code we see that on line 3, the first "choice" label defines, trough the "filter" property, whether the browser that requests the form supports HTML 3.2 (or later), while the second "choice" label, without the defined "filter" property, acts as a default selector if the browser was not identified by any of the previous "choices".
Let's get into it
Now that we have a general idea of ASP.Net mobile controls features, we can build our first application. Due to space reasons I shall limit this example to the a single component built on VFP8, trough which I can access SQL Server's "Northwind" database in order to extract data from "Customers" table. First I'll build a list with the countries ("country" field) allowing my web mobile client to select a country from that list and then show data for the customers there.
Requirements
Requirements for wireless devices development are the same as for conventional web applications. Basically, we must have the following:
In addition, in my example I will use:
Even when I will use Visual Studio .Net's development environment for this article, it should be remarked that it is not an indispensable requisite, because MMIT functionality could be perfectly exploited by having installed just the .Net Framework.
As .Net Framework SDK and Web Mobile SDK are two independent products, distributed separately for the time being, make sure you are using compatible versions.
Web Mobile SDK installation is extremely easy. All you have to do is run the file MobileIT.exe and follow a few and simple steps, following the installation wizard.
VFP 8 data "provider"
Let's begin by creating our data "provider". It will consist of two components built on VFP 8 that will try to simulate my data access layer and business logic with the intent of proving that when I wish to add a Web Mobile client to and existent application, I only need to develop the user interface, reusing the rest of the code.
I will create two projects in VFP8, one of them called DataLayer and the other one called BusinessLayer, representing the data and business layers respectively.
In the DataLayer project I'll add a program called DataLayer.prg, containing the DataLayer class definition as Session OLEPublic. Inside it I shall define three procedures: Init, ListCountries and CustByCountry.
In the BusinessLayer project I will add a program called BusinessLayer.Prg that will contain the definition of the BusinessLayer class type Session OLEPublic. Inside it I shall define two procedures ListCountries and CustByCountry that will simply act as nexus between the data layer and interface with the user layer, with the only goal of respecting the tier development model.
After doing this I will compile both projects as Multithreaded COM Server (DLL) and will include it with the COM+ console.
For details on how to handle these tasks you can see an article published in this magazine on April 2003.
The Web Mobile client
Step 1 - Create a web mobile project
Now I am going to the central point of this article, being the creation of the web mobile client. To that end, let's open Microsoft Visual Studio .Net and, in the Start Page, select New Project.
I will create a new Mobile Web Application in Visual Basic .Net that I will call MobileWebAppUT.
Figure 1: Create a new project in Visual Studio .Net
Figure 2: Solution Explorer
After clicking OK, the project or solution will be automatically generated and our first Web Form called MobileWebForm1.aspx, will be shown on the screen. I changed this name from Solution Explorer (right button + Rename) by Inicio.Aspx, and marked it as the start page of the application (right mouse button + Set As Start Page).
Figure 3: Visual Studio.Net ToolBox
Step 2 – Design the welcome screen
We are now going to begin work on our mobile web form.
The first thing to do is show a welcome screen which, depending on which browser is used, will show a color GIF or a WBMP (Wireless bitmap)
In order to do that, on the ToolBox, Mobile Web Forms section, we select the DeviceSpecific item.
Using Drag & Drop we carry it to Form1
This will create a DeviceSpecific control which I will configure using the right mouse button on the Templating Options.
Figure 4: The DeviceSpecific control in Form1 and its conFiguretion options
Once inside the Templating Options window, using the Edit botton, we add the filters for HTML 3.2 or the rest of the options
Figure 5: The Templating Options window without any conFiguretion
When clicking on the Edit button, another window will open, showing at the top a combobox with all available filters. This is a combobox and from it we shall select the two filters that we need to run this mobile form, namely ishtml32 and (Default) with the AddToList option, we can add it to the list of filters applied.
Figure 6: The applied filter list
Step 3 - Working on any particular filter.
Once the desired filters are selected, we click OK and return to the Templating Options window, from where we select the filter we are going to be working with.
Figure 7: Selecting the filter we are going to work with
As we can see, in the DeviceSpecific control of Form1, in the Template Device Filter Option, isHtml32(" ") will be shown, and below, a prompt will indicate that a right click will let us edit the actions to follow for this predetermined filter.
Figure 8: Editing the options for the selected filter
Now Form1 will appear divided in two parts, the Header Template and the Footer Template, both empty.
In the first one we Drag & Drop an Image control from the ToolBox, and set the properties Alignment to Center, ImageURL to Inicio.Gif and SoftkeyLabel to Enter.
In the Footer Template we add a Link control, setting its properties as: Alignment to Center, Text to Enter and SoftkeyLabel to Enter also (The SoftkeyLabel property represents the text that will show in the lower part of the screen of the device as a help text).
Now Form1 would be as follows:
Figure 9: The form design for filter isHtml32
We would now have to repeat everything from the beginning of Step 3 but working on the filter (Default), which would represent any browser not interpreting HTML 3.2 or later.
The steps to follow are the same, except that when setting the Image control's properties, ImageURL would be set as Inicio.Wbmp.
Step 4 – Testing our first Web Mobile Form
See how our form would look in the different types of browsers:
Figure 10: Our Form in Internet Explorer v6.0 wich accepts HTML 3.2
Figure 11: Our Form in the Nokia emulator which does not accept HTML 3.2
All we have to do now is that, when the user selects "Enter", our application goes to a second form which will be called frmPaises.aspx (countries). But first we have to create this form.
Figure 12: Adding a new Form from the Solution Explorer
Step 5 – Adding a new form to our Web Mobile application
To add a new form we have to go to the Solution Explorer and with the mouse right button, select the option "Add new item"
From the “Add New Item” window, we select the type of ítem to add, in this case a “Mobile Web Form” and below we write its name: frmPaises.aspx.
Figure 13: We add a new Mobile Web Form to the solution
When we press Open, a new Form will be created. We confirm it in the Solution Explorer where we now see our two web mobile forms.
Step 6 – Jumping from the Inicio form to the frmPaises form
Now that the second web mobile form has been created, it is very simple to pass from one to the other
To do that, from any one of the DeviceSpecific control filters, let us go to the properties window for the Image control as well as the Link control and let us set its NavigateURL propery to frmPaises.aspx.
Note:
In this case, both Link controls of the different filters behave in a similar way and they could have stayed outside of the DeviceSpecific control, but I decided to use filters more in depth, because they are one of the most powerful tools of the ASP.Net mobile controls.
Step 7 – Connecting to the data provider
Being on the Form frmPaises, we must obtain the list of the countries where there are customers, as per the Northwind customer table.
To do this we have to connect with our data provider and ask him to send us the XML containing the countries list.
First, we have to use the Solution Explorer again and from there, by means of a right click, add a new reference.
Figure 14: We add a new reference
When we select Add Reference the respective dialog window will be opened. We will then be able to add basic references of three different kind of.Net, COM or Projects.
In this case we are goig to add aCOM reference so we change the page and look inside the list for the type library of the BusinessLayer component that we created earlier.
We select it with a double click so that it will be shown in the component list selected and we click on OK to exit.
Figure 15: We select the reference to the desired COM component
Now that we have the reference to our data provider we can use it.
First we add two label controls to the frmPaises. We change the following properties on the first control: ID to outError, Font Size to Small, Visible to False and ForeColor to Red. In this label control we shall show any error message occurring in our form and that we can control. On the second label control we'll set the Font Size property to Small and Text to “Select a country”.
We shall also add a List control which will now remain unchanged. We work now on the form code which is in the file frmPaises.aspx.vb. To do this we double click on any part of the form and Visual Studio .Net will take us there.
In the edit window we'll see the code snippet belonging to the Sub Page_Load, where we are going to work adding the following code:
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load If Not IsPostBack Then 'Create an instance of the COM component Dim oBusinessLayer As New businesslayer.businesslayer() 'Create a string variable to keep the XML returned by the COM component Dim lcXML As String
Try lcXML = oBusinessLayer.ListCountries() Catch ex As Exception outError.Text = ex.ToString() outError.Visible = True Return Finally Beep() ' Beep after error processing. End Try 'Create a new DataSet Dim myDS As DataSet = New DataSet() 'Read the XML, transforming it into a DataSet Try myDS.ReadXml(New System.IO.StringReader(lcXML)) Catch ex As Exception outError.Text = ex.ToString() outError.Visible = True Return Finally Beep() ' Beep after error processing. End Try 'Create a view of table 0 (the only one in this case) of the 'DataSet and sort it ascending by NombreLista Dim myDV As DataView myDV = myDS.Tables(0).DefaultView myDV.Sort = "Country ASC" 'Create an array and fill it with the DataView data Dim MyArray As New ArrayList() Dim iCnt As Int32 List1.Items.Clear() With myDV For iCnt = 0 To .Count - 1 MyArray.Add( New Member( .Item(iCnt).Item(0).ToString(), iCnt) ) Next End With 'Bind the array to a MobileListControl List1.DataSource = MyArray List1.DataBind() End If End Sub
I will just briefly explain the code above because there is nothing special to it, being pure VB.Net.
The first thing we do here is create the oBusinessLayer object instancing the COM VFP8 component we referred to earlier.
Then, in a Try-Catch-Finally structure for structured error handling, we call the ListCountries() method with which we obtain the XML with the countries list. Then we create a DataSet and using its ReadXML method, by means of a StringReader we “stick” the XML into the DataSet.
We then create a DataView which is a view of the DataSet and we sort it ascending. This view is then traversed inserting each one of its items in an array of Members, which structure is defined in the following code snippet:
Private Class Member Dim mNombrePais As String Dim mIDPais As Single Public Sub New(ByVal cNP As String, ByVal nID As Single) mNombrePais = cNP mIDPais = nID End Sub Public Property NombrePais() Get NombrePais = mNombrePais End Get Set(ByVal Value) mNombrePais = Value End Set End Property Public Property IDPais() Get IDPais = mIDPais End Get Set(ByVal Value) mIDPais = Value End Set End Property End Class
This array is afterwards used as a DataSource for the list1 control, which has been previously set as follows: propery DataTextField to NombrePais and DataValueField to IDPais, which, as you might have noticed, coincide with the names of the member class properties.
With this, our Mobile Web Page could be functioning. The only thing left to do is set the necessary properties to paginate teh results, so they are better viewed.
Let us go to the next step
Step 8 – Paginating the results
Results pagination can be done in a simple way by setting a few properties, in the list control as well as in the form.
Let us see which are those properties in the following table:
Let us see how this reflects in the browsers:
Figure 16: Show the result in Internet Explorer 6.0 (Main page)
Figure 17: Shows the result in Internet Explorer 6.0 (Next page)
Figure 18: Shows the result in the cell phones emulator de Nokia (Main page)
Step 9 – The user selection
Now that we have shown the countries list, we shall allow the user to select one of them and as a result we shall show her, in a third form called frmClientes.aspx, the customer list with residence in the chosen country.
We will give the user the oportunity to confirm her election or to do it again. To do this, we shall add a new form (called Form2) from the ToolBox towards the frmPaises.aspx file.This may seem a bit odd, even to ASP.Net developers, but it is something that the mobile controls allow to do, ie, have several forms inside the same ASPX page. When the user selects a country from the list, the method ItemCommand of the list control will fire.
Here we use a session variable (cCountry ) to store the name of the selected country and go to the new confirmation form by means of the ActiveForm command.
Let's look at the code:
Private Sub List1_ItemCommand() Place here the parameters Session("cCountry") = e.ListItem.Text ActiveForm = Form2 End Sub
In Form2 we shall show the cCountry value in a label control and we shall give her the possibility to confirm her election by means of a Link control labeled "OK", or to change the chosen country, by means of another Link control labeled "Cancel". The latter will take us back to Form1. The former will lead us to the frmClientes.aspx page, as per its NavigateURL property
Figure 19: Results on Internet Explorer 6.0
Figure 20: Results on Nokia Cell phone emulator
Step 10 – Chosen country customer list
In here we shall use a new ASPX called frmClientes, that we shall create following the step 5 we used to create frmPaises.aspx.
Once created we add two Label controls, one to control errors and the other one as a title.
Besides we shall add a list control to show the customers and below a Link control to return to frmPaises and begin a new search.
The code and the properties to be modified are similar to what was done in the form frmPaises.
The only thing we add is the recovery of the session variable cCountry, which value we pass as a parameter to the CustByCountry method of our business class.
In order not to make this note very extensive and repetitive, I leave the complete source code (see the link below) for you to study in more detail and now I show you the result of running this form.
Figure 21: Results on Internet Explorer 6.0
Figure 22: Results on the Nokia cell phone emulator
And this is the end of this example.
Conclusion
ASP.Net mobile controls address a double need in the developers world.
First, make our applications available to the mobile devices world and second, enabling us to stay away from the varied and diverse characteristics of the different devices existing in todays market. They are very easy to use, especially for ASP.Net developers and also they enable us to exploit the full power of .Net Framework.
In addition, we can reuse the code for data access and the business logic of the existent applications.
In my opinion, this tool is excelent. Don't be shy, try it for yourself.
Source Code
Bibliography
Related Links
