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

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

فونت

اندازه قلم

+ - پیش فرض

حالت نمایش

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






Special-Purpose Controls

ASP.NET mobile controls supplies three special-purpose controls to assist you in building feature-rich mobile Web applications: Calendar, PhoneCall, and AdRotator, shown in Figure 5-1.


Figure 5-1: Class hierarchy of the special-purpose controls

The Calendar control allows a user to select a date. It renders the date differently on HTML and Wireless Markup Language (WML) browsers, allowing for any display and input limitations of mobile phone devices. The PhoneCall control allows your application to initiate a voice call on mobile phones or supply a visual prompt on devices that don't support telephony. The AdRotator control allows you to display banner advertisements in different graphical formats to suit the display capabilities of the target device.


Calendar Control


The Calendar control allows you to easily integrate date-selection functionality into a mobile Web application. This control provides an interface from which a user can select an individual day from any calendar month of any year—past, present, or future. The control also provides a number of modes that determine what range of dates the user can select. For example, the user could select a single day, a week, or an entire month.

The standard Microsoft ASP.NET Calendar control presents the user with a graphical representation of a single month. However, this representation isn't possible on some mobile devices because of the limited size of their display area. Instead, the mobile Calendar control will appear differently to suit the display characteristics of the target device. For example, a desktop HTML browser might present a full calendar, whereas a mobile phone with a WML browser might present a hierarchy of links, as Figure 5-2 illustrates.


Figure 5-2: The Calendar control on a WML browser and an HTML browser

Every time a user selects a date from the Calendar control, the remote form makes an HTTP Post back to the server, so you do not need to place an additional control on the Form that performs a postback, such as a Command control.

Syntax


You code the Calendar control in server control syntax using the properties and values shown in the following listing. See Table 5-1 below for information on the meaning of the properties.







































Table 5-1: Significant Properties and Events of the Calendar Control


Property


Type


Description


CalendarEntry-Text


String


Sets or gets the text used on WML and cHTML devices for the link to enter the Calendar control.


FirstDayOfWeek


System.Web.UI.WebControls.FirstDay OfWeek enumeration (for example, FirstDayOfWeek.Friday)


The first day of the week on which a list of the days of the week begins. Possible values are one of the System.Web.UI.WebControls.FirstDayOfWeek enumeration values (for example, FirstDayOfWeek.Friday). The default value is FirstDayOfWeek.Default which establishes the first day from the server's locale settings.


SelectedDate


DateTime object


Sets or gets the date selected in the control. This date is highlighted when the browser renders the control. On browsers that don't show the calendar graphically, the selected date appears as a subheading that precedes the date-selection options. The default value is today's date.


SelectedDates


Collection of DateTime objects


Gets the currently selected dates returned as a SelectedDatesCollection object. In code, you can use the Add and Clear methods to modify the dates in this collection. This property is not valid in server control syntax.


SelectionMode


System.Web.UI. WebControls. CalendarSelectionMode enumeration: None|Day|DayWeek|DayWeekMonth


Controls the date units that the user can select. If this property is set to None, no date is selectable. If it's set to Day, individual days are selectable. DayWeek allows the user to select an individual day or week and DayWeekMonth allows the user to select an individual day, week, or month.


ShowDayHeader


True|False


Accepts a Boolean value of True or False that indicates whether the display accompanies dates with an indication of the day of the week.


VisibleDate


DateTime object


Controls which month is displayed to the user when the browser renders the calendar. You can use any day in the month because only the month and year values of the DateTime object are used.


WebCalendar


System.Web.UI.WebControls.Calendar (Get only)


A MobileControls.Calendar object wraps an instance of System.Web.UI.WebControls.Calendar, which is exposed through this property. Use this property to set properties of the wrapped WebControls.Calendar instance. Consult the WebControls.Calendar documentation in the .NET Framework SDK documentation for details of the properties available. If you set any properties of the underlying WebCalendar control, they will take effect only with HTML and cHTML clients.


SelectionChanged (Event)


Event handler method name


Specifies the event handler to call when a user changes the dates selected in the control.


When you're defining dates as a string, as you do when setting the SelectedDate or VisibleDateMonth properties in server control syntax, the rules that apply are the same as those for the System.DateTime.Parse method. This means that the string is parsed according to the cultural-specific norms. For example, in U.S. English, "03/02/2003", "2003-03-02", "2 Mar 2003", and "2 March 2003" all parse to a DateTime object set to the 2nd March, 2003. See Chapter 14 for details of how to define a particular culture for your mobile Web forms page.

