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

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.

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.

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.

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>

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

    <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"/>