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

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

فونت

اندازه قلم

+ - پیش فرض

حالت نمایش

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






Chapter 8: Programming Styles and Style Sheets

In this chapter, you'll learn how to use the style capabilities of the Microsoft ASP.NET Mobile Controls to make your application more visually appealing and to apply specific styles to specific devices. You'll use styles and StyleSheet controls to apply a named collection of style attributes to your applications. These features give you great flexibility in the way you present your mobile Web Forms controls on specific mobile devices.


Using Mobile Control Style Properties and the StyleSheet Control


Styles provide you with a convenient means for setting the display characteristics of mobile controls in such a way that you take full advantage of the display capabilities of individual client browsers. Every mobile control has a number of style properties that you can set to alter the foreground and background color, the font and font size, and the type of emphasis used. In general, HTML browsers support all these properties. The less capable Wireless Markup Language (WML) browsers apply these properties on a "best fit" basis.

For example, you can specify that page titles be displayed in a particular color, which will be used on devices that support color but ignored on monochrome devices. You also can define more complex display attributes—for instance, you can specify that a control renders text italicized, centered, and in the Verdana font. Figure 8-1 shows Label controls that use some of these style properties.


Figure 8-1: Use of style properties in Microsoft Pocket Internet Explorer

ASP.NET provides a number of ways you can apply style information to mobile controls. The simplest method is to set the style properties of the control itself. This technique allows you to quickly define an individual control's display characteristics within a mobile Web Forms page. However, if you set the style properties of several controls within a mobile Web Forms page, the code can become bloated and maintaining the page can be time-consuming. This is because you have to manually update the style attributes of every control, which is a very tedious task.

Using style sheets can help you overcome the limitations of working with individual style properties. Style sheets enable you to define one or more styles, where each style is a collection of style properties that you can then reuse. For example, in a style sheet you can specify that a named style such as h1 represents text that appears in boldface and italic. You can then set the StyleReference property of any control to the style h1, rather than set the control's individual properties. Thus, the control is rendered according to the properties that the style sheet defines. By altering the style sheet definitions, each control that uses a style defined in the style sheet will automatically update to reflect changes in appearance.





Note

In addition to defining your own styles, you can set the StyleReference property of a control to any of the three predefined styles provided by the ASP.NET mobile controls. These styles provide formatting for common usage scenarios, such as error messages. The three styles are title, which is displayed in a large bold font size; subcommand, which is displayed centered and in a small font size; and error, which is displayed in red and in a small font size.


You can further enhance your use of style properties by using external style sheets. You can define and store external style sheets in a separate file that you can reference from your mobile Web Forms page. This approach to style sheet deployment allows you to reuse the styles in multiple controls and multiple Web Forms pages.


Using Style Properties


Every mobile control has a number of style properties inherited from the MobileControl base class. Table 8-1 describes these style properties.







































Table 8-1: Style Properties Inherited from the MobileControl Class


Property


Allowed Values


Description


Alignment


NotSet|Left|Center|Right


The alignment of the control, specified using members of the System.Web.UI.MobileControls.Alignment enumeration.


BackColor


