This article will focus on how to customize ASP.NET Web mobile programs for specific hardware devices, and use templates to customize controls such as Form and Panel. Overriding this feature through properties enables ASP.NET Web mobile programs to specify property values for their controls for specific 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 others. This requires us to provide each control with a set of properties that the application can override for each device. All ASP.NET mobile controls have a 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 to use them.
custom way
In the previous topics, we mentioned how to use device filters to customize for specific devices. In addition to this, we can use templating techniques and property overriding to allow you to customize your application to render controls differently for specific device types. If you use any of the above custom methods for a control in an .aspx page, you can use a mobile control syntax called DeviceSpecific/Choice construct. The DeviceSpecific/Choice construct typically specifies an option for a device-specific option template set and among multiple options within a control. For example, the following code is the declaration syntax for a Label control that includes a DeviceSpecific/Choice construct to identify 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＞
The Filter attribute specifies a device filter whose name is isHTML32, which is used to identify whether a mobile device has a built-in HTML browser. If an HTML browser is built in, the text "Text for selected device" will be applied to the Label control. On the contrary, nothing is displayed. As shown in the code above, a <DeviceSpecific></DeviceSpecific> typically contains one or more <Choice> elements, each of which contains attributes that specify how options are calculated based on the capabilities of the target device. The runtime evaluates each option in turn, and uses the first option that is successfully evaluated (this is very similar to a switch case statement in C#).
Before we start learning how to define a device filter, let's first understand some basic concepts, such as the specific meaning of property overriding and templating.
property override
Under normal circumstances, the ASP.NET Web mobile program we develop is not for a specific device, but can be adjusted according to the different hardware characteristics of the mobile device, so that it can perform well on almost all hardware devices. render.
But because of the different brands and models, there are inevitably some differences between these mobile devices. Examples include supported colors, screen sizes, input capabilities, and the markup language used by the browser. As mentioned earlier, ASP.NET controls can be supported by almost all hardware devices, because they have adaptive adjustment functions themselves, and the property values set by the controls will also be applied to specific applications along with the ASP.NET controls. , the attribute value will not be different due to different hardware devices. However, in some cases you may forgo the default rendering and use a custom rendering. A typical example is the display of characters. For example, we use the Label control to display strings. On some devices with smaller screens, the number of characters displayed in each line is also less, so we can set the Text property of the control. For "We use ASP.NET", and for some large screen devices, we can set the Text property of the Label control to "We use ASP.NET to build a fully functional mobile application", precisely because of the property override feature , we can use the above method to build an ASP.NET web mobile application that best renders for the hardware characteristics of different mobile devices.
template
Mobile controls such as Form, Panel, List, and ObjectList are all templated controls. Developers often use templates to alter or enrich the appearance or content of an application. For example, if a header or footer template is specified and selected for the Form control, the markup contained in that template will be added to the form content to render as the header or footer, respectively. Note that a template is different from a style, a template defines 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 mobile controls that you define within a template. In addition to templates, ASP.NET mobile controls extend a new model on this basis and introduce the concept of template sets. A template set is a collection of templates. However, a single templated control may reference multiple template sets, each with different device-specific conditions. The specific implementation of the template set will be introduced in the subsequent chapters.
Device Filter Details
Using device filters, applications can customize the appearance of controls for specific hardware devices or device categories. This customization is based on the capabilities of the hardware device used to browse the application. For example, suppose a developer is developing an application primarily for a particular brand of handheld device that supports bitmap (.bmp) images. On this device, the developer decided to display all items in the List control with both text and icons from the .bmp file. By using device filters, an application can detect if it is being browsed by the user on the target handheld device. This causes the 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. Extending this example further, let's say you also want the application to be viewable on any type of device that displays .gif images. Your application can apply device filters that detect when programs are used on such devices. In this case, the program specifies a template for displaying list items using text and a .gif image of the list item icon (instead of a .bmp image). This customizes the application for a class of devices.
Some other tasks that device filters can accomplish include:
■ Choose a style based on the device type.
■ On devices that support the use of richer presentation forms to present controls, we can try our best to use the performance of the hardware device and use some more detailed and specific presentation methods.
■ On devices with limited display capabilities, the controls are rendered using a simpler representation.
The <Choice> element in the DeviceSpecific/Choice construct depends on the capabilities of the mobile device. When you use a mobile device to request an ASP.NET mobile page, the information including the mobile device model and built-in browser will first be sent to the server through the HTTP header. This information builds a System.Web.Mobile.MobileCapabilities object in response to client requests. The device filter works by using some read-only properties of the MobileCapabilities object. A typical example is how device filters identify browsers that support the HTML 3.2 markup language. This identification is achieved by checking whether the value of the PreferredRenderingType property of the MobileCapabilities object associated with the client request is "html32", and if so, it supports HTML 3.2 markup. language browser.
Note that each property of the MobileCapabilities object is related to the mobile device that browses the page. For example, when a page is requested using the Pocket Internet Explorer browser, the Browser property of the MobileCapabilities object will be set to "Pocket IE", the PreferredRenderingType property value will be set to "html32", and the ScreenPixelsWidth and ScreenPixelsHeight properties will depend on the specific model of the mobile device because Pocket PC, Smartphone, and Windows CE .NET can all use the Pocket Internet Explorer browser, but these devices have different screen resolutions.
Because the browsers used by different mobile devices are different, the properties of the corresponding MobileCapabilities object are also different. If you want to view the MobileCapabilities object for a specific browser, you can view openwave, Pocket Internet Explorer, palm, nokia and many others in the C:\WINDOWS\Microsoft.NET\Framework\[version number]\CONFIG\Browsers directory Information. The following is a code snippet of the corresponding file of the openwave browser. When the page is requested using the browser, the information is transmitted to the server side through the HTTP file header, and a MobileCapabilities object with similar property values is constructed.
＜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＞
<%@ 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 browser information
if(currentCapabilities.PreferredRenderingMIME=="text/html")
{
Label2.Text = "You are using a mobile device that supports HTML";
//If it is a mobile device that supports HTML, display the above text information
}
else if( currentCapabilities.PreferredRenderingMIME == "text/vnd.wap.wml")
{
Label2.Text = "You are using a mobile device that supports WML";
//If it is a mobile device that supports WML, display the above text information
}
Label1 .Text = "The width of the screen (number of characters): " + currentCapabilities.ScreenCharactersWidth;
//Display the number of characters that can be displayed in each line 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 property values that are not what you expect. For example, we often use desktop IE directly to test programs during development. You may think that the value of the PreferredRenderingType property is "html40", but in fact this value is "html32", this is because ASP.NET mobile controls only support HTML 3.2, so the markup language sent to desktop IE is still HTML 3.2. Of course, you can also display the browser information of the requested page on the page through the MobileCapabilities object by means of code, the code is as follows: Properties of MobileCapabilities The
MobileCapabilities class contains a large number of properties, we can use these properties to obtain mobile devices and their browsers related information. For the specific details of this class, you can check MSDN, here we only list some commonly used properties:
| Attributes | illustrate |
| Browser | The type of browser. Such as Pocket IE, Microsoft Mobile Explorer, i-mode, Nokia, Openwave and Ericsson. |
| CanInitiateVoiceCall | Returns true if the device's browser can initiate voice calls |
| CanSendMail | Returns true if the device's browser supports sending emails |
| HasBackButton | Returns true if the browser has a dedicated "back" button |
| InputType | Returns the input types supported by the browser, including values such as virtualKeyboard, telephoneKeypad, and keyboard |
| IsColor | Whether the device supports color display, if yes, return true value. |
| MaximumSoftkeyLabelLength | Returns the maximum number of characters of text that a softkey label can display |
| MobileDeviceManufacturer | Returns the name of the mobile device manufacturer, or unknown if unknown |
| MobileDeviceModel | Get the model name of the mobile device (if known) |
| NumberOfSoftkeys | Returns the number of softkeys on the mobile device. |
| PreferredImageMime | Returns the MIME type of the image content type that is usually preferred by the browser. These values include image/gif, image/jpeg, image/vnd.wap.wbmp, and image/bmp |
| PreferredRenderingMime | Returns the MIME type of the content type normally preferred by the browser. These values include text/html and text/vnd.wap.wml |
| PreferredRenderingType | Returns a string indicating the markup language and version information used by the browser, usually html32, wml11, wml12, or chtml10 |
| ScreenBitDepth | Returns the display depth of the screen (in bits per pixel) |
| 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 of the display in pixels |
| ScreenPixelsWidth | Returns the approximate width of the display in pixels |
| SupportsIModeSymbols | Gets a value indicating whether the browser supports i-mode symbols. |
| SupportsJPhoneSymbols | Gets a value indicating 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, which we can then use to read the capabilities of the requested browser and device. The following is a code snippet that tests a property of the MobileCapabilities object:
MobileCapabilities capabilities = (MobileCapabilities)Request.Browser;
if (capabilities.ScreenPixelsWidth > 120)
{
// code added for mobile devices with large screens
}
else
{
// for small code added for mobile devices of the screen
}
In the next section, we will describe how to define a device filter in an ASP.NET mobile site program, as well as the specific implementations of the two different types of device filters.