Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Book Excerpt: Building .NET Applications for Mobile Devices

This book demonstrates how to use the Microsoft .NET Framework and Visual Studio.Net to create applications for phones, Pocket PCs, and other portable devices. Focusing on ASP.NET and the .NET Mobile Web SDK, it shows how to deliver appropriately formatted content for diverse hand held clients from a single ASP.NET page, along with how to provide mobile email access with Microsoft Outlook Mobile Manager. Read all of Chapter 3, "Developing Mobile Web Applications."


Chapter 3: Developing Mobile Web Applications

In this chapter, we'll provide you with an overview of the mobile Web application development process. We'll systematically guide you through some simple applications built using Microsoft Visual Studio .NET and the Mobile Internet Designer (the GUI editor for mobile Web applications), and we'll introduce you to the features of Visual Studio .NET. We'll also compare the development process of an application built using Visual Studio .NET with that of an application built using a text editor and compiled at the command line.

We'll start the chapter by outlining the system requirements for development platforms and showing you how to create your first mobile Web applications. You'll then discover how to test your application with Microsoft Internet Explorer as well as with a tool that emulates a mobile device. Finally, you'll learn how to work with Visual Studio .NET Web projects.

Setting Up Your Development System

To develop applications using the Mobile Internet Toolkit, you'll need access to a computer with the following configuration:

  • Microsoft Windows 2000 Service Pack 2, Microsoft Windows XP Professional, or Microsoft Windows 2000 Service Pack 2 Server Microsoft Windows XP is the newest version of the world's favorite operating system. If you're using Windows XP, you'll need to develop on the Professional Edition, which includes Internet Information Services (IIS).
  • Microsoft Internet Information Services (IIS) 5.0 or later To install IIS in Windows 2000, click Start, point to Settings, and then click Control Panel. In Windows XP, click Start and then click Control Panel. Click Add/Remove Programs, and then click the Add/Remove Windows Components button. Select the Internet Information Services (IIS) check box to enable IIS on your system.
  • Microsoft .NET Framework You can find a copy of the .NET Framework on this book's companion CD. Alternatively, you can download the .NET Framework from the MSDN Web site at http://msdn.microsoft.com. If you install Visual Studio .NET, the .NET Framework is installed at the same time.
  • Visual Studio .NET Strictly speaking, Visual Studio .NET isn't essential for developing mobile Web applications. You can create mobile Web Forms applications using a text editor and the command-line compilation tools on a computer with the .NET Framework and Mobile Internet Toolkit installed. However, an integrated development environment (IDE) such as Visual Studio .NET is indispensable for efficient development.
  • Mobile Internet Toolkit You can download the Mobile Internet Toolkit and updates from the MSDN Web site.

If you want to, you can run the Visual Studio .NET IDE on your development workstation and locate your applications on a different Web server. In this configuration, your development system must be running Microsoft Windows NT 4 Service Pack 6a, Windows 2000 Service Pack 2, or Windows XP and must have Visual Studio .NET and the Mobile Internet Toolkit installed. The Web server must be running Microsoft Windows 2000, Microsoft Windows .NET Server, or Microsoft Windows XP and must be running IIS version 5.0 or later. It must also have the .NET Framework and the Mobile Internet Toolkit installed. The easy way to configure a separate Web server is to install Visual Studio .NET, proceed through the Windows Component Update phase, and then clear all options apart from server components prior to the installation of Visual Studio .NET. In addition, you'll need administrative access to the Web server.

By default, Visual Studio .NET expects to create Web projects on a Web server running on the development system, which you can access using URLs that begin with http://localhost. The examples we'll give in this chapter assume this configuration.

The minimum computer specification recommended for Visual Studio .NET development is a Pentium II 450-MHz machine with 128 MB of RAM. However, we recommend a Pentium III 733-MHz machine with 256 MB of RAM. Like many IDEs, Visual Studio .NET provides a wealth of information, so for effective development we advise using at least a 17-inch monitor.

In addition, you'll need either some mobile devices or software emulations of them to thoroughly test your applications. Visual Studio .NET integrates Internet Explorer for easy testing of Web applications, which is a useful tool for the early stages of mobile Web application development. The multiple browser support of ASP.NET with the Mobile Internet Toolkit means that Internet Explorer is just as valid a client browser as a Wireless Application Protocol (WAP) browser or Pocket Internet Explorer. However, you'll also need to test your applications on the intended target devices. You'll learn more about mobile device emulators and using them for testing later in this chapter, in the section "Testing with a Mobile Phone Emulator."

