Mobilní aplikace ve Flexu krok za krokem

V minulém článku jsme prošli, co dělá Flex atraktivní volbou pro snadný vývoj napříč mobilními platformami, dnes je na čase trocha praxe – naprogramujeme jednoduchou, ale už netriviální aplikaci, která bude spustitelná na iOS, Androidu a dalších podporovaných platformách.

Seriál: Mobilní vývoj ve Flexu (3 díly)

  1. Mobilní vývoj ve Flexu 12.10.2011
  2. Mobilní aplikace ve Flexu krok za krokem 19.10.2011
  3. Mobilní aplikace ve Flexu krok za krokem, část 2 31.10.2011

Jako příklad vytvoříme aplikaci, která po spuštění vypíše, co se poslední dobou šustlo o Zdrojáku na Twitteru. Po vybrání tweetu pak vykreslí obrazovku s detaily o odpovídajícím uživateli Twitteru. Příklad je to jednoduchý, ale i ten umožní demonstrovat:

  • Přechod mezi obrazovkami a jeho automatickou správu Flex frameworkem.
  • Práce se vzdáleným zdrojem dat, zde konkrétně pomocí formátu JSON.
  • Principy tvorby GUI Flexové aplikace.
  • Její vytvoření a spuštění na různých platformách.

Poznámka: Aby nebyl článek příliš dlouhý, je příklad je rozdělen do dvou částí. V tomto díle projdeme základy až po načtení dat z Twitteru, příště aplikaci vizuálně vylepšíme a celkově dotáhneme.

Pro práci použijeme Flex 4.5.1 a Flash Builder 4.5.1, které jsou aktuálně nejnovějšími verzemi, ale pokud se zaregistrujete do prerelease programu Adobe, příklad by měl prakticky beze změny fungovat i v chystané verzi 4.6.

Poznámka: Flex je zdarma a open source, Flash Builder je komerční IDE od Adobe, které můžete získat zdarma, pokud jste studenti, nebo existuje 60denní trial verze. Edice Standard potom stojí cca 250 dolarů. Pro Flex lze vyvíjet i v jiných vývojových prostředích, například IntelliJ IDEA nebo Amethyst (plugin do Visual Studia). Velkou výhodou Flexu, Flash Builderu a dalších IDE je, že i pro iOS lze vyvíjet na Windows, bez investice do Maca.

Tvorba projektu

Ve Flash Builderu nový projekt založíme z menu File >> New >> Flex Mobile Project. V prvním kroku průvodce určíme především název projektu, zde ZdrojakTweets.

Zajímavější je druhý krok, který nám dovoluje nastavit různé volby pro různé mobilní platformy:

Především můžeme vybrat, které platformy vůbec chceme podporovat (aktuálně nabídka je iOS, Android a BlackBerry Tablet OS, další budou časem přibývat). Dále pak zvolíme šablonu aplikace – nám bude stačit View-Based Application, pro aplikaci se sekcemi je vhodná TabbedApplication a samozřejmě zde máme i prázdnou šablonu.

Na záložkách Permissions a Platform Settings bychom mohli například určit, jaká práva bude Android aplikace mít (typicky INTERNET, ale může mít i CAMERA, WRITE_EXTERNAL_STO­RAGE a podobné) nebo zda v rámci iOS cílíme pouze na malá zařízení (iPhone + iPod Touch) nebo zase třeba pouze na iPady (výchozí jsou všechna zařízení).

Ve spodní části potom můžeme pomocí zaškrtávátek určit, co bude aplikace podporovat – ve výchozím stavu bude automaticky reagovat na změnu orientace zařízení a od verze 4.6 bude defaultně zaškrtnuté i pole „automaticky přizpůsobit aplikaci různým DPI“, které v typické aplikaci dost usnadňuje práci. Podpora různých DPI je při mobilním vývoji důležitým konceptem, ke kterému se ještě vrátíme.

V dalších krocích průvodce žádné speciální nastavení dělat nemusíme a přejdeme tedy rovnou k vygenerovanému projektu.

Struktura projektu

Po dokončení průvodce vypadá struktura projektu v panelu Package Explorer nějak takto:

Zajímá nás hlavně složka src a v ní soubory s příponou *.mxml:

  • Soubor ZdrojakTweets.mxml je hlavním „spustitelným“ souborem aplikace.
  • Soubor views/Zdrojak­TweetsTwitter­View.mxml potom obsahuje definici prvního „view“, pohledu, který nyní vytvoříme. K organizace aplikace do tzv. pohledů se vrátíme v příštím díle.

