チュートリアル: Windows ストア アプリでの LightSwitch データの使用

  • [アーティクル]

このチュートリアルに従って作業すると、Visual Studio LightSwitch のアプリケーションからデータを実行するには、Open Data Protocol (OData) をサポートする Windows ストア アプリケーションまたは他のアプリケーションを作成または構成する方法について学習できます。

必須コンポーネント

このチュートリアルを完了するには、Windows 8 で Visual Studio 2012 が実行されている必要があります。Microsoft Web サイトの MSDN サンプル ギャラリーから Contoso Construction アプリケーションをダウンロードして、readme.txt ファイルの設定手順に従う必要もあります。以前に Windows ストア アプリケーションを作成したことがない場合は、Windows ストア アプリケーションのプロジェクトを作成するときに開発者ライセンスの取得を求めるメッセージが表示されます。

OData データ ソースを公開するには

  1. メニュー バーで [ファイル]、[開く]、[Project/Location] (プロジェクト/場所) の順に選択します。

  2. [プロジェクトを開く] ダイアログ ボックスで、ContosoConstruction.sln ファイルを参照し、ファイルを開きます。

  3. ソリューション エクスプローラーで、[プロパティ] のショートカット メニューを開き、[開く] を選択します。

  4. アプリケーション デザイナーで、[アプリケーションの種類] タブをクリックします。

  5. [クライアント] セクションで、[Web] オプション ボタンを選択します。

    この手順では、OData フィードとして Contoso Construction アプリケーションの両方のデータ ソースを公開します。

ストア Windows アプリケーションを作成するには

  1. メニュー バーで [ファイル] をクリックし、[追加] を選択し、[新しいプロジェクト] をクリックします。

  2. JavaScript のプロジェクトの種類の一覧で、[分割アプリケーション] を選択します。

  3. [名前] ボックスに「ContosoProjects」と入力し、[OK] をクリックします。

    ContosoConstruction プロジェクトがソリューションに追加されます。

スクリプト ライブラリを追加するには

  1. メニュー バーで、[ツール]、[ライブラリ パッケージ マネージャー]、[パッケージ マネージャー コンソール] の順に選択します。

    [パッケージ マネージャー コンソール] ウィンドウが表示されます。

  2. [パッケージ マネージャー コンソール] コマンド プロンプトに、「install-package jquery」と入力し、Enter キーを押します。

  3. コマンドが完了したら、「install-package datajs」と入力し、Enter キーを押します。

    コマンドが完了したら、ソリューション エクスプローラーのスクリプト フォルダーに次の JavaScript ファイルが表示されます。

    • datajs-1.0.2.js

    • datajs-1.0.2.min.js

    • jquery-1.7.1.js

    • jquery-1.7.1.min.js

    • jquery-1.7.1.-vsdoc.js

