Application of device filter for ASP.net 2.0 mobile development

ASP.net in the previous article I used to introduce devicespecific/choice constructs and device filters, when we were still in asp.net Define device filters and Devicespecific/choice constructs by manually encoding in the HTML view of the mobile page or in the Web.config file of the site program. However, if you are using Visual Studio 2005, we can directly use a convenient, visual way to define Devicespecific/choice constructs and device filters, avoiding the complicated implementation process of manual encoding in the program, And because developers don't have direct code typing, it's not easy to get code spelling and grammatical errors.

　　 tip: Include a control named DeviceSpecific in the Mobile Web Forms tab of the Visual Studio 2005 Toolbox, and you can drag and drop the control into a form control or Panel control. Then when you switch the page to HTML view, you'll see that the corresponding form control or Panel control will contain the Devicespecific/choice construction syntax. One thing to note is that you can't take it for granted that dragging a DeviceSpecific control into other ASP.net mobile controls also implements the Devicespecific/choice constructs described above. A devicespecific/choice construct is automatically added to these controls only if you define a property override or define a templated option for the list control. The DeviceSpecific control is only available for defining templated options in a visual way in form controls and panel controls.

　　 Creating and applying device filters

After you select a control on the ASP.net mobile page, you see the (AppliedDeviceFilters) item in the device-specific column of the Properties window, and we can click the ellipsis button on the right margin, and the Applied Device Filter dialog box pops up. The primary purpose of this dialog box is to apply device filters to controls in this state after editing the properties of the control, but it also allows you to define new device filters. And these well-defined device filters can be applied to the entire site program and all of the controls, ASP. NET automatically stores these newly defined device filters in the site program's Web.config file.

In the "Available device Filters" Drop-down list in the figure above, enumerates all the available device filters for the control that is currently editing the property. The lower list in the dialog box shows the device filters that the control that is currently editing the property is applied to. If you want to create a new device filter, you can click the Edit button on the dialog box. The Device filter editor pops up, as shown in the figure:

In this dialog box, you will be able to see the device filters that already exist in the current site program in the device filter list on the right. When you select a device filter of type equality comparison in the device filter list above, the properties for that device filter appear in the diff Drop-down list box and in the Parameters text box.)

To add a device filter that adds an equality comparison, you can do this by following these steps:

1. Click the New Device Filter button on the Device Filter Editor dialog box.

2. Type an appropriate name for this new device filter.

3. The type of the device filter selects equality comparisons.

4. In the Compare Drop-down list box, type or select a property in the MobileCapabilities class that you want to compare to the value in the Parameters text box in the dialog box.

5. Enter the parameter value in the Parameters text box, and return a "true" value when the corresponding property value of a MobileCapabilities object is equal to the parameter.

　　 tip: Just take the picture above is a device filter named IsWML11, where we select the property to compare is PreferredRenderingType, That is, if the device filter's PreferredRenderingType property corresponds to a value equal to the value "WML11" of the following argument text box, the device filter returns a True value.

The process of creating a device filter of type "Evaluator Delegates" is similar to the creation process of the equality comparison device filter above. The only difference is that the device filter that identifies the delegate does not type or select the content in the Compare Drop-down list box and the Parameters text box, and instead you need to type The text box enters the class name that contains the custom delegate and. DLL assembly name, and the actual delegate method name is entered in the Method text box.

　　

In the last article, "Device filter definition and implementation" describes a method named Uselargegif delegate, if you need to use this method to identify a picture is not a large GIF picture, you need to type in the text box "Myevaluators.customevals, Myevaluators ", and enter" Uselargegif "at" Method ". Once you have defined all the device filters for your site program, you can apply them to any control that you want to implement property overrides. All of your newly defined device filters will appear in the Device Filter editor Drop-down list.

　　To apply a device filter to a control

In the Applied Device Filter dialog box, select the device filter that will be applied to a control, and click the Add to List button to add the available device filter to the Applied Device filter list box. You can then click the up and down arrows on the dialog box to adjust the location of the device filters. A device filter named (default) is the default selection, and all it returns is always a true value. Therefore, the order of the (Default) device filters must be located below all device filters (that is, the bottom position of the Applied Device Filters list box). The specific scenario is shown in the following illustration:

　　

The figure shows the application of four device filters for a label control, and you should know that in this case, the Devicespecific/choice construct code that is automatically generated by Visual Studio 2005 is as follows:

That is, the order of the four device filters is the corresponding order of the <Choice> elements in the Devicespecific/choice construct.

　　 attribute rewrite detail

<DeviceSpecific> and <Choice> elements

All ASP.net mobile server controls that inherit from System.Web.UI.MobileControl can contain a <DeviceSpecific> element in their code declarations. As I mentioned earlier, an <DeviceSpecific> element can contain any <Choice> element. In general, the syntax for the <Choice> element is as follows:

Filter= "FilterName" Xmlns= "Urltoschema" >

The following table is the <Choice> commonly used properties and child elements.

Attributes/child elements	Description
Filter	Against the syntax of the preceding element, filtername must be the name of a device filter that you can define at the site Web.config file node. Note that the name of the device filter is case sensitive, isHTML32 and ishtml32 are two different device filters. If you do not define the Filter property in the element, the element will be the default selection, and the arrange position in the device filter list is final.
Property Overrides	You can set a value for the property of a control in the Devicespecific/choice construct. That is, you can set different property values for different device filters in each element for the control. For example, we set up four device filters in the previous example, one of which is the default, if you set the Text property of a different label control for each device filter in the element. When a device filter returns a value of True, the text value of the Texe property in the other device filter is overridden in the device filter.
xmlns	This property is typically specified without a developer, and Visual Studio 2005 automatically detects what markup language is used in the template, and then Visual Studio 2005 inserts the attribute into the appropriate element. So the site does not need to directly manipulate the attribute, nor do you need to assign a value to the attribute.
Template elements	Use this property to specify some templated controls-such as form, Panel, list, and ObjectList controls-that allow the page to integrate your defined content into these controls as it renders.

You can use a <Choice> element in the <DeviceSpecific> element that does not specify the Filter property, which is the default <Choice> element that I mentioned above. You can also not define such a default <Choice> element, but once you define it, be sure to place the default element at the very end of the entire list of <Choice> elements. This is because asp.net identifies the <Choice> element in order, and when a particular device requests a mobile Web page, the first <Choice> element that returns True is applied. The default <Choice> element always returns a true value, so placing it in the front of the entire list of elements will cause other <Choice> elements to fail.

The list lists different ways to use the <Choice> element, which is used in this example for property overrides and Definitions <HeaderTemplate> and <FooterTemplate> (these are common templates in form controls).

<%@ Page inherits= "System.Web.UI.MobileControls.MobilePage" Language= "C #"%> <%@ Register tagprefix= "mobile" Namespace= "System.Web.UI.MobileControls" Assembly= "System.Web.Mobile"%> <mobile:form runat= "Server" > <DeviceSpecific> <choice filter= "IsHTML32" <!-when the device supports HTML 3.2 markup languages, use two templates to build the page and use the picture in the header template--! <HeaderTemplate> <table width= "100%" height= "100%" cellspacing= "1" <tr> <td bgcolor= "#003366" > </td> </tr> <tr> <td bgcolor= "#cccccc" valign= "Top" height= "100%" </HeaderTemplate> <FooterTemplate> </td> </tr> <tr> <td bgcolor= "#003366" height= "4" > </td> </tr> </table> </FooterTemplate> </Choice> <Choice> <!-the default element. When the device does not support HTML 3.2 Markup Language, only the header template Use the sports extra! text--! <HeaderTemplate> <mobile:label runat= "Server" stylereference= "title" text= "SPORTS extra!"/> </HeaderTemplate> </Choice> </DeviceSpecific> <mobile:label runat= "Server" font-size= "Small" font-name= "Arial" Welcome to our mobile Sports Extra Web site. Check here for up-to-the minute Sports news as it happens! <DeviceSpecific> <choice filter= "isWML11" text= "Welcome to LIVE results!" /> <!-the Text property value of the label control is "Welcome to" when the device supports the WML 1.1 markup language. LIVE results! " --! > > <choice filter= "IsCHTML10" Forecolor= "Red" Text= "Welcome to LIVE results!" > <!-when the device supports the cHTML 1.0 markup Language, the value of the Label control's Text property is still "Welcome to LIVE results!", but the color of the font is red--! </Choice> </DeviceSpecific> </mobile:Label> </mobile:Form>

The following is the device filter defined in the Web.config file for the site program:

Compare= "PreferredRenderingType" argument= "Html32" Compare= "PreferredRenderingType" argument= "Wml11" Compare= "PreferredRenderingType" argument= "Chtml10"

The form control contains a <DeviceSpecific> element that, if the client device supports HTML 3.2, inserts a HeaderTemplate (header template) and a footertemplate (footer template) in the form control. and the HTML tags in the two templates combine to make the page form a table layout. In this table we use the HTML tag to populate a picture with the first row of the table.

The Filter property does not exist for the second <Choice> element that is constructed in the Devicespecific/choice in the form control, so it is the default <Choice> element. If the device filter returns a value of FALSE for the current request, the program renders the page using a <HeaderTemplate> that contains only one label control (ISHTML32).