Creating Your First Mobile Web Applications

Visual Studio .NET is a complete development environment for authors of .NET Framework applications. Its graphical designer enables you to select mobile Web Forms controls from the Toolbox and then drag and drop them into position on mobile Web Forms. You can use any .NET-compliant language to code program logic, and the integrated editing and compilation facilities make producing accurate code much easier. Visual Studio .NET also features an integrated Web browser for testing, end-to-end debugging facilities, and powerful project file management, making it an indispensable tool for the mobile Web application developer.

Using Visual Studio .NET

When you start Visual Studio .NET for the first time, the My Profile options within the Start Page appears, as shown in Figure 3-1.

Click to view graphic
Click to view graphic

Figure 3-1 The My Profile section of the Visual Studio .NET Start page

If you already have experience with Visual Studio 6.0, you can select a profile so that the layout of the screen and the key assignments used for functions such as debugging match the settings you're accustomed to. Profiles are available to match the main Visual Studio 6.0 development environments—Microsoft Visual Basic, Microsoft Visual C++, Microsoft Visual InterDev, and Microsoft Visual FoxPro. If you're new to Visual Studio, we suggest you select the default setting, the Visual Studio Developer profile.

Regardless of the profile you select and the language you choose to develop your application's code, the development process essentially remains the same. First, you create a project, which is the collection of files that make up your application. Then you design your user interface by dragging mobile Web Forms controls onto the mobile Web Forms page, set properties on the mobile controls, and write code to implement the functionality behind the user interface. Finally, you build and test. And you perform all these activities within the Visual Studio .NET development environment.

Creating a Mobile Web Project

To create a project, you can click the Get Started option on the Start page and then click the New Project button. You can also create a project by clicking the File menu, pointing to New, and then clicking Project on the drop-down menu. The New Project dialog box appears, as shown in Figure 3-2.

Click to view graphic
Click to view graphic

Figure 3-2 The New Project dialog box

The left pane of the New Project dialog box allows you to select the project type. This pane offers one project type for each .NET language you've installed; the standard options are Visual Basic, Visual C#, and Visual C++. Once you select your preferred language, the templates displayed in the right-hand pane change to reflect that language. All the languages offer similar options and allow you to create Web applications, as well as options to create other standard solutions as Windows applications, class libraries, or Web services. Currently, Mobile Web Application templates are offered for the Visual Basic and Visual C# languages.

It doesnt matter which language you choose for your first project, since the application won't require you to write code. Therefore, unless you have a preference, we suggest that you choose Visual C#. Click the Mobile Web Application option to highlight it, and then replace the suggested project name MobileWebApplication1 with the name MyFirstMobileApp. To do this, change the Location of the project from http://localhost/MobileWebApplication1 to http://localhost/MyFirstMobileApp. Visual Studio .NET updates the grayed out project name according to the location you enter.

Notice the text below the Location: input box. This informs you that Visual Studio .NET will create the project on the Web server at the location http://localhost/ MyFirstMobileApp on your development machine. When you click OK, the Create New Web dialog box appears, informing you that Visual Studio .NET is creating the new Web application at http://localhost/MyFirstMobileApp.

Visual Studio .NET now updates its various dialog boxes with information relevant to your project. The default layout will look like Figure 3-3.

Click to view graphic
Click to view graphic

Figure 3-3 Mobile project development environment

The main view is a tabbed view, which displays all the files that you're currently working on, positioned one behind another. An asterisk next to the filename on the tab indicates that the file has been modified but hasn't been saved to disk yet.

Whenever you create a mobile Web application, the New Project Wizard creates your project with the name you specified and creates mobile Web Forms that the MobileWebForm1.aspx file contains by default. This file is currently open and visible in the Mobile Internet Designer, which provides a graphical user interface (GUI) for designing mobile Web Forms.

Using Solution Explorer and the Properties Dialog Box

