Utilizar plantillas específicas para un dispositivo

Artículo
10/07/2008

Actualización: noviembre 2007

Cuando se combina marcado específico de un dispositivo con controles de ASP.NET Mobile, se debe garantizar la coherencia, basándose en lo que los controles móviles están representando. El motivo es que no se admite la detección y adaptación inteligente cuando se combinan el marcado con lenguaje específico de dispositivos y el marcado con lenguaje independiente de dispositivos.

Ejemplo de combinación incorrecta

En el siguiente ejemplo incorrecto, el contenido de los elementos <ContentTemplate> se envía al dispositivo si el filtro se corresponde con la funcionalidad del dispositivo. Observe la propiedad alignment del primer control Panel y del control Label. Puesto que el control Label está dentro de un elemento <td> WML, el explorador representa incorrectamente el elemento <p> generado para el control Label porque está dentro de la etiqueta <td>.

<mobile:panel  alignment="right">
  <DeviceSpecific>
    <Choice Filter="isWML11">
      <ContentTemplate>
        <table columns="2" align="LR">
        <tr>
          <td>
            </ContentTemplate>
           </Choice>
           </Devicespecific>
           </mobile:panel>
    <mobile:label id="label1"  text="HELLO HOW ARE YOU" alignment="left" />
    <mobile:panel >
         <DeviceSpecific>
           <Choice Filter="isWML11">
            <ContentTemplate>
              </td>
          <td>
         </ContentTemplate>
        </Choice>
  </Devicespecific>
</mobile:panel>

Después de establecer una configuración no predeterminada para alignment, se representa un elemento <p> para cada control creado. con lo que se produce el siguiente error:

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'

En este caso, el control Label no hereda la alineación del primer control Panel, por lo que genera un elemento <p> para su alineación. Sin embargo, no se puede agregar un elemento <p> en esta situación. Ésta no es una situación normal, pero el problema se puede solventar marcando el control Label como visible sólo si no está representándose en un dispositivo WML, y especificando el texto del control Label dentro de la plantilla. Utilice la etiqueta <table align="left"> en el control Panel para la representación de WML.

Nota:
Se puede controlar la alineación general de una tabla, pero no la alineación de celdas individuales.

Ejemplo corregido

El ejemplo siguiente corrige los errores anteriores e incluye nuevos elementos tales como directivas de página y controles de formulario.

<%@ 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>