Přejít k navigační liště

Zdroják » Různé » Flash Catalyst: Snadný návrh RIA aplikace

Flash Catalyst: Snadný návrh RIA aplikace

Články Různé

Bez hezké grafiky se pořádná RIA aplikace neobejde, jenže vývojáři často nerozumí grafikům a grafici nechápou vývojáře. Flash Catalyst je nástroj, který zjednodušuje převod návrhu z Photoshopu, Illustratoru či Fireworks do Flexu 4 a slouží k prototypování i wireframingu. (Součástí článku je videotutoriál)

Znáte to, je to noční můra každého programátora. Naskinování aplikace, která nám už přece funguje, ale bez chybí jí to poslední – krásný grafický vzhled, který ji ve finále prodá.

Říká se, že většinu aplikací pro iPhone prodá jejich ikonka a první screenshot v iTunes. Podobná situace je v RIA aplikacích. Nikoho už nebaví graficky a ergonomicky zastaralé CRM a ERP portály. To je právě jeden z důvodů proč Flash Catalyst vznikl: Propojit svět tvůrčích nástrojů z Creative Suite a programátorské Flash Platformy – vzít z obou to nejlepší a umožnit nový, mnohem rychlejší a pohodlnější způsob komunikace mezi grafikem a programátorem.

Flash Catalyst je nástroj, který umožňuje grafikům vytvářet interaktivní prototypy aplikací bez kousku kódu. Ty následně vezme programátor a oživí je – vloží jim šém finální logiky a propojení s daty.

Flash Catalyst - videotutoriál
Videotutoriál Flash Catalyst – kliknutím přejdete na stránku s videocastem (HQ, rozlišení 900×656).

Současný problém tvorby RIA aplikací souvisí s tím, že grafik a programátor musí úzce spolupracovat na GUI (graphical user interface) a programátor je ten, kdo převádí návrh aplikace do kódu. Toto workflow spolu nese spoustu nevýhod, jelikož programátor nemusí vždy přesně grafiku do aplikace implementovat. Jistě si vzpomenete na čas zbytečně strávený při dopozicování prvků, ladění barev a grafikovy věty typu „Ale tohle mělo být o pixel níž a ta červená není taková, jakou jsem si představoval a všechno je jinak, než jsem si představoval…“.

Flash Catalyst do textu
Současné workflow bez Flash Catalyst

(Grafik musí úzce spolupracovat s programátorem a z velké části znát dostupné možnosti, programátor občas grafiku implementuje nevhodně – nemusí cítit detaily tak přesně jako grafik.)

Flash Catalyst do textu

Flash Catalyst si klade za cíl tyto problémy při převodu grafiky z Illustratoru, Photoshopu či Fireworks do Flexu odbourat a umožňuje designéru UI a grafikovi vizuálně odladit takové záležitosti, jako třeba vzhled a chování tlačítek. Po schválení managerem a odsouhlasení prototypu zákazníkem tak předává programátorovi funkční layout kód, který Flash Catalyst na pozadí generuje. Grafik nepřevádí jenom vektorovou či bitmapovou předlohu do standardních komponent open-source frameworku Flex 4, ale definuje i stavy aplikace (změny uspořádání komponent) a přechody a animace mezi nimi. Dále pak může přidat i interakci (po kliknutí na tlačítko přejdi do dalšího stavu, při výběru položky ze seznamu proveď animaci a podobně).

Flash Catalyst do textu
Workflow s Flash Catalyst

(Nejprve se vytvoří interaktivní prototyp s hotovou grafikou, odsouhlasí se se zákazníkem a následně se předává programátorovi k finalizaci. Programátor již grafiku výrazně neupravuje.)

Flash Catalyst do textu
Časová osa

Animační časová osa je vteřinová, oproti frame-based ve Flashi Professional, a veškeré animace se převedou do srozumitelného kódu, který může programátor jednoduše následně upravit.

Flash Catalyst do textu
Nástroje, Vrstvy, Knihovna, Komponenty 

K dispozici jsou standardní nástroje pro jednoduchou práci s grafikou.

