Developing Mobile Web Applications
| Smart device applications provide many opportunities for developers to utilize their desktop-application skills in the world of devices. However, a key limitation in smart device application development is that the application needs to be installed on the device to be used. Mobile Web applications, on the other hand, utilize the included microbrowser in mobile phones and wirelessly connected PDA devices as the application delivery model. In a lot of ways, Mobile Web applications bring out the benefits to devices that the thin-client computing model initiated by Web applications did to desktop computing. A question to ask at this point is, because the mobile Web application model relies on the browser model, how is it different from regular Web applications? There are really a couple of key differences:
In version 1.1 of the .NET Framework, ASP.NET includes a set of controls that provide the benefits of rapid Web application development to the world of mobile Web-enabled devices. These controls are optimized to generate different markup languages (based on the device capability) and include mobile application development concepts such as pagination (due to the small form factor). Actually, these controls were released as an add-on technology known as Mobile Internet Toolkit 1.0 for version 1.0 of the .NET Framework. With the 1.1 release of the Framework and Visual Studio .NET 2003, mobile Web application development is a core feature supported by the .NET platform. Hello Mobile Web!In Chapter 8, "Developing Web Applications with ASP.NET," you learned how custom controls can be used in ASP.NET pages. Mobile controls use the same concept to provide a set of controls targeted for creating Web applications for cell -phone devices. These controls bring out the benefits of Web computing ”no installation, server-based application delivery model, and so on ”to the world of mobile computing. Listing 10.4 takes a quick look at the traditional Hello World Web application, this time in using the Mobile Web controls. Listing 10.4 Hello World Smartphone Application<%@ Register TagPrefix="mobile" Namespace="Web.UI.MobileControls" Assembly="Web.Mobile" %> <%@ Page language="c#" %> <body Xmlns:mobile="http://schemas.microsoft.com/Mobile/WebForm"> <mobile:Form id="Form1" runat="server"> <mobile:Label id="Label1" runat="server"> Hello Mobile World </mobile:Label> </mobile:Form> </body> As mentioned earlier, mobile forms are dynamically rendered based on the capabilities of a device. In Internet Explorer, the mobile form is actually rendered as HTML, a language Internet Explorer can understand (see Figure 10.5). Figure 10.5. Mobile Web application ”Internet Explorer. In a mobile phone powered by a third-party microbrowser (in this case, Openwave), a mobile form renders much like any other phone application would. This example uses the Openwave Phone Simulator (see Figure 10.6) available from http://developer.openwave.com. To understand that the mobile form is actually dynamically generated in the markup language that the phone's microbrowser understands, let's look at the source of the rendered form (using Openwave SDK select View Source or F5). Figure 10.6. Mobile Web application ”Openwave SDK.
<html> <head> <meta http-equiv="Cache-Control" content="max-age=0"/> </head> <p:card> <p:do type="accept"> <p:noop/> </p:do> <p>Hello Mobile World</p> </p:card> </html> Finally, Figure 10.7 shows how the mobile form renders in the mobile Internet Explorer found in Microsoft Pocket PC devices (again using a simulator, which is available within the Visual Studio .NET 2003 environment). Figure 10.7. Mobile Web application ”Pocket PC 2003 Phone Edition. Mobile Web ControlsSimilarto an extensive set of Web forms controls, .NET Framework also provides a number of mobile Web controls. A large number of them map into their Web controls counterpart ; some of them, such as Phone Call, are related to the device functionality and therefore are not found in the Web environment. In addition, a number of controls in the Web forms model are not available because of the limitations in the mobile Web application development. Table 10.1 shows a list of commonly used mobile Web controls. Table 10.1. Mobile Web Controls
To better understand how mobile Web controls work, and in particular how user input is handled, take the scenario of a mobile Web application that provides the capability for a user to check order status for a given order number. This time you'll develop this application using Visual Studio .NET. When you open Visual Studio .NET, you will find the ASP.NET Mobile Web Application project type available for Visual C#, Visual Basic .NET, and Visual J#. Just like Web forms, mobile Web applications can be developed using any supported .NET programming language. The wizard creates a new Web application on the server and initiates the design of the application by creating a new form (see Figure 10.8). The form represents the first screen in a mobile page (sometimes called decks and cards by Wireless Application Protocol (WAP) programmers). To build the application, drag and drop controls into the form and associate any appropriate event handlers. When you are finished with the first form, continue creating the rest of the application by either dragging another form control or by creating another separate page. From an ASP.NET perspective, one mobile page can contain multiple forms. Listings 10.5 and 10.6 show the code generated by Visual Studio .NET 2003 for creating a multiform order status application. As you can see, commands are very similar to buttons and allow server-side processing to process user input. Listing 10.5 Order Entry Mobile Web Application (Web Form)<%@ Register TagPrefix="mobile" Namespace="Web.UI.MobileControls" Assembly="Web.Mobile" %> <%@ Page language="c#" Codebehind="MobileOrderStatus.aspx.cs" Inherits="HelloMobileWeb.MobileOrderStatus" AutoEventWireup="false" %> <body Xmlns:mobile="http://schemas.microsoft.com/Mobile/WebForm"> <mobile:Form id="InitialForm" runat="server"> <mobile:Label id="Label1" runat="server">Order Number</mobile:Label> <mobile:TextBox id="OrderNumberBox" runat="server"></mobile:TextBox> <mobile:Command id="Go" runat="server">Go</mobile:Command> </mobile:Form> <mobile:Form id="OrderStatusForm" runat="server"> <mobile:Label id="OrderStatusLabel" runat="server"></mobile:Label> <mobile:Command id="BackCommand" runat="server">Back</mobile:Command> </mobile:Form> </body> Listing 10.6 Order Entry Mobile Web Application (Code Behind) // File: MobileOrderStatus.aspx.cs using System; using Collections; using ComponentModel; using Data; using Drawing; using Web; using Web.Mobile; using Web.SessionState; using Web.UI; using Web.UI.MobileControls; using Web.UI.WebControls; using Web.UI.HtmlControls; namespace HelloMobileWeb { public class MobileOrderStatus : Web.UI.MobileControls.MobilePage { protected TextBox OrderNumberBox; protected Label Label1; protected Command Go; protected Form InitialForm; protected Label OrderStatusLabel; protected Command BackCommand; protected Form OrderStatusForm; private void Page_Load(object sender, EventArgs e) { } override protected void OnInit(EventArgs e) { InitializeComponent(); base.OnInit(e); } private void InitializeComponent() { this.Go.Click += new EventHandler(this.Go_Click); this.BackCommand.Click += new EventHandler(this.BackCommand_Click); this.Load += new EventHandler(this.Page_Load); } private void Go_Click(object sender, EventArgs e) { OrderStatusLabel.Text = "Order "+OrderNumberBox.Text + " is shipped"; ActiveForm = OrderStatusForm; } private void BackCommand_Click(object sender, EventArgs e) { ActiveForm = InitialForm; } } } Figure 10.8. Order Status mobile Web application. Data BindingAs you have explored earlier, data binding of mobile Web applications can be very useful to create applications that connect with an underlying database. To illustrate this further in the mobile Web context, let's rapidly develop an employee directory application. A useful control that can be data bound in a mobile Web application is the Object List. It is very similar to the DataView Web Forms control and can be bound to a tabular data source, in this case from SQL Server. The simplicity achieved through mobile Web forms is quite visible when you compare that a code snippet of about 25 lines of source code can be used to create a full-blown employee directory application (Listings 10.7 and 10.8) in which the initial page shows the list of employees and is fully paginated so that the user doesn't have to keep scrolling (see Figure 10.9). It then links to the details of the employee in the following page (see Figure 10.10). A nice exercise for this example would be to add a Phone Call control to display the phone numbers of the employee so that a user can be connected right from the application. Listing 10.7 Data-bound Mobile Web Application<%@ Register TagPrefix="mobile" Namespace="Web.UI.MobileControls" Assembly="Web.Mobile" %> <%@ Page language="c#" Codebehind="MobileEmployeeDirectory.aspx.cs" Inherits="HelloMobileWeb.MobileEmployeeDirectory" AutoEventWireup="false" %> <body Xmlns:mobile="http://schemas.microsoft.com/Mobile/WebForm"> <mobile:Form id="Form1" runat="server"> <mobile:ObjectList id="Employees" runat="server" CommandStyle-StyleReference="subcommand" LabelStyle-StyleReference="title"> </mobile:ObjectList> </mobile:Form> </body> Listing 10.8 Data-bound Mobile Web Application (Code Behind) // File: MobileEmployeeDirectory.aspx.cs using System; using Collections; using ComponentModel; using Data; using Data.SqlClient; using Drawing; using Web; using Web.Mobile; using Web.SessionState; using Web.UI; using Web.UI.MobileControls; using Web.UI.WebControls; using Web.UI.HtmlControls; namespace HelloMobileWeb { public class MobileEmployeeDirectory : Web.UI.MobileControls.MobilePage { protected Web.UI.MobileControls.ObjectList Employees; protected Web.UI.MobileControls.Form Form1; private void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { SqlConnection conn = new SqlConnection("Server=localhost;" +"initial catalog=Book;User Id=user;Password=password"); DataSet employeesDataSet = new DataSet(); SqlDataAdapter cmdSelectEmployees = new SqlDataAdapter("Select * from Employees",conn); cmdSelectEmployees.Fill(employeesDataSet, "Employees"); Employees.DataSource = employeesDataSet; Employees.DataMember="Employees"; Employees.MoreText = "Show Details"; Employees.LabelField = "Name"; Employees.DataBind(); } } override protected void OnInit(EventArgs e) { InitializeComponent(); base.OnInit(e); } private void InitializeComponent() { this.Load += new EventHandler(this.Page_Load); } } } Figure 10.9. Data binding in mobile Web applications ”employee directory. Figure 10.10. Data binding in mobile Web applications ”employee details. Application ScenariosMobile Web applications bring the benefits of the connected Web application delivery model to the world of mobile devices. At the same time a number of landmark developments related to 2.5/3G ( next generation) wireless networks have emerged. Application scenarios for mobile Web applications are online driving directions, locators, employee directories, stock trading, information delivery, and the like.
| ||||||||||||||||||||||||||||||||||||||||||||||||||
