n the old days, building mobile applications involved using the ASP.NET mobile controls which were a subset of the larger ASP.NET. ASP.NET developers had to learn new concepts (for instance, using instead of tags), and mobile developers had fewer specialized controls. However, the mobile controls did have a very powerful Adaptive Rendering model that enabled mobile Web developers to build device-independent applications. One set of code could target more than 230 devices and browsers.

Unified Controls Model
With ASP.Net 2.0, Microsoft merges the earlier ASP.NET and the mobile controls model. You now have one Unified controls model which lets you build both Web and mobile Web applications for any mobile device, at one go. All the controls available in ASP.Net 2.0 are now mobile aware. The Adaptive Rendering model has been extended to all the controls. There’s no longer a need to learn two separate models and use two separate sets of controls.

Trying It Out
Start VS.NET 2005 Beta 1 and create an ASP.NET Web project. A default.aspx file is created for you. Check the Toolbox, to see the full range of available ASP.NET controls. One of the new controls is the Dynamic Image control. Drop the Dynamic Image control on the page.

Dynamic Image Control
The Dynamic Image control helps to solve one of the most common problems in mobile development. As you know, different devices support different image types. For instance, the Web supports .jpg or .gif image formats. But on WAP phones, the default image format is .wbmp. PocketPCs, on the other hand, support .jpg. You need to have different images for different formats and you need to write code to determine the device which is accessing the page. The Dynamic Image control solves this problem by retrieving the image type from a variety of sources:

Figure 1. The DynamicImage Control: This control auto-generates different image formats.

• The System.Drawing.Image object.
• An array of bytes specified in the ImageBytes property.
• A file specified in the DyanmicImage.ImageFile property.
• An image generation service at the URL specified in the ImageGeneratorUrl property.

Set one of the image source properties listed above and the control auto-generates an appropriate image type depending on the requesting browser. Add any .gif or .jpg image file you have on disk to the project you’ve created. Specify the ImageFile property of the DynamicImage control as the image file. Now run the application. The application loads in Internet Explorer, which is the default browser. Now copy the URL in the browser and paste this into any WAP browser (the resources section directs you to one of the more common WAP browsers). You know that WAP browsers support only .wbmp formats, so typically this page should load up with no image to display. However, the DynamicImage control in ASP.NET 2.0 auto-generates the correct format (shown in Figure 1) to different browsers. It displays the image in the original .jpg format in Internet Explorer and shows it in .wbmp for the Openwave WAP simulator.

ASP.NET 2.0 handles textual representation of information just as smoothly. To demonstrate this, we’ll use the Calendar control. Drop a Calendar control onto the same page, and see how it is displayed. As you may have guessed, ASP.NET 2.0 formats the presentation of the control so that it’s suitable to the device which is browsing the application. The calendar can’t be shown in the full rich format on a WAP phone, so instead it’s shown as a series of links with different options to choose a date from. Figure 2 is an example of the page with a Calendar control added to it and displayed in the WAP phone simulator.

Figure 2. The Calendar Control: Here, this control is generated as links on a WAP phone simulator.

Managing Screen Real Estate
Previously, Microsoft had a model where a single ASPX page could contain multiple forms. This paradigm is different than in Web development, where you typically have one form per Web page. In order to unify both the models, ASP.NET 2.0 offers two controls: MultiView and View. These controls help in splitting the page content across multiple views that you control. When the page loads all of the content at the same time, the user is shown snapshots present in different views.

Add a new form to the project, call it Multipg.aspx. On this page, drop a MultiView control from the toolbox. Once you have the MultiView control on the page, drop two View Controls into the MultiView control. Then add a label to each View control. Set the text property of the first label to “You are in View 1” and set the second Label’s text property to “You are in View 2.” Now drop two Button controls in each view and change the text property to “Take me to View 2” and “Take me to View 1” respectively, as shown in Figure 3.

Switch to code view by right clicking the form and selecting “View Code.” Paste the following code in the code view:

Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)        Me.MultiView1.SetActiveView(View2)    End Sub    Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)        Me.MultiView1.SetActiveView(View1)    End Sub    Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _    Handles Me.Load        Me.MultiView1.SetActiveView(View1)    End Sub

Figure 3. Splitting the Page: This image shows how to use the Multiview and View controls.