Flash Catalyst umožňuje round-tripping zpět do Photoshopu či Illustratoru. V praxi to znamená, že se rozhodnete komponentu vizuálně upravit až po importu do Flash Catalystu. Stačí daný prvek vybrat a zvolit Edit in Illustrator/Pho­toshop. Round-tripping na úrovni kódu mezi Flash Builder 4 a Flash Catalyst zatím není možný.

Flash Catalyst do textu
HUD (Heads-Up-Display) nabízí okamžité možnosti při výběru komponenty

Po kliknutí na Convert Artwork to Component se zobrazí menu, které vám umožní převést grafiku do funkční komponenty:

Flash Catalyst do textu

Pomocí Flash Catalystu můžete vytvářet například:

  • Flash Catalyst do textu

    Rozhraní aplikací

  • Interaktivní obsah do stránek
  • Porfolia
  • Produktové průvodce
  • E-learning a vzdělávání
  • Prototypy RIA aplikací
  • Wire-framing
  • Microsite
  • Navigaci ve stránce
  • Widgety

Nativní převod grafiky

Jistě váš okamžitě napadne, jak je to s převodem vektorových stínů, přechodů a primitivních tvarů z Illustratoru do Flash Catalystu. Vše je převedeno nativně do ActionScriptu, resp. MXML, nikoliv do bitmap – čímž se vektorové vlastnosti zachovají i při následném zvětšení/zmenšení objektů. Primitivní tvary jako elipsy, cesty apod. jsou též reprezentovány vektorově. Na bitmapy se při exportu převádí pouze vzory – patterns.

Spark komponenty

Flex 4 uvedl nový komponentový model, o který se Flash Catalyst opírá. Jde o oddělení logiky, chování a dat od vzhledu komponenty. Celou komponentu tak můžete kompletně graficky změnit, aniž by se to projevilo na jejím výsledném chování.

Flash Catalyst do textu

V červnu 2009 byla uvolněna první betaverze Flash Catalystu na labs.adobe.com, současně s nástupcem Flex Builderu, který nese název Flash Builder 4. V říjnu 2009 při příležitosti konference Adobe MAX vyšla další betaverze, která obsahuje rozšíření, včetně práce s videem. V současné době tedy Adobe nabízí tři nástroje pro přímou tvorbu RIA pro Flash Player a Adobe AIR: Flash CS4 Professional, Flash Builder 4 a Flash Catalyst.

Více info a stažení beta verze: http://labs.adobe.com/…ashcatalyst/

Komentáře

Subscribe
Upozornit na
guest
33 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
fos4

Z titulky vede spatny odkaz:
> flash-catalyst-snadny-navrh-ria-apliakce
> flash-catalyst-snadny-navrh-ria-aplikace

fos4

Už to funguje – prosím smazat.

pr.rybar

Ciste a jednoduchsie webove riesenie RIA vyzera nasledovne:

  1. dizajner navrhne aplikaciu a jej dizajn vo forme html a css
  2. programator UI ju pomocou Javascriptu ozivi, cim ziskame prototyp pre zakaznika; AJAX datove sluzby su dummy a na realne datove sluzby sa napoja az po implementacii AJAX REST datovych sluzieb na serveri
  3. programator na strane serveru vytvori pre AJAX REST web sluzby pre UI aplikacou

Vsimime si:

  1. nepotrebujeme ziadne specialne vyvojarske nastroje ktore musia mat vzajomne importovatelne projekty
  2. nerobime 3× import projektu z nastroja do nastroja, co nam moze robyt problemy ak sa rozhodne zakaznik na zaver trosku zmenit dizajn
  3. nemusime sa bat, ze nas zakaznik, alebo jeho obchodny partner nahodou nebude mat flash :)
  4. flash, flex, silverlight a im podobne cierne skrinky nemozno povazovat za web
dc

Pekne napisana teoria (alebo ste iba teoretik?).
1. html css – bohuzial stale si kazdy prehliadac vysvetluje niektore taky a standardy podla seba a argument pred klientom ze ved to mame podla w3c a ine nas nezaujima neobstoji (proste IE6 tu este aj ked v minorite je a ostatne prehliadace maju tiez svoje muchy tak to treba osetrit, bohuzial neprijemna realita)
2. javascript – no kedze to bezi v prehliadaci tak podobne ako bod 1. Staci si vyskusat aj nektore zname frameworky a zistite ze mnohe z nich maju vecsie ci mensie problemy s roznymi prehladacmi. Zalezi ci ten drobny problem bude pre vasu aplikaciu zasadny alebo nie a ci sa da alebo neda lahko odstranit.

