Adobe Max: Day 3 - Flex Builder a Adobe Air

Včerejší Customer Appreciation Event znamenala večerní party v La Pelota. Dobrá hudba, fajn lidi, vynikající jídlo, povedená akce. Dnešek znamená (alespoň pro mě) dalších 6 přednášek, tentokráte ryze programátorských - soustředím se na Flex (jazyk obecně, ale i Flex Builder 3 IDE), Air runtime a LifeCycle ES (tedy PDF formuláře a tok dat 100x jinak).

Z LifeCycle ES mám velice dobrý pocit, pro řadu procesů bezpečného získávání dat a kolaboraci nad nimi je to mnohem efektivnější platforma než klasický HTML/CSS přístup a zpracování odeslaných dat třeba v PHP.

Abych poznal Flex lépe, rozhodl jsem se s chystaným redesignem MyEgo.cz do konce roku naprogramovat menší desktopové gadgety nejen v Silverlightu 2.0 (to jsem chtěl už dříve), ale i ve Flexu / Air runtime, člověk nejlépe pozná technologii tím, že v ní něco udělá.

Breathe some Air into your brand

Tom Krcha popisuje, jak napumpovat nějaký vzduch (Air) do vaší značky (brandu). :-)

Air 1.5 runtime používá WebKit po rendering, má tedy perfektní podporu pro XHTML / CSS / Javascript. Pokud chcete, můžete "desktopovou" aplikaci udělat jen v HTML a Javascriptu, bez nutnosti učit se další věci.

Air podporuje také lokální SQLite databázi, včetně jejího šifrování, takže zajišťuje bezpečnost a snadnou práci s databází lokálních dat. Dostupné jsou i třídy pro přístup k lokálnímu filesystému pro běžné souborové operace.

Samotný ActionScript 3.0 a další možnosti (audio, video, H.264, P2P, atd.) jsou identické na Flash Player 10.

Introduction to Flex (by Sven Claar)

Flex = MXML (Macromedia XML - deklarativní jazyk pro popis uživatelského rozhraní) / ActionScript 3 / HTML / AJAX, plus napojení na Flex Framework, případně LifeCycle Data Services ES, J2EE a .NET, PHP, atd. back-end.

Části Flex Framework:

• UI-container - Panel, Vbox / Hbox, Form, View, Window, atd.
• UI-controls: Button, CheckBox, ComboBox, atd.
• DATAMODEL: Data Binding, Validation, RPC services.
• BEHAVIOURS: Fade, Move, Rotate, States & Transitions (věci z Flash 10 Player).

Protokoly pro komunikaci - SOAP, HTTP(S), AMF(S) - binárně zabalený package dat (třeba XML), RTMP(S) - protokol pro streaming audia, videa, atd.

Flex SDK je zdarma, Flex Builder 3 je komerční produkt (plugin) založený na Eclipse IDE, zdarma je ovšem dostupný pro studenty. Pokud už máte instalováno Eclipse IDE, můžete si pro ně stáhnout jen Flex plugin. Dokumentace pro ActionScript 3 je online zde.

Editace a generování MXML vypadá podobně jako XAML v Blendu (Expression Studio), včetně podědění a rozšíření komponenty. Aplikace může být na webu doslova během pár sekund.

Future of Flex

Flex a ActionScript 3 má budoucnost :-) Tedy, minimálně v ní věří Adobe, protože pilně pracují na nové verzi Flexu nazvané "Gumbo".

Hlavní přínos bude v Designer / Developer workflow a wireframe oblasti, což znamená novou aplikaci - Flash Catalyst (blíže byl popisován ve včerejší přednášce). Jak jsem pochopil, bude distribuován v jednom balíku s Flex Builderem, jako nedílná součást (tedy obdoba Expression Studio 2 sady zahrnující Design, Blend, Media Encoder, až po programátorské Visual Studio).

Ve Flex frameworku a MXML se bude používat nový namespace, takže nebude nutné psát <mx:FxButton>, ale pouze <FxButton>. XML bude vypadat rozhodně čistěji. Některé (de-facto) chyby v současném návrhu frameworku, jako spousta properties nastavených jako private, ale které vývojář potřebuje modifikovat, bude nastavena na public a zpřístupněna. Nový je GraphicElement base class, který umožňuje animace a kreslení známé z Flash Player 10, odpadne tak občasné "hackování" a hromada kódu pro vizuální zobrazení.

Flash Catalyst pracuje s FXG - grafický formát podporovaný v MXML (FXG je jen jeho subset, stačí změnit prefix), a také v kreativních aplikacích Photoshop CS4, Illustrator CS4 a Fireworks CS4. Zajistí se tím dokonalá provázanost při vytváření UI aplikací na kreativní aplikace Adobe z CS4 sady.

V návaznosti na lepší možnost práce s textem (rich text editor) bude v novém Flexu knihovna na toto zaměřená, podporující vertikální zarovnání, obrázky v textu, tabulátory, odrážky, více sloupců, přetékání textu a další. Nové komponenty: FxTextInput a FxTextArea.

Zlepšení jsou i v animačním systému (FxAnimate) a transformacích mezi stavy (states). Obecně, states jsou hlavní (i když ne zcela nový) koncept pro Flash Catalyst a Flex Builder. Komponenta může mít různé (alternativní) vzhledy podle stavů (třeba běžné versus stisknuté tlačítko), ovlivnit animace navázené na procesy může tedy už přímo designér při práci v Flash Catalyst.

Doplněna je layer property, která ovlivňuje z-index objektu (dosud se počítal z-index jen automaticky podle zanoření a dědičnosti objektů). V MXML nově existuje 2-way binding na ActionScript kód (proměnné).

Veškeré změny se samozřejmě promítnou i do MXML definice, která dostane MXML 2009 verzi (oproti současné MXML 2006). Mixování syntaxe MXML 2009 a 2006 v jednom souboru nebude možné, v rámci aplikace ale ano.

Flex nebo Silverlight?

Slepice nebo vejce?

Osobně jsem moc rád poznal strategii a směřování Adobe pro Flex, Adobe vývojářské nástroje a budoucí nástroje pro UI design a wireframes (Catalyst). Adobe (Macromedia) Flex i Microsoft Silverlight jsou především nesmírně rychle rozvíjející se platformy a až na druhém místě konkurující si technologie. Vzájemně se u sebe inspirují a ženou vývoj rychle dopředu, rok staré znalosti jsou k ničemu.

Nemyslím si, že jedna drtivě zvítězí, naopak zde do budoucna budeme muset počítat s oběma, a obě je znát.

Ryze programátorské typy se asi více soustředí na Visual Studio / C# a tedy Silverlight, uživatelé OS X, kreativní typy a designéři zase na Flex a Flash Catalyst po jeho vydání (jak programátorsky, tak v podobě návrhu UI ve Flash Catalyst, Illustrator, Photoshop).

Flex je velice silný v animačních věcech (Motion, Transitions, atd.), díky napojení na kompletní funkce, které nabízí Flash Player 10.

Osobně jsem rád, že zde existuje opravdu zdravá a silná konkurence :-)