Tip: the "mobile Web Forms" tab in the Visual Studio 2005 toolbox contains a control named devicespecific. You can drag the control to a form control or panel control. When you switch the page to the HTML view, you will find that the corresponding form control or panel control contains the devicespecific/choice constructor syntax. One thing to note is that you cannot take it for granted that dragging a devicespecific control to another ASP. NET mobile control will also implement the above devicespecific/choice structure. Only when you define an attribute override or define a templated option for the list control will a devicespecific/choice structure be automatically added to these controls. The devicespecific control is only applicable to defining templated options in a visualized manner in the Form Control and panel control.
Create and apply a device Filter
In ASP. after selecting a control on the net mobile page, you can see the applieddevicefilters item in the "device-specific" column of the property window. You can click the ellipsis in the blank space on the right, the "applied device filter" dialog box is displayed. The original purpose of this dialog box is to apply a device filter to the control in this status after editing the properties of the control, but it also allows you to define a new device filter. In addition, these defined device filters can be applied to the entire site program and all controls. ASP. NET automatically stores these new device filters in the web. config file of the Site program.
In the "available device filters" drop-down list, lists all available device filters of the control that is currently editing properties. The list below the dialog box shows the device filters applied to the control that is currently editing properties. To create a device filter, click "edit" in the dialog box. The "device Filter Editor" is displayed ",:
In this dialog box, you can view the existing device filters in the current site program in the "device filter" list on the right. When you select a device filter of the "Equal comparison" type in the "device filter" list, the properties of the device filter are displayed in the "Compare" drop-down list box and "parameter" text box.
To add a "equal comparison" device filter, follow these steps:
1. Click "New Device filter" in the "device Filter Editor" dialog box.
2. Enter a proper name for the new device filter.
3. Select "equal comparison" for "type" of the device filter ".
4. In the "Compare" drop-down list box, type or select an attribute in the mobilecapabilities class that you want to compare with the value in the "parameter" text box in the dialog box.
5. Enter the parameter value in the "parameter" text box. If the attribute value of a mobilecapabilities object is equal to this parameter, the "true" value is returned.
Tip: This is a device filter named iswml11. Here we select preferredrenderingtype as the property to be compared, that is to say, if the value of the preferredrenderingtype attribute of the device filter is equal to the value of "wml11" in the "parameter" text box below, the device filter returns a true value.
The process of creating a device filter of the type "AUTHENTICATE delegate" is similar to the process of creating a device filter that is equal to the above, the only difference is that the device filter of the authentication delegate is not typed or selected in the "Compare" drop-down list box and "parameter" text box, instead, you need to enter the class name that contains the custom delegate in the "type" text box. DLL Assembly name. In the "method" text box, enter the actual delegate method name.
In the previous article "definition and implementation of device filters", a delegate method named uselargegif is described. If you need to use this method to identify whether an image is a large GIF image, you need to enter "myevaluators. customevals, myevaluators ", and enter" uselargegif "in" method ". After you define all the device filters for the site program, you can apply them to any control that wants to override properties. All the device filters you have defined will be displayed in the drop-down list of the device Filter Editor.
Apply device filters to controls
In the "applied device filter" dialog box, select the device filter to be applied to a control, click "add to list" to add this available device filter to the "applied device filter" list box. Then you can click the up and down arrows in the dialog box to adjust the positions of these device filters. The device filter with the name (default) is the default option, and the return value is always true. Therefore, the (default) Order of device filters must be at the bottom of all device filters (that is, the bottom position of the "applied device filters" list box ). The specific situation is shown in:
The figure shows that four device filters are applied to a label control. In this case, you should know that the devicespecific/choice automatically generated by Visual Studio 2005 is constructed as follows:
| <Mobile: Form ID = "form1" runat = "server"> <Mobile: Label id = "label1" runat = "server"> <Devicespecific> <Choice filter = "ispocketie"/> <Choice filter = "ishtml32"/> <Choice filter = "ischtml10"/> <Choice/> </Devicespecific> </Mobile: Label> </Mobile: Form> |
That is to say, the order of the four device filters is the order of the <choice> elements in the devicespecific/choice structure.
Detailed description of attribute Rewriting
<Devicespecific> and <choice> Elements
All ASP. NET mobile server controls inherited from system. Web. UI. mobilecontrol can contain a <devicespecific> element in their code declaration. As mentioned earlier, a <devicespecific> element can contain any <choice> element. In general, the syntax of the <choice> element is as follows:
| <Choice Filter = "filtername" Xmlns = "urltoschema" <! -Attribute rewriting option --!> > <! -Templated options --!> </Choice> |
The following table lists <choice> common attributes and child elements.
| Attribute/child element | Description |
| Filter | In contrast to the preceding <choice> element syntax, filtername must be the name of a device filter that is available and defined at the <devicefilters> node in the website Web. config file. Note that the name of the device filter is case sensitive, and ishtml32 and ishtml32 are two different device filters. If you do not define the filter attribute in the <choice> element, the <choice> element becomes the default choice, therefore, <choice/> is the last position in the device Filter list. |
| Property overrides | You can set the value for the property of the control in the devicespecific/choice structure. In other words, you can set different property values for the control corresponding to different device filters in each <choice> element. For example, in the previous example, we set four device filters (one of which is the default one ), if you set the text attribute of different label controls for each device filter in the <choice> element. If a device filter returns true, the text value of the text attribute corresponding to the device filter overwrites the text value of the texe attribute in other device filters. |
| Xmlns | This attribute is generally not specified by developers. Visual Studio 2005 automatically detects the markup language used in the template, then Visual Studio 2005 inserts this attribute into the corresponding <choice> element. Therefore, the site does not need to perform operations on this attribute directly, and you do not need to assign values to this attribute. |
| Template Elements | Use this property to specify templated controls such as form, panel, list, And objectlist controls that allow the page to integrate your defined content into these controls during rendering. |
You can use a <choice> element without specifying the filter attribute in the <devicespecific> element, which is the default <choice> element I mentioned above. You can also not define such a default <choice> element, but once you define it, you must place the default element at the end of the entire <choice> element list. This is because ASP. NET identifies <choice> elements in sequence. When a specific device requests to move a web page, the first <choice> element that returns true will be applied. The default <choice> element always returns the true value. Therefore, if it is placed at the beginning of the entire element list, other <choice> elements will become invalid.
The list lists different methods for using the <choice> element, in this example, you can use it to override attributes and define
| <% @ 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"> |
The following is the device filter defined in the web. config file of the website program:
| <Configuration> <System. Web> <Devicefilters> <Filter Name = "ishtml32" Compare = "preferredrenderingtype" argument = "html32"/> <Filter Name = "iswml11" Compare = "preferredrenderingtype" argument = "wml11"/> <Filter Name = "ischtml10" Compare = "preferredrenderingtype" argument = "chtml10"/> </Devicefilters> </System. Web> </Configuration> |
The Form Control contains a <devicespecific> element. If the client device supports HTML 3.2, A headertemplate and a footertemplate (footer template) are inserted in the Form Control ), the HTML tags in these two templates combine to form a table layout. In this table, we use the HTML tag to fill an image in the first row of the table.
The second <choice> element constructed by devicespecific/choice in the form control does not have the filter attribute, so it is the default <choice> element. If the value of false is returned for the ishtml32 device filter of the current request, the program uses the In addition, the Form Control also contains a label control constructed using devicespecific/choice, and the main purpose of the structure using devicespecific/choice is to rewrite the attributes. The label control defaults to a long string "welcome to our mobile sports extra web site. check here for up-to-the minute sports news as it happens! ". However, for some small screen devices, such as devices that support WML 1.1 and chtml 1.0 Markup Language (that is, true is returned for iswml11 and ischtml10 device filters ), the preceding string will be shortened to "Welcome to live results! ". In addition, the text and forecolor attributes are overwritten on the I-mode device (that is, the device that supports chtml 1.0.
The following two figures show the actual effect of the above program in the Pocket Internet Explorer and openwave simulation programs. As shown in the figure, in Pocket Internet Explorer, the page layout is in the form of a table, and because Pocket Internet Explorer supports the HTML 3.2 markup language, therefore, the first <choice> element constructed by devicespecific/choice returns the true value. Therefore, the
Rewrite attributes to customize the rendering of a specific device
Property rewriting is a method in which different control property values can be set for different client devices in the devicespecific/choice structure, that is, different rendering can be performed based on different devices.
Each ASP. NET mobile control can contain a devicespecific/choice structure. Each <choice> element in the <devicespecific> element is identified in sequence, and the first <choice> element that identifies as true is applied to the control that contains the structure. In the previous article "definition and implementation of device filters", I used a specific example of using property rewriting, the image control is used to display images in the supported format of a specific mobile device. The Code is as follows:
| <Mobile: Image runat = "server" id = "myimages" alternatetext = "northwind Corp."> <Devicespecific> <Choice filter = "ishtml32" imageurl = "northwindlogo.gif"/> <Choice filter = "iswml11" imageurl = "northwindlogo. wbmp"/> </Devicespecific> </Mobile: Image> |
When a client device requests a page containing the control, ASP. NET automatically uses the mobilecapabilities object corresponding to the device to parse the <choice> element. If ishtml32returns true, the imagecontrol will be rendered using northwindlogo.gif. If iswml11 returns true, use the northwindlogo. wbmp image. If neither of the above device filters is true, the imageurl attribute is undefined, that is, the alternatetext attribute value of the image control "northwind Corp." text will be used as an alternative.
Tip: The two device filters used in the image control are already on the web. the config file is defined if your website program does not have web. to add the config file manually, right-click Solution Explorer and choose "Add new item"> "mobile Web configuration file" from the shortcut menu.
In the preceding example, the basic usage of devicespecific/choice constructor is demonstrated: if the specific device filter is true, the property of the control containing the constructor is overwritten. Attribute rewriting is mainly used for implementation:
1. Use different image files: when a client device supports different image formats, you can use Attribute rewriting to select which image to render.
2. Adjust the device's display size: You can use long strings on some large screen devices, while using reduced strings on small screen devices.
3. multi-language programs: You can set the text corresponding to the language for the text attribute of the Control Based on the preferred language used by the client device.
4. Custom style attributes for a specific device: when a client device presents a control, ASP. NET uses different fonts or colors based on the features supported by the device. In addition, you can use different style attributes for specific devices. The next article describes how to use devicespecific/choice to construct and templated controls and use specific Markup languages for client devices.
In addition, the Form Control also contains a label control constructed using devicespecific/choice, and the main purpose of the structure using devicespecific/choice is to rewrite the attributes. The label control defaults to a long string "welcome to our mobile sports extra web site. check here for up-to-the minute sports news as it happens! ". However, for some small screen devices, such as devices that support WML 1.1 and chtml 1.0 Markup Language (that is, true is returned for iswml11 and ischtml10 device filters ), the preceding string will be shortened to "Welcome to live results! ". In addition, the text and forecolor attributes are overwritten on the I-mode device (that is, the device that supports chtml 1.0.
The following two figures show the actual effect of the above program in the Pocket Internet Explorer and openwave simulation programs. As shown in the figure, in Pocket Internet Explorer, the page layout is in the form of a table, and because Pocket Internet Explorer supports the HTML 3.2 markup language, therefore, the first <choice> element constructed by devicespecific/choice returns the true value. Therefore, the
Rewrite attributes to customize the rendering of a specific device
Property rewriting is a method in which different control property values can be set for different client devices in the devicespecific/choice structure, that is, different rendering can be performed based on different devices.
Each ASP. NET mobile control can contain a devicespecific/choice structure. Each <choice> element in the <devicespecific> element is identified in sequence, and the first <choice> element that identifies as true is applied to the control that contains the structure. In the previous article "definition and implementation of device filters", I used a specific example of using property rewriting, the image control is used to display images in the supported format of a specific mobile device. The Code is as follows:
| <Mobile: Image runat = "server" id = "myimages" alternatetext = "northwind Corp."> <Devicespecific> <Choice filter = "ishtml32" imageurl = "northwindlogo.gif"/> <Choice filter = "iswml11" imageurl = "northwindlogo. wbmp"/> </Devicespecific> </Mobile: Image> |
When a client device requests a page containing the control, ASP. NET automatically uses the mobilecapabilities object corresponding to the device to parse the <choice> element. If ishtml32returns true, the imagecontrol will be rendered using northwindlogo.gif. If iswml11 returns true, use the northwindlogo. wbmp image. If neither of the above device filters is true, the imageurl attribute is undefined, that is, the alternatetext attribute value of the image control "northwind Corp." text will be used as an alternative.
Tip: The two device filters used in the image control are already on the web. the config file is defined if your website program does not have web. to add the config file manually, right-click Solution Explorer and choose "Add new item"> "mobile Web configuration file" from the shortcut menu.
In the preceding example, the basic usage of devicespecific/choice constructor is demonstrated: if the specific device filter is true, the property of the control containing the constructor is overwritten. Attribute rewriting is mainly used for implementation:
1. Use different image files: when a client device supports different image formats, you can use Attribute rewriting to select which image to render.
2. Adjust the device's display size: You can use long strings on some large screen devices, while using reduced strings on small screen devices.
3. multi-language programs: You can set the text corresponding to the language for the text attribute of the Control Based on the preferred language used by the client device.
4. Custom style attributes for a specific device: when a client device presents a control, ASP. NET uses different fonts or colors based on the features supported by the device. In addition, you can use different style attributes for specific devices. The next article describes how to use devicespecific/choice to construct and templated controls and use specific Markup languages for client devices.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
