クイックスタート: 項目コンテナーの追加

[アーティクル]
03/04/2016

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

JavaScript を使って ItemContainer オブジェクトを Windows ストアアプリに追加する方法について説明します。ItemContainer は、少数の HTML マークアップまたは JavaScript コードのみを含む簡単な対話型要素を作成します。このコントロールにより作成される項目は、アニメーション、スワイプ、ドラッグアンドドロップ、ホバーなど、Windows の外観と一致します。

このクイックスタートでは、Repeater コントロールと ItemContainer コントロールを使って簡単な顧客データの表示を行います。また、2 つの ItemContainer コントロールを組み込む HTML <form> 要素を使う JavaScript により、Windows ストアアプリでデータ入力フォームを作成する方法について説明します。

必要条件

ナビゲーションアプリテンプレートを使って新しいプロジェクトを作る

Microsoft Visual Studio を起動します。
[スタートページ] タブで、[新しいプロジェクト] をクリックします。[新しいプロジェクト] ダイアログボックスが表示されます。
[インストール済み] ウィンドウで、[テンプレート]、[JavaScript] の順に展開し、テンプレートの種類として [Windows ストアアプリ] を選びます。JavaScript で使うことができるプロジェクトテンプレートがダイアログの中央のウィンドウに表示されます。
中央のウィンドウで、[ナビゲーションアプリケーション] プロジェクトテンプレートを選びます。
[名前] ボックスに「ItemContainer demo」と入力します。
[OK] をクリックしてプロジェクトを作ります。

ItemContainer コントロールを含む HTML を追加する

ItemContainer は、別のコントロール (たとえば、ListView コントロール) が適切ではない場合に使われる堅牢な多目的コントロールを提供します。ItemContainer は、トグルボタンのより高機能なバージョンとして適切に動作します。また、ショッピングカートユーザーインターフェイスと同様に、ドロップターゲットとして使うことができます。最も重要なのは、ItemContainer は、他のコントロール、特に Repeater と組み合わせて使用できることです。動的データを ItemContainer にバインドするために、Repeater と ItemContainer を組み合わせて使うことができます。

ItemContainer は、HTML ページで宣言を使って定義することも、ページと共に読み込まれる JavaScript を使って実行時に定義することもできます。この例では、HTML マークアップで ItemContainer を宣言により作成し、さらに Repeater コントロールでホストされる一例を示しています。

home.js ファイル (/pages/home/home.html) を開き、次の HTML マークアップを追加します。


<!-- Create an entry form for new customer data. -->
<div id="customerInput">
    <h2>Customer entry</h2><br />
    <form id="inputContainer"
        class="itemContainer">
        <input id="firstName" type="text" placeholder="First name" required /><br />
        <input id="lastName" type="text" placeholder="Last name" required /><br />
        <input id="phoneNumber" type="tel" placeholder="Phone number" /><br />
        <input id="email" type="email" placeholder="E-mail" required /><br /><br />
        <div id="contactByEmail"
            class="selectionItem"
            data-win-control="WinJS.UI.ItemContainer"
            data-win-options="{
                tapBehavior: directSelect
            }">Contact by e-mail</div><br />
        <div id="contactByPhone"
            class="selectionItem"
            data-win-control="WinJS.UI.ItemContainer"
            data-win-options="{
                tapBehavior: directSelect
            }">Contact by phone</div><br />
        <button type="submit">Submit</button>
        <button type="reset">Clear</button>
    </form>
</div>

<!-- Create a display for existing customer data -->
<div id="customerList">
    <h2>Customer list</h2><br />
    <div id="entryContainer"
        class="itemContainer"
        data-win-control="WinJS.UI.Repeater"
        data-win-options="{
            data: CustomerData.data
    }">
        <div class="customerListItem"
            data-win-control="WinJS.UI.ItemContainer">
            <b>Name:</b> <span data-win-bind="textContent: name"></span><br />
            <b>E-mail:</b> <span data-win-bind="textContent: email"></span><br />
            <b>Phone: </b> <span data-win-bind="textContent: phoneNumber"></span><br />
            <b>Contact by: </b><span data-win-bind="textContent: contactPreference"></span><br />
        </div> 
    </div>
</div>

このマークアップは、アプリのユーザーインターフェイスについて、既存の顧客データのための顧客データ入力フォーム部分と表示部分の 2 つを定義します。顧客データ入力フォームでは、<form> 要素内に 2 つの ItemContainer コントロールが含まれており、ItemContainer コントロールがリッチチェックボックスコントロールのように動作します。顧客データ表示セクションには、個別の顧客データエントリを表示するための ItemContainer を含む Repeater が格納されます。

home.css (/pages/home/home.css) を開き、次のコードを追加します。


/* Style the page so that the entry form and
display are in two separate parts of a grid. */
.maincontent {
    padding: 50px;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    -ms-grid-rows: inherit;
}

#customerInput {
    -ms-grid-column: 1;
}

#customerList {
    -ms-grid-column: 2;
}

#entryContainer {  
    overflow-y: auto;
}

.itemContainer {
    width: 500px;
    height: 350px;
}

.selectionItem {
    width: 300px;
    border: 10px;
    height: 50px;
}