A co sa tyka toho ze by zakaznik alebo jeho klienti nemali flash tak myslim ze toho sa fakt netreba obavat. V najhorsom nech si pozrie statistiky na svojom webe a hned bude vidiet. Prakticky cez 90% ludi ma nainstalovany flash.

Netvrdim ze flash je vseliek, ma tiez svoje muchy, ale momentalne to mne pripada ako lepsia cesta nez to vecne lepenie roznych css/javascript frameworkov a kniznic ked sa clovek desi co sa zasa rozdrbe pri novej verzii niektoreho prehliadaca alebo ked nahodi novsiu verziu kniznice.

pr.rybar

Vy ste asi praktik zaciatocnik.
Ak mate pravdu, v blizkej dobe bude asi google a jemu podobni migrovat svoje Javascriptove RIA aplikacie na Flex.
Cas ukaze kto z nas dvoch mal pravdu. :)

pas

Googlovské aplikace jsou hezký příklad – u GMailu není Flash potřeba, naopak třeba Street View v mapách dnes jinak než ve Flashi udělat nejde. Jiným příkladem RIA, kde je Flash na místě, je Photoshop.com nebo aplikace na Acrobat.com.

pas

Ještě mě napadlo, že dalším kandidátem na flashovou RIA z portfolia Google aplikací by mohla být Picasa. Uvítal bych úpravy fotek přímo online, namísto dnešního řešení s dvojím GUI – jednom na webu a druhém v desktopové aplikací, která pořád nemá beze zbytku vyřešenou synchronizaci se serverem.

dc

ja ale netvrdim ze javascript/html sa nema sancu uzivit. Urcite su situacie kde pouzitie flashu je ako kanon na vrabce ale zasa robit nejaku komplexnu ria aplikaciu v javascripte/html zacne byt peklo. A priznam sa ja sa rozhodoujem podla svojich potrieb a potrieb v praci. To ci google bude alebo nebude migrovat je mi ukradnute. Ma ludi ma zdroje ma cas a podla toho sa zariadil. Na druhu stranu az Vam bude niekto dupat na krk s terminom ze chce vysledok tak nebudete mat asi chut hladat chybu v nejakom frameworku preco nechodi prave s niektorym prehliadacom.
Ano cas ukaze.

pas

Flash samozřejmě není web, ale to snad někdo tvrdí? Ve zkratce „RIA“ jsem si písmene W nevšimnul. :) Také to ovšem není černá skříňka. Nástroje, které tu Tom Krcha propaguje, usnadňují práci, ale také můžete používat open source SDK a programovat v libovolném textovém editoru. Obecně Flash použijete pochopitelně hlavně u projektů, které vyžadují něco, co HTML/AJAX prostě neumí, od pokročilé grafiky, přes kameru, k peer-to-peer komunikaci, atd.

pas

Tak tak. Proto také námitka s Google aplikacemi není úplně fér, jelikož tam je situace ohledně lidských a časových vývojářských zdrojů úplně jiná než když někdo potřebuje rychle spíchnout nějakého jednoúčelového klienta k nějakému systému. A zároveň je tam extrémní důraz na svižnost aplikací – ruku na srdce, i já jako propagátor flashových RIA mám rád HTML rozhraní GMailu nebo Docs, Flash by dnes asi rychlostí ještě nemohl konkurovat, ale věřím, že Flash Player 11 už bude. ;-)

pr.rybar

„Osobne si uz nedovedu predstavit programovat neco v Ajaxu, kdyz to ve Flexu muzu mit za mnohem kratsi dobu – napr. layout, skinning (FC) ci propojeni na DB“

Mozno je vela tachych, pre ktorych je bezne to, co si Vy osobne neviete ani predstavit :)
Faktom stale zostava, ze Flex aplikacia nie je web aplikacia.

Borek Bernard

>>> Faktom stale zostava, ze Flex aplikacia nie je web aplikacia.

