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

Использование JavaScript в примере Bing Maps Trip Optimizer

  • Статья

Часть кода приложения Bing Maps Trip Optimizer, написанная на языках HTML и JavaScript, определяет пользовательский интерфейс. Пользовательский интерфейс собирает местоположения от пользователя и показывает самый короткий маршрут между всеми местоположениями в элементе управления AJAX службы Bing Maps. В этом документе поясняется, как организована часть приложения, написанная на языке JavaScript, и описывается способ взаимодействия между локальным и веб-контекстом. В нем также рассматриваются некоторые ключевые точки миграции, которые необходимо иметь в виду.

JavaScript-часть приложения использует стандартный код CSS, HTML и JavaScript для определения пользовательского интерфейса. В данном документе не приведено подробное описание этих элементов. Однако в нем объясняются элементы, которые обеспечивают отличие веб-приложения JavaScript от JavaScript-приложения Магазин Windows.

Примечание

Пример кода, соответствующий этому документу, входит в состав примера приложения Bing Maps Trip Optimizer.

Содержание этой статьи

  • Локальный контекст и веб-контекст

  • Создание ссылки на веб-контекст в локальном контексте

  • Взаимодействие между контекстами

  • Переход с версии ActiveX

  • Следующие шаги

Локальный контекст и веб-контекст

Приложение Магазин Windows на базе JavaScript содержит по крайней мере одну HTML-страницу. Эта страница и все остальные страницы, входящие в состав самого приложения, обычно выполняются в локальном контексте приложения. При использовании iframe для перехода к удаленной странице эта страница выполняется в веб-контексте и имеет ограниченный доступ к системе. Дополнительные сведения о различных ограничениях и возможностях, доступных на страницах в локальном и веб-контексте, см. в разделе Features and restrictions by context.

Bing Maps Trip Optimizer разделяет пользовательский интерфейс на две пары файлов HTML, CSS и JavaScript. Нам представляется, что отделение кода, ссылающегося на Среда выполнения Windows, от кода, ссылающегося на Интернет, упрощает поддержку приложения. Файлы default.html, default.css и default.js ссылаются на Среда выполнения Windows — в том числе на пользовательский компонент Среда выполнения Windows C++, — но им запрещен доступ к Интернету. Файлы default.html, default.css и default.js представляют главную страницу приложения. Файлы web.html, web.css и web.js имеют доступ к Интернету, но не к Среда выполнения Windows. Содержимое файла web.html представляет собой встроенный фрейм локального контекста.

На следующем рисунке показана связь между локальным контекстом и веб-контекстом. Взаимодействие этих контекстов обсуждается далее в этом документе.

Локальный и веб-контексты

Примечание о безопасностиПримечание по безопасности

Поддержание веб-кода в отдельном модуле также позволяет повысить безопасность приложения.По возможности следует проверять данные, получаемые в локальном контексте из веб-контекста, чтобы свести до минимума вероятность возникновения уязвимостей системы безопасности, таких как переполнение буфера.

[Наверх]

Создание ссылки на веб-контекст в локальном контексте

Тег body локального контекста (default.html) определяет тег встроенного фрейма (iframe), который содержит веб-контекст (web.html).

<iframe id="mapFrame" src="ms-appx-web:///html/web.html" style="position: absolute; left: 0px; width: 100%; top: 0px; height: 100%; overflow: hidden"></iframe>

При создании ссылки на файл кода в JavaScript-приложении Магазин Windows важно использовать следующий синтаксис:

src="ms-appx-web://<package-name>/<file-name>"

Можно опустить часть <package-name>, если целевой файл содержится в одном пакете с вызывающим файлом. Имя пакета можно найти в манифесте приложения. Для этого в Visual Studio откройте файл package.appxmanifest и перейдите на вкладку Упаковка. Дополнительные сведения о функциях навигации, которые впервые реализованы в приложениях Магазин Windows, написанных на языке JavaScript, см. в разделе Quickstart: Using single-page navigation.

[Наверх]

Взаимодействие между контекстами

Для взаимодействия локального и веб-контекста используется обмен сообщениями между документами. Прежде чем контексты смогут взаимодействовать, они должны зарегистрироваться для получения событий сообщений. В каждом из файлов default.html и web.html определяется функция onLoad для свойства onload тега body. Обе функции onLoad вызывают метод addEventListener для прослушивания событий типа message и перенаправления соответствующих сообщений в функцию receiveMessage. В следующем примере показана функция onLoad для локального контекста.

