Jak psát Flex

Vstupte do světa Rich Internet Applications a Adobe Platform.

Quick links: content, navigation, search.

Navigace

Home
O webu

Adobe Flex: Handlery a layout

Úterý, 9. 12. 2008 – Kategorie: Featured, Začínáme s Flexem - Autor: Vojtěch Kopal

Minule jsme úspěšně vložili komponentu Google Maps do naší aplikačky. V té základní podobě toho mapa příliš nepředvede. Jakým způsobem tedy nastavit další vlastnosti mapy? Seznámíme se s událostma (events) a s nimi souvisejícími handlery.

Navazuji na článek Google Maps API ve spojení s Adobe Flex 3.

Handlery událostí

Jedna z variant, jak spravovat průběh aplikace, jsou události. Představte si, že bychom potřebovali vyřešit následující problém. Jste správcem nějakého objektu a máte nějaké povinnosti (přidávat dřevo do kamen, otevírat dveře, volat přítelkyni). Zřejmým řešením je v pravidelných intervalech chodit na obchůzku; podívat se za venkovní dveře, jestli tam někdo nestojí, nahlédnout do kamen, kolik je tam ještě dřeva, a pro jistotu zavolat přítelkyni, jestli si zrovna nechce povídat. To funguje, přesto ihned můžeme říct, že by nás to po nějaké čase přestalo bavit, a zkusili bychom přijít na lepší řešení.

Například by nám něco mohlo dát vědět, že je potřeba přiložit, jít otevřít dveře, apod. Co třeba řešení, kdy zvonek zazvoní, když někdo příjde, přítelkyně napíše SMS, že jste se již nějaký čas neozvali, a když to v kamnech vyhasne, tak ta zima vás chladným výjimečně nenechá. Řekněmě, že nejde o ideální příklady, ale pro představu jak fungují události to postačí.

V naší aplikaci k událostem, které potřebujeme obstarat, zadefinujeme callback funkce, neboli handlery. Když dojde k uálosti, provede se naše metody a my takto například zpracujeme příchozí data, nebo poznáme, že komponenta se inicializovala.

Zpět ke Google Maps API

Nejprve lehce nahlédme do možností nastavení Google Maps. Mapu si roztáhneme po celé ploše prohlížeče. V souboru jakpsatflex_gmaps.mxml změňte parametry komponenty maps:Map, konkrétně tedy nastavte width a height na 100% (viz následující obrázek).

Komponentě Map nastavíme další parametr mapevent_mapready=”onMapReady(event)”. mapevent_mapready je událost, kdy je mapa připravena, a proto můžeme nastavit další parametry, upravit pozici apod. Našemu handleru předáváme parametr event, což je objekt obsahující informace o půběhu události.

Nyní je potřeba vytvořit callback funkci, která se postará o úpravu mapy. Zdrojový kód ActionScriptu se vkládá mezi tagy . Jednoduše napište otevírající tag a Flex Builder vám automaticky doplní kód o únikovou sekvenci (escape sequence). Rovnou odplním do příkladu i deklaraci naší funkce:

<mx:Script>
        <![CDATA[
                 private function onMapReady(event:MapEvent):void
                 {
 
                 }
        ]]>
</mx:Script>

Funkci deklarujeme s klíčovým slovem private, což značí, že tuto metodu lze zavolat pouze v rámci objektu naší aplikace. Klíčové slovo (keyword) void stojí na místě, kde se určuje návratový typ naší metody, v tomto případě tedy funkce nevrací nic. Pokud bychom nyní zkusili aplikaci uložit, uvidíme, že program hlásí chybu. Vše je způsobeno parametrem event, kterému jsme přisoudili třídu MapEvent. Standardně můžeme napsat pouze Event, což je základní třída, od které jsou ostatní odvozeny, tj. poděděny. V našem případě ovšem potřebujeme specifické vlastnosti události vyvolané skrze Google Maps API, proto aplikace řekneme, kde má informace o třídě MapEvents najít. Klíčovým slovem v tomto případě je import:

import com.google.maps.MapEvent;

Teď nám nebrání nic, abychom si upravili některé vlastnosti Google Maps. K mapě přistupujeme skrze objekt map (viz parametr id u komponenty maps:Map).

Zapnuli jsme možnosti zoomování kolečkem myší a plynulý zoom. Metodou addControl jsme přidali potřebný objekt pro zoomování. Nakonec jsme nastavili pozici mapy, kde se má zobrazit počáteční bod.

Odkaz: http://jakpsatflex.cz/labs/gmaps_n2/

Práce s Layoutem

Všimněte si parametru layout u komponenty mx:Application, hodnota absolute definuje, že pro každou komponentu bychom museli nastavovat pozici (parametry x, y). Druhou možností je vertical, která je výchozí (pokud parametr neuvedeme). Poté Flex zarovná prvky na střed a pod sebe s tím, že volí rozumné mezery.

Strukturu aplikace jsme upravili následujícím způsobem:

<mx:HBox>
    <mx:Label text="Google Maps API"
            fontSize="30"/>
    <mx:Label text="JakPsatFlex.cz"
            fontSize="20"/>
</mx:HBox>
 
<mx:Canvas width="800" height="500">
    <maps:Map xmlns:maps="com.google.maps.*"
            id="map"
            width="100%"
            height="100%"
            mapevent_mapready="onMapReady(event)"
            key="___VAS_API_KLIC___"/>       
</mx:Canvas>

Komponentu Map jsme uzavřeli do Canvas, což je obecná komponenta pro layout, od které jsou ostatní poděděny. Nastavili jsme jí rozměry 800 na 500 pixelů a naše mapa se roztáhne do tohoto kontejneru tak, že bude mít stejné rozměry. Podobně jako výchozí layout aplikace funguje i VBox (vertical box, ve skutečnosti Application dědí vlastnosti VBoxu), vedle toho existuje HBox (horizontal box), do kterého jsme uzavřeli dva popisky Label). Vlastností HBoxu je, že zanořené komponenty se naskládají vedle sebe (ekvivalent float: left u CSS). Z vlastností Labelu jsme nastavili fontSize a především hodnotu text.