共用方式為


逐步解說:在 Windows 市集應用程式中使用 LightSwitch 資料

遵循這個逐步解說中,您可以學習如何建立或設定 Windows 市集 應用程式或支援開放式資料通訊協定 (OData) 使用來自所有 Visual Studio LightSwitch 應用程式資料的其他應用程式。

必要條件

若要完成這個逐步解說中,您必須在 Windows 8的 Visual Studio 2012 。 您也需要下載 Microsoft MSDN 範例庫 網站上的 Contoso 架構應用程式,並遵循設定位於 readme.txt 的指令檔。 如果您不會建立 Windows 市集 應用程式之前,系統會提示您得到程式開發人員授權,當您建立 Windows 市集 應用程式的專案。

公開 OData 資料來源

  1. 在功能表列上,選取 [檔案], [開啟], [專案/位置]。

  2. 在 [開啟專案] 對話方塊中,瀏覽至 ContosoConstruction.sln 檔案,然後將它開啟。

  3. 在 [方案總管],開啟 [內容] 的捷徑功能表,然後選取 [開啟]。

  4. 在 [應用程式設計工具],選取 [應用程式類型] 索引標籤。

  5. 在 [用戶端] 區段中,選取 [網路] 選項按鈕。

    當 OData 得到,此程序會公開兩個 Contoso 架構應用程式的資料來源。

建立 Windows 應用程式存放區

  1. 在功能表列上選擇 [檔案]、[加入]、[新的專案]。

  2. 在 [JavaScript] 的專案類型清單中,選取 [施用分期]。

  3. 在 [名稱] 文字方塊中,指定 ContosoProjects,然後選取 [確定] 按鈕。

    [ContosoConstruction] 專案加入至方案。

加入指令碼程式庫

  1. 在功能表列上,選取 [工具], [程式庫封裝管理員], [封裝管理員主控台]。

    [封裝管理員主控台] 視窗隨即開啟。

  2. 在 [封裝管理員主控台] 命令提示字元中,輸入 安裝套件 jquery,然後按 ENTER 鍵。

  3. 在命令完成後,請移至 安裝套件 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 = "http://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. 在 [功能] 索引標籤上,選取 [私人網路 (用戶端和伺服器)] 核取方塊。

    這個程序可讓企業應用程式存取內部網路資源。 這項設定會指定從 Windows 市集的一般 Windows 市集 應用程式不是必要的。

偵錯和測試應用程式

  1. 在 [方案總管],開啟 [方案] 節點的捷徑功能表,然後選取 [內容]。

  2. 選取 [多個啟始專案] 選項按鈕。

  3. 在 [動作] 資料行中,選取 [ContosoConstruction] 和 [ContosoProjects] 專案的 [開始] 。

    重要

    確定 [ContosoContruction] 在 [ContosoProjects] 前面按啟動順序。

  4. 在 [方案總管],開啟 data.js 檔案。

  5. 在開始 return new WinJS.Promise的行,設定中斷點。

  6. 選取 F5 鍵開始偵錯。

    在抵達中斷點,應用程式會啟動載入並停止執行。

  7. 在 Contoso 架構應用程式的瀏覽器視窗中,複製位址列的通訊埠編號。

    通訊埠編號是依照 URL 的 http://localhost: 的數值。

  8. 在 [直接] 視窗,輸入 odataUrl = http://localhost:#####/ApplicationData.svc/Projects替代通訊埠編號 #####,然後按 ENTER 鍵。

  9. 選取 F5 鍵繼續載入 Contoso 專案應用程式。

    Contoso 專案應用程式隨即出現。

  10. 選取 [所有專案] 按鈕顯示 Contoso 架構應用程式的專案清單。

後續步驟

當您準備好部署應用程式時,您必須個別地為每個專案。 首先,您要發行 LightSwitch 應用程式加入至您的實際執行伺服器。 在 LightSwitch 部署應用程式之後,而且您知道實際執行伺服器的 OData 服務的 URL,您在更新 data.js 檔案的通訊埠編號 Windows 市集 應用程式,然後在您部署之前

請參閱

其他資源

將 LightSwitch 當做資料來源

HOW TO:部署 3 層式應用程式

HOW TO:部署 Windows 應用程式存放區