function onLoad() {
    "use strict";
    window.addEventListener("message", receiveMessage, false);
}

Важно!

Приложение Bing Maps Trip Optimizer использует обмен сообщениями между документами, поскольку один контекст не может напрямую обращаться к модели DOM другого контекста.

Завершив регистрацию для получения событий сообщений, контексты могут использовать для обмена данными метод postMessage. Этот метод отправляет сообщение между документами, которое перенаправляется обработчику событий сообщений — функции receiveMessage — другого контекста. Поскольку сообщения между документами являются текстовыми, контекст приложения и веб-контекст используют функцию JSON.stringify для сериализации сообщений в текст JSON. Получив сообщение, контекст вызывает функцию JSON.parse для десериализации полей из текста JSON.

Чтобы продемонстрировать взаимодействие контекстов, рассмотрим обращение веб-контекста к локальному контексту для инициализации пользовательского компонента Среда выполнения Windows C++. (Не забудьте, что веб-контекст не может взаимодействовать с компонентом Среда выполнения Windows напрямую.) В ходе инициализации вызывается определенная в веб-контексте функция onLoad с именем web.js.

web.js

// Called when the page loads.
function onLoad() {
    "use strict";
    // Hook to main frame for incoming messages.
    window.addEventListener("message", receiveMessage, false);

    // Disable input.
    disableElement(inputArea, true);

    // Load the C++ component.
    optimizerLoad();

    // Load a default map.
    Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', {
        callback: function () {

            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
                mapTypeId: "r",
                center: new Microsoft.Maps.Location(45.5, -80.5),
                zoom: 4,
                enableClickableLogo: false,
                enableSearchLogo: false,
                customizeOverlays: true,
                showBreadcrumb: true
            });
        }
    });

    // Reset waypoints.
    resetWaypoints();
}

Функция onLoad вызывает функцию optimizerLoad. Функция optimizerLoad взаимодействует с локальным контекстом для инициализации компонента Среда выполнения Windows C++.

web.js

function optimizerLoad() {
    "use strict";
    var message = { "invoke": "load" };
    window.parent.postMessage(JSON.stringify(message), "*");
}

Чтобы обеспечить загрузку обоих контекстов перед созданием компонента Среда выполнения Windows, загрузка компонента Среда выполнения Windows начинается из веб-контекста, а не напрямую из локального контекста.

Функция receiveMessage в локальном контексте выполняет синтаксический анализ сообщения и перенаправляет вызов к соответствующему обработчику сообщений. В этом случае в поле invoke десериализованного объекта JavaScript находится значение "load", поэтому локальный контекст вызывает функцию optimizerLoad.

default.js

function receiveMessage(message) {
    "use strict";
    // Verify event origin.
    if (message.origin !== "ms-appx-web://microsoft.sdksamples.tripoptimizer.js") {
        return;
    }

    var data = JSON.parse(message.data);
    if (data.invoke === "load") {
        optimizerLoad();
    } else if (data.invoke === "optimizeTrip") {
        optimizerOptimizeTrip(
            data.locations,
            data.travelMode,
            data.optimize,
            data.bingMapsKey,
            data.alpha,
            data.beta,
            data.rho,
            data.iterations,
            data.parallel);
    } else if (data.invoke === "cancel") {
        optimizerCancel();
    } else if (data.invoke === "alert") {
            // Show message dialog.            
            new Windows.UI.Popups.MessageDialog(data.message).showAsync().then();
    }
}

Подробное описание функции optimizerLoad в локальном контексте см. в разделе Взаимодействие кода JavaScript и C++ в примере Bing Maps Trip Optimizer.

[Наверх]

Переход с версии ActiveX

Сведения о переходе с версии ActiveX приложения Bing Maps Trip Optimizer к приложению Магазин Windows см. в разделе Перенос существующего кода в примере Bing Maps Trip Optimizer.

[Наверх]

Следующие шаги

Чтобы узнать, как приложение Bing Maps Trip Optimizer использует C++ для выполнения операций с большим объемом вычислений и, таким образом, повышает общую производительность, прочтите раздел Использование C++ в примере Bing Maps Trip Optimizer.

[Наверх]

См. также

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

Create your first Windows Store app using JavaScript