ASP.net 2.0 property rewriting and templating of mobile development

asp.net| templates

This article focuses on customizing ASP.net web movers for specific hardware devices, and using templates to customize controls such as form and panel. This attribute is overridden by attributes to enable the ASP.net Web mover to specify the property values of its controls for a particular hardware based on the hardware capabilities of the mobile device. For example, an application might require a Label control to display longer text on some devices and shorter text on other devices. This requires that we provide a set of properties for each control that the application can override for each device. All ASP.net mobile controls have the default appearance and layout. For ASP.net mobile controls, you can change the default appearance of mobile controls by setting properties or using styles. You can also use templates to customize the appearance of some mobile controls. This chapter will also focus on templates and template sets, and how they are used.

　　 Customize the way

In the previous topics, we mentioned how to use device filters to customize a particular device. In addition, we can use templating technology and property rewrite features to enable you to customize your application so that the controls are rendered differently for specific device types. If you use any of these custom methods for a control in the. aspx page, you can use a mobile control syntax named Devicespecific/choice constructs. The Devicespecific/choice construct is typically a device-specific set of option templates and an option is specified within the control across multiple alternative content. For example, the following code is the declaration syntax for a label control that contains a Devicespecific/choice construct that identifies whether the current browser supports HTML.

<mobile:label id= "Label1" runat= "Server" text= "Default Text" >
<DeviceSpecific>
<choice filter= "isHTML32" text= "Text for selected devices" > </Choice>
</DeviceSpecific>
</mobile:Label>
Where the Filter property specifies a device filter whose name is IsHTML32, which is used to identify whether a mobile device has a built-in HTML browser. If you have an HTML browser built in, the text for selected device will be applied to the label control. On the contrary, no display is made. As shown in the preceding code, the <DeviceSpecific> </DeviceSpecific> typically contains one or more <Choice> elements, each containing a property that specifies how to compute the options based on the capabilities of the target device. The runtime calculates each option in turn and uses the first option that is successfully computed (this is very similar to the switch case statement in C #).

Before you begin to learn how to define a device filter, let us first understand some basic concepts, such as the specific meaning of attribute overrides and templating.

　　 Property Overrides

In general, the ASP.net Web mobile program We develop is not aimed at a specific device, but can be presented on almost all hardware devices by adapting to the different hardware characteristics of the mobile device.

But because of the different brands and models, there are inevitably some differences between these mobile devices. Examples include supported colors, screen sizes, input features, and the markup language used by browsers. As mentioned earlier, ASP. NET controls can be supported by almost all hardware devices because they themselves have adaptive functionality, and the property values set by the control are also associated with the ASP.net control applied to the specific application, and do not differ by the hardware device for different attribute values. However, in some cases you may discard the default rendering, using a custom rendering. A typical example is the display of characters, for example, we use a Label control for string display, and on some smaller screen devices, each line displays fewer characters, so we can set the control's Text property to "We use asp.net", and for some large-screen devices, We can set the Label control's Text property to "we use asp.net to build a full-featured mobile application," precisely because of the property rewrite feature, we can use the above method to build a different mobile device hardware features to make the best presentation asp.net Web Mobile applications.

　　 Templates

Mobile controls such as Form, Panel, List, and ObjectList are templated controls. Developers often use templates to change or enrich the appearance or content of an application. For example, if you specify and select a header or footer template for a form control, the markup that is contained in the template is added to the content of the form, rendered as a header or footer, respectively. Note that templates are different from styles, and templates define the content and controls to display. The template is rendered when the application renders the control to which the template is attached. While styles specify the appearance of content and controls, your application can use styles without using templates, and it can also apply styles to your defined mobile controls within a template. In addition to templates, ASP. NET mobile controls on this basis, a new model is extended and the concept of template set is introduced. A template set is a collection of templates. However, a single templated control might reference multiple template sets, and each template set has a different device-specific condition. The specific implementation of the template set will be detailed in the following chapters.

　　 Device Filter Detailed

With device filters, an application can customize the appearance of a control for a specific hardware device or device class. This customization is based on the capabilities of the hardware devices used to browse the application. For example, suppose a developer is developing an application that is primarily used to support a specific branded handheld device that supports bitmap (. bmp) images. On this device, the developer decides to display all the items in the list control with text and icons from the. bmp file at the same time. By using device filters, an application can detect whether it is being browsed by a user on a target handheld device. This causes your application to use a device-specific template that displays list items with both text and icons. This technology can customize applications for specific hardware devices. Expand This example further, assuming you also want to browse the application on any type of device that displays the. gif image. Your application can apply a device filter that detects when a device will be used on this class of devices. In that case, the program specifies that a. gif image (instead of a. bmp image) that uses the text and list item icons displays a template for the list item. This customizes the application for a class of devices.

Some of the other tasks that device filters can accomplish include:

Select a style based on the device type.

On devices that support the use of richer representations of rendering controls, we can make the most of the performance of the hardware, using some more detailed, concrete rendering.

Renders the control with a simpler representation on a device that has limited display capabilities.

The <Choice> element in the Devicespecific/choice construct relies on the capabilities of the mobile device. When you use a mobile device to request a ASP.net mobile page, first of all will include the mobile device model and the built-in browser and other information through the HTTP file header to the server side, when the server will be based on the HTTP file header transmission of this information to build a System.Web.Mobile.MobileCapa Bilities object to respond to client requests. Device filters work with some read-only properties of the MobileCapabilities object. A typical example is how device filters identify browsers that support HTML 3.2 markup languages, which is to detect whether the PreferredRenderingType attribute value of the MobileCapabilities object associated with the customer request is " Html32 "is a browser that supports the HTML 3.2 Markup Language.

Note that the properties of the MobileCapabilities object are related to the mobile device browsing the page. For example, when you use the Pocket Internet Explorer browser to request a page, the browser property of the MobileCapabilities object is set to "Pocket IE", The PreferredRenderingType property value is set to "Html32" and the ScreenPixelsWidth and ScreenPixelsHeight properties depend on the specific model of the mobile device, because the pocket PC, Smartphone and Windows CE. NET can use Pocket Internet Explorer browsers, but the resolution of these devices screens is different.

Because browsers used by different mobile devices are different, there are also differences in the properties of the corresponding MobileCapabilities objects. If you want to see the MobileCapabilities object for a particular browser, you can view Openwave, c:\windows\microsoft.net\framework\[version number]\config\browsers directory. Information from a wide range of browsers, such as Pocket Internet Explorer, Palm, and Nokia. The following is a snippet of code for the Openwave browser's corresponding file, which is routed to the server side via the HTTP file header when the browser is used to request the page, and constructs a MobileCapabilities object with similar property values.

<capabilities>
<capability name= "Browser" value= "phone.com"
<capability name= "CanInitiateVoiceCall" value= "true"/>
<capability name= "Cansendmail" value= "false"/>
<capability name= "DeviceID" value= "${deviceid}"/>
<capability name= "deviceversion" value= "${deviceversion}"/>
<capability name= "InputType" value= "Telephonekeypad"
<capability name= "IsMobileDevice" value= "true"/>
<capability name= "MajorVersion" value= "${browsermajorversion}"/>
<capability name= "MaximumRenderedPageSize" value= "1492"
<capability name= "minorversion" value= "${browserminorversion}"/>
<capability name= "NumberOfSoftkeys" value= "2"
<capability name= "OptimumPageWeight" value= "700"
<capability name= "PreferredImageMime" value= "Image/vnd.wap.wbmp"
<capability name= "PreferredRenderingMime" value= "TEXT/VND.WAP.WML"
<capability name= "PreferredRenderingType" value= "Wml11"
<capability name= "requiresadaptiveerrorreporting" value= "true"/>
<capability name= "RendersBreakBeforeWmlSelectAndInput" value= "true"/>
<capability name= "RendersWmlDoAcceptsInline" value= "false"/>
<capability name= "RendersWmlSelectsAsMenuCards" value= "true"/>
<capability name= "Requiresfullyqualifiedredirecturl" value= "true"/>
<capability name= "Requiresnoescapedposturl" value= "true"/>
<capability name= "requirespostredirectionhandling" value= "true"/>
<capability name= "SupportsRedirectWithCookie" value= "false"/>
<capability name= "Type"
Value= "Phone.com${browsermajorversion}"/>
<capability name= "Version"
Value= "${browsermajorversion}${browserminorversion}"/>
</capabilities>
Of course, you can also code the way to request the page browser information through the MobileCapabilities object Display page, the code is as follows:

<%@ Page inherits= "System.Web.UI.MobileControls.MobilePage"
Language= "C #"%>
<script language= "C #" runat= "Server"
public void Page_Load (Object sender, EventArgs e)
{
System.Web.Mobile.MobileCapabilities currentcapabilities;
MobileCapabilities currentcapabilities = (mobilecapabilities) request.browser;
Create a MobileCapabilities object to get information about the browser

if (currentcapabilities.preferredrenderingmime== "text/html")
{
Label2.Text = "You are using HTML-enabled mobile devices";
If you are a mobile device that supports HTML, display the text information above
}
else if (currentcapabilities.preferredrenderingmime = "TEXT/VND.WAP.WML")
{
Label2.Text = "You are using a mobile device that supports WML";
Display the text information above if it is a mobile device that supports WML
}
Label1.Text = "width of the screen (number of characters):" + currentcapabilities.screencharacterswidth;
Displays the number of characters that can be displayed for each row of the current mobile device
}
</script>
<mobile:form runat= "Server" Id=frmtemplate
<mobile:label id= "Label1" runat= "Server"/>
<mobile:label id= "Label2" runat= "Server"/>
</Mobile:Form>
Tip: In some cases, the MobileCapabilities object for a particular mobile device gets the value of the property that is not what you expect. For example, we often use the desktop IE to test programs directly during the development process, and you may think that the PreferredRenderingType property value is "Html40", which is actually "html32" because ASP.net mobile controls only support HTML 3.2, so the markup language sent to the desktop IE is still HTML 3.2.

　　Properties of MobileCapabilities

The MobileCapabilities class contains a number of properties that we can use to get information about the mobile device and its browser. You can view MSDN for specific details about the class, where we'll just list some of the common properties:

Property	Description
Browser	The type of browser. such as Pocket IE, Microsoft Mobile Explorer, I-mode, Nokia, Openwave, and Ericsson.
CanInitiateVoiceCall	Returns a true value when the device's browser can initiate a voice call
Cansendmail	Returns a true value if the device's browser supports the sending of messages
Hasbackbutton	Returns a true value if the browser has a dedicated "back" button
InputType	Returns the type of input supported by the browser, including VirtualKeyboard, Telephonekeypad, and keyboard equivalents
IsColor	If the device supports color display, it returns a true value.
Maximumsoftkeylabellength	Returns the maximum number of characters for text that can be displayed by a soft key label
MobileDeviceManufacturer	Returns the name of the mobile device manufacturer, if unknown, returns unknown
MobileDeviceModel	Get the model name of the mobile device (if known)
NumberOfSoftkeys	Returns the number of soft keys on a mobile device.
PreferredImageMime	Returns the MIME type of the image content type that the browser typically prefers. These values include Image/gif, Image/jpeg, Image/vnd.wap.wbmp, and Image/bmp
PreferredRenderingMime	Returns the MIME type of the content type that the browser typically prefers. These values include text/html and TEXT/VND.WAP.WML
PreferredRenderingType	Returns a string that indicates the markup language and version information used by the browser, usually Html32, Wml11, wml12, or Chtml10
ScreenBitDepth	Returns the display depth (in bits per pixel) of the screen
ScreenCharactersHeight	Returns the approximate height of the display (in character rows)
ScreenCharactersWidth	Returns the approximate width of the display (in characters)
ScreenPixelsHeight	Returns the approximate height (in pixels) of the display
ScreenPixelsWidth	Returns the approximate width of the display (in pixels)
SupportsIModeSymbols	Gets a value that indicates whether the browser supports I-mode symbols.
Supportsjphonesymbols	Gets a value that indicates whether the browser supports j-phone specific picture symbols.

We can use the browser property of the HttpRequest object to point to an instance of the MobileCapabilities object, and then use this instance to read the capabilities of the requesting browser and device. The following is a code fragment that tests a property of the MobileCapabilities object:

MobileCapabilities capabilities = (MobileCapabilities) request.browser;
if (capabilities. ScreenPixelsWidth > 120)
{
Code added for a large-screen mobile device
}
Else
{
Code added for mobile devices on a small screen
}
In the next section, you will describe how to define a device filter in the ASP.net mobile site program, as well as two different types of specific implementations of device filters.