Tvorba UI

Flash Builder po vygenerování projektu automaticky otevřel soubor s naším pohledem, který v základu vypadá nějak takto:

Mobilní GUI se dobře navrhují ve vizuálním návrháři, přepneme se do něj tedy tlačítkem Design.

Poznámka: WYSIWYG módu se není potřeba ve světě Flexu bát (na rozdíl od HTML), protože existuje jen jedno běhové prostředí a WYSIWYG editor tak ví zcela přesně, jak bude výsledek vypadat. Ruční úpravy MXML taky nejsou žádnou vědou (zhruba totéž, co psaní HTML) a ve Flexu se tak jedná o zcela rovnocenné možnosti.

V design módu můžeme vybrat zařízení, jehož náhled se nám bude zobrazovat – můžeme tak bez spuštění aplikace vidět, jak bude výsledek vypadat, případně testovat, zda mají prvky správnou velikost na různých zařízeních s různou hustotou pixelů (vestavěné komponenty se chovají inteligentně a svou velikost různým DPI přizpůsobují, techniky pro vlastní komponenty si ukážeme příště).

My budeme chtít vykreslit seznam tweetů o Zdrojáku, přetáhneme proto na plochu z levého panelu komponentu List a nastavíme jí výšku a šířku na 100% a vynulujeme vlastnosti  x a y (alternativně komponentu „připíchneme“ ke všem čtyřem stranám nastavením vlastností top, right, bottom a left na nulu, layoutovacích možností má Flex několik).

Ve zdrojovém módu ještě upravíme titulek našeho pohledu, takže výsledek bude vypadat takto:

Vidíte, že zdrojový kód je přehledný a dobře čitelný  –  v podstatě stejně jako HTML, jen si člověk musí zvyknout na jmenné prostory, které se ve Flexu z dobrých důvodů důsledně používají.

Přijďte se Flex naučit na listopadová školení v Praze. Podrobnosti a kompletní nabídku najdete na webu http://flex-skoleni.cz/.

Načtení dat z Twitteru

Ve Flexu můžeme ke vzdáleným datům přistupovat v zásadě dvěma způsoby: pomocí „surových“ komponent HTTPService, WebService a RemoteObject nebo pomocí kódu vygenerovaného Flash Builderem. V obou případech komunikace ve výsledku probíhá pomocí standardních protokolů (např. pro Twitter se použije HTTP), jen se liší úrovní komfortu: zatímco u holého přístupu pomocí základních komponent si musíme výsledek naparsovat sami, nástroje Flash Builderu umožní chovat se k příchozím objektům tak, jako by se jednalo běžné ActionScript třídy, tedy s typovou kontrolou, nápovědou vlastností v editoru a podobně. Zvolíme tedy tuto druhou možnost.

Z menu Data vybereme možnost Connect to HTTP…

Parametry vzdáleného volání nastavíme následovně:

Pod operací getTweets se bude interně schovávat URL http://search­.twitter.com/se­arch.json s dvěma GET parametry „q“ a „result_type“, jak umožňuje Twitter Search API. Ve spodní části dialogu pak už pouze určíme, jak se naše služba bude jmenovat a do jakých balíčků se bude generovaný kód ukládat.

Po dokončení průvodce se nám na panelu Data / Services objeví nová služba takto:

HTTP volání se nyní tváří jako prostá ActionScript metoda, která přijímá dva parametry typu String, jen zatím vrací příliš obecný a neužitečný datový typ Object (prapředek všeho v ActionScriptu). Nakonfigurujeme si tedy metodu tak, aby vracela výsledné tweety – z kontextového menu metody vybereme možnost Configure Return Type.

V prvním kroku průvodce zvolíme „Auto-detect the return type from sample data“ a ve druhém kroku určíme, s jakými parametry má službu zavolat:

Po kliknutí na tlačítko Next si Flash Builder na pozadí stáhne JSON dokument, podívá se na jeho strukturu a zkusí odhadnout, jak výsledek co nejlépe napasovat do nějaké ActionScript struktury. Výsledek ukáže na další obrazovce průvodce, kde máme možnost udělat úpravy (nový datový typ si pojmenujeme Tweets a pole Result[] přejmenujeme na Tweet[]; Flash Builder sám správně poznal, že se jedná o opakující element a tedy pole).

