Utilisation de modèles spécifiques au périphérique

Article
08/21/2007

Lorsque vous mélangez un balisage spécifique au périphérique et des contrôles mobiles ASP.NET, vous devez respecter une certaine cohérence sur la base de ce que les contrôles mobiles restituent. La détection et l'adaptation intelligentes pour le mélange de balisages spécifiques au périphérique et indépendants du périphérique ne sont pas prises en charge.

Exemple de mélange incorrect

Dans l'exemple incorrect suivant, le contenu des éléments <ContentTemplate> est envoyé au périphérique si le filtre correspond à la fonctionnalité du périphérique. Notez la propriété alignment du premier contrôle Panel et du contrôle Label. Étant donné que le contrôle Label est compris dans un élément <td> WML, l'élément <p> généré pour le contrôle Label est restitué de manière incorrecte par le navigateur, car il se trouve dans la balise <td>.

<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:panel runat="server">
         <DeviceSpecific>
           <Choice Filter="isWML11">
            <ContentTemplate>
              </td>
          <td>
         </ContentTemplate>
        </Choice>
  </Devicespecific>
</mobile:panel>

Après avoir spécifié un paramètre non défini par défaut pour alignment, un élément <p> est restitué pour chaque contrôle créé. L'erreur suivante est générée :

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'

Dans ce cas, le contrôle Label n'hérite pas de l'alignement du premier contrôle Panel, il génère donc un élément <p> pour son alignement. Cependant, dans cette situation, il est impossible d'ajouter un élément <p>. Ce n'est pas une situation courante, mais vous pouvez contourner le problème en marquant le contrôle Label comme visible uniquement s'il n'est pas rendu sur un périphérique WML et en faisant en sorte que le texte du contrôle Label soit spécifié dans le modèle. Utilisez la balise <table align="left"> dans le contrôle Panel pour le rendu WML.

Notes

Vous pouvez contrôler l'alignement global d'un tableau, mais pas l'alignement de chaque cellule.

Exemple corrigé

L'exemple suivant corrige les erreurs précédentes et inclut des ajouts tels que les directives de page et les contrôles de formulaire.

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

Voir aussi

Référence

HasCapability
MobileControl

Concepts

Attributs personnalisés pour les contrôles mobiles
Recommandations sur le filtrage de périphérique
Méthodes d'évaluation de périphérique
Fonctionnalités du navigateur étendues

Partager via