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.

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).

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).

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.