HTML color name or RGB value expressed in hexadecimal notation preceded by a number sign (#)


The color displayed behind the text of a control on devices that support color. You define the color either as an HTML color name or as an RGB value expressed in hexadecimal notation. Table 8-2 lists the standard HTML color names and RGB values.


Font


Read-only


The Font property of a mobile control exposes a System.Web.UI.WebControls.FontInfo object that encapsulates the style-related properties of the control. The FontInfo object has Name, Size, Bold, and Italic properties. In server control syntax, you set these properties using the Font-Property syntax—for example, Font-Name and Font-Bold.


Font.Name


String specifying the font name


The font used to render the text on devices that support multiple fonts. This property can be an exact font name, such as Arial Narrow, or it can be a font family name, such as Arial. Using a font family name allows the browser to determine which font to select from the given family. Therefore, this approach yields better font support on wireless clients. Font.Name is equivalent to a controls Font-Name attribute in server control syntax.


Font.Size


NotSet|Normal|Small|Large


The size of the text, specified using members of the System.Web.UI.MobileControls.FontSize enumeration. The default value is NotSet. Note that the size is relative and that not all devices support text of different sizes. Font.Size is equivalent to a controls Font-Size property in server control syntax.


Font.Bold


NotSet|True|False


Configured using members of the System.Web.UI.MobileControls.BooleanOption enumeration. When set to True, the text is boldface. The default value is NotSet. Font.Bold is equivalent to a controls Font-Bold attribute in server control syntax.


Font.Italic


NotSet|True|False


Configured using members of the System.Web.UI.MobileControls.BooleanOption enumeration. When set to True, the text is italicized. The default value is NotSet. Font.Italic is equivalent to a controls Font-Italic attribute in server control syntax.


ForeColor


HTML color name or RGB value expressed in hexadecimal notation preceded by a number sign (#)


The color of the text displayed on devices that support color. You define the color either as an HTML color name or as an RGB value expressed in hexadecimal notation. Table 8-2 lists the standard HTML color names and RGB values.


Wrapping


NotSet|Wrap|NoWrap


Controls wrapping of text using members of the System.Web.UI.MobileControls.Wrapping enumeration. When set to Wrap, the text wraps onto the next line if it exceeds the available display area. This property can be particularly useful on devices with small display areas, because some of these devices don't support side-scrolling. The default value is NotSet.


Unlike desktop HTML browsers, wireless devices that support color can have a very limited palette. Using RGB colors allows you to define approximately 16.5 million colors. If a browser doesn't support the color that you define, it will attempt to substitute that color with the closest color it does support. This substitution can yield some strange and unexpected results, which can often degrade an application's usability. When using color for generic wireless clients, we suggest you restrict your palette to the 16 main colors that HTML supports. Table 8-2 shows these 16 colors and their equivalent hexadecimal values.




























































Table 8-2: Standard HTML Colors


HTML Color


Hexadecimal Value


Aqua


#00FFFF


Black


#000000


Blue


#0000FF


Fuchsia


#FF00FF


Gray


#808080


Green


#008000


Lime


#00FF00


Maroon


#800000


Navy


#000080


Olive


#808000


Purple


#800080


Red


#FF0000


Silver


#C0C0C0


Teal


#008080


White


#FFFFFF


Yellow


#FFFF00


Inheriting Style Properties


Controls that reside within a container control (the Form or the Panel control) inherit the style properties of the container control. Similarly, when you set a style property on a list control (the SelectionList, List, or ObjectList), each display element in the list inherits the style property of the list.

The Form and Panel controls serve as containers for other mobile controls. Because these controls form part of the Web page, they have no visual appearance. For more information about these two controls, refer to Chapter 4. Although Form and Panel have no physical characteristics, they do support style properties. Once you set style properties on a container control, they will apply to all contained child controls, as Figure 8-2 illustrates.


Figure 8-2: Style property inheritance of the container controls

When run, Listing 8-1 demonstrates the inheritance of the container controls' style properties. This code sets the Form control's style properties, which then apply to all child controls. However, the second Panel control overrides these properties by declaring its own properties, which apply to all of its child controls.

Listing 8-1: Style property inheritance of the container controls from StyleInheritanceContainerExample.aspx






<%@ Page language="c#"
Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form id="Form1"
runat="server"
Font-Bold="True"
Font-Size="Large"
Alignment="Center">
<mobile:Label id="Label1" runat="server">
Form level defines properties
</mobile:Label>
<mobile:Label id="Label2" runat="server">****</mobile:Label>
<mobile:Panel id="Panel1" runat="server">
<mobile:Label id="Label4" runat="server">
Panel 1 inherits form properties
</mobile:Label>
<mobile:Label id="Label5" runat="server">****</mobile:Label>
</mobile:Panel>
<mobile:Panel id="Panel2"
runat="server"
Font-Bold="False"
Font-Size="Normal"
Font-Italic="True">
<mobile:Label id="Label6" runat="server" Alignment="Right">
Panel 2 overrides form properties
</mobile:Label>
</mobile:Panel>
</mobile:Form>











The same rules of style property inheritance that we showed for the container controls apply to the list controls. For example, Listing 8-2 consists of a form with two lists—a list of fruit and a list of vegetables. The code sets the style properties for the Form control and all the list controls. Thus, all the items in the list inherit these properties. The list controls set the font size to differentiate among the lists. These font sizes then apply to each item in each list.

Listing 8-2: StyleInheritanceListExample.aspx—style property inheritance of the list controls






<%@ Page language="c#"
Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form id="Form1"
runat="server"
Alignment="Center"
Font-Italic="True">
<mobile:List id="List1" runat="server" Font-Size="Small">
<Item Value="apples" Text="apples"></Item>
<Item Value="oranges" Text="oranges"></Item>
<Item Value="bananas" Text="bananas"></Item>
</mobile:List>
<mobile:List id="List2" runat="server" Font-Size="Large">
<Item Value="cabbage" Text="cabbage"></Item>
<Item Value="zucchini" Text="lettuce"></Item>
<Item Value="tomatoes" Text="tomatoes"></Item>
</mobile:List>
</mobile:Form>











Figure 8-3 shows how the output of this application appears when accessed from the Pocket Internet Explorer HTML browser and from the Nokia simulator accessing WML content.


Figure 8-3: Output of Listing 8-2


Using the StyleSheet Control


The example we've just looked at set individual style properties of mobile controls. Instead of setting style properties individually, you can define a collection of style properties in a named style, which you store in a style sheet. Style sheets give you a reusable, efficient way to define style properties. Mobile controls can simply use these styles by referring to the name of a style in a style sheet.

You can define a style sheet in an .aspx file within <mobile:StyleSheet>...</mobile:StyleSheet> tags. Allowing any control within that mobile Web Forms page to use the styles defined in the style sheet. Alternatively, you can store the style sheet in a separate .ascx file, allowing controls in any mobile Web Forms page to use it. You'll learn how to do this in the section "Defining Templates Within Style Sheets" in Chapter 9 for more information.

Using the Default Style Sheet


As mentioned, the ASP.NET mobile controls supply a default style sheet that provides you with three predefined styles: error, subcommand, and title.

To reference a predefined style or any style in a style sheet that you create yourself, you simply assign the name of the style to the StyleReference property of a control. Listing 8-3 shows three labels, each of which references one of the predefined styles.

Listing 8-3: PredefinedStylesExample.aspx—using predefined styles






<%@ Page language="c#"
Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form id="Form1" runat="server">
<mobile:Label id="Label1" runat="server" StyleReference="error">
Error
</mobile:Label>
<mobile:Label id="Label2" runat="server"
StyleReference="subcommand">Subcommand</mobile:Label>
<mobile:Label id="Label3" runat="server" StyleReference="title">
Title
</mobile:Label>
</mobile:Form>











Figure 8-4 shows the output this code yields.


Figure 8-4: Output from Listing 8-3

Creating a Style Sheet


You construct a style sheet by using individual <Style> elements that define each named style and its properties within a StyleSheet control. Here's the general syntax of a style sheet:

<mobile:StyleSheet runat="server">
<Style Name="Header" Font-Size="Large" Alignment="Center"/>
<Style Name="SubHead" Font-Size="Normal" Alignment="Left"/>
</StyleSheet>

You can include only one style sheet in each .aspx file, and you must place it within the page container itself—you can't place a StyleSheet control in any other mobile control, for example inside a Form control.

The StyleSheet control inherits from the System.Web.UI.MobileControls.MobileControl class, and so inherits all of the properties of MobileControl. This implies that you can set style attributes for the StyleSheet control itself. However, the runtime completely ignores any style attributes that you set for the StyleSheet control—for example, <mobile:Stylesheet Font-Bold="True"/>. Attributes of the StyleSheet control are not inherited by any of the control's child elements either. Here's the server control syntax for the StyleSheet control:

<mobile:Stylesheet
runat="server"
id="id"
ReferencePath="externalReferencePath">
<!-- Style definitions here -->
<Style name="style-name">


</Style>
</mobile:Stylesheet>


You'll use the ReferencePath attribute when working with external style sheets. (You'll learn more about external style sheets later in this section.)

The properties of the <Style> element that you use to define individual styles follow:

<Style
Name="uniqueStyleName"
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"
Wrapping={NotSet|Wrap|NoWrap}>
<!-- Optional Device-Specific choices here -->
<DeviceSpecific>
<Choice Filter="deviceFilterName">


</Choice>
<Choice> <!-- This is the default choice -->


</Choice>
</DeviceSpecific>
</Style>


The Name attribute represents a unique name that mobile controls use to reference a style. This element also has a StyleReference attribute, which might not seem sensible at first. However, <Style> elements can inherit style attributes from other styles and then extend or override these attributes. For example, the following code shows two styles, one of which inherits from the other. When the code runs, h2 inherits the attributes of h1 but overrides the Font-Size attribute.

<StyleSheet runat="Server">
<Style name="h1" Font-Size="Large" Alignment="Center"/>
<Style name="h2" StyleReference="h1" Font-Size="Normal"/>
</StyleSheet>





Tip

When naming styles, use names that relate to the function of a particular style rather than its appearance. For example, if you create a style to represent a page title, you might name it title or bigBoldCenter. If you use the latter name, as soon as one of the style's properties changes, the name becomes meaningless. But if you use the former name, it will continue to describe the function of the style.


Listing 8-4 presents a more detailed example of creating and consuming style sheets. The style sheet in the code defines three styles. Two of these, BodyText and Head, are unique styles. However, the SubHead style inherits the properties of the Head style and then overrides some of them.

Listing 8-4: Main form from CreatingConsumingStyleSheetsExample.aspx






<%@ Page language="c#"
Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form id="Form1" runat="server">
<mobile:Label id="Label1" runat="server" StyleReference="Head">
Using Styles
</mobile:Label>
<mobile:Label id="Label2" runat="server" StyleReference="SubHead">
Inheritance
</mobile:Label>
<mobile:TextView id="TextView1"
runat="server"
StyleReference="BodyText">
This text uses the BodyText style. The subheading uses the
SubHead style, which inherits properties from the Head
style.
</mobile:TextView>
</mobile:Form>
<mobile:StyleSheet id="StyleSheet1" runat="server">
<Style Name="Head"
Font-Size="Large" Font-Bold="True" Alignment="Center" />
<Style Name="SubHead"
StyleReference="Head" Font-Size="Normal" Alignment="Left" />
<Style Name="BodyText" Font-Italic="True" />
</mobile:StyleSheet>











Figure 8-5 shows how the output of this code will look in a browser.


Figure 8-5: Output of Listing 8-4 shown in an HTML browser

Applying Device-Specific Styles


On many occasions, you'll want to apply different styles to controls that are relevant only when your application runs on specific client device. In fact, if you don't use different styles on different devices, your applications will appear dull and uninspiring. Imagine how unsatisfying output written to suit a WML browser would look on a desktop HTML browser!

The simplest way to define styles for richer clients is to take full advantage of the style attributes that the controls and <Style> elements offer. For example, if you set the background color of a control to red, the runtime won't generate markup requesting that color for devices that don't support color.

Unfortunately, this solution works only in simple scenarios. Consider the use of font sizes: Many WML browsers do support different font sizes. However, with limited screen size, using the larger fonts is often undesirable. In contrast, HTML-based handhelds and i-mode mobile phones generally have larger screen sizes, so using larger fonts is quite acceptable. In such instances, you can't use the simplistic approach to delivering client-specific styles we just outlined. You need an alternative method of applying styles.

Styles used in conjunction with DeviceSpecific/Choice filters allow you to specify different styles for particular browsers or types of browsers. We'll explore DeviceSpecific/Choice filters in detail in the section "Device-Specific Customization with Property Overrides" in Chapter 9. But for now, here's a quick summary: DeviceSpecific/Choice filters allow you to test, or query, the capabilities of a target device. You can then set properties to different values if the test is passed. Listing 8-5 tests whether the client is a WML browser. If it is, the Header style is rendered with the Font-Size property set to "Normal". In all other circumstances, the Header style is rendered using the default properties of the style, in this case using Font-Size="Large".

Listing 8-5: Using styles with choice filters in StylesChoiceFiltersExample.aspx






<%@ Page language="c#"
Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form id="Form1" runat="server">
<mobile:Label id="Label1" runat="server" StyleReference="Header">
Device Specific
</mobile:Label>
<mobile:TextView id="TextView1" runat="server">
The heading is shown normal sized on WML browsers and large on
all other browsers.
</mobile:TextView>
</mobile:Form>
<mobile:StyleSheet id="StyleSheet1" runat="server">
<Style Name="Header"
Font-Size="Large"
Font-Bold="True"
Alignment="Center">
<DeviceSpecific>
<Choice Filter="isWML11" Font-Size="Normal"></Choice>
</DeviceSpecific>
</Style>
</mobile:StyleSheet>











Figure 8-6 shows the output of Listing 8-5 on the two types of browser.


Figure 8-6: Output of Listing 8-5 shown in an HTML browser and a Nokia WML browser





Tip

In Listing 8-5, the style named "Header" defines the default style using attributes of the <Style> tag: Font-Size= "Large", Font-Bold="True", and Alignment= "Center". If the choice filter "isWML11" is true, the value of Font-Size is overridden and set to "Normal".

An alternative way of defining the default properties is to use a default choice statement; that is one without a Filter attribute. The following code is exactly equivalent to the Style definition in Listing 8-5:


    <Style Name="Header"
<DeviceSpecific>
<Choice Filter="isWML11" Font-Size="Normal"></Choice>
<Choice Font-Size="Large" Font-Bold="True"
Alignment="Center"></Choice> <!-- Default -->
</DeviceSpecific>
</Style>

You can further enhance styles by using DeviceSpecific/Choice filters with template sets. Template sets gather a collection of styles, each targeting a different device, into a single named style. Using template sets is a relatively complex topic that you'll learn more about in Chapter 9.


Attaching an External Style Sheet


When you want to apply a set of styles to multiple mobile Web Forms pages, it's inappropriate to include the StyleSheet control within a page. If you want to update the style sheet, you need to manually update it in every page that you're targeting. ASP.NET provides a solution to this problem: it allows you to externalize your style sheets by saving them in a file separate from the mobile Web Forms page. Any of your mobile Web Forms pages can then use this external style sheet simply by referencing it.

Creating an external style sheetTo create an external style sheet, you must first create a user control. Within that control, you can code a single StyleSheet control with as many <Style> elements as you require. User controls provide a simple means to encapsulate controls and their logic in a single file. (You'll find more information about this topic in Chapter 20.) For the purpose of creating an external style sheet, a user control is simply a file with an .ascx extension, the @ Register directive (common to all mobile Web Forms pages), an @ Control declaration instead of the normal @ Page, and a single StyleSheet control. Listing 8-6 shows an example of an external style sheet.

Listing 8-6: ExternalStyle1.ascx—user control acting as an external style sheet






<%@ Control language="c#"
Inherits="System.Web.UI.MobileControls.MobileUserControl" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:StyleSheet id="StyleSheet1" runat="server">
<Style Font-Bold="True" Font-Italic="True" Name="Heading"/>
</mobile:StyleSheet>











Consuming an external style sheetTo use an external style sheet, you must insert a StyleSheet control into your mobile Web Forms page and set its Reference property to the location of the external style sheet. You can then reference the styles that the style sheet contains as though they were within the mobile Web Forms page. Listing 8-7 shows a mobile Web Forms page that references the external style sheet shown in Listing 8-6, and sets the style of a label to a style that the external style sheet defines.

Listing 8-7: Using an external style sheet in ExternalStyleSheetExample.aspx






<%@ Page language="c#"
Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:Form id="Form1" runat="server">
<mobile:Label id="Label1" runat="server" StyleReference="Heading">
Label
</mobile:Label>
</mobile:Form>
<mobile:StyleSheet id="StyleSheet1"
runat="server"
ReferencePath="ExternalStyle1.ascx"/>















Note

If you're using Microsoft Visual Studio .NET, you'll find that external style sheets behave differently than style sheets embedded directly into a mobile Web Forms page in two respects. First, styles specified in an external style sheet aren't rendered during design time, meaning that controls referencing them won't appear formatted in Design view. Second, the styles will not appear on your controls in the drop-down StyleReference list provided in the Properties window.


/ 145