/* Create a solid gray border around items
in the customer display list. */
.customerListItem {
    width: 450px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-style: solid;
    border-color: gray;
}

このスタイルでは、アプリの顧客データ入力部と顧客データ表示部を含む 2 つの部分から成るグリッドが作成されます。顧客データ入力フォームはアプリの左側、顧客データ表示は右側に示されます。

コントロールに JavaScript イベントハンドラーを適用する

このアプリは、フォームに入力された情報を取得した後、顧客データの一覧にその情報を表示します。フォームの送信後、フォームからのデータは単一の JavaScript オブジェクトに変換されます。次に、このオブジェクトは、表示されている顧客データの一覧に追加されます。

js フォルダーを右クリックした後、[追加]、[新しい JavaScript ファイル] の順にクリックします。[新しい項目の追加] ダイアログボックスで、ファイル名として data.js を指定し、[追加] をクリックします。default.html に新しいスクリプトへの参照を追加します。
```
<script src='/js/data.js'></script>
```

data.js (/js/data.js) を開いて次のコードを追加します。

(function () {
    "use strict";

    var customers = [];
    var customerList = new WinJS.Binding.List(customers);

    function Customer(customerInfo) {
        this.name = customerInfo.lastName + ", " + customerInfo.firstName;
        this.email = customerInfo.email;
        this.phoneNumber = customerInfo.phone;
        this.contactPreference = "Does not wish to be contacted";

        if (customerInfo.contactByPhone && customerInfo.contactByEmail) {
            this.contactPreference = "Contact by e-mail and phone"
        }
        else if (customerInfo.contactByPhone) {
            this.contactPreference = "Contact by phone only"
        }
        else if (customerInfo.contactByEmail) {
            this.contactPreference = "Contact by email only"
        }
    }

    WinJS.Namespace.define("CustomerData", {
        data: customerList,
        Customer: Customer
    });
})();

このコードは、顧客データを保存するためのオブジェクトである Customer と、Customer オブジェクトを保存する List である data の 2 つのメンバーを公開する新しい名前空間 CustomerData を定義します。

home.js (/pages/home/home.js) を開き、既存のコードを次のコードに置き換えます。

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

            // Apply an event handler to when the user
            // submits the form.
            var form = document.forms[0];
            form.onsubmit = function (evt) {

                // Prevent the form from refreshing the page.
                evt.preventDefault();

                // Get the customer input data from the form.
                var entryForm = evt.target;
                var entry = {
                    firstName: entryForm.firstName.value,
                    lastName: entryForm.lastName.value,
                    phone: entryForm.phoneNumber.value,
                    email: entryForm.email.value,
                    contactByEmail: entryForm.children.contactByEmail.winControl.selected,
                    contactByPhone: entryForm.children.contactByPhone.winControl.selected
                };

                // Submit the new Customer data to the list of customers.
                var customer = new CustomerData.Customer(entry);
                var entryList = document.querySelector("#entryContainer").winControl;
                entryList.data.push(customer);

                // Clear the entry form.
                entryForm.querySelector("button[type='reset']").click();
            }

            // Add additional clean-up work when the user 
            // clicks the Reset button.
            form.onreset = function (evt) {
                var entryForm = evt.target;

                // Remove any selection from the item containers.
                entryForm.children.contactByEmail.winControl.selected = false;
                entryForm.children.contactByPhone.winControl.selected = false;
            }

            // Release memory from the 'form' variable after 
            // event handlers have been applied.
            form = null;
        }
    });
})();

このコードは、<form> 要素内で宣言された 2 つのボタンにイベントハンドラーを追加します。[Submit] ボタンがクリックされると、コードは顧客入力フォームからデータを取得し、Repeater コントロールのデータソースに新しい Customer オブジェクトを追加した後、フォームをクリアします。[Reset] ボタンに適用されたイベントハンドラーは、フォーム内に含まれる 2 つの ItemContainer コントロールの選択を解除します。

F5 キーを押してサンプルを実行します。アプリが実行したら、Customer entry フォームにデータを入力し、[Submit] をクリックします。新しい ItemContainer が Customer list の下に示され、該当する顧客の情報が表示されます。アプリが依然として実行中である場合は、フォームにさらにデータを入力した後、[Reset] をクリックします。フォームがクリアされ、フォームの 2 つの ItemContainer コントロールの選択がすべて解除されます。

要約と次のステップ

このクイックスタートでは、ユーザー選択のためのリッチチェックボックスコントロール、および Repeater コントロール内の入れ子のコントロールの 2 つの方法で ItemContainer コントロールを使う方法について説明しました。また、Windows ストアアプリで JavaScript と共に HTML <form> 要素を使う方法について説明しました。

ItemContainer コントロールは、ドラッグアンドドロップのいずれのターゲットとしても使うことができます。ただし、この記事ではその方法については説明しません。

Repeater コントロールの使用方法について詳しくは、「クイックスタート: リピータコントロールの追加」を参照してください。

ドラッグアンドドロップ機能を作成する方法について詳しくは、「ListView で並べ替え、ドラッグ操作、ドロップ操作を有効にする方法」をご覧ください。

クイック スタート: 項目コンテナーの追加

必要条件

要約と次のステップ

その他のリソース

クイックスタート: 項目コンテナーの追加