WinJS でタッチデバイス向けUIのWinJS.UI.TimePickerを利用する

Windows 8 Developer Preview の機能についてのTIPSを今回も紹介する。HTML+JSでネイティブアプリが作成できるWinJSだが、こちらで利用できるUIコンポーネントには以下の分類がある。

HTML+CSS で表現できる既存のUIコンポーネント（ボタン等）は、そのままHTML+JSを利用する
タッチデバイス向けのUIコンポーネントは、HTML5の拡張属性 data-XXXX を利用する

今回は、タッチデバイス向けのUIコンポーネントのうち、WinJS.UI.TimePicker を利用して紹介する。

サンプル

早速サンプルを紹介する。Windows 8 Developer Preview でWinJS向けの新規プロジェクトを作成し、以下のソースコードを記述する。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WinWebApp3</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <script src="/winjs/js/ui.js"></script>
    <script src="/winjs/js/controls.js"></script>
    <!-- WinWebApp3 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            WinJS.UI.processAll();
        }
</script>
</head>
<body>
    <div data-win-control="WinJS.UI.TimePicker" data-win-options="{minuteIncrement: 15}">
    </div>
</body>
</html>

サンプルコードで注意して頂きたい点は、data-win-control でUIコンポーネントを指定している点と、data-win-options でUIコンポーネントのオプションを指定している点だ。
この様な<div>タグを配置したのち、windows.onload 等で WinJS.UI.processAll() を利用してUIコンポーネントを活性化する。当該処理後にタッチデバイス向けのUIコンポーネントが利用可能だ。