Building Microsoft ASP.NET Applications for Mobile Devices, Second Edition [Electronic resources]

The MobileDynamicImage Control

MobileDynamicImage is a fantastic control created by Joseph Croney of Microsoft that goes a long way toward solving a major development headache of mobile developers. Using ASP.NET mobile controls, you can build mobile Web applications in a device-independent manner. The only area in which you're forced to program for specific devices is when you're using images. HTML browsers usually support GIF and JPG graphics; WAP browsers support WBMP and, in some cases, PNG format graphics. You couldn't create one graphic and use it across all devices because there is no single consistent format that works on all devices. The MobileDynamicImage control solves this problem, as it allows you to take one graphic and render it at run time in the graphics format supported by the requesting device.

The MobileDynamicImage control derives from the standard mobile Image control and extends that control by adding support for dynamically created images that will be rendered on mobile devices. The MobileDynamicImage control converts images to the appropriate image format and resizes the images based on the device screen size. It has the following features:

Automatically determines correct image type for the device and converts appropriately

Supports GIF, JPEG, WBMP, and PNG image formats

Automatically resizes images to fit the mobile device's screen

Caches dynamically created images so that they are created only once

Supports three dithering techniques for converting color images to black and white

Provides full Visual Studio .NET design support, including Design Time View and a Property Builder and Preview windows, as shown in Figure 7-6

Figure 7-6: MobileDynamicImage control Property Builder and Preview

Supports source images referenced by Web location, and will load and convert

Allows temporary image save location to be specified in machine.config or Web.config

Installation

Download the zipped control from the Microsoft ASP.NET Web site, unzip it and copy the files MobileDynamicImage.dll and JCroneyImageUtilites.dll to the directory where you keep your ASP.NET custom controls, as explained in "Using the Custom Controls" earlier in this chapter. If you're using Visual Studio .NET, you can add the new control to the Toolbox, as described earlier in "Adding the Controls to the Toolbox."

Configuring Your Application

There are no new device adapter classes for the MobileDynamicImage control, so there are no configuration changes required in the <mobileControls> element of your Web.config file, unlike the MobileCheckbox control. The MobileDynamicImage control extends the standard mobile Image control, so it inherits the configuration and device adapters of its parent.

By default, the MobileDynamicImage control writes files in a directory below the application directory named \DynamicImages. You must set security permissions on the application directory to allow the ASP.NET account write access (the name of the account that runs ASP.NET applications is ASPNET in default configurations).

However, it is advised that you select an alternative virtual directory where images can be saved. To do so, from the Control Panel, open Internet Information Services Manager. Right-click on the Default Web Site entry, choose New, and select Virtual Directory. Create a folder in which to save the images—for example, C:\inetpub\wwwroot\dynimg, which maps to the URL http://Myserver/dynimg where Myserver is the name of your machine. You must then define two configuration settings in an <appSettings> section of the Web.config or machine.config file to redirect the location where images are created to this new virtual directory, as follows:

<appSettings>
<add key="MobileDynamicImagePath" value="c:\inetpub\wwwroot\dynimg\" />
<add key="MobileDynamicImageURL" value="http://Myserver/dynimg/" />
</appSettings>

These two settings have the following meaning:

MobileDynamicImagePathThis string value defines the physical path to the directory where the dynamic image should be stored. You must set security permissions on this folder to grant the ASP.NET account write access. If MobileDynamicImagePath is specified, MobileDynamicImageURL must also be specified (see below).

MobileDynamicImageURLThe URL that is mapped to the virtual directory mapping specified in the MobileDynamicImagePath and configured in IIS.

Syntax

The MobileDynamicImage control possesses many properties inherited from System.Web.UI.MobileControls.Image, with the addition of some unique properties, as shown here:

<%@ Register TagPrefix="mobDI" Namespace="MobileDynamicImage"
Assembly=" MobileDynamicImage" %>
<mobDI:MobileDynamicImage
runat="server"
id="id"
Alignment="{NotSet|Left|Centre|Right}"
BackColor="backgroundColor"
BreakAfter="{True|False}"
Font-Bold="{NotSet|False|True}"
Font-Italic="{NotSet|False|True}"
Font-Name="fontName"
Font-Size="{NotSet|Normal|Small|Large}"
ForeColor="foregroundColor"
StyleReference="StyleReference"
Visible="{True|False}"
Wrapping="{NotSet|Wrap|NoWrap}"
AlternateText="AltText"
ImageUrl="masterImageSource"
NavigateUrl="targetURL"
SoftkeyLabel="softkeyLabel"
AutoConvert="{True|False}"
AutoSizeImage="{True|False}"
DynamicImageSource="string"
ScalePercent="{0-100}"
ScaleBasedOn="{ScreenWidth|ScreenHeight}"
ImageBrightness=
"{Auto|Very_Light|Light|Medium|Dark|Very_Dark}"
ImageDitherMethod="{ThreshHold|Matrix|Floyd_Steinberg}"
MaintainAspectRatio="{True|False}" >
</mobDI:MobileDynamicImage >

Properties

The MobileDynamicImage control extends the standard mobile Image control, from which it inherits many properties. See Chapter 4 for a description of the standard Image control. Table 7-3 describes the unique properties of the MobileDynamicImage control.

The DynamicImagePath property specifies the path to the source image or the Web address (the URL) of the image. Note that if a physical path is used, the source image is fetched only if a converted image of the required image format is not already available. Converted images are cached to be used for future requests. However, if a Web address is specified, a Web request will be made for the image, and the image will be reformatted and resized for the device on every request, meaning that performance is not as good as when the DynamicImagePath property specifies the physical path.

Using the MobileDynamicImage Control

The MobileDynamicImage control is very easy to use. If you're using Visual Studio .NET, just use the built-in Visual Designer support to enter the path or URL to an image into the DynamicImageSource property and you can see what the image looks like. At runtime, the image is automatically converted to a graphics format supported by the requesting client.

Some skill is required to get the best results. Photos and other detailed images always look great on an HTML browser; however, you can't expect a detailed image to convert well if the client is a monochrome WAP device with a small screen. In this case, it's better to use a source image that is clear, simple, and has good contrast. You might still want to use two images—a detailed color image for PDAs and high-end smart phones, and a simpler, high-contrast image for small-screen devices. You can use the Property Overrides feature described in Chapter 9 to choose between the source images depending on the screen size of the requesting client device.

Figure 7-7 shows how a single JPG image appears on a color display with an HTML browser and on a monochrome WAP device.

Figure 7-7: A single JPG rendered as a black-and-white WBMP for a WAP device (left) and resized to fit on an HTML browser (right)

Listing 7-5 shows the .aspx file for this demonstration. This example does not have a code-behind module.

Listing 7-5: Source for default.aspx in MobileDynamicImageExample

<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<%@ Page language="c#" 
Inherits="System.Web.UI.MobileControls.MobilePage %>
<%@ Register TagPrefix="cc1" Namespace="MobileDynamicImage" 
Assembly="MobileDynamicImage" %>
<mobile:Form id="Form1" runat="server">
<cc1:DynamicImage id="DynamicImage1" runat="server"
ImageBrightness="Light" ImageDitherMethod="Floyd_Steinberg"
DynamicImageSource=
"C:\Inetpub\wwwroot\MobileDynamicImageExample\BestBuys1.JPG">
</cc1:DynamicImage>
</mobile:Form>