Poznámka: Můžete si stáhnout výchozí zdrojové soubory, které jdou do Flash Builderu naimportovat pomocí File >> Import >> sekce Flash Builder >> položka Flash Builder Project. To bude náš dnešní startovní bod.

Lepší vykreslení položek seznamu

Když jsme minule projekt opouštěli, vypadal nějak takto:

Prvním krokem tedy bude úprava do podoby, kterou známe z většiny Twitter čteček, tedy obrázek nalevo, jméno autora tučně v prvním řádku a zalomený text pod ním.

Data zobrazujeme v komponentě List, která (jako ostatní datové komponenty) podporuje koncept takzvaných item rendererů – ty mají v moci vykreslení jednotlivých řádků (obecně datových položek) a pro náš případ se tedy přesně hodí.

Item renderer je technicky vzato vlastní komponentou uživatelského rozhraní a ty se nejsnadněji píší v MXML, z výkonnostních důvodů však pro mobilní projekty Adobe doporučuje používat ActionScript. Pokud bychom chtěli každý jednotlivý tweet zobrazit nějakým kreativním způsobem, museli bychom vytvořit novou ActionScript komponentu, což je už poměrně pokročilé téma, pro nejčastější případy však Flex SDK nabízí předpřipravené komponenty LabelItemRenderer a IconItemRenderer, z nichž druhou zmiňovanou využijeme.

Item renderer bychom mohli uložit do vlastního souboru a pak se na něj odkázat, u takto jednoduchého případu a bez ambicí na znovupoužitelnost lze však item renderer zapsat i přímo do definice Listu:

Za povšimnutí zde stojí několik věcí:

·         Vlastnosti lze v MXML zapsat nejen jako XML atribut, ale i jako vnořený element, což je případ našeho item renderera. Zanořenou vlastnost poznáme tak, že začíná malým písmenem. Zápis pomocí zanořeného elementu využijeme v případě, kdy jednoduchý textový popis v XML atributu nestačí.

·         Na komponentně IconItemRenderer nastavíme především vlastnosti iconField, labelField a messageField určující, odkud se vezmou data pro tyto tři části. Doplňující vlastnosti jsou více méně estetické (a například verticalGap je styl, takže ho lze nastavit z CSS).

Spuštěná aplikace bude nyní vypadat o poznání lépe:

Koncept item rendererů lze ve Flexu aplikovat prakticky na cokoliv, co nějak vykresluje množinu dat, ať už se jedná o List, DataGrid, Tree nebo o další komponenty, takže se s ním při reálném vývoji setkáte mnohokrát.

Přechod mezi obrazovkami aplikace

V aplikacích je běžné, že pro položky seznamu potřebujeme zobrazit jejich detail, zde například informace o uživateli, který tweet poslal. Pro tento typ interakce má mobilní Flex dobrou vestavěnou podporu – pojďme tedy vytvořit druhou obrazovku.

Nejdříve založíme nové view z menu File >> New >> MXML Component (jako skoro vše ve Flexu, i celá obrazovka je ve skutečnosti jen další komponentou, specifickou položku v menu proto nenajdeme). Jako balíček (package) vyplníme views, jméno komponenty bude UserDetailsView a v posledním poli ověříme, že naše obrazovka bude založená na komponentě spark.componen­ts.View.

Po dokončení průvodce zase můžeme ve vizuálním návrháři vytvořit jednoduché uživatelské rozhraní, které zobrazí uživatelovu profilovou fotku, jeho jméno a popis (detaily necháme stranou, dají se zde využít všechny layoutovací možnosti Flexu, například horizontální a vertikální uspořádání, komponenty Image a Label, stylování textu pomocí CSS a podobně).

Data zobrazovaná na této obrazovce opět musíme získat z API Twitteru, analogicky s předchozím dílem tedy vytvoříme novou operaci getUserDetails:

Za povšimnutí zde stojí, že na rozdíl od první metody, která používala JSON, tato používá formát XML. Nám jako vývojářům to však může být úplně jedno – Flash Builder všechno zařídí tak, aby se s oběma formáty ve výsledku pracovalo naprosto stejně. Velká výhoda takzvaných datově orientovaných vlastností Flash Builderu.

Dále nakonfigurujeme návratový typ (Flash Builder bude správně navrhovat třídu User) a necháme si vygenerovat kód pro vzdálené volání:

Výsledný kód je v podstatě stejný, jako jsme viděli v minulém díle:

Jediná potíž je, kdy metodu getUserDetails() zavolat a hlavně co jí předat jako parametr screen_name. Zde se konečně dostáváme k principu přechodu mezi stránkami – informace o tom, jakého uživatele zobrazit, musí přijít z první obrazovky. Vraťme se tedy na ní, upravíme její kód tak, aby se druhá obrazovka vůbec otevřela a aby byla potřebná informace o uživateli předána.

Do komponenty list přidáme ovladač události change, která nastane vždy, když dojde ke změně výběru položky v listu (typicky „tapnutí“ prstem):

V sekci <Script> potom vytvoříme následující event handler:

Tento jeden řádek dělá vše důležité: „pushne“ nový pohled na pomyslný stack (k tomuto konceptu se ještě vrátíme) a druhý parametr určí, jaká data se mají předat. V pohledu detailu pak už akorát potřebujeme na přechod zareagovat a předaná data získat. Uděláme to takto:

První zvýrazněný kousek kódu odpovídá na otázku, kdy načítání dat zahájit – je to v reakci na událost viewActivate, která se vyvolá pokaždé, když se stránka načte. Uvnitř ovladače této události voláme Flash Builderem vygenerovanou metodu getUserDetails a jako parametr předáváme:

