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

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

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

Andy Wigley; Peter Roxburgh

| نمايش فراداده ، افزودن یک نقد و بررسی
افزودن به کتابخانه شخصی
ارسال به دوستان
جستجو در متن کتاب
تنظیمات قلم


اندازه قلم

+ - پیش فرض

حالت نمایش

روز نیمروز شب
جستجو در لغت نامه
افزودن یادداشت جدید

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


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:

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

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.


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" %>
MaintainAspectRatio="{True|False}" >
</mobDI:MobileDynamicImage >


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.

Table 7-3: Properties of the MobileDynamicImage Control






If True, the image will be dynamically set to the proper format; otherwise, the image will be treated as a normal Image control using the ImageUrl property for the path to the source image. Default is True.



If True, the image will be resized to the dimensions of the device based on the ScaleBasedOn and ScalePercent properties. Default is True.



The path to the source image, or the Web address of the image.



Value in the range 0 – 100. If AutoSizeImage is set to True, the image will be resized using this percent of the ScaleBasedOn property.


MobileDynamicImage. ScaleBasedOnType enumeration: ScreenWidth|ScreenHeight

If AutoSizeImage is set to True, the image will be resized based on this and the ScalePercent property. For example, if this value is set to ScreenWidth, and ScalePercent is set to 50, the image will be resized to 50 percent of the screen width.


MobileDynamicImage. Brightness enumeration: Auto|Very_Light|Light|Medium|Dark|Very_Dark

Indicates the brightness of the source image. Can be used to tweak dithering.


MobileDynamicImage. DitherMethod enumeration: ThreshHold|Matrix|Floyd_Steinberg

The dithering technique used for the image. Photos work best with Floyd_Steinberg, logos might look better using ThreshHold or Matrix.



If set to True, the MobileDynamicImage control resizes the image keeping the ratio of height to width the same, avoiding introducing horizontal or vertical distortion. Default is True.

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"

/ 145