HOW TO: Customize a Mobile Web Forms Control with Templates (313297)

SUMMARY

This step-by-step guide describes how to create and use device-specific templates for mobile Web Forms controls. This is a two-step process. First, you must assign one or more device filters to the control. Second, you must create a device-specific template that is associated with each device filter. This article assumes that you have installed Microsoft Visual Studio .NET and the Mobile Internet Toolkit with the Mobile Internet Designer.

IT professionals can use the Mobile Internet Toolkit to deploy Web sites for both desktop computers and wireless mobile devices. These devices can range from Web phones to handheld personal computers. The Mobile Internet Toolkit includes a set of mobile server controls that you can use in your Web pages. The mobile controls (these are also called mobile Web Forms controls) detect which type of device is being used to browse the application. Based on that detection, these controls emit markup language that is appropriate for a specific device. For example, if a user is browsing by using a Wireless Markup Language (WML) device, the mobile controls emit WML to the user's device.

Because mobile devices have a wide variety of display capabilities, you may need to customize the output of your Web pages for specific devices. One way to do this is by using templates for mobile controls that are based on the type of device that is being used to browse the application.

back to the top

Requirements

• Visual Studio .NET
  
• Mobile Internet Toolkit
  

back to the top

Defining Device Filters

1. On your Mobile Web form, click the Mobile Web Form control to which the filter will be applied.
2. In the Properties window, click the Ellipsis button next to the AppliedDeviceFilters property. The Applied Device Filters dialog box appears.
3. Click Edit to create or modify filters. The Device Filter Editor dialog box appears.
4. Click a new device filter by:
   1. Clicking New Device Filter.
   2. Typing the name for your new filter. Note that filter names are case-sensitive.
   3. Clicking a filter type (for example, click Equality Comparison), and then typing the appropriate information in the Compare and Argument boxes.
5. Use the Up Arrow and Down Arrow buttons to define the order in which the device filters are saved in the application configuration file (Web.config).
6. Click OK to save the device filters in the application configuration file, and then close the Device Filter Editor dialog box.

back to the top

Applying Device Filters

1. Click the control to which the filter will be applied.
2. In the Properties window, click the Ellipsis button next to the AppliedDeviceFilters property. The Mobile Internet Designer displays the Applied Device Filters dialog box.
3. The Available Device Filters box contains all of the device filters that are defined at the application level. Click the device filter that you want to use, or type the name of an evaluator-delegate method that is defined in the code-behind file of the mobile Web Forms page.
4. Click Add To List. The selected device filter or method name is included in the Applied Device Filters list.
5. In the Applied Device Filters box, click the new device filter.
6. In the Argument box, type the optional device filter argument. For comparison filters, the argument replaces the value that is defined in the Device Filter Editor dialog box and is saved in the Web.config file. For delegate-based filters, the argument is passed to the method. If you do not specify an argument, a null value is used.
7. Use the Up Arrow and Down Arrow buttons to order the applied device filters. At run time, the application tests the filters one-by-one from the top to the bottom. The first device filter that results in a successful evaluation determines which set of property overrides values that the application uses.
8. Click OK to close the Applied Device Filters dialog box.

back to the top

Selecting an Applied Device Filter

1. Right-click any mobile control that supports templates, and then click Templating Options. The Templating Options dialog box appears.
2. In the Applied Device Filter box, click a filter.
3. Optionally, click or type a markup language schema in the Markup Schema box. The information that you specify is used only by the Mobile Internet Designer and has no effect at run time. It is used in HTML view by the Microsoft IntelliSense technology.
4. Close the Templating Options dialog box. When you do, the designer sets the TemplateDeviceFilter property of the control to the name of the device filter that you specified in the Applied Device Filter box. The selected control is then ready for Template-editing mode.

back to the top

Editing Templates

1. On the shortcut menu, click Edit Template. You see a list of customizable templates that the currently selected control supports.
2. On the Edit Template menu, click the template that you want to edit.
3. In most templates, you can type literal text directly into the template, or you can drag controls from the Toolbox and then set their properties to format the information they contain. For example, you can either:
   • Drag a Label control into the header template. You can type header text in the control, and then configure its properties. For example, you can change the foreground color.
   • Drag an Image control into a separator template. You can then use the ImageUrl property to link to a Web graphic file for the separator that you want to use.
4. When you are finished, click End Template Editing on the shortcut menu.

back to the top