In addition, the form control contains a label control constructed using Devicespecific/choice, and the primary purpose of using Devicespecific/choice constructs is to attribute overrides. The text value in the default state of the label control is a long string "Welcome to our mobile Sports Extra Web site." Check here for up-to-the minute Sports News as it happens!. However, in some small-screen devices, such as devices that support the WML 1.1,chtml 1.0 Markup Language (that is, returns true for ISWML11, isCHTML10 device filters), the above string will be shortened to the Welcome to LIVE results !"。 Both the text and ForeColor properties are overridden on i-mode devices (that is, devices that support cHTML 1.0).

The following two diagrams are the actual display effects of the above programs in the Pocket Internet Explorer and the Openwave emulator. As you can see from the diagram, in Pocket Internet Explorer, the layout of the page is in tabular form, and because Pocket Internet Explorer supports HTML 3.2 markup languages, devicespecific/ The first <Choice> element of the Choice construct returns a true value, which uses <HeaderTemplate> and <FooterTemplate> two templates, and the Label control displays long string literals.

　　

　　 use attribute overrides for custom specific device rendering

Property overrides are methods that set different control property values for different client devices in the Devicespecific/choice construct, that is, they can be rendered differently based on different devices.

Each ASP.net mobile control can contain a devicespecific/choice construct. Each <Choice> element in the <DeviceSpecific> element is authenticated in turn, and the first <Choice> element that is identified as true is applied to the control that contains the construct. In the last article, "Definition and implementation of device Filters", I used a specific example of using attribute overrides, which is to use the image control to render a picture of the device's supporting format for a particular mobile device, as follows:

When a client device requests a page that contains the control, the ASP. NET automatically resolves the <Choice> element with the corresponding MobileCapabilities object for that device. If IsHTML32 returns True, then the image control will render using Northwindlogo.gif. If IsWML11 returns True, the Northwindlogo.wbmp picture is used. If neither of these device filters is true, then the ImageUrl property is undefined, meaning that the AlternateText property value of the image control is used to "Northwind Corp." Text to replace it.

　　 tip: Both device filters that are used in the image control are already defined in the Web.config file, and if your site program does not have a Web.config file, you can use the "Add New Item" In Solution Explorer via the right-click menu. Mobile Web configuration file is added manually.

The basic usage of the Devicespecific/choice construct is demonstrated in the above example: if a specific device filter is true, a property override is performed on the control that contains the construct. Property overrides can be used primarily to implement:

1. Use a different picture file: When a client device supports a different picture format, you can choose which image to render using the attribute rewrite implementation.

2. Adjust the string because of the device display size: You can use long strings on some large-screen devices, while smaller-screen devices use reduced strings.

3. Multi-Language-enabled programs: You can set text for the control's Text property, depending on the preferred language used by the client device.

4. Custom style properties for a specific device: When the client device is rendering the control, the ASP. NET uses a different font or color depending on the features supported by the device. In addition, you can use different style attributes for a particular device. The next article will refer to how to use devicespecific/choice constructs and templated controls to use a specific markup language for client devices.

　　Defining property overrides visually in Visual Studio 2005

Visual Studio 2005 provides a visual way to define and apply device filters, and property overrides are no exception. When you want to apply a property override to a control, you must first apply a device filter to the control. To apply a device filter to a control I've already described it earlier, and for you to consolidate the previous knowledge, here's an enumeration of the entire process of implementing property overrides:

1. Through the "file"-"new website"-"ASP." NET Web site to create a new site.

2. Delete the "default.aspx" file and add a asp.net mobile page in Solution Explorer via the Add New item-Mobile Web Form command on the right-click menu.

3. Add a Web.config file that already contains several device filters in Solution Explorer by adding a new item in the right-click menu and using mobile Web configuration files for the site.

4. Drag and drop a Label control in the form control, select the Label control and click the ellipsis button on the right side of the property window (AppliedDeviceFilters).
　　
5. In the "Applied Device Filters" dialog box that pops up, by selecting the items in the available Device filters Drop-down list box, add the device filter you want to add to the Applied Device filter list by adding it to the added to List button, and then click OK. This applies a device filter to the control. The following figure is the 4 device filters that I added in the example.

6. Select the Label control and click the ellipsis button to the right of the property Overrides item in the Properties window, and the property override dialog box pops up.

　　

7. We can view the device filters that the control is currently applying by using the "Applied Device Filter" Drop-down list. Now we're going to select Ispocketie ("") to set the property override for the device filter, in this case we'll only override the control's Text property. For this we can fill in the "Use Ispocketie device filter for property overrides" at the Text property. The Text property of each device filter is set as follows:

　　

　　

　　
　　
8. After the property overrides for each device filter are set for the label control, when the client device requests the page, if the browser is Pocket Internet Explorer, the text "Use the Ispocketie device filter for property overrides" appears on the label control. If you are a browser that supports HTML 3.2 markup languages, the Label control displays "property overrides using the ISHTML32 device filter."

The final code for the page is as follows: