Building Microsoft ASP.NET Applications for Mobile Devices, Second Edition [Electronic resources] نسخه متنی

Developing with Mobile Web Forms

You use ASP.NET Web Forms to build Web pages for HTML PC clients. ASP.NET mobile Web Forms allow you to build pages for mobile clients, regardless of the markup languages they support.

Abstracting the Mobile Device User Interface

In ASP.NET, the developer works with an abstraction of a user interface, with objects representing the fundamental components of a visual display, such as text labels and input boxes. It's the runtime's responsibility to take this abstract representation and turn it into device-specific markup. ASP.NET provides mobile Web Forms controls that, like standard Web Forms controls, represent individual components of the user interface. You simply define a user interface using mobile controls within a page, and ASP.NET delivers the content in the markup language that's appropriate to the device requesting the page. ASP.NET Web Forms controls are programmable objects, but you define the layout of the controls in your user interface by creating a text file containing Extensible Markup Language (XML) that represents the controls. For example, a simple "Hello, World" application is implemented as a mobile Form control containing a mobile Label control. The label has the value "Hello, World", as shown in Listing 1-1.

Listing 1-1: ASP.NET mobile Web Forms code for a "Hello, World" application.

<%@ Page Language="vb" Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" 
Assembly="System.Web.Mobile" %>
<mobile:Form id="Form1" runat="server">
<mobile:Label id="Label1" runat="server">Hello, World</mobile:Label>
</mobile:Form>

The first time a client requests this page from your Web server, the ASP.NET page compiler parses the contents of the mobile Web Forms page and dynamically builds an application that it then caches for future requests for the same page. When the application is run, it examines the Hypertext Transfer Protocol (HTTP) headers sent with the request to determine what kind of device is making the request and what kind of markup the device requires. The application then generates the appropriate markup in the response that it sends back to the client.

Even wireless devices that support the same markup languages can require subtly different markup to best provide a certain functionality. For example, when providing navigation links within WML 1.1 applications, Nokia devices achieve best usability with a WML a (anchor) element, whereas Openwave browsers usually achieve best results with a do element. Writing code for each specific task on every specific device would be an enormous undertaking. Using the ASP.NET mobile controls, you can simply place a Link control on a mobile Web Forms page, and the runtime automatically renders the correct elements for any given wireless device.

Using Mobile Web Forms Controls

The mobile controls supplied with ASP.NET are a special type of Web Forms control. You can use all the mobile controls without worrying about the capabilities of the requesting device. It might help to think of the set of mobile controls as falling into three categories:

Core controlsThese controls are mobile versions of standard ASP.NET controls. Some examples of these controls include TextBox, Label, and Image. In addition, ASP.NET provides a number of special features, such as the Calendar control.

Server validation controlsMore than a third of the controls have something to do with validating user input. Validation controls help simplify code and can be used to prevent users entering incorrect data—they provide a vast amount of functionality in just a few simple elements. For example, with these controls, you can validate a field to ensure that it fits the following criteria:

Follows a specific input format, such as a date, or some custom format that you define

Contains a value of a particular data type, such as a string

Contains some value—in other words, isn't blank

Mobile-only controlsThese controls offer functionality that applies only to mobile clients. Examples of these controls include PhoneCall and DeviceSpecific.

DeviceSpecific/Choice constructsThese constructs allow you to customize your application for specific devices—for example, to set the property of a control to one value on one device, and differently on others. Each construct consists of a DeviceSpecific element and one or more Choice child elements. You use the Choice element to reference device filters, which test the capabilities of the requesting device. If the Choice element evaluates to true, that choice applies to the current request. For example, a device filter can test whether a client requires a monochromatic or a color image, and then your application delivers the appropriate image to that client.

TemplatesThe Form, Panel, List, and ObjectList controls support templates. These controls use DeviceSpecific/Choice constructs to target specific devices with specific content, which you define in a template. This content can be device-specific markup or ASP.NET mobile controls. With some controls, such as List, you can override the default output, whereas with others, such as Form, you can insert whole new sections of content that renders in addition to the default markup.

Working with Mobile Web Forms Using .NET Tools

You can easily construct mobile Web Forms in your favorite text editor, such as Microsoft Notepad. Alternatively, integrated development environments (IDEs) such as Microsoft Visual Studio .NET give you powerful facilities for developing mobile Web applications, including the Mobile Internet Designer, a GUI editor for mobile Web Forms. This allows you to use a drag-and-drop graphical editor to create the XML that defines the layout of your mobile Web Forms and set properties of mobile controls. In Chapter 2, we'll examine how to use Visual Studio .NET to create mobile applications.

Implementing Code

An ASP.NET application combines the XML that describes the mobile controls used in the user interface with code that acts on those controls and that implements the functionality of your application. You can code an ASP.NET application in one of two ways: embed the code within a page, or provide the code in a separate file. Implementing code within the body of a page is simple. You must first declare the language you want to use. You then delimit any sections of code with either script tags or an ASP.NET script delimiter—namely, <% %>. The following example shows how to implement code within the body of a Web Forms page:

<script language="C#">
class DoNothing {
public void DoesNothing() {;}
}
</script>

The alternative method of coding an ASP.NET application—providing code in a separate file—is known as the code-behind technique. Coding behind is often a better method of implementing code than using inline code, because it provides a clean separation between the layout of the graphical elements contained in the mobile Web Forms page and the application logic contained in the code-behind module. Implementing the code-behind technique is simple. If you're using Visual Studio .NET, the IDE automatically stores your code in a file separate from the controls. If you're creating your own projects using a text editor, you write your code and save it as a normal class file with that language's standard file extension, such as .vb for Visual Basic .NET or .cs for Microsoft Visual C#. To use the code, you insert a special tag at the start of the .aspx page, which declares that the page inherits from the class that you created. Programmatically, this simply means that the .aspx page inherits the methods and properties you program in the code-behind classes, logically becoming a part of that page. We'll examine the structure of an ASP.NET mobile Web application in more detail in Chapter 3.

Consuming Events

Mobile Web Forms controls fire events, which methods in your code can trap and act upon. An example of such an event is when a user clicks a button displayed within a page. When a user clicks this button, the mobile Command control in your application running on the server raises an event. This event is trapped by an event handler method that you write in your application; the method then carries out some function such as displaying an acknowledgment to the user. You can access all the properties of the mobile Web Forms controls in your application through this event-driven model. Therefore, you can dynamically change what the application displays to the user, make controls visible and invisible, access and display data, and perform any of the other functions required in your application. You can even dynamically create new mobile controls at run time and load them into your mobile Web Forms pages. This allows you to build very efficient applications that are responsive to user actions.