String(data)

Klíčová je proměnná data, která je dostupná ve všech pohledech (komponentách dědících od View) a obsahuje cokoliv, co do ní jiný pohled nastavil při volání pushView. Dále je potřeba proměnnou přetypovat na String, protože proměnná data je obecného typu Object.

Ve spodní části ukázky je nakonec ukázáno navázání dat ze vzdáleného volání na konkrétní prvky uživatelského rozhraní. Flex má tu hezkou vlastnost, že data dokáže vázat deklarativně (tzv. data binding), stačí pouze místo konkrétní hodnoty mezi uvozovky napsat složené závorky a dovnitř libovolný ActionScript výraz, například:

<s:Image height="{10 +
10}" source="{myImages.profileImageUrl}" />

Vlastnosti našich komponent tedy navážeme na odpovídající položky objektu getUserDetail­sResult.lastRe­sult, který obsahuje poslední výsledek vzdáleného volání. Všimněte si, že díky data bindingu nemusíme řešit, kdy přesně k tomu dojde (vzdálené operace ve Flexu jsou vždy asynchronní a mohou tedy trvat i několik sekund, než se vrátí). Data binding prostě zařídí, že až budou data dostupná, automaticky se zobrazí.

Tím máme přechod na druhou stránku hotový. Screenshotem to zde sice nezachytím, ale při přechodu se přehraje jemná animace, kterou lze případně ovlivnit, zkrátka už se aplikace chová, jak je běžné.

Návrat na předchozí obrazovku

Poslední úkol, který nám zbývá vyřešit, je návrat na obrazovku se seznamem tweetů. Na Androidu, což je v tomto ohledu chytře navržený systém, žádný problém není, protože tlačítko Zpět je vždy dostupné. Pro iOS a další systémy bez této podpory však musíme tlačítko zpět přidat do uživatelského rozhraní, což je naštěstí ve Flexu jednoduché.

Horní část obrazovky, která nám zatím zobrazovala pouze titulek, totiž může volitelně obsahovat i oblast pro navigační prvky (navigation area) a pro další funkční prvky (action area), jak ukazuje následující obrázek z oficiální dokumentace:

Poznámka: Toto rozdělení dává u většiny aplikací a na většině mobilních platforem nejlepší smysl, ale není technicky důvod, proč by například navigační prvky nemohly být vpravo. Jedná se skutečně jen o pojmenování.

Tlačítko Zpět tedy přidáme do navigační oblasti, čehož se dosáhne následujícím kódem v definici pohledu:

Připomínám, že pokud XML element začíná malým písmenem, nejedná se o zanořenou komponentu, ale pouze o složitější vlastnost vnější komponenty – zde plníme vlastnost View.navigati­onContent jedním tlačítkem, které má nastavený popisek, styl (ekvivalent atributu „class“ z HTML) a ošetřuje událost click. Samotný event handler pak vypadá takto:

Výkonný kód má opět pouze jednu řádku a probíhá v něm „popnutí“ aktuálního pohledu. Zde se na chvilku zastavme u oné paralely se „stackem“, zásobníkem. Pohledy v aplikaci se uživateli na obrazovce objevují, jako byste na balíček z karet pokládali nové a nové karty. Když přidáváte novou, musíte akorát říct, jakou (metoda pushView a její první parametr), při odstraňování horní karty už pak stačí říct, že má prostě zmizet, žádné parametry netřeba. Objeví se tím karta ležící těsně pod ní, stejně jako (zpět v realitě) obrazovka zobrazená před tou aktuální. Flex tento stack obrazovek manažuje automaticky.

Tlačítko Zpět lze potom nastylovat do podoby vhodné pro iOS (použijí se CSS Media Queries a skin BeveledBackBut­tonSkin), pro Android jde zase zařídit, aby se tlačítko Zpět vůbec nezobrazovalo, a tak dále. Navigaci mezi pohledy tedy máme kompletní.

Shrnutí

Zde náš malý výlet do světa mobilního vývoje ve Flexu ukončíme. Dalo by se pokračovat dál povídáním o problematice DPI, persistenci dat jednotlivých pohledů, přizpůsobování vzhledu pro konkrétní platformy a tak dále, základním cílem této série však bylo skutečně jen rychlé představení možností mobilního Flexu.

Pokud bych si přál, abyste si z těchto článků něco odnesli, tak hlavně toto:

• Flex je vyvážená technologie – na jednu stranu nabízí poměrně hodně zajímavé funkcionality, na druhou stranu se vyvíjí v jazycích, které jsou podobné HTML a JavaScriptu a tudíž jsou dobře naučitelné.
• Pro vývoj aplikací byl Flex stvořen a vlastnosti jako layouty, data binding, silný komponentový model a podobně usnadňují vývojářovu práci a zvyšují jeho produktivitu. HTML je zase výborné na dělání klasických webových stránek.
• Flash Builder s vývojem hodně pomáhá, ať už se jedná o přístup k datům nebo o doplňování názvů proměnných, ladění, buildu pro jednotlivé platformy a podobně. Ve světě IDE pro HTML není podobný komfort vůbec samozřejmostí.

Ale především, hlavním cílem bylo ukázat, že něco jako mobilní Flex vůbec existuje a že jedná o zajímavou alternativu pro snadný vývoj mobilních aplikací.

Můžete si opět stáhnout kompletní zdrojové soubory.