In Visual Studio, on the upper-right side of your screen, you'll see Solution Explorer. This window lists all the files in your project. If you click the MobileWebForm1.aspx file listed there, the Properties dialog box on the lower-right side of your screen updates to reflect the properties of the currently selected object—that is, the MobileWebForm1.aspx file. This is a standard feature of Visual Studio .NET. Whenever you select an object, whether it's a user interface control you've dragged onto the design area of your mobile Web Forms, a file in Solution Explorer, or any other object listed onscreen, the Properties dialog box updates so that you can easily change that object's properties.

Although not essential, it's a good idea to change the name of the mobile Web Forms file. When a browser accesses a Web application—mobile or otherwise—it does so by specifying that application's URL. The URL of the application you're creating is currently http://localhost/MyFirstMobileApp/MobileWeb-Form1.aspx.

You can also let users access the application by specifying the URL's shorter form, http://localhost/MyFirstMobileApp, thus enhancing the application's usability. To enable this functionality, you must change the name of the first file users will access to one of the standard default document names that IIS recognizes. By default, IIS sets the valid default names to one of the following: Default.htm, Default.asp, Iisstart.asp, or Default.aspx.

If IIS receives a request for a URL that doesnt specify a document, it will search the directory that stores Web site files for a file with a default document name. If IIS finds such a default document, it processes the document and returns the results to the caller; otherwise, it returns a Hypertext Transfer Protocol (HTTP) 404 (page not found) status code. Giving your entry form one of the default document names makes it easier for users to remember the shorter name for your Web site; that way, they no longer have to include a nonintuitive document name such as MobileWebForm1.aspx within a request.

Click MobileWebForm1.aspx in Solution Explorer to select it. In the Properties dialog box, locate the File Name entry and change it to Default.aspx. Figure 3-4 shows the result.

Click to view graphic
Click to view graphic

Figure 3-4 Setting file properties

Building the User Interface with the Toolbox

The project that Visual Studio .NET created will build and run. Of course, the application currently does nothing. You'll now add a mobile control to the mobile Web Forms page so that your application displays a simple text message.

The Toolbox displays all the mobile Web Forms controls that you can use when designing your Web Forms. You can access the Toolbox by placing the mouse cursor over the Toolbox tab on the left margin of the screen. By default, this window is set to Auto Hide—it stays hidden until needed, rather than taking up valuable screen space. If you right-click on the Toolbox when it is visible, you can set or clear the List View option. When set to List View, the controls are presented in a list showing their full name; when List View is disabled, only an icon is displayed for each control. As you move your mouse over each control, the ToolTip displays the control name. The Toolbox is divided into a number of tabs, each containing related controls, as shown in Figure 3-5.

Click to view graphic
Click to view graphic

Figure 3-5 The mobile Web Forms Toolbox

Select the compartment called Mobile Web Forms, which contains the standard mobile controls, such as the Label, TextBox, Command, Image, and the validation controls. You'll learn about these controls in more detail in Chapter 5.

An A icon denotes the Label control. You can click and drag this control onto the mobile Web Forms page. Notice that the Properties window now shows the properties of the Label control, which has an ID value of Label1 and a Text property value of Label.

In the Properties window, change the Text property to something more meaningful, such as the venerable, "Hello World!" Doing so updates the text displayed on the Label control shown in the Design view accordingly.

Building and Running Your Application

Visual Studio .NET offers many ways to build an application. Over time, you'll probably develop a preference or find yourself using certain methods at certain junctures. You can use one of the following methods to build your project:

  • Go to Solution Explorer, right-click the solution name, and click Build on the pop-up menu.
  • Right-click the MyFirstMobileApp project line immediately below the solution name, and then click Build.
  • Click the Build menu, and then click Build.
  • Simply choose to run the application in Debug mode by clicking the Start button in Visual Studio, which automatically initiates a build before running it.

The project will then compile and you'll see the build output display at the bottom of the screen, including details of any compilation errors.

To test your application, you can click the Debug menu. Then select Start, or click the Start button marked on the standard toolbar. Internet Explorer starts up and calls the IIS server to access your application, just as an external Web client would. Figure 3-6 depicts this process.

Click to view graphic
Click to view graphic

Figure 3-6 Testing the application with Internet Explorer

While Internet Explorer is active, Visual Studio is running in Debug mode. Therefore, after you view the output from the application, close Internet Explorer to return Visual Studio to Design mode.

