Usar JavaScript en el ejemplo de Bing Maps Trip Optimizer
La parte de HTML y JavaScript de Optimizador de recorridos de Mapas de Bing define la interfaz de usuario. La interfaz de usuario recopila ubicaciones del usuario y muestra la ruta más corta entre todas las ubicaciones en un control AJAX de Mapas de Bing. En este documento se describe cómo se organiza la parte JavaScript de la aplicación y cómo se comunican entre sí el contexto local y el contexto web. También se describen algunos de los puntos clave de migración que se han de tener en cuenta.
La parte de JavaScript usa CSS, HTML y JavaScript estándar para definir la interfaz de usuario. Este documento no tiene en cuenta estos elementos de forma detallada. Sin embargo, explica los elementos que diferencian una aplicación web de JavaScript de una aplicación de la Tienda Windows de JavaScript.
.gif "Nota") Nota |
|---|
El código de ejemplo que corresponde a este documento se encuentra en el ejemplo del optimizador de recorridos de Mapas de Bing (Bing Maps Trip Optimizer). |
En este artículo
El contexto local y el contexto web
Hacer referencia al contexto web desde el contexto local
Comunicación entre contextos
Migración de ActiveX
Pasos siguientes
El contexto local y el contexto web
Una aplicación de la Tienda Windows con JavaScript contiene al menos una página HTML. Esa página y todas las demás páginas que incluyas en la propia aplicación normalmente se ejecutan en el contexto local de la aplicación. Cuando usas iframe para navegar a una página remota, esa página se ejecuta en el contexto web y tiene acceso limitado al sistema. Para obtener más información sobre las distintas restricciones y características disponibles para las páginas de los contextos local y web, consulta Features and restrictions by context.
Optimizador de recorridos de Mapas de Bing separa la interfaz de usuario en dos pares de archivos HTML, CSS y de JavaScript. Creímos que el hecho de separar el código que hace referencia a Windows en tiempo de ejecución del código que hace referencia a la Web simplificaba el mantenimiento de la aplicación. Los archivos default.html, default.css y default.js hacen referencia a Windows en tiempo de ejecución (esto incluye el componente Windows en tiempo de ejecución de C++ personalizado) pero no tienen acceso a la Web. default.html, default.css y default.js representan la página principal de la aplicación. Los archivos web.html, web.css y web.js tienen acceso a la Web, pero no tienen acceso a Windows en tiempo de ejecución. El contenido de web.html es un marco flotante del contexto local.
La ilustración siguiente muestra la relación entre el contexto local y el contexto web. La forma en que estos contextos se comunican se describe más adelante en este documento.
.png "Contexto local y web")
.gif "Nota de seguridad") Nota sobre la seguridad |
|---|
El mantenimiento del código web en un módulo independiente también ayuda a aumentar la seguridad de una aplicación.Cuando sea posible, valida los datos que recibes en el contexto local desde el contexto web para que puedas minimizar el riesgo de puntos vulnerables de seguridad tales como la saturación del búfer. |
[Principio]
Hacer referencia al contexto web desde el contexto local
La etiqueta body del contexto local (default.html) define una etiqueta (iframe) de marco flotante que contiene el contexto 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>
Cuando haces referencia a un archivo de código en tu aplicación de la Tienda Windows de JavaScript, es importante que uses esta sintaxis:
src="ms-appx-web://<package-name>/<file-name>"
Puedes omitir la parte de <package-name> si el archivo de destino forma parte del mismo paquete que el archivo de llamada. Puedes encontrar el nombre del paquete en el manifiesto de aplicación. Para ello, en Visual Studio, abre el archivo package.appxmanifest y elige la pestaña Empaquetado. Para obtener más información sobre las funciones de navegación que son nuevas en las aplicaciones de la Tienda Windows escritas en JavaScript, consulta Quickstart: Using single-page navigation.
[Principio]
Comunicación entre contextos
El contexto local y el contexto web utilizan mensajes entre documentos para comunicarse. Antes de que los contextos pueden comunicarse, primero deben registrarse para los eventos de mensajería. Tanto default.html como web.html especifican una función onLoad para la propiedad onload de la etiqueta body. Ambas funciones onLoad llaman al método addEventListener para escuchar los eventos del tipo message y enrutar los mensajes a la función receiveMessage. En el ejemplo siguiente se muestra la función onLoad para el contexto local.
function onLoad() {
"use strict";
window.addEventListener("message", receiveMessage, false);
}
.gif "Nota importante") Importante |
|---|
Optimizador de recorridos de Mapas de Bing utiliza mensajes entre documentos porque un contexto no puede tener acceso directo al DOM de otro contexto. |
Después de que se registren los contextos para los eventos de mensajería, pueden utilizar el método postMessage para comunicarse. Este método envía un mensaje entre documentos que se enruta al controlador de eventos de mensajes, la función receiveMessage, del otro contexto. Dado que los mensajes entre documentos están basados en texto, los contextos web y de la aplicación utilizan la función JSON.stringify para serializar los mensajes en texto de JSON. Cuando un contexto recibe un mensaje, llama a la función JSON.parse para volver a deserializar los campos de texto de JSON.
Para ilustrar cómo se comunican los contextos, piense en cómo el contexto web se comunica el contexto local para inicializar el componente de Windows en tiempo de ejecución en C++ personalizado. (Recuerde que el contexto web no puede interactuar con el componente de Windows en tiempo de ejecución directamente). La función onLoad que se define en el contexto web, web.js, se invoca durante la inicialización.
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();
}
La función onLoad llama a la función optimizerLoad. La función optimizerLoad se comunica con el contexto local para inicializar el componente de Windows en tiempo de ejecución en C++.
web.js
function optimizerLoad() {
"use strict";
var message = { "invoke": "load" };
window.parent.postMessage(JSON.stringify(message), "*");
}
Iniciamos la carga del componente de Windows en tiempo de ejecución desde el contexto web en lugar de hacerlo directamente desde el contexto local para asegurarnos de que ambos contextos estén cargados antes de crear el componente de Windows en tiempo de ejecución.
La función receiveMessage del contexto local analiza el mensaje y enruta la llamada al controlador de mensajes adecuado. En este caso, el campo invoke del objeto JavaScript deserializado es “carga”; por consiguiente, el contexto local llama a la función 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();
}
}
Los detalles de la función optimizerLoad en el contexto local se explican en Interoperar entre JavaScript y C++ en el ejemplo de Bing Maps Trip Optimizer.
[Principio]
Migración de ActiveX
Para obtener información sobre cómo migramos de la versión ActiveX de Optimizador de recorridos de Mapas de Bing a una aplicación de la Tienda Windows, consulta Migrar código existente en el ejemplo de Bing Maps Trip Optimizer.
[Principio]
Pasos siguientes
Lea Usar C++ en el ejemplo de Bing Maps Trip Optimizer para obtener información sobre cómo Optimizador de recorridos de Mapas de Bing utiliza C++ para realizar operaciones que requieren numerosos recursos de computación y mejorar el rendimiento general.
[Principio]