Notifications の TileTemplateType の一覧と、そこから取得できる XML

この内容は Windows 8 Developer Preview を元に記述しています。

Metro のタイル通知である Notification のサンプルを見ていると、どうやら XML を作ってタイルにこういうのを表示してねって知らせるみたいです。で、その XML のひな形は Windows.UI.Notifications.TileTemplateType に一覧が定義されてて、それをもとに取得するようです。

ざっくり書くと以下のような感じ。

var tileXml = Notifications.TileUpdateManager.getTemplateContent(
  Notifications.TileTemplateType.tileWideImageAndText
);

結構シレッと書かれてて、どんなけのタイプが定義されているのか、そこから取得できる XML のフォーマットはどんなのかが見当たらなかった(探し方が悪いだけかもですが。)ので、表示するプログラムを書いてみました。

左に TileTemplateType の一覧がでて、選択すると右側に XML が表示されます。
f:id:k_maru:20120203000439p:plain

HTML と Javascript を抜粋して載せておきます。

  <style>
    .contents {
       display: -ms-grid;
       -ms-grid-columns: 300px 1fr;
    }
    .lists {
      -ms-grid-column: 1;
    }
    .xmltext {
      -ms-grid-column: 2;
    }
    #listView {
      height: 700px;
    }
  </style>
</head>
<body>
  <section class="contents">
    <section class="lists">
      <div id="listView" data-win-control="WinJS.UI.ListView"></div>
    </section>
    <section class="xmltext">
      <pre id="tileXml">

      </pre>
    </section>
  </section>
</body>

(function (global, undef) {
  'use strict';
  // Uncomment the following line to enable first chance exceptions.
  // Debug.enableFirstChanceException(true);

  var listView;

  WinJS.Application.onmainwindowactivated = function (e) {
    if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
      initializeControls();
      
    }
  }

  var initializeControls = function () {
    WinJS.UI.processAll();
    listView = WinJS.UI.getControl(document.getElementById("listView"));
    WinJS.UI.setOptions(listView, {
      dataSource: getTileTemplateTypes(),
      layout: {
        type: WinJS.UI.ListLayout
      },
      selectionMode: 'none',
      tap: "invoke",
      oniteminvoked: selectTileTemplateName
    });
  }

  var getTileTemplateTypes = function () {
    var types = [];
    for (var type in Windows.UI.Notifications.TileTemplateType) {
      if (type.substr(0, 4) === "tile") {
        types.push(type);
      }
    }
    return types;
  }

  var selectTileTemplateName = function(e){
    var templateName = listView.getElementAtIndex(e.detail.itemIndex).msDataItem.data;
    var tileXml = Windows.UI.Notifications.TileUpdateManager.getTemplateContent(
      Windows.UI.Notifications.TileTemplateType[templateName]
    );
    document.getElementById("tileXml").innerText = tileXml.getXml();
  }

  WinJS.Application.start();
})(this);