デバイス固有のテンプレートの使用

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

ASP.NET モバイルコントロールとデバイス固有のマークアップを混合使用する場合は、モバイルコントロールが何をレンダリングするかに基づいて、一貫性を確保する必要があります。デバイス固有のマークアップとデバイスに依存しないマークアップの混在使用に対する高度な検出や適応はサポートされていません。

正しくない混合使用の例

次の正しくない例では、フィルタがデバイス機能と一致した場合に <ContentTemplate> 要素のコンテンツがデバイスに送信されます。最初の Panel コントロールと Label コントロールの alignment プロパティに注目してください。Label コントロールが WML <td> 要素内にあるため、Label コントロールに対して生成される <p> 要素も <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>

既定以外の設定を alignment に設定すると、作成される各コントロールに対して <p> 要素がレンダリングされます。以下のエラーが生成されます。

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'

この場合、Label コントロールは最初の Panel コントロールから配置を継承しないので、その配置用に <p> 要素を生成します。ただし、この状況では、<p> 要素を追加できません。これは通常発生するような状況ではありません。問題がある場合には次のように対応してください。WML ベースのデバイスに対してレンダリングしない場合にのみ Label コントロールを表示するようにマークし、Label コントロールのテキストをテンプレート内に指定します。WML をレンダリングするには、Panel コントロール内で <table align="left"> タグを使用してください。

メモ :
表全体の配置は制御できますが、個々のセルの配置を制御することはできません。

修正されたサンプル

次のサンプルは前のエラーが修正されており、ページのディレクティブおよびフォームコントロールなどが追加されています。

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