P. 1
Adotando Silverlight 2.0 - v2 - HandsOn

Adotando Silverlight 2.0 - v2 - HandsOn

|Views: 1,166|Likes:
Published by Rodrigo Peçanha

More info:

Published by: Rodrigo Peçanha on May 28, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

05/11/2014

pdf

text

original

Nesta seção, você chamará as funções do JavaScript a partir do código gerenciado, demonstrando que a
ponte JavaScript (JavaScript bridge) passa por ambos os caminhos.

No Default.aspx adicione uma referência ao Virtual Earth API

Desenhe o Caminho do Tour no Mapa

O Virtual Earth fornece uma API de desenho simples, que permite desenhar formas e linhas no mapa,
cobrindo as peças de imagem. Essa funcionalidade permite que você desenhe o caminho do Tour
selecionado sobre um mapa interativo.

Adicione as seguintes funções e declarações ao seu bloco de scripts em Default.aspx

var map = null;
var pinHtml = "

";

function GetMap(){
map = new VEMap('mapDiv');
map.SetDashboardSize(VEDashboardSize.Small);
map.LoadMap();

}

function DrawTour(lats, longs, titles) {
if (map == null)
GetMap();

map.DeleteAllShapes();

var ll, shape;
var lls = new Array(lats.length);
var centerLat = 0, centerLong = 0;

//mark destinations
for(i = 0; i < lats.length; i++){
ll = new VELatLong(lats[i], longs[i]);
lls[i] = ll;
centerLat = centerLat + ll.Latitude;
centerLong = centerLong + ll.Longitude;
shape = new VEShape(VEShapeType.Pushpin, ll);
shape.SetTitle(titles[i]);
shape.SetCustomIcon(pinHtml);
map.AddShape(shape);

28

}

//draw path
shape = new VEShape(VEShapeType.Polyline, lls);
shape.HideIcon();
shape.SetLineColor(new VEColor(30,206,34,0.5));
shape.SetLineWidth(3);
map.AddShape(shape);

//center map
centerLat = centerLat / lats.length;
centerLong = centerLong / lats.length;
var centerLatLong = new VELatLong(centerLat, centerLong);
map.SetCenterAndZoom(centerLatLong,4);

}

As funções acima fornecem o código necessário para: criar uma instância de mapa Virtual Earth,
adicionar detalhes por destinação e desenhar linhas entre as destinações baseadas nas latitudes e nas
longitudes fornecidas.

Adicione um elemento DIV à página, bem abaixo da marca do objeto.

Observe que o modo sem janelas está definido como verdadeiro na marca do objeto, o que permite a
você posicionar o DIV sobre o aplicativo Silverlight usando o CSS.

No Page.xaml.cs adicione o seguinte o método updateMap:

private void updateMap()
{

ScriptObject DrawTourScript =
(ScriptObject)HtmlPage.Window.GetProperty("DrawTour");

int cityCount = tour.Cities.Count;
City currentCity;
double[] lats = new double[cityCount];
double[] longs = new double[cityCount];
string[] titles = new string[cityCount];

for (int i = 0; i < cityCount; i++)
{

currentCity = tour.Cities[i].City;

lats[i] = currentCity.GeoCoord.Latitude;
longs[i] = currentCity.GeoCoord.Longitude;
titles[i] = string.Format("{0}, {1}", currentCity.Name,

currentCity.Country.Name);

}

DrawTourScript.InvokeSelf((object)lats, (object)longs, (object)titles);

}

O método GetProperty do objeto HtmlPage.Window é usado para recuperar uma referência à função
JavaScript na página web de hospedagem. Após executar um loop através de Cities e reunir os nomes e

29

as coordenadas, os dados são transferidos para função JavaScript mencionada. O InvokeSelf usa um
paramarray, que permite um conjunto de dinâmico de parâmetros. Se você passar diversas matrizes
como parâmetros, ele só pegará a primeira e ignorará as restantes. Para contornar isso nós
convertemos todas as matrizes em objetos.

No método ChangeTour adicione a chamada de updateMap após a definição da variável tour.

Agora ao executar o aplicativo você verá um Virtual Earth Map interativo, carregado sobre o aplicativo
Silverlight, com as destinações do tour plotadas. Além disso, agora o mapa está sincronizado com o
restante da IU e atualizará quando um tour diferente for selecionado.

Atualize o mapa com base na atração selecionada

A parte final da integração consiste em sincronizar a seleção da atração com o mapa do Virutal Earth.
Quando a Attraction estiver selecionada no Listbox, significa que queremos que a Attraction do mapa
acompanhe o AttractionsCanvas já sincronizado.

Adicione as seguintes funções ao seu bloco de scripts em Default.aspx

function GoToAttraction(latitude, longitude){
attraction = new VELatLong(latitude, longitude);
map.SetCenterAndZoom(attraction, 16);
map.SetBirdseyeScene(attraction);

}

Adicione o seguinte código ao SelectionChanged EventHandler em Page.xaml.cs.

ScriptObject GoToScript =

(ScriptObject)HtmlPage.Window.GetProperty("GoToAttraction");
GoToScript.InvokeSelf(attraction.GeoCoord.Latitude,
attraction.GeoCoord.Longitude);

Agora ao executar o aplicativo e selecionar a atração, o ListBox destacará o Attraction, o
AttractionsCanvas passará a exibição apropriada e o mapa agora exibirá a foto de um olho de pássaro no
Attraction.

30

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->