Přesná definice webové aplikace neexistuje, ale mohl bych říct, že když Flex aplikace běží v prostředí webu a na jeho protokolech (i když ne nutně jen tam), je tím pádem webová. On třeba takový GMail taky nemá s původní ideou hypertextově provázaných dokumentů moc společného…

pr.rybar

Dobra webova aplikacia je RESTovska.
Je Flex aplikacia RESTovska?

Borek Bernard

Proč by nemohla být? Mimochodem, snad si rozumíme, že Flex je klientská technologie, zatímco REST-style rozhraní je záležitost serveru.

pas

To je jako byste se ptal, zda je C++ aplikace RESTovská. :)

pr.rybar

Rich Internet applications (RIAs) are web applications that …
[ http://en.wikipedia.org/…_application ]

Vas nazor, az na male nepresnosti, dava zmysel.
Podla komentarov v tejto diskusii usudzujem ze vacsina z diskutujucich doteraz nepochopila o com je web a ako funguje.
Uz len tvrdenie, ze 90% ludi ma nainstalovany flash a teda je to OK, je maximalna demagogia. Co ked prave tych 10% su obchodni partneri vasho zakaznika?

pas

Pojem RIA vymyslela kdysi Macromedia právě pro flashové aplikace. Následně jej převzal Microsoft a potom i ostatní a začali jej používat pro běžné webové aplikace a jak je vidět, tak nakonec i wikipedisti, ale to už je jejich problém.

RIA nemusí běžet jen v pluginu v browseru, ale i v desktopovém runtimu (Adobe AIR), tam už pak souvislost s webem je minimální (pokud se komunikuje přes HTTP) nebo nulová (pokud se komunikuje jinými protokoly).

pas

Demagogie (no spíš nesmyslnost) je mávat těmi 90 procenty, ale úplně stejně nesmyslné je mávat těmi 10 procenty.

Pokud se nebavíme o konkrétním projektu, tak se můžeme hádat do nekonečna. Jsou projekty (typicky reklama), kde je nutné pečlivě sledovat statistiky penetrace různých verzí Flash Playeru a podle toho se rozhodovat. A pak jsou projekty (na takovém dělám), kdy se na tyhle čísla prakticky vůbec nedíváme, protože víme, že když uživatele vyzveme k nainstalování nové verze Playeru, tak to udělají, jelikož ví, že za to dostanou něco hodnotného.

dc

Percenta budu pre kazdy web asi ine pretoze bude zalezat co ten web ponuka.Ine bude mat nejaky staticky web ine nejaka prezentacia. A ked to bude nejaka web aplikacia tak si zasa mozem tie podmienky aj klast ak ponukam klientom nejaky servis (povedzme aj plateny) tak jednoducho aj oni musia splnit nejake zakladne poziadavky (a to plati aj pre javascript – prehliadac).
Este raz nikto vam javascript/html neberie, len poniektory uz maju toho maglajzu a vecnej vojny medzi prehliadacmi a standardami asi dost. Flash je sice uzatvorenejsi ale zasa od jednej spolocnosti tym padom aj menej rozbity.Ja si myslim ze obe technologie maju sancu existovat a aj koexistovat a nech si kazdy vyberie.
A co sa tyka pochopenia webu tak to co je teraz uz davno nema nic spolocne z webom a z mojho pohladu je to len znasilnovanie povodnej myslienky hypertextoveho textu (s odkazmy).To ze sa niekto snazi do toho teraz natlacit uz aj aplikacie (a je jedno ci je to cez javascript,flash,sil­verlight a ine) to je uz hnus. Tak isto ako REST, JOSON a dalsie aktualne technologie. Proste http na takyto prenos nebol stavany a web s htmlkom tak isto nie. Z tohto pohladu ste aj Vy asi nepochopili o com bol a asi mal byt web, ale proste naroky a poziadavky sa zmenili.Osobne je pre mna velkou zahadou potreba prenasat desktopove aplikacie do webu, napriklad rozne office baliky a podobne.Uz len cakam kedy niekto spacha video striznu alebo 3d modeler cez web…

pas

Potřebu přenášet desktopové aplikace do webu já osobně naprosto chápu u office aplikací a jakýchkoliv jiných aplikací, kde se sdílí data mezi lidmi a je potřeba dokumenty upravovat třeba i z mobilu. Osobně už minimálně rok nemám nainstalovanou žádnou office (MS, Open či jinou) a je to skvělý pocit. U video střižny asi těch důvodů mít to jako RIA tolik nebude.

Z výše jmenovaných technologií jediný Silverlight vznikl primárně s ambicí být RIA technologií. HTML má hypertextovou historii, Flash má animační historii. Přesto fandím Flashi, je to taková dravá štika, která se umí rychle adaptovat.

pr.rybar

Viete co je REST a preco ho Fielding zaviedol?
REST nie je technologia! Je to architektonicky styl.
Definuje ako ma vytzerat dobre navrhnuta webova aplikacia a flexove serepeticky do definici dobrej web aplikacie nezapadaju.

A k tej videostrizni, jeden komentar tu v diskussi hovoril o tom ze chce aplikaciu pre upravu fotografii (vo flexe). Co si o nom myslite?

pas

No REST je určitě zajímavý koncept, ale snad nechcete říct, že jakýkákoliv jiná architektura není „dobrá“. Zajímalo by mě, zda váš názor na „flexové serepetičky“ je pouze jakýmsi nábožensky zabarveným výkřikem, nebo zda máte konkrétní kritiku nějakého frameworku či design patternů, které používáme ve světě Flashe.

Co se týče názoru, že Picasa je dalším kandidátem v rámci Google aplikací na zpracování formou flashové RIA, to byl můj názor, takže proč nediskutujete přímo se mnou?

pr.rybar

> No REST je určitě zajímavý koncept, ale snad nechcete říct, že jakýkákoliv jiná architektura není „dobrá“.

REST je architektura/styl webu. Ak sa vzdalujete od RESTu, vzdalujete sa od webu. Myslim ze flash, flex, silverlight, javafx a akekolvek im podobne riesenia su od RESTu (a teda aj webu) dost daleko. Ak sa teda pani chcete bavit o webe, bavime sa o RESTe.

Borek Bernard

>>> Myslim ze flash, flex, silverlight, javafx a akekolvek im podobne riesenia su od RESTu (a teda aj webu) dost daleko.

Můžete tenhle svůj názor nějak podložit?

pr.rybar

Dokazete tento nazor nejako vyvratit?
To asi treba nieco vediet o RESTe.

Borek Bernard

RIA technologie umí bez problémů komunikovat s RESTovým rozhraním na serveru, pořád nechápu, co svými komentáři myslíte.

pas

Ok, takže je to o té terminologii.
Já flashovým aplikacím neříkám webové. Ale vztah mezi všemi těmito pojmy není zas tak jednoduchý. Flashové aplikace používají (mimo jiné) webové protokoly. Můžou používat i REST. Vztah mezi Flashem a webem je třeba takový, že ve Flashi můžete naprogramovat HTML renderer (proč byste to ovšem dělal, že? :)) … Takže myslím, že v určitém širším pojetí se dají flashové aplikace považovat za součást Webu jakožto infrastruktury, stejně jako tak někdo může brát RSS readery, různé klienty webových služeb, atd. Ale má tahle debata vůbec nějaký praktický smysl? :)

Gangsta

Tak právě ten 3D modeler začínají dělat známí v jedné firmě. Podle mého názoru je to kravina, ale já jsem strašný zpátečník, takže kdo ví. Třeba to úspěch mít bude.

Chtějí ten modeler (a návazné věci) přes web pronajímat, myslí si, že víc vydělají, než kdyby prodávali desktopové aplikace.

MD

> 1. dizajner navrhne aplikaciu a jej dizajn vo forme html a css

Designer to hlavne navrhne ve photoshopu ;-)

Honza77

1) Pomůže mi Catalyst také při opačném postupu – tedy napřed programátor vytvoří funkční prototyp, následně grafik vytvoří na základě prototypu grafický návrh (který respektuje stejné ovládací prvky, ale zadefinuje jim jiný vzhled a umístění) a pak je třeba to propojit?

2) Jak se Catalyst vypořádá s uživatelskými komponentami? Obsahuje zadrátované příkazy pro vytvoření scrollbaru a jeho částech nebo lze takto mapovat na úplně jinou komponentu, kterou si napíši?

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.