Motivace

Základní problém s vývojem nativních mobilních aplikací je, že se pro každou cílovou platformu programuje jinak. Pro Android nativní vývoj probíhá v Javě, na iPhonu a dalších iOS zařízeních zase musíte znát Objective-C a Cocoa Touch, pro Windows 8 Metro se bude používat .NET / WinRT a tak dále. Nic proti radosti z učení se nových věcí, ale občas prostě potřebujeme mít aplikaci hotovou rychle, ideálně s identickým kódem pro různé platformy. A přesně k tomu slouží mobilní Flex.

Flex a mobilní Flex

O Flexu jste už možná slyšeli nebo i četli zde na Zdrojáku, ale zatím asi spíš v jeho „velké“, desktopové verzi. Historicky totiž vznikl jako technologie pro snadnou tvorbu RIA aplikací a mezi pár úspěšných příkladů patří například Balsamiq Mockups, online verze Photoshopu nebo The New York Times Reader.

Balsamiq Mockups, úspěšný prototypovací nástroj

Pokud jste Flex nikdy neviděli, kód v něm vypadá takto (a pokud Flex znáte, můžete přeskočit k dalšímu nadpisu):

Jedná se o kód podobný HTML / JavaScriptu (značkovací jazyk pro uživatelské rozhraní, skript pro funkčnost), jen s následujícími hlavními odlišnostmi:

• Značkovací jazyk Flexu (jmenuje se MXML) má vyšší sémantiku pro aplikační vývoj a každá značka představuje komponentu, která má své vlastnosti, události, styly a tak dále – na pozadí se jedná o ActionScrip­t třídy.
• Stejně jako v HTML jdou vizuální vlastnosti komponent stylovat pomocí CSS. Navíc ještě Flex podporuje výrazně flexibilnější model skinování, ale to je mimo rámec tohoto článku.
• Zápis je striktně XML a v kódu typicky uvidíte řadu jmenných prostorů pro odlišení různých sekcí a komponent.
• Výkonný kód, v našem případě jednoduchá funkce displayText(), se zapisuje v ActionScriptu, což je v podstatě JavaScript obohacený o datové typy, objektově orientované programování a pár dalších hezkých vlastností. Zjednodušeně se dá říct, že by s ActionScriptem neměl mít problém žádný vývojář, který zná JavaScript, Javu, C# nebo PHP.

Flex není nic extra složitého a s vývojem navíc pomáhá IDE jménem Flash Builder (neplést s Flash Professional pro grafické věci), které umí doplňovat kód, napovídat parametry funkcí, běžící kód debugovat, uživatelské rozhraní navrhovat ve funkčním WYSIWYG editoru a tak dále. Flash Builder je komerční produkt, ale Flex je zdarma a open source (můžete vyvíjet v Notepadu a na příkazové řádce).

Flash Builder

Běhová prostředí pro Flex

Obecně je Flex příjemná vývojářská technologie, jen má nebo historicky měla pro některé lidi jeden háček – v prohlížeči běží díky Flash Playeru. Ačkoliv je z čistě faktického pohledu Flash Player velmi úspěšný runtime (i dnes a ještě po nějakou dobu v prohlížečích rozšířenější než moderní jádra podporující HTML5), není Flash mezi webovými vývojáři dvakrát oblíbený, částečně kvůli předsudkům, částečně ale také právem. Proto vždy budou firmy a projekty, pro které je HTML / JavaScript preferovanou možností navzdory vyšším nákladům na vývoj a ladění, ale tak je to v pořádku.

Nicméně pokud se vrátíme o krok zpátky a podíváme se, jak zdroják ve Flexu vypadá, v podstatě tam není nic, co by nám bránilo tento kód zkompilovat do něčeho jiného než do SWF souboru pro Flash Player, a přesně toho Flex od verze 4.5 využívá. Například na iOS Flash jako takový vůbec podporovaný není, ale Flex aplikace tam přesto spustíme – při kompilaci se prostě vygeneruje něco, čemu iOS rozumí, a tím to pro nás jako vývojáře končí. Paráda.

Technicky vzato běží mobilní aplikace na běhovém prostředí Adobe AIR (v případě iOS přibaleném přímo k aplikaci) a to je v současné době podporováno na následujících mobilních platformách:

• Android
• iOS (zařízení iPhone, iPod, iPad)
• BlackBerry Tablet OS (zařízení BlackBerry PlayBook)
• televize, například Samsung Smart TV

Do budoucna navíc ve Flexu půjdou vyvíjet Windows 8 „Metro“ aplikace (tedy ty pro „tabletový mód“ Windows 8) a neustále se čeká na nějaké oznámení ohledně Windows Phone 7 – pak by Flex pokrýval všechny hlavní a do budoucna perspektivní mobilní platformy. Adobe AIR samozřejmě běží také na operačních systémech Windows, Linux a Mac OS.

Specifika mobilního Flexu

