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




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.




































Table 7-3: Properties of the MobileDynamicImage Control


Property


Type


Description


AutoConvert


True|False


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.


AutoSizeImage


True|False


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


DynamicImageSource


String


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


ScalePercent


Integer


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


ScaleBasedOn


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.


ImageBrightness


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


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


ImageDitherMethod


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.


MaintainAspectRatio


True|False


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"
DynamicImageSource=
"C:\Inetpub\wwwroot\MobileDynamicImageExample\BestBuys1.JPG">
</cc1:DynamicImage>
</mobile:Form>











/ 145