The code handles three events:

• The Page Load event where the first View control is set as the ActiveView.
• Code to handle the button1 click event.
• The button2 click event where the ActiveView is set to View2 and View1, respectfully.

Right click the page in solution explorer and choose “View in Browser” to see how it displays. One View control and it’s contents are displayed. Clicking on the button moves you from one view to the other.

These controls allow you to have similar content on one page but have the flexibility to display parts of the content in small packets to end users.

In addition to using just the one MultiView control, you can also use multiple MultiView controls on a page with a number of View controls within them, and switch between MultiView controls as well. To achieve this, simply make a MultiView control visible and set the ActiveView to a View control in it:

Me.MultiView2.SetActiveView(View3)Me.MultiView2.Visible = TrueMe.MultiView1.Visible = False

These controls allow you to break content into manageable parts?but only if you know the amount of content you have. Oftentimes, you’ll need to paginate data and you won’t know how much content there is, since it might be retrieved from some data source or thru code.

Pagination
How do you handle 100 controls generated through code in a page? Add a new page called PaginatingContent.aspx to your project. Add two controls to the page, a Panel and a ContentPager. Set the ContentPager’s ControltoPaginate property as Panel1 and specify ItemsPerPage property = 4. Paste the following code in the code view. This code adds 100 buttons on the page in the panel during the PageLoad event:

Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _    Handles Me.Load        ' Add 100 labels to the a panel on the page so that         ' several pages are required to display all the content.        Dim i As Integer        For i = 0 To 100            Dim tempLabel As New Label            tempLabel.Text = "Label " & i & "
"            Panel1.Controls.Add(tempLabel)        Next i    End Sub

Figure 4. Paginating Content: Use the ContentPager control to display a few label controls per page, as well as the option to browse all available labels.

100 controls on a page is a bit too much content for mobile devices. That’s where ContentPager control comes handy. Specify the control(Panel) to paginate via the ControltoPaginate property and it paginates the data depending on the temsperPage property specified. In this case, I’ve specified four items per page. Browse this page to see how it displays in the browser. The page displays four label controls per page with a navigation option to browse the 100 labels (as shown in Figure 4).

Most other controls know how to paginate themselves. For example, the GridView has a property called AllowPaging, which, if set to True, causes the GridView to paginate it’s content depending on the PageSize property you set. Using the in-built properties of controls and the ContentPager control, you are be able to manage the limited screen real estate on mobile devices.

Customizing Content for Specific Devices
You often need to customize content based on the device which is accessing your application. ASP.NET 2.0 really simplifies this by providing you with some simple filters. Add a new page called contentfilter.aspx to your project. Switch to HTML Source View by clicking on the tab below and paste the following code on one line:

Now browse the page in the following browsers: a mobile WAP browser, Internet Explorer, and Netscape. In each browser, the Label displays a different text based on the requesting device. UP, IE, and Netscape6to9, are browser ids stored on each Web server machine, in the following directory: %windir%Microsoft.NETFrameworkv2.0.40607CONFIGBrowsers.

There are various ie.browser, netscape.browser, openwave.browser, etc. Each of these .browser files describes the characteristic of various devices and the browsers thereby enabling you to filter and target a particular device or browser. The Framework generates HttpBrowserCapabilities from a compiled object that is based on the .browser files. Filters can be used programmatically by accessing strongly-typed capabilities through Request.Browser as shown in the example below:

If Request.Browser.IsMobileDevice Then            'Do something for mobile devices        ElseIf Request.Browser.IsColor Then            'do something for Color devices        ElseIf Request.Browser.PreferredRenderingType = "wml11" Then			       ' Render WML contentEnd If

Familiarize yourself with these .browser files to understand the various properties of the exposed devices. Microsoft will be constantly updating them to ensure easy support for the latest devices and browsers. However the good part is that if there is a device missing which you want to target, you need only create your own custom .browser file.

Mobile-enabled!
The ASP.NET 2.0 environment is a complete mobile Web application environment that has made mobile-enabling of Web applications considerably easier. But that's not all. It is also extremely extensible, allowing you to extend the environment and target even custom devices or devices which are not yet supported directly by Microsoft. If you're considering building mobile Web applications, this is a platform that you surely cannot ignore.