Utilisation de JavaScript dans l'exemple de l'optimiseur de voyage Bing Maps

La partie HTML et JavaScript de l'optimiseur de voyage Bing Maps définit l'interface utilisateur. L'interface utilisateur collecte les lieux de l'utilisateur et affiche l'itinéraire le plus court pour tous ces lieux sur un contrôle AJAX de Bing Maps. Ce document décrit comment la partie JavaScript de l'application est organisée et comment le contexte local et le contexte Web communiquent ensemble. Il décrit aussi quelques points de migration principaux à prendre en compte.

La partie JavaScript utilise le CSS et HTML standard et le JavaScript pour définir l'interface utilisateur. Ce document n'illustre pas ces éléments en détail. Il illustre les éléments qui différencient une application Web JavaScript d'une application Windows Store JavaScript.

Dans cet article

• Le contexte local et le contexte Web

• Référencement du contexte Web à partir du contexte local

• Communication entre les contextes

• Migration à partir d'ActiveX

• Étapes suivantes

Le contexte local et le contexte Web

Une application de Windows Store utilisant JavaScript contient au moins une page HTML. Cette page, et toutes les autres pages que vous incluez dans l'application elle-même, fonctionne généralement dans le contexte local de l'application. Lorsque vous utilisez un iframe pour accéder à une page à distance, cette page s'exécute dans le contexte Web et dispose d'un accès limité à votre système. Pour plus d'informations sur les restrictions et fonctionnalités disponibles pour les pages des contextes locaux et Web, consultez Features and restrictions by context.

L'optimiseur de voyage Bing Maps divise l'interface utilisateur en deux paires de fichiers HTML, CSS et JavaScript. Il nous semble que la séparation du code qui référence Windows Runtime du code qui référence le Web rend l'application plus facile à gérer. Les fichiers default.html, default.css et default.js référencent Windows Runtime, qui comprend le composant Windows Runtime C++ personnalisé, mais ne peuvent pas accéder au Web. Les fichiers default.html, default.css et default.js représentent la page principale de l'application. Les fichiers web.html, web.css et web.js accèdent au Web, mais n'accèdent pas à Windows Runtime. Le contenu de web.html est un inline frame du contexte local.

L'illustration suivante montre la relation entre le contexte local et le contexte Web. Le mode de communication entre ces contextes est présenté dans la suite de ce document.

Note de sécurité
La mise à jour du code Web dans un module distinct contribue aussi à augmenter la sécurité d'une application. Dans la mesure du possible, validez les données que vous recevez dans le contexte local à partir du contexte Web afin de réduire le risque de failles de sécurité telles qu'un dépassement de mémoire tampon.

[Haut]

Référencement du contexte Web à partir du contexte local

La balise body du contexte local (default.html) définit un inline frame (iframe) qui contient le contexte Web (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>

Lorsque vous référencez un fichier de code dans votre application Windows Store JavaScript, il importe d'utiliser la syntaxe suivante :

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

Vous pouvez omettre la partie <package-name> si le fichier cible fait partie du même package que le fichier appelant. Vous pouvez rechercher le nom du package dans le manifeste de l'application. Pour cela, dans Visual Studio, ouvrez le fichier package.appxmanifest et choisissez l'onglet Packages. Pour plus d'informations sur les nouvelles fonctionnalités de navigation des applications Windows Store écrites en JavaScript, consultez Quickstart: Using single-page navigation.

[Haut]

Communication entre les contextes

Le contexte local et le contexte Web utilisent la messagerie entre documents pour communiquer. Avant que les contextes puissent communiquer, ils doivent commencer par s'inscrire aux événements de messagerie. default.html et web.html spécifient une fonction onLoad pour la propriété onload de la balise body. Les deux fonctions onLoad appellent la méthode addEventListener pour écouter les événements du type message et router ces messages à la fonction receiveMessage. L'exemple suivant montre la fonction onLoad pour le contexte local.

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

Une fois que les contextes se sont inscrits aux événements de messagerie, ils peuvent utiliser la méthode postMessage pour communiquer. Cette méthode envoie un message entre documents qui est routé au gestionnaire d'événements de message, la fonction receiveMessage, de l'autre contexte. Étant donné que les messages entre documents sont basés sur du texte, les contextes d'application et Web utilisent la fonction JSON.stringify pour sérialiser les messages en texte JSON. Lorsqu'un contexte reçoit un message, il appelle la fonction JSON.parse pour désérialiser les champs à partir du texte JSON.

Pour illustrer le mode de communication des contextes, déterminez comment le contexte Web communique avec le contexte local pour initialiser le composant Windows Runtime C++ personnalisé. (N'oubliez pas que le contexte Web ne peut pas interagir directement avec le composant Windows Runtime). La fonction onLoad définie dans le contexte web.js est appelée pendant l'initialisation.

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.
    map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
        {
            center: new Microsoft.Maps.Location(45.5, -80.5),
            mapTypeId: Microsoft.Maps.MapTypeId.auto,
            zoom: 4
        });

    // Reset waypoints.
    resetWaypoints();
}

La fonction onLoad appelle la fonction optimizerLoad. La fonction optimizerLoad communique au contexte local pour initialiser le composant Windows Runtime C++.

web.js

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

Nous initialisons le chargement du composant Windows Runtime depuis le contexte Web au lieu de le charger directement depuis le contexte local pour assurer que les deux contextes sont chargés avant la création du composant Windows Runtime.

La fonction receiveMessage dans le contexte local analyse le message et route l'appel au gestionnaire de messages approprié. Dans ce cas, le champ invoke de l'objet JavaScript désérialisé est « load ». Par conséquent, le contexte local appelle la fonction 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();
    }
}

Les détails de la fonction optimizerLoad dans le contexte local sont présentés dans Interopérabilité entre JavaScript et C++ dans l'exemple de l'optimiseur de voyage Bing Maps.

[Haut]

Migration à partir d'ActiveX

Pour plus d'informations sur la migration de la version ActiveX de l'optimiseur de voyage Bing Maps vers une application Windows Store, consultez Migration du code existant dans l'exemple de l'optimiseur de voyage Bing Maps.

[Haut]

Étapes suivantes

Lisez Utilisation de C++ dans l'exemple de l'optimiseur de voyage Bing Maps pour découvrir comment l'optimiseur de voyage Bing Maps utilise C++ pour exécuter des opérations nécessitant de nombreuses ressources de calcul et pour améliorer ainsi les performances globales.

[Haut]

Voir aussi

Autres ressources

Create your first Windows Store app using JavaScript