演练：在 Windows 应用商店应用程序中使用 LightSwitch 数据

2013-02-21

遵循此演练中，您可以了解如何创建或配置 Windows 应用商店 app 或支持开放式数据协议的其他应用程序(odata)使用来自所有 Visual Studio LightSwitch 应用程序的数据。

系统必备

为了完成本演练，您必须在 Windows 8 上运行 Visual Studio 2012。您还需要可从 Microsoft 网站上下载 MSDN示例库并遵循 readme.txt 文件中的安装指令。如果您是首次创建 Windows 应用商店应用程序，则在您创建 Windows 应用商店应用程序的项目时将提示您获取开发人员许可证。

公开 OData 数据源

在菜单栏上，依次选择**“文件”、“打开”和“项目/位置”**。
在**“打开项目”**对话框中，请浏览找到 ContosoConstruction.sln 文件，然后打开该文件。
在**“解决方案资源管理器”中，打开“属性”的快捷菜单，然后选择“打开”**。
在**“应用程序设计器”中选择“应用程序类型”**选项卡。
在**“客户端”部分中，选择“Web”**选项按钮。

此过程公开两个 Contoso 构造应用程序作为 OData 源的数据源。

创建 Windows 存储 app

在菜单栏上，选择**“文件”菜单上，“添加”和“新建项目”**。
在**“JavaScript”的项目类型列表中，请选择“拆分应用程序”**。
在**“名称”文本框中，请指定 SqlRuleUtils.cs，然后选择“确定”**按钮。

ContosoConstruction 项目被添加到解决方案。

添加脚本库

在菜单栏上，依次选择**“工具”、“库包管理器”、“包管理器控制台”**。

“包管理器控制台” 窗口打开。
在**“程序包管理器r控制台”**命令提示处输入 install-package jquery，然后选择 Enter 键。
在命令完成后，输入 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 存储 app

在**“解决方案资源管理器”**中打开默认 .xaml 文件。

在 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”**节点，然后打开默认的 .js 文件。
在 var app = WinJS.Application; 行下，添加以下变量：
```
var OData = window.OData;
```
在**“解决方案资源管理器”**中打开数据 .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 = "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 若要指定函数中存储 app

在**“解决方案资源管理器”**中，打开包 appxmanifest 文件。
在**“功能”选项卡中，选择“专用网络（客户端和服务器）”**复选框。

此过程启用访问 Intranet 资源的企业应用程序。此设置不需要从 Windows 应用商店中的典型 Windows 应用商店应用程序。

调试并测试应用程序

在**“解决方案资源管理器”中，打开“解决方案”节点的快捷菜单，然后选择“属性”**。
选择**“多启动项目”**选项按钮。
在**“操作”列中，为“ContosoConstruction”** 项目和**“ContosoProjects”项目选择“启动”**。

重要事项

确保“ContosoContruction”按启动顺序列在“ContosoProjects”前。
在**“解决方案资源管理器”**中打开数据 .js 文件。
在启动 return new WinJS.Promise 的行上，设置一个断点。
选择 F5 键开始调试。

应用程序将开始加载，然后在到达该断点时停止运行。
在 Contoso Construction 应用程序所运行的浏览器窗口中，将从“地址栏”复制端口号。

端口号是以下 https://localhost: 在 URL 中的数值。
在**“立即”**窗口中，输入 odataUrl = https://localhost:#####/ApplicationData.svc/Projects，将端口号替换为 #####，然后选择 Enter键。
选择 F5 键恢复加载 Contoso 项目应用程序。

Contoso 项目应用程序随即显示。
选择**“所有项目”**按钮显示 Contoso 构造应用程序的项目的列表。