Na mobilním Flexu je přitažlivé především to, že se pořád jedná o ten samý Flex (v minulosti se uvažovalo, že by framework podporující mobilní zařízení byl separátní technologií, ale od této myšlenky Adobe upustilo). Pokud tedy již někdo Flex zná, může v podstatě okamžitě začít psát mobilní aplikace, ale platí to i obráceně: když se naučíte mobilní Flex, budete mít snadnou cestu k psaní velkých RIA aplikací (a divili byste se, kolik velkých projektů třeba ve finančním sektoru Flex využívá).

Mobilní Flex je tedy pořád v principu Flex, se stejnými jazyky, vývojovým prostředím, komponentami, layouty a tak dále, pár věcí podporující vývoj pro mobilní zařízení však bylo potřeba přidat. Konkrétně se jedná o následující:

• Nové mobilní komponenty. Kromě standardních komponent typu Button nebo TextInput, které můžeme v mobilních aplikacích bez problémů používat, přidal mobilní Flex i speciální komponenty, které pomáhají s implementací nejčastějších UI vzorů mobilních aplikací, jako jsou například navigace mezi jednotlivými obrazovkami nebo přepínání se mezi sekcemi aplikace. Mezi nové komponenty patří například View nebo ViewNavigator.
• Mobilní téma vzhledu. Komponenty uživatelského rozhraní potřebují na mobilních zařízeních vypadat trochu jinak než na desktopu a případně i podporovat jiné metody ovládání (například uživatelé jsou na mobilech zvyklí scrollovat List jinak než na desktopu). Toto všechno mají ve Flexu na starosti takzvané skiny, a asi proto nepřekvapí přítomnost speciálního mobilního tématu vzhledu.
• Výkon. Malá zařízení mají méně paměti a slabší procesor než běžné počítače a výkon je proto velmi důležitý. Adobe proto už několik verzí Flash Playeru optimalizuje jeho paměťové i výpočetní nároky a totéž se děje také uvnitř Flexu – například mobilní skiny byly naprogramovány tak, aby byly co nejvýkonnější.
• Export aplikace v nativním formátu. Každá cílová platforma očekávat instalační balíček v jiném formátu a právě packaging aplikací „na jedno kliknutí“ je velkou devizou vývoje ve Flexu. Vyexportovaný soubor pak rovnou můžete nahrát na Android Market, odeslat Applu ke schválení do App Storu a podobně (mimochodem, občas se stane, že App Store žebříčkům vévodí nějaká Flex / Flash aplikace, nejčerstvěji např. hra Machinarium).

Ukázka mobilní aplikace ve Flexu – práce tak na 10 minut (zde při ladění v desktopovém emulátoru)

Výhled do budoucna

Vyvíjet mobilní aplikace ve Flexu můžeme teprve relativně chvilku, Adobe se však nijak netají tím, že právě mobilní oblast je ta, do které bude v nejbližší budoucnosti investovat nejvíce. Chystá se tak již Flex 4.6 a Flash Builder 4.6, které přinesou následující hlavní novinky:

• Zlepšená podpora pro tablety. I na tabletech se zažily UI patterny, které by bylo vhodné zachytit ve frameworku, a proto např. Flex 4.6 přinese komponentu SplitViewNavigator, která podporuje rozložení na obrázku.
  
• Nové komponenty. Objeví se například ToggleSwitch nebo DateSpinner ve stylu iOS.
• Nativní rozšíření (native extensions). Zde se jedná spíše o vlastnost právě vydaného běhového prostředí AIR 3.0, ale pro Flex aplikace je nesmírně důležité, že budou moci využívat nejen API poskytovaná samotným Flexem, ale v podstatě libovolné systémové API zpřístupněné nativním kódem. Flex aplikace tak můžou získat přístup například k akcelerometru, systémovým notifikacím, kontaktům a tak dále. Veškeré bariéry tím padají.
• Výkon, výkon, výkon. Jako v každém releasu.

Můžete se přihlásit do takzvaného „prerelease programu“, kde budete mít k verzi 4.6 přístup dříve než zbytek světa.

Shrnutí

Rychlé představení mobilního Flexu máme za sebou, dovolte mi zopakovat důvody, proč se nad Flexem minimálně zamyslet:

• Produktivní vývoj. Máte k dispozici silný komponentový framework, programujete v objektově orientovaném jazyce a s podporou slušného IDE.
• Jazyky, které Flex používá, jsou velmi blízké webovému vývoji, proto se Flex relativně snadno učí.
• Nejen stejný jazyk pro různé platformy, ale i stejné API.
• Publikování pro různé platformy doslova jedním kliknutím myši.
• Flex je open source a Flash Builder je relativně levné IDE (a existují alternativy, například od JetBrains nebo i plugin do Visual Studia).

 Příště si ukážeme, jak jednoduchou mobilní aplikaci ve Flexu vytvořit.