<mobile:Calendar
runat="server"
id="id"
BreakAfter="{True|False}"
Font-Name="fontName"
Font-Size="{NotSet|Normal|Small|Large}"
Font-Bold="{NotSet|False|True}"
Font-Italic="{NotSet|False|True}"
ForeColor="foregroundColor"
BackColor="backgroundColor"
Alignment="{NotSet|Left|Center|Right}"
StyleReference="styleReference"
Visible="{True|False}"
Wrapping="{NotSet|Wrap|NoWrap}"
CalendarEntryText="prompt string"
FirstDayOfWeek="{Default|Sunday|Monday|Tuesday|Wednesday|
Thursday|Friday|Saturday|Sunday}"
OnSelectionChanged="selectionChangedHandler"
SelectedDate="selectedDate"
SelectionMode="{None|Day|DayWeek|DayWeekMonth}"
ShowDayHeader="{True|False}"
VisibleDate="visibleDateMonth"
/>

Properties


"Syntax" section for valid values when setting the property in server control syntax. Note, however, that this table doesn't list the properties and events that the Calendar control inherits from the MobileControl class. (See Table 4-1 and Table 4-2 for that information.)

The Calendar control observes the setting of the BreakAfter property (inherited from MobileControl) only on HTML browsers. On WML and compact HTML (cHTML) browsers, the calendar is displayed as a link within the mobile page. The default text of this link is Calendar, or its localized equivalent; you override this default by using the CalendarEntryText property.

The Calendar control has one event, SelectionChanged. The event fires each time the user selects a date. Listings 5-1 and 5-2 in the following section show how the SelectionChange event is used in a mobile Web application.

Listing 5-1: Source for CalendarExample.aspx






<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<%@ Page language="c#" Codebehind="CalendarExample.aspx.cs"
Inherits="MSPress.MobWeb.CalEx.CalendarExampleMobileWebForm" %>
<mobile:Form id="Form1" runat="server">
<mobile:Calendar id="Calendar1" runat="server"
SelectedDate="2001-07-21"
SelectionMode="DayWeek"
Alignment="Center"
OnSelectionChanged="Calendar1_SelectionChanged">
</mobile:Calendar>
<mobile:Label id="Label1" runat="server" Alignment="Center"/>
</mobile:Form>











Listing 5-2: Code-behind file CalendarExample.aspx.cs






using System;
using System.Web.UI.MobileControls;
namespace MSPress.MobWeb.CalEx
{
public class CalendarExampleMobileWebForm :
System.Web.UI.MobileControls.MobilePage
{
protected System.Web.UI.MobileControls.Calendar Calendar1;
protected System.Web.UI.MobileControls.Form Form1;
protected System.Web.UI.MobileControls.Label Label1;
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.Calendar1.SelectionChanged +=
new System.EventHandler(this. Calendar1_SelectionChanged);
}
protected void Calendar1_SelectionChanged(
object sender,
System.EventArgs e)
{
Label1.Text=Calendar1.SelectedDate.ToShortDateString();
}
}
}











Using the Calendar Control


Listings 5-1 and 5-2 display the code for a calendar from which the user can select individual days or weeks. When the user makes a selection, the SelectionChanged event fires and the application makes an HTTP Post to the server. On the server, the event handler sets the value of the current form's label to match the date the user selected.

When the form data posts back to the server, the code assigns Label1 the selected date, which is then displayed to the user. Figure 5-3 shows an Openwave simulator displaying calendar options and the label with the selected date.


Figure 5-3: Output from the Calendar control example in the Openwave simulator


PhoneCall Control


Mobile data services increase the functionality of mobile phones and allow the user to access information in ways that simply weren't possible in the past. For example, a mobile phone with access to mobile data services can access ASP.NET Web sites written using the ASP.NET mobile controls. The possibilities for mobile Internet services are seemingly unlimited. With all this new functionality, it's sometimes easy to overlook the primary use of mobile phones. They really are quite suitable for making voice calls! The PhoneCall control allows you to easily take advantage of a mobile phone's voice call capabilities.

Mobile phones offer two main options for programmatically initiating voice calls:



Full programmatic access that automatically initiates a voice call, although the device might ask the user whether he or she wants to make the call



A Use Number option that allows a user to optionally call a number within a page, regardless of whether the phone displays that number to the user



The PhoneCall control uses automatic call initiation if the mobile phone supports this. Otherwise, the control displays a link that the user can select. Selecting the link can initiate the call or prompt the user about whether to do so. Figure 5-4 shows this latter option.


Figure 5-4: The Nokia Use Number option

Syntax


You code the PhoneCall control in server control syntax using the properties and values shown in the following listing. See Table 5-2 for descriptions of the purpose of the properties.

<mobile:PhoneCall
runat="server"
id="id"
BreakAfter="{True|False}"
Font-Name="fontName"
Font-Size="{NotSet|Normal|Small|Large}"
Font-Bold="{NotSet|False|True}"
Font-Italic="{NotSet|False|True}"
ForeColor="foregroundColor"
BackColor="backgroundColor"
Alignment="{NotSet|Left|Center|Right}"
StyleReference="styleReference"
Text="text"
Visible="{True|False}"
Wrapping="{NotSet|Wrap|NoWrap}"
AlternateFormat="alternateText"
AlternateURL="targetURL"
PhoneNumber="phoneNumber"
SoftkeyLabel="text"
Text="text">
innerText
</mobile:PhoneCall>

