Using Device-Specific Templates

  • Article

When mixing device-specific markup languages with ASP.NET mobile controls, you must ensure consistency, based on what the mobile controls are rendering. Intelligent detection and adaptation for mixed device-specific and device-independent markup is not supported.

In the following incorrect example, the contents of the <ContentTemplate> tags are sent to the device if the filter matches the device capability. Note the alignment setting on the first Panel control and the Label control. Since the Label control is within a WML <td> tag, the <p> tag generated for the Label control is incorrectly rendered by the browser because it is within the <td> tag.

<mobile:Panel runat=server alignment="right">
<DeviceSpecific>
   <Choice Filter="isWML11">
      <ContentTemplate>
         <table columns="2" align="LR">
<tr>
<td>
      </ContentTemplate>
   </Choice></Devicespecific>
</mobile:panel>

<Mobile:Label id="label1" runat=server Text="HELLO HOW ARE YOU" 
   alignment="left">
</Mobile:Label>
<mobile:Panel runat=server>
   <DeviceSpecific>
      <Choice Filter="isWML11">
         <ContentTemplate>
</td>
<td>
         </ContentTemplate>
      </Choice>
   </Devicespecific> 
</mobile:panel>

After you set a nondefault setting for alignment, a <p> tag is generated for each subsequent control. The following error is generated:

Digest Compile failed.
WML_1.1.DTD(9) : error: Close tag 'p' does not match start tag 'td'
WML_1.1.DTD(9) : error: Invalid element 'p' in content of 'tr'. 
   Expected td
WML_1.1.DTD(9) : error: Invalid element 'p' in content of 'tr'.    Expected td
WML_1.1.DTD(10) : error: Close tag 'td' does not match start tag 'p'

In this case, the Label does not inherit the alignment from the first Panel control, so it generates a <p> tag for its alignment. However, a <p> tag cannot be added in this situation. This is not a common situation, but you can work around the problem by marking the Label control as visible only if it is not rendering against a WML-based device, and by having the text of the Label control specified within the template. Use the <table align="left"> tag in the Panel control for WML rendering.

Note   You can control the overall alignment of a table, but not the alignment of individual cells.

Corrected Example

The following example corrects the previous errors and includes additions such as page directives and form controls.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language ="c#" %>
<Mobile:Form runat=server ID="OrderForm" Title="Submit your Order For pizza">
    <Mobile:link runat=server ID="LinkWN1" Text="What's On" Alignment="center">
</Mobile:link>
   <mobile:Panel runat=server>
      <DeviceSpecific>
         <Choice Filter="isWML11">
            <ContentTemplate>
              <table columns="2" 
                 align="LR">
<tr><td>
             </ContentTemplate>
         </Choice>
      </Devicespecific>
   </mobile:panel>
   <Mobile:Label id="label1" runat=server 
      Text="HELLO HOW ARE YOU">
   </Mobile:Label>
   <mobile:Panel runat=server>
      <DeviceSpecific>
         <Choice Filter="isWML11">
            <ContentTemplate>
</td><td>
            </ContentTemplate>
         </Choice>
     </Devicespecific>
   </mobile:panel>
   <mobile:Panel runat=server>
      <DeviceSpecific>
         <Choice Filter="isWML11">
            <ContentTemplate>
</td></tr>
              </table>

            </ContentTemplate>
         </Choice>
      </Devicespecific>
</mobile:panel>
</Mobile:Form>

<Mobile:Form runat=server ID="WhatisOn" Title="Contains">
<Mobile:Label StyleReference="Title" ID="LblWO2" runat=server Text="Toppings"></Mobile:Label>
</Mobile:Form>

See Also

Custom Attributes | Device Filtering Recommendations | HasCapability Method | Device Evaluation Methods | Extended Browser Capabilities | MobileControl | Understanding the Data Mapping Rules for the Configuration Provider