Windows アプリケーションのストアを変更するには

  1. ソリューション エクスプローラーで、default.html ファイルを開きます。

  2. WinJS references セクションで、次の参照を追加します。

    <!-- jQuery references --> 
  <script src="/Scripts/jquery-1.7.1.js"></script> 
  <!-- datajs references --> 
  <script src="/Scripts/datajs-1.0.2.js"></script>

  3. ソリューション エクスプローラーで、[js] ノードを展開し、default.js ファイルを開きます。

  4. var app = WinJS.Application; 行の下に次の変数を追加します。

    var OData = window.OData;

  5. ソリューション エクスプローラーで、data.js ファイルを開きます。

  6. sampleGroups セクションのコードを次のコードで置き換えます。

    var sampleGroups = [ 
        {
            key: "allProjects", title: "All Projects", subtitle: "All Contoso projects.",
            backgroundImage: darkGray
        },
    ];

  7. コメント // TODO: Replace the data with your real data. の後ろにある関数を探して、既存のコードを次のコードと置き換えます。

    //Generic function for loading data via a odata url
    function loadData(data, odataUrl, dataLoaded) {
        if (data) {
            return WinJS.Promise.as(data);
        }
        else {
            return new WinJS.Promise(function (complete, error, progress) {
                OData.read(odataUrl,
                function (data) {
                    complete(dataLoaded(data.results));
                },
                function (dataerror) {
                    error(dataerror);
                });
            });
        }
    }


    var projectsODataUrl = "https://localhost:#####/ApplicationData.svc/Projects";
    //TODO: Replace projectsODataUrl with url for deployed OData service
    //  before publishing this application.
    var _projects;
    //Loads projects
    function loadProjects() {
        loadData(_projects, projectsODataUrl, function (results) {
            _projects = results;
            return _projects;
        }).then(function (projects) {
            var items = [];

            $.each(projects, function (l, e) {
                var notes;
                if (e.Notes === null) {
                    notes = "";
                }
                else {
                    notes = e.Notes;
                }
                items.push({
                    displayName: e.ProjectName, subtitle: "Estimate: $" +
                        e.OriginalEstimate, description: "", content: notes
                });
            });
            showProjects(items.sort(), sampleGroups[0]);
        });
    }

    //Adds projects to binding list.
    function showProjects(items, itemGroup) {
        items.forEach(function (item) {
            list.push(
                {
                    group: itemGroup, title: item.displayName,
                    subtitle: item.subtitle, description: item.description,
                    content: item.content, backgroundImage: lightGray
                }
              )
        });
    }

    loadProjects();

Windows の機能を指定するには、アプリケーションを格納します。

  1. ソリューション エクスプローラーで、package.appxmanifest ファイルを開きます。

  2. [機能] タブで、[Private Networks (Client and Server)] (プライベート ネットワーク (クライアントおよびサーバー)) チェック ボックスをオンにします。

    この手順では、エンタープライズ アプリケーションがイントラネットのリソースにアクセスできるようにします。この設定は、Windows ストア からの一般的な Windows ストア アプリケーションでは必要ありません。

アプリケーションをデバッグしてテストするには

  1. ソリューション エクスプローラーで、[ソリューション] ノードのショートカット メニューを開き、[プロパティ] を選択します。

  2. [マルチ スタートアップ プロジェクト] オプション ボタンを選択します。

  3. [操作] 列で、[ContosoConstruction] および [ContosoProjects] プロジェクトの両方で [開始] を選択します。

    重要 : 重要

    スタートアップの順序で ContosoContruction が ContosoProjects の前にリストされていることを確認します。

  4. ソリューション エクスプローラーで、data.js ファイルを開きます。

  5. return new WinJS.Promise で始まる行で、ブレークポイントを設定します。

  6. F5 キーを押してデバッグを開始します。

    ブレークポイントに達すると、アプリケーションで読み込みが開始されてから、実行が停止されます。

  7. Contoso Construction アプリケーションが実行されているブラウザー ウィンドウで、アドレス バーにポート番号をコピーします。

    ポート番号は、URL で https://localhost: の後に続く数値です。

  8. イミディエイト ウィンドウで、odataUrl = https://localhost:#####/ApplicationData.svc/Projects を入力し、ポート番号を ##### に置き換え、Enter キーを選択します。

  9. F5 キーを押して、Contoso プロジェクト アプリケーションの読み込みを再開します。

    Contoso プロジェクト アプリケーションが表示されます。

  10. [すべてのプロジェクト] ボタンをクリックして、Contoso Construction アプリケーションからプロジェクトの一覧を表示します。

次の手順

アプリケーションを配置する準備が整ったら、各プロジェクトを個別に公開する必要があります。まず、LightSwitch アプリケーションを運用サーバーに発行します。LightSwitch アプリケーションが配置され、運用サーバーの OData サービス URL を確認したら、配置する前に Windows ストア アプリケーションの data.js ファイルのポート番号を更新します。

参照

その他の技術情報

データ ソースとしての LightSwitch

方法: 3 層アプリケーションを配置する

方法: Windows ストアのアプリケーションを配置します。