Usando JavaScript no exemplo de otimizador de viagem do Mapas Bing
A parte de HTML e JavaScript do Bing Maps Trip Optimizer define a interface do usuário. A interface do usuário coleta as localizações do usuário e exibe a menor rota de todas as localizações no controle AJAX do Bing Maps. Este documento descreve como a parte de JavaScript do aplicativo é organizada e como o contexto local e o contexto da Web se comunicam. Também descreve alguns dos pontos principais de migração para se ter em mente.
A parte de JavaScript usa CSS, HTML e JavaScript padrão para definir a interface do usuário. Este documento não explica esses elementos em detalhes. Mas explica os elementos que diferenciam um aplicativo Web JavaScript de um aplicativo Windows Store JavaScript.
Dica
O código de exemplo que corresponde a este documento está localizado no Exemplo do Bing Maps Trip Optimizer.
Neste artigo
O contexto local e o contexto da Web
Fazendo referência ao contexto da Web a partir do contexto local
Comunicação entre contextos
Migração do ActiveX
Próximas etapas
O contexto local e o contexto da Web
Um aplicativo Windows Store que usa o JavaScript contém, pelo menos, uma página HTML. Em geral, essa página, e algumas outras páginas que você incluir no próprio aplicativo, são executadas no contexto local do aplicativo. Quando você usa iframe para navegar para uma página remota, essa página é executada no contexto da Web e tem acesso limitado ao sistema. Para obter mais informações sobre as diferentes restrições e recursos disponíveis para páginas nos contextos local e da Web, consulte Features and restrictions by context.
O Bing Maps Trip Optimizer separa a interface do usuário em dois pares de arquivos HTML, CSS e JavaScript. Constatamos que separar o código que faz referência ao Tempo de Execução do Windows do código que faz referência à Web facilitou a manutenção do aplicativo. Os arquivos default.html, default.css e default.js fazem referência ao Tempo de Execução do Windows - isso inclui o componente C++ do Tempo de Execução do Windows — mas não acessa a Web. Os arquivos default.html, default.css e default.js representam a página principal do aplicativo. Os arquivos web.html, web.css e web.js acessam a Web, mas não acessam o Tempo de Execução do Windows. O conteúdo do web.html é um quadro embutido do contexto local.
A ilustração a seguir mostra a relação entre o contexto local e o contexto da Web. A forma como esses contextos se comunicam é abordada posteriormente neste documento.
.png "O local e contextos de web")
.gif "Observação de segurança") Observação de segurança |
|---|
Manter o código da Web em um módulo separado também ajuda a aumentar a segurança de um aplicativo. Quando possível, valide os dados recebidos no contexto local do contexto da Web a fim de minimizar a possibilidade de vulnerabilidades de segurança, como um estouro de buffer. |
[Superior]
Fazendo referência ao contexto da Web a partir do contexto local
A marca body do contexto local (default.html) define uma marca de quadro embutido (iframe) que contém o contexto da 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>
Quando você faz referência a um arquivo de código no seu aplicativo Windows Store JavaScript, é importante usar esta sintaxe:
src="ms-appx-web://<package-name>/<file-name>"
Você poderá omitir a parte <package-name> se o arquivo de destino fizer parte do mesmo pacote que o arquivo de chamada. É possível localizar o nome do pacote no manifesto do aplicativo. Para tal, no Visual Studio, abra o arquivo package.appxmanifest e escolha a guia Empacotamento. Para obter mais informações sobre os recursos de navegação que são novidade em aplicativos Windows Store gravados em JavaScript, consulte Quickstart: Using single-page navigation.
[Superior]
Comunicação entre contextos
O contexto local e o contexto da Web usam a mensagem entre documentos para se comunicar. Para que os contextos possam se comunicar, primeiro eles devem se registrar em eventos de mensagem. default.html e web.html especificam uma função onLoad para a propriedade onload da marca body. As duas funções onLoad chamam o método addEventListener para escutar eventos do tipo message e direcionar essas mensagens para a função receiveMessage. O exemplo a seguir mostra a função onLoad para o contexto local.
function onLoad() {
"use strict";
window.addEventListener("message", receiveMessage, false);
}
Importante
O Bing Maps Trip Optimizer usa a mensagem entre documentos porque um contexto não pode acessar diretamente o DOM de outro contexto.
Depois que os contextos se registram em eventos de mensagem, podem usar o método postMessage para se comunicar. Esse método envia uma mensagem entre documentos que é direcionada para o manipulador de eventos de mensagem, a função receiveMessage, do outro contexto. Como as mensagens entre documentos são baseadas em texto, o aplicativo e os contextos da Web usam a função JSON.stringify para serializar mensagens em texto JSON. Quando um contexto recebe uma mensagem, ele chama a função JSON.parse para desserializar os campos do texto JSON.
Para ilustrar como os contextos se comunicam, considere como o contexto da Web se comunica com o contexto local para inicializar o componente C++ personalizado do Tempo de Execução do Windows. (Lembre-se que o contexto da Web não pode interagir com o componente do Tempo de Execução do Windows diretamente.) A função onLoad, que está definida no contexto da Web, web.js é chamada durante a inicialização.
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();
}
A função onLoad chama a função optimizerLoad. A função optimizerLoad se comunica com o contexto local para inicializar o componente C++ do Tempo de Execução do Windows.
web.js
function optimizerLoad() {
"use strict";
var message = { "invoke": "load" };
window.parent.postMessage(JSON.stringify(message), "*");
}
É iniciado o carregamento do componente do Tempo de Execução do Windows do contexto da Web em vez de diretamente do contexto local para garantir que os dois contextos sejam carregados antes da criação do componente do Tempo de Execução do Windows.
A função receiveMessage no contexto local analisa a mensagem e direciona a chamada para o manipulador de mensagem apropriado. Nesse caso, o campo invoke do objeto JavaScript desserializado é “carga”; portanto, o local contexto chama a função 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();
}
}
Os detalhes da função optimizerLoad no contexto local serão explicados em Interoperação entre JavaScript e C++ no exemplo de otimizador de viagem do Mapas Bing.
[Superior]
Migração do ActiveX
Para obter informações sobre como migramos da versão ActiveX do Bing Maps Trip Optimizer para um aplicativo Windows Store, consulte Migrando o código existente no exemplo de otimizador de viagens do Mapas Bing.
[Superior]
Próximas etapas
Leia Usando C++ no exemplo de otimizador de viagem do Mapas Bing para saber como o Bing Maps Trip Optimizer usa C++ para executar operações de computação intensas e, dessa forma, melhorar o desempenho geral.
[Superior]