Po dokončení průvodce již služba nevrací obecný typ Object, ale užitečnější objekt Tweets, který ve vlastnosti results obsahuje pole tweetů. Zdrojové soubory nově vygenerovaných tříd Tweet, TwitterService a dalších bychom našli ve složkách src/services a src/valueObjects – jmenný prostor v ActionScriptu vždy přesně odpovídá umístění souboru na disku.

Přístup k tweetům máme tedy nakonfigurovaný, nyní jej už jen potřebujeme použít k zobrazení dat v komponentě List.

Zobrazení dat v uživatelském rozhraní

Nejjednodušší způsob, jak data zobrazit v komponentě uživatelského rozhraní, je použít dialog pro vázání dat (pravé tlačítko myši na List >> Bind to Data… nebo přetažení metody getTweets z panelu Data / Services na komponentu List).

V dialogu vedle správně přednastavených polí Service a Operation zaměříme pozornost především na pole Data provider, které říká, co se použije jako datový poskytovatel pro komponentu seznamu. Vybereme vlastnost results, která je kolekcí tweetů (objektů typu Tweet). Pole Label field zatím nastavíme na „text“, ačkoliv si příště ukážeme lepší způsob vykreslení seznamu.

Po potvrzení dialogu nás Flash Builder přesune zpět do zdrojového kódu a rovnou na místo, kde je potřeba zadat, co se předá jako parametry metody getTweets.  Zde ručně dopíšeme toto:

twitterService.getTweets("zdrojak",
"recent"
)

Jediné, co pak musíme ve vygenerovaném kódu změnit, je místo volání této metody – Flash Builder načítání tweetů defaultně zahájí po dokončení vytváření komponenty List (její událost creationComplete), což je vhodné u desktopových projektů, ale u mobilních je vhodnější přesunout toto do události viewActivate celého pohledu:

Spuštění aplikace

Základní funkčnost aplikace máme hotovou, pojďme ji tedy spustit. Zelenou šipkou v horním toolbaru, případně klávesovou zkratkou Ctrl + F11 otevřeme dialog pro spuštění aplikace. V něm vybereme dvě zásadní věci: pro jakou platformu a zařízení chceme aplikaci spustit a dále jestli chceme aplikaci spustit na fyzickém zařízení nebo na desktopovém emulátoru:

Vybereme například iPhone a spuštění na desktopu, výsledek pak bude následující:

Vzhled zatím není ohromující, ale aplikace je funkční: načítá živá data z Twitteru, reaguje na různé orientace displeje (rotovat lze pomocí menu Device), scrollování v seznamu i na desktopu simuluje hladké scrollování i s „bounce“ efektem a podobně.

Spuštění na zařízení je v případě iOS docela komplikovaným procesem, protože potřebujete být zaregistrování v (placeném) iOS Developer Programu, ale na Androidu je vše snadné – v podstatě jen připojíte zařízení USB kabelem k počítači, vyberete spuštění na zařízení a voilà, je hotovo. Na zařízení pak můžete používat všechny nástroje pro ladění jako u desktopových projektů, tedy nastavovat breakpointy, dívat se, jaké hodnoty jsou v proměnných a tak dále. Kód se reálně vykonává na zařízení (a pro připojení k Twitteru tak například používá datové služby nebo vlastní WiFi připojení), ale ladění probíhá z pohodlí Flash Builderu na vašem PC nebo Macu.

Zde první část ukončíme a příště si ukážeme, jak seznam zobrazit hezčí a zaběhlejší formou (obrázek uživatele, jeho jméno apod.), jak po vybrání jednoho tweetu přejít na novou obrazovku a pak zase zpátky a zkrátka dokončíme ukázku do její kompletní podoby.

Můžete si stáhnout zdrojové soubory projektu ve stavu, v jakém projekt teď opouštíme. Do Flash Builderu soubor FXP naimportujete pomocí File >> Import >> sekce Flash Builder >> položka Flash Builder Project.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 6

Přehled komentářů

Pitrsonek Jakou byste doporucili knihu
Borek Bernard Re: Jakou byste doporucili knihu
vkalina Podepisování pro iOS
Borek Bernard Re: Podepisování pro iOS
Deny Zdarma?
abc Re: Zdarma?
Zdroj: https://www.zdrojak.cz/?p=3561