逐步解說:在 Windows 市集應用程式中使用 LightSwitch 資料
遵循這個逐步解說中,您可以學習如何建立或設定 Windows 市集 應用程式或支援開放式資料通訊協定 (OData) 使用來自所有 Visual Studio LightSwitch 應用程式資料的其他應用程式。
必要條件
若要完成這個逐步解說中,您必須在 Windows 8的 Visual Studio 2012 。 您也需要下載 Microsoft MSDN 範例庫 網站上的 Contoso 架構應用程式,並遵循設定位於 readme.txt 的指令檔。 如果您不會建立 Windows 市集 應用程式之前,系統會提示您得到程式開發人員授權,當您建立 Windows 市集 應用程式的專案。
公開 OData 資料來源
在功能表列上,選取 [檔案], [開啟], [專案/位置]。
在 [開啟專案] 對話方塊中,瀏覽至 ContosoConstruction.sln 檔案,然後將它開啟。
在 [方案總管],開啟 [內容] 的捷徑功能表,然後選取 [開啟]。
在 [應用程式設計工具],選取 [應用程式類型] 索引標籤。
在 [用戶端] 區段中,選取 [網路] 選項按鈕。
當 OData 得到,此程序會公開兩個 Contoso 架構應用程式的資料來源。
建立 Windows 應用程式存放區
在功能表列上選擇 [檔案]、[加入]、[新的專案]。
在 [JavaScript] 的專案類型清單中,選取 [施用分期]。
在 [名稱] 文字方塊中,指定 ContosoProjects,然後選取 [確定] 按鈕。
[ContosoConstruction] 專案加入至方案。
加入指令碼程式庫
在功能表列上,選取 [工具], [程式庫封裝管理員], [封裝管理員主控台]。
[封裝管理員主控台] 視窗隨即開啟。
在 [封裝管理員主控台] 命令提示字元中,輸入 安裝套件 jquery,然後按 ENTER 鍵。
在命令完成後,請移至 安裝套件 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 應用程式
在 [方案總管],開啟 default.html 檔案。
在 WinJS references 區段下的區段中,加入下列參考:
<!-- jQuery references --> <script src="/Scripts/jquery-1.7.1.js"></script> <!-- datajs references --> <script src="/Scripts/datajs-1.0.2.js"></script>
在 [方案總管],展開 [js] 節點,接著開啟 default.js 檔。
在 var app = WinJS.Application; 行下面,加入下列變數:
var OData = window.OData;
在 [方案總管],開啟 data.js 檔案。
使用下列程式碼取代 sampleGroups 區段中的程式碼:
var sampleGroups = [ { key: "allProjects", title: "All Projects", subtitle: "All Contoso projects.", backgroundImage: darkGray }, ];
註解中 // 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 存放區應用程式指定功能
在 [方案總管],開啟 package.appxmanifest 檔案。
在 [功能] 索引標籤上,選取 [私人網路 (用戶端和伺服器)] 核取方塊。
這個程序可讓企業應用程式存取內部網路資源。 這項設定會指定從 Windows 市集的一般 Windows 市集 應用程式不是必要的。
偵錯和測試應用程式
在 [方案總管],開啟 [方案] 節點的捷徑功能表,然後選取 [內容]。
選取 [多個啟始專案] 選項按鈕。
在 [動作] 資料行中,選取 [ContosoConstruction] 和 [ContosoProjects] 專案的 [開始] 。
重要
確定 [ContosoContruction] 在 [ContosoProjects] 前面按啟動順序。
在 [方案總管],開啟 data.js 檔案。
在開始 return new WinJS.Promise的行,設定中斷點。
選取 F5 鍵開始偵錯。
在抵達中斷點,應用程式會啟動載入並停止執行。
在 Contoso 架構應用程式的瀏覽器視窗中,複製位址列的通訊埠編號。
通訊埠編號是依照 URL 的 http://localhost: 的數值。
在 [直接] 視窗,輸入 odataUrl = http://localhost:#####/ApplicationData.svc/Projects替代通訊埠編號 #####,然後按 ENTER 鍵。
選取 F5 鍵繼續載入 Contoso 專案應用程式。
Contoso 專案應用程式隨即出現。
選取 [所有專案] 按鈕顯示 Contoso 架構應用程式的專案清單。
後續步驟
當您準備好部署應用程式時,您必須個別地為每個專案。 首先,您要發行 LightSwitch 應用程式加入至您的實際執行伺服器。 在 LightSwitch 部署應用程式之後,而且您知道實際執行伺服器的 OData 服務的 URL,您在更新 data.js 檔案的通訊埠編號 Windows 市集 應用程式,然後在您部署之前