Programmare per flash - Parte seconda: implementare una mappa

Passiamo ora alla realizzazione del primo step: implementare una mappa di google all'interno di un swf.
Apriamo flashdevelop, dal menù Project selezioniamo new project. Ci sono diversi tipi di progetto che si possono realizzare, nel nostro caso scegliamo Flex 4 project. Nella parte destra della finestra di flashdevelop dovrebbe esserci tutta l'alberatura del progetto, clickando su src si apre la struttura della directory. Clickiamo su Main.mxml due volte per aprire il file. Verrà visualizzato qualcosa del tipo:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:Application>

Questo è lo scheletro applicativo, prima di iniziare a spiegare un po' aggiungo un paio di righe...il tutto diventa così:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
]]>
</fx:Script>
</s:Application>

Rispetto al template proposto ho aggiunto quanto compreso tra i tag <fx:script> e </fx:script>. All'interno di questi tag inseriremo la parte di AS3, ovvero il codice vero e proprio.
All'esterno dei tag fx:script andremo invece ad inserire la parte visuale (bottoni, label e quant'altro necessario). La parte visuale si potrebbe realizzare direttamente in as3, quindi alla fine si potrebbe usare solo as3 per realizzare il progetto... tuttavia preferisco tenere separata la parte di script da quella visuale.
Detto questo... si inizia :-)
Nella pagina di google map api c'è indicato come usare le varie funzioni all'interno di flash. Scarichiamo l'sdk di google da qui, decomprimiamo il file e copiamo nella cartella lib del nostro progetto la libreria di funzioni (ad oggi l'ultima versione disponibile, è la map_flex_1_20.swc). Questa è l'interfaccia verso le funzioni per la gestione delle mappe. Bisogna, quindi, indicare a FlashDevelop di utilizzare la libreria appena inserita. Dal menù project -> properties -> Compiler options inserire nell'opzione "SWC Include libraries" il path completo dove è stato inserito il file swc precedentemente estratto.
Inseriamo nel sorgente del nostro programma le direttive per includere le funzioni di google maps:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<maps:Map xmlns:maps="com.google.maps.*"
id="map"
width="100%"
height="100%"
sensor="false"
key="ABQIAAAAGLRIbGJ9z9R5jwNg-BFqjRT4o7HUAS9HNfPTIbLfF9Tm_VUYmxQvVVnUnJt-sc5edCcZvK41Q2S1wQ" />
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[

//import minimi per google maps
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapType;
]]>
</fx:Script>
</s:Application>

La parte in rosso indica che l'oggetto mappa, con le caratteristiche indicate, sarà referenziato attraverso l'id "map". Quindi l'oggetto map a tutti gli effetti rappresenterà la mappa sulla quale lavoriamo. La parte in blu, invece, serve ad importare le varie classi per accedere, nella parte di scripting, alle funzioni per operare sulla mappa.

Questo è la schermata di flashdevelop con il codice...

e questo è quello che si ottiene facendolo eseguire (in questo caso all'interno di flash player)
Ecco la terra :-D facile no?

Aggiungiamo qualcosa... quando viene caricata la mappa viene notificato all'applicazione che la mappa è caricata e quindi è possibile effettuare le operazioni seguenti. Per far si che l'evento sia intercettato dal programma aggiungiamo le righe seguenti (in verde)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<maps:Map xmlns:maps="com.google.maps.*"
id="map"
mapevent_mapready="onMapReady(event)"
width="100%"
height="100%"
sensor="false"
key="ABQIAAAAGLRIbGJ9z9R5jwNg-BFqjRT4o7HUAS9HNfPTIbLfF9Tm_VUYmxQvVVnUnJt-sc5edCcZvK41Q2S1wQ" />

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
<![CDATA[
//import per google maps
/import minimi per google maps
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapType;

private function onMapReady(event:Event):void
{

}

]]>

</fx:Script>
</s:Application>

In questo modo quando google comunica all'applicazione che il caricamento delle mappe è completo possiamo procedere con le nostre attività.

Abbiamo detto che vogliamo usare una mappa dell'Italia. Con google maps andiamo a vedere le coordinate da usare come centro e il fattore di zoom da utilizzare per visualizzare lo stivale per intero.

Diciamo di scegliere come centro un punto tra Roma e L'Aquila con coordinate (42.309815,13.027954). Usiamo 6 come fattore di zoom. Andiamo ad inserire il codice per centrare la mappa dove vogliamo noi:

private function onMapReady(event:Event):void

{

map.setCenter(new LatLng(42.309815,13.027954), 6, MapType.NORMAL_MAP_TYPE);

}

Resta fuori un po' di Sicilia... bisogna allargare il canvas (ovvero lo spazio nel quale è alloggiata la mappa). Trovate le dimensioni giuste si inseriscono nelle dichiarazioni della applicazione:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="570"
height="680";>

Ed ecco l'Italia nella nostra app :-)

Come è possibile vedere mancano i controlli tipici delle mappe di google, prima di implementarli è bene notare che, comunque, funziona ad esempio il pan tenendo premuto il tasto sx e trascinando la mappa, oppure il doppio click per zoomare.

Andiamo ad inserire i controlli standard, ho evidenziato in grassetto le parti aggiunte. Alla fine il sorgente della nostra app sarà:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="570"
height="680">
<maps:Map xmlns:maps="com.google.maps.*"
id="map"
mapevent_mapready="onMapReady(event)"
width="100%"
height="100%"
sensor="false"
key="ABQIAAAAGLRIbGJ9z9R5jwNg-BFqjRT4o7HUAS9HNfPTIbLfF9Tm_VUYmxQvVVnUnJt-sc5edCcZvK41Q2S1wQ" />
<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>
<fx:Script>

<![CDATA[
//import per google maps
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapType;
import com.google.maps.controls.*;

private function onMapReady(event:Event):void

{
map.setCenter(new LatLng(42.309815, 13.027954), 6, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
}

]]>

</fx:Script>
</s:Application>

Nella prossima puntata vedremo delle personalizzazioni e delle operazioni possibili sulla mappa.


domenico .-. www.mentularia.info