みなさんこんにちは！
今日は、WinJSライブラリコントロールについて、その助けを借りてアプリケーションを作成するときに知っておく必要のある主なことについて説明します。
現在のバージョンのWinJSライブラリは、base.jsとui.jsの2つの部分で構成されています。それぞれ、多くの基本的な機能とコントロールの作成とそれらの操作を行います。 コントロールのスタイルを設定するために、ライブラリにはui-light.cssおよびui-dark.cssスタイルセットも付属しています。
WinJSライブラリに含まれるメインコントロールを使用して、ui-partを理解し、WinJSを操作するために必要な基本事項についても考えてみましょう。
WinJSライブラリに含まれる主要なコントロール
| 制御 | 説明 | ビジュアルディスプレイ |
| Appbar | コマンドのセットがあるアプリケーションパネル。 |  |
| バックボタン | 前の画面に戻るには「戻る」ボタン。 Windows Phoneには、ハードウェアまたはソフトウェアが組み込まれています。 |  |
| デイトピッカー | 日付を選択するコントロール。 月、日、年を選択できます。 |  |
| フリップビュー | FlipViewコントロールは、アイテムのコレクションを表示するために使用されます。 一度に1つのオブジェクトのみが表示されます。 |  |
| フライアウト | フライアウトコントロールは、ページにポップアップを表示するために使用されます。 また、さまざまな警告、メッセージの表示にも使用できます。 |  |
| リストビュー | ListViewコントロールは、WinJSライブラリの主要な要素の1つです。 これにより、ファイル、写真、映画などのオブジェクトのさまざまなリストを表示できます。 |  |
| アイテムコンテナ | ドラッグ、スクイーズ、およびドラッグできる要素を作成します。 アイテムを表示する必要があるときにItemContainerを使用しますが、ListViewコントロールのすべての機能が必要なわけではありません。 |  |
| ナビバー | ナビゲーションコマンドを表示するAppBarアプリケーションパネルタイプ。 |  |
| 格付け | 割り当てられた評価を入力および表示できます。 デフォルトでは、適切な星の数を選択することで、1〜5の評価を設定できます。 |  |
| 繰り返す | データセットとテンプレートに基づいてHTMLコードを生成します。 実際-追加のListView機能のない単純なリスト。 |  |
| 検索ボックス | 検索クエリを実行し、提案されたオプションを選択できます。 |  |
| セマンティックズーム | ユーザーは、子コントロールによって提供される2つの異なるスケールビューを切り替えることができます。 1つの子コントロールはズームアウトビューを提供し、もう1つの子コントロールはズームアウトビューを提供します。 |  |
| タイムピッカー | ユーザーが時間を選択できるようにします。 時間、分、時刻（AM / PM）を選択できます |  |
| ToggleSwitch | これは、HTMLのチェックボックス要素に類似しています。 アイテムを有効または無効にします。 |  |
| ツールチップ | フォーマットされたコンテンツ（画像やリッチテキストなど）をサポートするツールチップを表示して、オブジェクトに関する詳細情報を提供します。 |  |
| x-ms-webview | HTMLコンテンツを表示します。 このコントロールを使用して、アプリケーションのWebページを表示できます。 |  |
利用可能なすべてのコントロールのリストは、 ここにあります 。
メインコントロールに会いました。今度は、WinJSライブラリを接続し、アプリケーションにコントロールを追加する方法を理解します。
WinJSライブラリを接続する方法
WinJSライブラリを接続するには、アプリケーションのメインHTMLファイルで3つのリンクを指定するだけで十分です。
Windowsのライブラリリンク：
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.2.0/js/base.js"></script> <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
Windows Phoneのライブラリリンク：
<link href="/css/ui-themed.css" rel="stylesheet"/> <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script> <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
注意してください：
WinJS for WindowsおよびWindows Phoneアプリケーションへのリンクは、バージョンを含めて異なります。
HTMLファイルで指定されるリンクの1つは、アプリケーションで使用されるテーマを決定します。 Windows用のWinJSライブラリには、ダーク（ui-dark.css）とライト（ui-light.css）の2つのテーマが含まれています。 アプリケーションのテーマを手動で選択する必要があります。 Windows Phoneを使用する場合、ui-themedを指定するか、Windowsのアプローチに類似したテーマを明示的に設定することにより、ユーザーに選択肢を提供できます。
コントロールをアプリケーションに追加する方法
WinJSライブラリのすべてのコントロールは、対応するマークアップ要素の希望の値（WinJS.UI。****）を使用してdata-win-control属性を介して設定されます。 たとえば、FlipViewを追加するには、 data-win-control属性をWinJS.UI.FlipViewに設定します。
<div id="basicFlipView" data-win-control="WinJS.UI.FlipView"></div>
WinJSライブラリは、このブロックに基づいて必要なスタイルとマークアップを持つ要素を自動的に作成します。 また、マークアップのdata-win-options属性を使用して、要素を作成するためのパラメーターを指定できます。
<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{…}"></div>
一部のコントロールには、画像ソースなどの追加データが必要です。 コントロールにデータを追加する方法を見てみましょう。
コントロールにデータを追加する方法
itemDataSourceプロパティは、コントロールに保存されているデータを決定します。 使用するデータを示すために、 data-win-options属性をitemDataSourceに設定します。
<div data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : value}"> </div>
たとえば、コントロールに画像が必要な場合、 WinJS.Binding.Listオブジェクトを使用してそれらを表すことができます 。
宣言的な記述では、データ変数はグローバルコンテキストで表示される必要があることに注意してください。
データを正しく表示するには、テンプレートを定義する必要があります。 方法を見てみましょう。
コントロールにデータを表示するためのテンプレートを定義する方法
データの表示方法を決定するには、各要素にWinJS.Binding.Templateテンプレートを指定します。 divブロックを作成し、 data-win-control属性をWinJS.Binding.Templateに設定します。
たとえば、キャプション画像を表示するためのテンプレートを定義します。
<div id="Template" data-win-control="WinJS.Binding.Template"> <!—- . --> <img data-win-bind="alt: title; src: picture" /> <div> <!-- . --> <h4 data-win-bind="innerText: title"></h4> </div> </div>
data-win-bind属性を使用してデータバインディングを定義することに注意してください。
WinJS.UIを初期化します。
そこで、コントロールを作成する方法を学びました。次に、それらを初期化する方法を理解する必要があります。
アプリケーションの起動後、 アクティブ化されたイベントが発生します。 その後、WinJSコントロールを初期化できます。 これは、 WinJS.UI.processAll関数内で発生します。
最も単純な場合、アプリケーションの起動処理機能は次のとおりです。
(function () { "use strict"; var app = WinJS.Application; app.addEventListener("activated", function (args) { WinJS.UI.processAll(); }); app.start(); })();
特定のDOMノードのみを処理する場合は、 WinJS.UI.process関数を使用します。 WinJS.UIの適切なオブジェクトを使用して、JavaScriptコードで直接コントロールを作成することもできます。
サイトリンク
コントロールリスト（HTML）
クイックスタートガイド：WinJSコントロールとスタイルの追加（HTML）
Web開発者向けのMVAモバイル開発コース
ここからMicrosoft Visual Studioをダウンロードしてください