Jak psát Flex

Google Maps API ve spojení s Adobe Flex 3

Středa, 3. 12. 2008  –  Kategorie: Featured, Začínáme s Flexem - Autor: Vojtěch Kopal

Aktuálně probíha Adobe MAX v Miláně, rozhodně proto sledujte aktuální zprávy od Radka Hulána, nebo z Twitteru Adobe Evangelistů MaxEurope.

Google nabízí svá API pro různé programovací prostředí a jedním z nich je i Adobe Flex. V průběhu vytváření aplikačky zvláště zmíním použítí následujícího:

• základy práce s layoutem
• vyčlenění actionscriptu do samostatného souboru
• databinding

Nikterak podrobně se nebudu věnovat jednotlivým vlastnostem a metodám Google Maps API. Výslednou aplikaci si můžete prohlédnout zde.

Než začneme

K práci s Google Maps API je nutné si vygenerovat Maps API klíč, kterým se budete autentifikovat proti API. Tento klíč je jedinečný pro každou doménu. Registrujte zde.

Stáhněte si SDK pro Flash a Flex. Abyste mohli plně využít vývojové prostředí Flex Builderu, tj. i debugování, nainstalujte si Flash Player 10 Debugger Version.

Vytvoření projektu

Nový projekt vytvoříme kliknutím na File –> New –> Flex Project, nebo také kliknutím pravým myšítkem do panelu Flex Navigatoru a poté New –> Flex Project.

Zvolte jméno nového projektu, např. jakpsatflex_gmaps, odškrtněte Use default location a po kliknutí na Browse vyberte umístění vašeho projektu.

Pokračujte kliknutím na Next.

Složku pro vygenerovanou aplikaci můžeme ponechat beze změny (tj. bin-debug) a klikneme

na Next. Budeme chtít, aby se zdrojové kódy nacházely přímo v kořenovém adresáři, proto smažeme obsah Main source folder a ponecháme jej prázdný. Vytvoření nového projektu ukončíme kliknutím na Finish.

Ještě než začneme je potřeba do složky /libs našeho projektu nahrát SDK pro Google Maps API, tj. soubor map_flex_1_8a.swc, který je v námi staženém archivu. Před samotným psaním kódu nejprve vytvoříme soubor thecode.as v kořenovém adresáři našeho projektu a to tak, že klikneme nejprve pravým myšítkem v panelu Flex Navigator klikneme na název projektu (tj. jakpsatflex_gmaps) a dáme New –> ActionScript File. Soubor pojmenujeme (např. thecode.as) a kliknutím na Finish přidáme nový soubor do projektu.

Vložení Google Mapy

Abychom si nejprve vyzkoušeli fungování API, vložte následující kód mezi tagy Application:

<maps:Map xmlns:maps=”com.google.maps.*”
            id=”map”
            mapevent_mapready=”onMapReady(event)”
            width=”300″
            height=”300″
            key=”___VAS_API_KLIC___”/>

xmlns:maps=”com.google.maps.*” – Definuje namespace maps a také, kde je tento namespace definován

id=”map” – Nastaví unikátní identifikátor v rámci našho projektu. Skrze něj budeme k této komponeňtě přistupovat

mapevent_mapready=”onMapReady(event)” – napojení funkce/handleru na událost, kdy je mapa připravena k použití

width=”300” a height=”300” – rozměry objektu

key=”___VAS_API_KLIC___” – nagenerovaný Google Maps API klíč, nezapomeňte jej vložit

Nyní si vyzkoušejte, že vše funguje tak, jak má. Nejprve se přesvědčte, že máte zašrktnutu volbu Build Automatically v menu Project. To způsobí, že ihned po uložení se vaše aplikace automaticky překompiluje, resp. rebuildne.

Nyní projekt uložte kliknutím na File –> Save a kliknutím na Run jakpsatflex_gmaps v panelu nástrojů (zelené kolečko “play”) spusttě aplikaci.

Zobrazí se vám mapa o rozměrech 300×300 pixelů.

Všimněte si nápisu debug mode. Vše bude v pořádku, jakmile bude aplikace na své doméně, pro kterou jste zaregistrovali API klíč.

Pro dnešek to bude vše. Seznámili jsme se s nutným nudný začátkem. Nyní tedy máme vytvořený projekt, s nalinkovaným Google Maps SDK a první úspěšný pokus o zobrazení mapy v naší aplikačce. 

Příště se podíváme na to, jakým způsobem upravit nastavení jednotlivých komponent a i naší aplikačky po načtení, k tomu využijeme handlery. Konečně vyhledáme naší pozici na mapě a ukážeme si jak pracovat s layoutem aplikace.

Tagy: adobe flex, flex builder, google maps api, tutoriály