Properties


Table 4-1 and Table 4-2.



























Table 5-2: Significant Properties of the PhoneCall Control


Property


Type


Description


AlternateFormat


String


The format of the message displayed on devices that can't make voice calls. The string you supply can include two placeholders, {0} and {1}. The Text property is displayed in place of the {0} placeholder, and the PhoneNumber property is displayed in place of the {1} placeholder. The default value for this property is "{0} {1}". You can change the value to display a custom message. For example, Call support on {1} will display Call support on followed by the value of the PhoneNumber property.


AlternateURL


String


The absolute or relative URL of the page to access if the device can't make calls or the user doesn't want to make a call.


PhoneNumber


String


The phone number to call, formatted as country code|national number|short number. You can format the number's sections, including any of these characters:

left parenthesis [( ]

right parenthesis [ )]

period [.]

hyphen [-]

space [ ]

The country code is optional, but if specified, it must be prefixed with a plus sign (+). If a short number is used, it must be prefixed with a pound sign (#). On i-mode devices, the number must begin with a zero or #.


SoftkeyLabel


String


On certain WML browsers, a softkey beneath the display screen can be pressed to initiate the call. This property sets the prompt displayed above the softkey. Keep this prompt to around seven characters or less.


Text


String


Specifies the message displayed on the link to initiate a call.


Using the PhoneCall Control


The code in Listing 5-3 prompts the user to press a link, which initiates a call to customer support.

Listing 5-3: Source for PhoneCallExample.aspx






<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage"
Language="c#"%>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form id="Form1" runat="server">
<mobile:PhoneCall runat="server"
AlternateFormat="Call {0} on {1}"
AlternateURL="http://www.northwindtraders.com"
phoneNumber="123-456-7890"
Text="Northwind Traders">
</mobile:PhoneCall>
</mobile:Form>











When the page loads, one of two events occurs, depending on the capabilities of the mobile phone. In the first instance, a call automatically initiates to the phone number 123-456-7890, although the phone might first prompt the user about whether he or she wants to make the call. The alternative event displays the phone number to the user, who can then initiate a call either by using a Use Number option or manually entering the phone number with the phone's keypad. Figure 5-4 illustrates both scenarios.


AdRotator Control


Current Internet marketing strategies require that advertisements rotate frequently to give the maximum number of people as many viewings as possible. But rotating advertisements is often a time-consuming, awkward practice. Microsoft addressed this issue in Active Server Pages (ASP) by supplying an AdRotator component. ASP.NET greatly improves upon this component; it's now much simpler to use.

The AdRotator control provides an advertisement rotation service that you can easily insert into a mobile Web Forms page. This mobile control enables you to provide graphical advertisements that match the graphics formats the target device supports. An XML configuration file references the source graphics files. The XML file must comply with a prespecified format. Table 5-3 shows the permissible elements, and Listing 5-4 offers an example of such an XML configuration file.




































Table 5-3: XML Configuration File Elements for AdRotator


Attribute


Description


Advertisements


The root element of the configuration file. Only one <Advertisements> element can exist in a file.


Ad


The child of the root element. This attribute contains information pertaining to each advertisement.


ImageUrl


The relative or absolute path to the image to be displayed.


MonoImageUrl


The relative or absolute path to the monochrome image to be displayed. Typically, this is a WBMP file for WML browsers.


NavigateUrl


The absolute or relative URL of the page that is displayed when the user presses the advertisement link.


AlternateText


The text that is displayed if the target device can't display the image.


Keyword


Represents the advertisement category. This attribute allows you to categorize advertisements—for example, as hardware or software.


Impressions


Determines how many times a given advertisement is displayed compared to the other advertisements in the configuration file.






Warning

The names of the XML elements in the advertisement configuration file are case sensitive. For example, <ImageUrl> is a valid XML element name, but <ImageURL> isn't.


Listing 5-4: Advertisements.xml






<?xml version="1.0"?>
<Advertisements>
<Ad>
<ImageUrl>ColorImage.gif</ImageUrl>
<MonoImageUrl>Northwind.wbmp</MonoImageUrl>
<NavigateUrl>http://northwindtraders.com</NavigateUrl>
<AlternateText>Buy this!</AlternateText>
<Keyword>Software</Keyword>
<Impressions>2</Impressions>
</Ad>
<Ad>
<!—-Another advertisement defined here -->
</Ad>
</Advertisements>











Syntax


You code the AdRotator control in server control syntax using the properties and values shown in the following listing. See Table 5-4 for descriptions of the purpose of the properties.

<mobile:AdRotator
runat="server"
id="id"
Font-Name="fontName"
Font-Size="{NotSet|Normal|Small|Large}"
Font-Bold="{NotSet|False|True}"
Font-Italic="{NotSet|False|True}"
ForeColor="foregroundColor"
BackColor="backgroundColor"
Alignment="{NotSet|Left|Center|Right}"
StyleReference="styleReference"
Visible="{True|False}"
Wrapping="{NotSet|Wrap|NoWrap}"
AdvertisementFile="relativeURL"
ImageKey="XML element"
KeywordFilter="keywordFilter"
NavigateUrlKey="XML element"
OnAdCreated="clickHandler">
<!--DeviceSpecific/Choice construct (optional)-->
</mobile:AdRotator>



























Table 5-4: Significant Properties and Events of the AdRotator Control


Property or Event


Type


Description


Advertisement-File


String


The absolute or relative URL to the XML advertisement configuration file. The XML file must reside within the same Web site as your application. We strongly recommend that you place the file within the same Web application. This property can specify an absolute path or a path relative to the location of the mobile page or user control that contains the AdRotator control.


ImageKey


String


The XML element name in the Advertisement file that contains the URL of the image to be displayed. The default value is "ImageUrl", which means that the <ImageUrl> element in the XML file contains the URL of the image. This property is often used within DeviceSpecific/Choice constructs so that a different XML element specifies the image to be used on certain client devices, as shown in Listing 5-5 in the following section.


KeywordFilter


String


The keyword used to filter the advertisement categories. KeywordFilter allows you to select categories of advertisements from the named configuration file to use in the application. For example, if you set the value of this property to software and the advertisement configuration file contains <Ad> elements for both software and hardware, only the software elements will be displayed.


NavigateUrlKey


String


The XML element name in the Advertisement file that contains the URL to which the user is transferred when he or she selects an advertisement. The default value is NavigateUrl, which means that <NavigateUrl> element in the XML file is used. This property is often used within DeviceSpecific/Choice constructs so that a different destination URL is used on certain client devices.


AdCreated (Event)


Event handler method


The runtime raises this event each time it selects an advertisement for display. The event handler has the signature Method(Object sender, System.Web.UI.WebControls.AdCreatedArgs e). The AdCreatedArgs object contains AdProperties, AlternateText, ImageUrl, and NavigateUrl properties that describe the advertisement to be displayed.


Properties


Table 4-1 and Table 4-2 for details of those properties and events that are inherited from MobileControl. The Type column describes the type of the property when setting or getting the property in code. Refer to the preceding "Syntax" section for valid values when setting the property in server control syntax.

Using the AdRotator control


Listings 5-5, 5-6, and 5-7 use the AdRotator control to display an advertisement to users.

Listing 5-5: Source for AdRotatorExample.aspx






<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage"
Language="c#" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form id="Form1" runat="server">
<mobile:AdRotator id="AdRotator1" runat="server"
AdvertisementFile="AdConfig.xml">
<DeviceSpecific>
<Choice Filter="isWML11"
ImageKey="WAPImageUrl"
NavigateUrlKey="WAPNavigateUrl"/>
</DeviceSpecific>
</mobile:AdRotator>
</mobile:Form>











Listing 5-6: Configuration file AdConfig.xml






<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>ad1.gif</ImageUrl>
<WAPImageUrl>ad1.wbmp</WAPImageUrl>
<NavigateUrl>http://www.microsoft.com/net</NavigateUrl>
<WAPNavigateUrl>http://news.wirelessdevnet.com/</WAPNavigateUrl>
<AlternateText>Info on .NET</AlternateText>
<Keyword>Complus</Keyword>
<Impressions>2</Impressions>
</Ad>
<Ad>
<ImageUrl>ad2.gif</ImageUrl>
<WAPImageUrl>ad2.wbmp</WAPImageUrl>
<NavigateUrl>http://msdn.microsoft.com</NavigateUrl>
<WAPNavigateUrl>http://news.wirelessdevnet.com/</WAPNavigateUrl>
<AlternateText>MSDN Developer Support</AlternateText>
<Keyword>Support</Keyword>
<Impressions>1</Impressions>
</Ad>
</Advertisements>











Listing 5-7: Web.config containing the isWML11 device filter required by this example






<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.web>


<deviceFilters>
<filter name="isWML11"
compare="preferredRenderingType"
argument="wml11" />
</deviceFilters>
</system.web>
</configuration>
















Note

If you use Microsoft Visual Studio .NET to build your application, you must add the XML advertisement configuration file and the graphics files to the current project. To add a file to an open project, go to the File menu and click Add Existing Item. In the Add Existing Item dialog box, select the file you want to add and click the Open button.


/ 145