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

Extensible HTML (XHTML) represents the evolution of HTML, using HTML-like tags and syntax, but imposing the strict rules common to all XML languages. XHTML 1.0 is a W3C recommendation (see http://www.w3.org/TR/xhtml1) and implements an XML-compliant version of HTML 4.01.

XHTML Basic

XHTML Basic is a subset of XHTML 1.0, which defines a document type that is rich enough to be used for content authoring and precise document layout but can be used on different classes of device, such as desktop PCs, PDAs, and mobile handsets. It includes everything in XHTML 1.0 apart from those features that are suitable only for large-screen devices, such as frames. XHTML Basic is defined in the XHTML 1.0 recommendation.

XHTML Mobile Profile

The WAP Forum, which is the industry body responsible for defining WAP specifications, took the XHTML Basic specification and specialized it for use in mobile browsers by adding the following elements: <hr>, <b>, <i>, <big>, <small>, and <style>. XHTML-MP also permits the use of the Style attribute in all elements. XHTML-MP has been sanctioned by the W3C and is the markup language used by WAP 2.0 devices; it supercedes WML 1.0, which was the markup language used by WAP 1.0 devices.

XHTML-MP and WAP CSS

Unlike WML, which embeds style information in the application, XHTML-MP uses CSS to define presentation. The WAP Forum defined WAP CSS, which is a subset of CSS suitable for devices with small screens. (You can download the specification, called "WAP CSS Specification 1.0," from the WAP Forum Web site at http://www.wapforum.org.)

The big failing of WML is that it does not define rules for the visual display of elements on the page, which has led to interoperability problems between browsers from different suppliers. XHTML-MP and WAP CSS are a huge improvement in layout control and consistency, alleviating most interoperability problems.

Managing Cascading Style Sheets

When an XHTML-MP client accesses an ASP.NET mobile Web application, the runtime takes all the Style properties defined for the control and dynamically constructs a CSS style sheet that it sends to the device as a part of the response. By default, the mobile controls store dynamically-generated CSS style sheets in session state. Your application must not disable session state if you want to use dynamically generated CSS style sheets. Session state is disabled if you include EnableSessionState = False in the @ Page directive at the head of your .aspx file, or if you have <sessionStatemode="Off"...> in the application Web.config file.

You can get improved performance if you cache dynamic style sheets in the application cache. The application cache is shared by all instances of your Web application, so the style sheet is created only the very first time your application runs after IIS is started on the Web server; thereafter, the cached version is available. The version in the cache is also automatically invalidated if you change any style properties requiring the generation of a new CSS style sheet. To enable this, set the XhtmlCssStore element value to application in the Web.config file, as follows:

<appSettings>
<add key="XhtmlCssStore" value="application" />
</appSettings>

See Chapter 12 for more information about using the application cache.

Programming your own CSS Style Sheet

ASP.NET Mobile Controls supports clients with browsers that require XHTML-MP and CSS style sheets automatically, without your needing to carry out any additional programming effort. It reads the style properties that you have defined on the mobile controls and automatically generates the appropriate CSS style sheet to send to the client browser. All you need to do is ensure that you have installed Device Update 2 on your development computer and on your Web server, as previously explained.

If you don't want to use the dynamically generated style sheet and decide to create your own, ASP.NET Mobile Controls allows you to do this. To add a CSS style sheet to your Visual Studio .NET project, right-click on your project in Solution Explorer, click Add, then Add New Item, and then choose the Style Sheet template from the Add New Item window. When you edit the CSS style sheet, Visual Studio .NET displays the built-in CSS style sheet editor which can help you with this task. However, remember that the CSS style sheet editor is intended for building style sheets for desktop browsers, so do check the WAP CSS specification to ensure that you don't use features that are supported only on desktop browsers.

Programming CSS style sheets is too large a topic to cover in detail here. Visual Studio .NET includes good documentation on how to do this, and there are plenty of resources on the Web that can help. However, the following is a simple example of a CSS style sheet which sets the style attributes of a style named style1 to boldface, large size, and the color green:

.style1
{
font-weight: bold;
font-size: large;
color: green;
}

The correct name for a style in a CSS style sheet is a CSS Class; the example just shown defines a CSS class called style1.

CSS Custom Attributes

To use your own CSS style sheet, you must use custom attributes. You're used to using standard attributes, such as Font-Bold or ID, when programming server control syntax for the mobile controls. You use custom attributes in exactly the same way as standard attributes, except that custom attributes are not recognized as valid syntax by the ASP.NET page parser until you enable them. The way in which you enable custom attributes is described in the next section.

To support CSS style sheets, you can use the custom attributes described in Table 8-4 with any ASP.NET mobile control.

For example, the following simple style sheet, default.css, sets the style attributes of a CSS class named style1 to boldface, large size, and the color green.

.style1
{
font-weight: bold;
font-size: large;
color: green;
}

In server control syntax, you use the CssLocation custom attribute to specify the path to the CSS style sheet file and use the CssClass custom attribute to use a style in the style sheet on a control:

<mobile:form id="Form1" runat="server" csslocation="default.css">
<mobile:label id="Label1" runat="server">
Label with no style
</mobile:label>
<mobile:label id="Label2" runat="server" cssclass="style1">
Label using CSS style
</mobile:label>
</mobile:form>

Enabling Custom Attributes

To enable the use of custom attributes, you must set the AllowCustomAttributes property of the MobilePage to true. There are two ways of doing this:

You can set this property for your application in the Web.config file using the allowCustomAttributes attribute of the mobileControls tag, as shown in the following example:

<system.web>
<mobileControls allowCustomAttributes="true" />
</system.web>

Alternatively, you can set the AllowCustomAttributes property of the MobilePage in code, for example in the Page_Load event handler in the code behind module of your mobile Web Forms page:

private void Page_Load(object sender, System.EventArgs e)
{
this.AllowCustomAttributes = true; 
 
}

Be careful when custom attributes are enabled, however, because any misspellings of standard attributes will no longer be detected during parsing by the ASP.NET runtime. For example, the misspelled Alignmet attribute will be saved as a custom attribute of that name—the parser doesn't report it as an error.