Поделиться через


Пошаговое руководство. Использование данных LightSwitch в приложении для Магазина Windows

С помощью этого пошагового руководства можно узнать, как создавать и настраивать приложение Магазин Windows или другое приложение, поддерживающее протокол OData для использования данных из любого приложения LightSwitch.

Обязательные компоненты

Чтобы выполнить это пошаговое руководство, необходимо запустить Visual Studio 2012 в Windows 8. Кроме того, необходимо загрузить приложение Contoso Construction из Коллекции примеров MSDN на веб-сайте корпорации Microsoft и выполнить инструкции по установке, указанные в файле readme.txt. Если приложение Магазин Windows создается впервые, при создании проекта для приложения Магазин Windows будет предложено получить лицензию разработчика.

Предоставление доступа к источнику данных OData

  1. В строке меню выберите Файл, Открыть, Проект и расположение.

  2. В диалоговом окне Открыть проект перейдите к файлу ContosoConstruction.sln и откройте его.

  3. В области Обозреватель решений откройте контекстное меню элемента Свойства и выберите Открыть.

  4. В области Конструктор приложений выберите ссылку Изменить свойства настольного клиента.

  5. В конструкторе Настольный клиент перейдите на вкладку Тип клиента.

  6. В разделе Клиент выберите переключатель Интернет.

    В этой процедуре в качестве каналов OData используются оба источника данных для приложения Contoso Construction.

Создание приложения для Магазина Windows

  1. В строке меню выберите Файл, Добавить, Создать проект.

  2. В списке типов проекта для JavaScript выберите Приложение с разделением.

  3. В текстовом поле Имя укажите ContosoProjects, а затем нажмите кнопку ОК.

    Проект ContosoConstruction будет добавлен в решение.

Добавление библиотек скриптов

  1. В строке меню выберите Сервис, Диспетчер библиотеки пакетов, Консоль диспетчера пакетов.

    Откроется окно Консоль диспетчера пакетов.

  2. В командной строке Консоли диспетчера пакетов введите install-package jquery и нажмите клавишу ВВОД.

  3. После выполнения команды введите install-package datajs и нажмите клавишу ВВОД.

    После выполнения команды следующие файлы 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. На вкладке Возможности установите флажок Частные сети (клиент и сервер).

    С помощью этой процедуры корпоративное приложение может получить доступ к ресурсам интрасети. Этот параметр не является обязательным для обычных приложений, входящих в Магазин Windows, из Магазин Windows.

Отладка и тестирование приложения

  1. В области Обозреватель решений откройте контекстное меню для узла Решение и выберите Свойства.

  2. Выберите переключатель Несколько запускаемых проектов.

  3. В столбце Действие выберите Запустить для проектов ContosoConstruction и ContosoProjects.

    Важно!

    Убедитесь, что ContosoContruction находится в списке запуска перед ContosoProjects.

  4. В области Обозреватель решений откройте файл data.js.

  5. В строке, которая запускает return new WinJS.Promise, установите точку останова.

  6. Нажмите клавишу F5, чтобы начать отладку.

    Приложение начнет загрузку, выполнение которой остановится при достижении точки останова.

  7. В окне браузера, где запускается приложение Contoso Construction, скопируйте из адресной строки номер порта.

    Номер порта — это числовое значение, следующее за https://localhost: в URL-адресе.

  8. В окне Интерпретация введите odataUrl = https://localhost:#####/ApplicationData.svc/Projects, заменив ##### на номер порта, а затем нажмите клавишу ВВОД.

  9. Нажмите клавишу F5, чтобы возобновить загрузку приложения проектов Contoso.

    Появится приложение проектов Contoso.

  10. Нажмите кнопку Все проекты, чтобы вывести список проектов из приложения Contoso Construction.

Следующие действия

Когда все готово для развертывания приложения, необходимо опубликовать каждый проект по отдельности. Сначала опубликуйте приложение LightSwitch на рабочем сервере. После развертывания приложения LightSwitch и выяснения URL-адреса службы OData для рабочего сервера обновите номер порта в файле data.js для приложения Магазин Windows до его развертывания.

См. также

Другие ресурсы

LightSwitch как источник данных

Практическое руководство. Развертывание трехуровневого приложения LightSwitch

Практическое руководство. Развертывание приложения для Магазина Windows.