ＳＱＬの窓 イラストAC フリー素材
<< Three.js : 平面、球面、フォントと来て… | TOP | Win8 Metro(JS) : Role 属性 >>

2012年03月13日

Windows8 Metro(JS) : ListView の処理

 
サンプルコードからしか正しい情報を得る事ができない事が解りました。
Microsoft のサイトのドキュメントは相当古いようです。VS11 もまだまだ
未完成の部分が多いようです。

プロパティはデバッグ中に探す事ができますが、構文は勘です。サンプル
のパターンをあてはめるか、直接API のコードを読むしか無いようです。
default.html 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ListView</title>
    <!-- WinJS references -->
    <link href="winjs/Css/ui-dark.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="WinJS/js/base.js"></script>
    <script type="text/javascript" src="WinJS/js/ui.js"></script>
    <script type="text/javascript" src="WinJS/js/binding.js"></script>
    <script type="text/javascript" src="WinJS/js/animations.js"></script>
    <script type="text/javascript" src="WinJS/js/uicollections.js"></script>
    <script type="text/javascript" src="WinJS/js/wwaapp.js"></script>
    <!-- ListView references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
    <script>

            var dataArray = [
            { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
            { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
            { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
            { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
            { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
            { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
            { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
            { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
            { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

            function listAll() {

                Debug.writeln("listAll");

                var lvObject = WinJS.UI.getControl(document.getElementById("basicListView"));
                var binding = lvObject.dataSource.createListBinding();
                var fetchTarget;

                fetchTarget = binding.first().then(function (item) {
                    Debug.writeln(item.data.text);
                    Debug.writeln(item.data.title);
                });

                while (fetchTarget._state == 4) {
                    fetchTarget = binding.next().then(function (item) {
                        Debug.writeln(item.data.text);
                        Debug.writeln(item.data.title);
                    });
                }

                binding.release();
            }

    </script>
</head>
<body>
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div style="width: 180px;padding: 10px;">

        <img style="width: 60px; height: 60px;" 
                data-win-bind="alt: title; src: picture" />
        <div>
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>       
    
<div id="basicListView" 
    data-win-control="WinJS.UI.ListView"
    data-win-options="{dataSource: dataArray, itemRenderer: mediumListIconTextTemplate  }">
</div>
<input id="Button1" type="button" value="一覧表示" onclick="listAll();"/>

</body>
</html>
default.js 

(function () {
    'use strict';

    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            var lvObject = WinJS.UI.getControl(document.getElementById("basicListView"));
            // 配列を取得
            var selectedItems = lvObject.selection.getAllIndices();
            if (selectedItems.length === 0) {
                Debug.writeln("選択されていません");
            }
            Debug.writeln("OK");
            // 初期選択
            lvObject.selection = [3];
            Debug.writeln(lvObject.selection);
            Debug.writeln(lvObject.selection.getAllIndices());

            lvObject.addEventListener("selectionchanged", listViewChange, false );
        }
    }

    // *****************************************************************
    // 選択が変更されたアイテムの取得
    // *****************************************************************
    function listViewChange() {

        var lvObject = WinJS.UI.getControl(document.getElementById("basicListView"));
        var selectedItems = lvObject.selection.getAllIndices();
        if (selectedItems.length === 1) {
            var binding = lvObject.dataSource.createListBinding();
            binding.fromIndex(selectedItems[0]).then(function (item) { 
                Debug.writeln( item.data.text );
                Debug.writeln( item.data.title );
                binding.release();
            });
        }

    }

    function initialize() {
        Debug.writeln("initialize");
        WinJS.UI.processAll();
    }

    // すべてのJavaScriptファイルとCSSファイルをロードした後DOMContentLoadedイベントが発生します
    // 画像そのものはまだロードされていません。画像そのものが必要な場合は『load』イベントを利用します
    document.addEventListener("DOMContentLoaded", initialize, false);

    WinJS.Application.start();
})();
【オワコンの最新記事】
posted by at 2012-03-13 17:31 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Powered by Seesaa