Testing with a Mobile Phone Emulator

You'll find Internet Explorer an adequate development tool for performing the initial testing of an application's functionality. However, one of the most powerful features of the Mobile Internet Toolkit is that it can render your application on different client browsers, each with its own capabilities and possibly even requiring a completely different markup language.

You should test your application on devices that are likely to access it in the real world. You use the mobile Web Forms controls in your applications to carry out some function on a mobile device, however the actual physical appearance might differ from device to device. Furthermore, the Mobile Internet Toolkit allows you to customize your application to introduce device-specific behavior. For example, when you use the mobile Image control, you should supply images appropriate to each browser. In other words, you should supply GIF files for HTML browsers, color JPG or PNG files for advanced WAP browsers, and monochrome WBMP format graphics for older WAP devices. Clearly, it is crucial that you test your application on the different devices that are likely to access it.

Purchasing the actual mobile devices so that you can test your application with mobile clients can be an expensive undertaking. Fortunately, a cheaper option exists: installing software emulators (sometimes called simulators) on your development system. Because the Mobile Internet Toolkit doesnt install any device emulators, you'll need to do this yourself. In Chapter 13, we look at how you get and use emulators in more detail, but to get you started, we'll show you how to set up the Openwave simulator in this section.

Setting Up the Openwave Simulator

Openwave is the company formed from the merger of Phone.com and Software.com. Phone.com was itself formerly known as Unwired Planet, which was responsible for devising the HDML markup language for mobile devices, a predecessor of WAP. Today, Openwave claims that 70 percent of the world's Internet-enabled phones use their mobile browser software. The Mobile Internet Toolkit version 1.0 release includes support for devices from Alcatel, Motorola, Samsung, Sanyo, Siemens, Panasonic, Casio, Denso, Hitachi, Kyocera, LG, and many others, all of which use the Openwave browser—or its predecessor, the UP.Browser. Openwave has always been a good friend to developers, and many have cut their teeth with WAP development using the Openwave Software Development Kit (SDK). This kit includes a phone simulator, which you can use to test Mobile Internet Toolkit applications.

You can download the Openwave SDK free of charge from http://developer.openwave.com/download/index.html. At the time of this writing, Openwave had recently released the SDK WAP Edition 5.0, which is targeted at developers building applications for devices with WML 1.3 browsers (with Openwave extensions), few of which are yet available, and will soon release V5.1, aimed at WAP 2.0 devices. However, we recommend that you download SDK 4.1, which includes a simulator with the UP.Browser V4.1, a WML 1.1 browser included with many devices in current use. The Mobile Internet Toolkit fully supports this browser.

After you install the SDK, click the UP.SDK 4.1UP.Simulator shortcut in the Programs or All Programs menu and you'll see a phone image similar to the one shown in Figure 3-7.

Click to view graphic
Click to view graphic

Figure 3-7 The Openwave simulator

The phone image allows you to test mobile applications on a simulated mobile phone that accepts WML 1.1 markup. You can use this instead of or in addition to the integrated Internet Explorer browser.

Using the Simulator for Testing

During development, you can view a mobile Web Forms page in the Openwave simulator by entering the URL of the start page into the Go drop-down box, as shown in Figure 3-8. Figure 3-9 shows the functions of the Openwave simulator buttons.

Click to view graphic
Click to view graphic

Figure 3-8 Testing a mobile Web application with the Openwave simulator

Actual WAP devices always connect to the Internet via a special proxy, called a WAP gateway. This gateway acts as an important bridge between the wireless WAP protocols used by the phone and the HTTP over TCP/IP used by the wired Web. When you test with a real device, you must configure it to connect via a WAP gateway, operated by your wireless service provider, or in some cases, your company. Fortunately, the Openwave simulator includes gateway functionality within it, so you don't have to worry about this when testing on your own workstation. The default configuration for the simulator is to connect directly to a server using HTTP protocols over the wired Web. To check that your simulator is configured like this, click the Settings menu of the Openwave simulator and then click UP.Link Settings. Check the HTTP Direct check box, as shown in Figure 3-10.

Click to view graphic
Click to view graphic

Figure 3-9 Openwave simulator button functions

Click to view graphic
Click to view graphic

Figure 3-10 Configure the Openwave simulator for direct HTTP access to your development server

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date