次の方法で共有

テンプレート セットとテンプレート コントロール

  • [アーティクル]

更新 : 2007 年 11 月

ASP.NET にはテンプレート コントロールが用意され、コントロールのコンテンツとレイアウトを定義する多数のテンプレート プロパティが公開されています。これらのテンプレートは、コントロールのレンダリング時に適切な場所に挿入されます。たとえば、ヘッダー、フッター テンプレートなど、List コントロール用のテンプレートがあります。この機能を使用すると、デバイスに基づいてコントロールの外観を実行時に大幅にカスタマイズできます。

ASP.NET モバイル コントロールでは、このモデルを拡張し、テンプレート セットの概念を導入しています。テンプレート セットは、テンプレートのコレクションです。ただし、1 つのテンプレート コントロールは、複数のテンプレート セットを参照でき、各テンプレート セットには、デバイス固有のさまざまな判定基準を持たせることができます。

テンプレート セットのレンダリング判定基準

テンプレート コントロールの各テンプレート セットは、共有する <DeviceSpecific> 要素内の <Choice> 要素に含めます。実行時に、<DeviceSpecific> 要素の選択項目は順番に評価されます。最初に一致した <Choice> 要素が、デバイス固有のコンテンツとして使用されます。選択された項目にテンプレートが含まれている場合、コントロールはそのテンプレートを使用します。テンプレートが含まれていない場合、または指定された選択項目がいずれも不適切な場合、コントロールは既定のマークアップをレンダリングします。

デバイスに依存しないテンプレート

テンプレート コントロールには、デバイスに依存しないテンプレートを使用できます。デバイスに依存しないテンプレートを指定するには、Filter 属性を明示的に指定しないで <Choice> 要素を使用します。デバイスに依存しない選択項目を指定する場合、ターゲット デバイスに適用するほかの項目が選択されない場合に選択されることがないように、必ず最後に宣言する項目である必要があります。

コントロール固有のレンダリング

テンプレート モードでのコントロールのレンダリング動作は、コントロールに固有のものです。List、ObjectList など、一部のコントロールは提供されているテンプレートからすべてのコンテンツをレンダリングすることがあります。ほかのコントロールでは、特定のテンプレートのコンテンツが既定のコンテンツに追加される場合があります。たとえば、ヘッダーまたはフッターのテンプレートが Form コントロール用に選択されている場合、テンプレート内のマークアップがそれぞれヘッダーまたはフッターとして、フォームのコンテンツに追加されます。

テンプレート コントロールのプロパティ設定

テンプレート内にあるコントロールのプロパティをプログラムによって設定するには、名前付けコンテナへの参照を取得し、FindControl メソッドを使用してコントロールを検索する必要があります。その後に、プロパティを設定できます。この方法の例を次に示します。

39dfzhdc.alert_note(ja-jp,VS.90).gifメモ :

プログラムで StyleReference プロパティを変更する前にスタイル シートの情報が読み込まれるため、コード内でプロパティを変更しても効果はありません。

 
void Page_Load(Object sender, EventArgs e)
{
    // Iterate through the controls in the form.
    foreach(Control c in Form1.Controls)
    {
        if(c.GetType()) == typeof(TemplateContainer)
        {
            // Get the link control.
            Link ctrl = (Link)c.FindControl("myLink");
            if (ctrl != null)
            {
                // Set the text and url properties.
                ctrl.Text = "Home Page";
                ctrl.NavigateURL = "https://www.microsoft.com";
            }
        }
    }
}

テンプレート セットとスタイル

StyleSheet コントロールのスタイルにも、テンプレート セットが含まれることがあります。つまり、同じスタイルを参照し、同じテンプレート セットを使用し、さらにスタイルが提供する同じカプセル化の利点を提供する複数のテンプレート コントロールを使用することができます。テンプレート セットを示す例については、「ASP.NET モバイル コントロール クイック スタート」を参照してください。

スタイル テンプレートとスタイル プロパティ

親からスタイルを継承したり、StyleReference プロパティを明示的に設定したり、集約を使用してスタイルを継承したりすることができます。ただし、テンプレートを使用する場合、カスケードの効果はありません。スタイル シート内のテンプレートを使用しない限り、親のスタイル テンプレートからテンプレートを取得することはできません。詳細については、「スタイル」を参照してください。

テンプレートの動的な追加

場合によっては、動的にテンプレートをインスタンス化して追加すると便利です。次のサンプル コードでは、Init イベント ハンドラでテンプレートを追加します。

<%@ Page Language="C#" 
    Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script runat="server">
    private void Form_Init(object sender, System.EventArgs e)
    {
        DeviceSpecific devSpecific = new DeviceSpecific();

        // Create the choice tag.
        DeviceSpecificChoice devChoice = 
            new DeviceSpecificChoice();
        devChoice.Filter = "isHTML32";

        // Create the template.
        ITemplate myTemplate = 
            new CustomTemplate("HeaderTemplate");

        // Create the templateContainer.
        TemplateContainer container = new TemplateContainer();
        myTemplate.InstantiateIn(container);

        // Create the tree.
        devChoice.Templates.Add("HeaderTemplate", myTemplate);
        ((IParserAccessor)devSpecific).AddParsedSubObject(devChoice);
        ((IParserAccessor)form1).AddParsedSubObject(devSpecific);
    }
    public class CustomTemplate : ITemplate
    {
        String strWhichTemplate;

        public CustomTemplate(String strTemplate)
        {
            strWhichTemplate = strTemplate;
        }

        public void InstantiateIn(Control container)
        {
            if (strWhichTemplate == "HeaderTemplate")
            {
                System.Web.UI.MobileControls.Label lb =
                    new System.Web.UI.MobileControls.Label();
                lb.Text = "Header Template";

                System.Web.UI.MobileControls.Command cmd = 
                    new System.Web.UI.MobileControls.Command();
                cmd.Text = "heLLo";

                container.Controls.Add(lb);
                container.Controls.Add(cmd);
            }
            else if (strWhichTemplate == "FooterTemplate")
            {
                System.Web.UI.MobileControls.Label lb = 
                    new System.Web.UI.MobileControls.Label();
                lb.Text = "FooterTemplate";
                container.Controls.Add(lb);
            }
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
  <mobile:form id="form1" runat="server" OnInit="Form_Init">
  </mobile:form>
</body>
</html>

デバイス固有のテンプレートを使用するための特記事項

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

たとえば、次のサンプル コードにおける、最初の Panel コントロールと Label コントロールの配置 (alignment) 設定に注目してください。

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

既定以外の配置をレンダリングするには、WML <p> 要素を使用します。前の例では、2 番目の Label コントロールが WML <td> 要素内にあり、2 番目の Label コントロール用に生成された <p> 要素は、<td> 要素内にあるためブラウザによって不適切にレンダリングされます。

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

デバイス固有の任意のマークアップ

場合によっては、特定のデバイスや特定の種類のデバイス用に、任意のマークアップを挿入することがあります。これを可能にするため、ASP.NET モバイル Web ページには、Panel コントロール用のコンテンツ テンプレートが用意されています。選択された項目にコンテンツ テンプレートが含まれている場合、コントロールは、通常のコンテンツの代わりにこのテンプレートを使用してレンダリングします。

参照

概念

スタイル

デバイス テンプレート サポート

その他の技術情報

アプリケーション開発者ガイド

ASP.NET モバイル Web ページの作成

ASP.NET モバイル コントロールのデザインとレンダリングについてのコンセプト