26.13 Changing Mobile Web Form Output Using the DeviceSpecific Control

26.13 Changing Mobile Web Form Output Using the DeviceSpecific Control

You want to change the content that is rendered to a client based on the mobile device capabilities.

Technique

The ASP.NET Mobile Web controls contain a special control called the DeviceSpecific control. The control itself is simply a container that allows you to define templates for specific mobile device capabilities. The following walkthrough demonstrates how to create content that looks different when viewed through a desktop browser, a Pocket PC browser, or on a cell phone.

After you create the ASP.NET Mobile Web Application project, drag and drop a DeviceSpecific control onto the Web form in the designer. The next step is to specify the different templates that this control supports. Each template is associated later with a specific device configuration. Once the page loads, the device configuration is checked against the configurations in the DeviceSpecific control, and if a match is found, the controls in that template are rendered. To add templates to the DeviceSpecific control, right-click on it and select the Templating Options menu item. The current list of templates in the Templating Options dialog will be blank, so click on the Edit button to add templates. The Applied Device Filters dialog lists a set of device configurations that are currently the most common and that you will more than likely use. The additional comments for this recipe explain how to add device filters.

For this example, the templates to add, in the order specified, include isPocketIE , isHTML32 , and supportsVoiceCalls . The order in which you add these device filters is important. When the page loads, ASP.NET checks the first device filter, and if it makes a match, the corresponding template is rendered. For the three filters specified here, switching the isHTML32 and isPocketIE causes Pocket PCs to render the isHTML32 template because Pocket IE is a Win32 HTML browser.

Once you add the necessary device filters, you are ready to edit the associated templates. To edit a template for a single device filter, select that filter within the Templating Options dialog and close the dialog. Next, right-click on the DeviceSpecific class and choose the Edit Template, Header and Footer Templates menu item. You can then add ASP.NET mobile controls within the template. When you are finished, right-click on the DeviceSpecific control and select the End Template Editing item. You have to repeat this process for each device filter that you specified in the Templating Options, which means you have to select the next filter from the Templating Options dialog and repeat the process.

Comments

As mentioned in this recipe, the Web Form designer already contains a small subset of possible device filters that you can use. Some of them target certain technologies such as Pocket IE, whereas others specifically target actual mobile devices such as Nokia cell phones. You can add your own device filter by clicking on the Edit button of the Applied Device Filters dialog. This move brings up the Device Filter Editor, allowing you to create a custom filter based on a certain device capability. For instance, to add a device filter that detects whether a user is connecting using America Online (AOL), click on the New Device Filter button and give the filter a name of isAOL . In the Compare field of the Attributes section, select the AOL item and enter a value of true for the Argument field. Now whenever this filter is selected and a template is created for it, users who are using AOL will have specialized content rendered to them.

You can also use device filters to override individual properties for mobile Web controls. For instance, if you want users whose browsers support color to see a colorful label control, you can specify a specific property set for the supportsColor device filter. To do so, select the control that you want to edit and click on the button within the field for the AppliedDeviceFilters property in the Property Browser. Add any necessary device filters using the same technique discussed earlier in this recipe. For this example, add the supportsColor filter and close the dialog. Next, click on the button in the field for the PropertyOverrides property. The list of device filters displays in a ComboBox at the top of the dialog, and changing the device filter allows you to change the control's individual properties. Any property values you change only affect those devices that support the specified device filter.