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

Zdroják » Různé » Flex 4: skinování aplikací

Flex 4: skinování aplikací

Články Různé

Každý kdo má zkušenosti s předchozími verzemi Flexu ví, že vytvořit vlastní vzhled aplikace nebyl úplně jednoduchý úkol. Vývojáři Adobe se toto rozhodli změnit a ve Flexu 4 přišli s kompletně přepracovaným systémem skinování. V článku si ukážeme, jak skinovat komponenty ze sady Spark bez použití jakéhokoli dalšího nástroje.

Co se používá k přípravě skinu

MXML ve Flexu 4 bylo rozšířeno o poměrně velké množství nových značek. Pro skinování jsou pro nás, mimo jiných, důležité ty, které abstrahují kreslící metody ActionScriptu:

  • Rect – obdelník
  • Ellipse – elipsa, kruh
  • Path – křivka

Neméně zásadní jsou i formy výplně:

  • SolidColor – plnobarevná výplň
  • LinearGradient, RadialGradient – lineární nebo kruhový barevný přechod
  • BitmapFill – výplň bitmapou

Velice podobně vypadají i formy orámování:

  • SolidColorStroke – plnobarevné orámováni
  • LinearGradien­tStroke, RadialGradien­tStroke – lineární nebo kruhový barevný přechod orámování

Jak se skin vytváří

Každá vizuální komponenta ze sady Spark disponuje vlastností skinClass, která obsahuje předpis toho, jak má komponenta vypadat. Když tedy začnete vytvářet skin, nezačínáte na „zelené louce“, ale máte k dispozici předvytvořený skin od Adobe, který je ve všech případech, se kterými jsem se setkal velice srozumitelný.

Jak tedy vytvořit skin?

Vyberte si komponentu, které chcete upravit vzhled. V našem případě budeme pracovat s prvkem Button. Cílem je vytvořit skin tak, aby výsledek vypadal takto:

Skinování FLEXu

V projektu si vytvořte nový soubor typu MXML skin (obrázek 2).

Skinování FLEXu

Náš skin si pojmenujeme MujSkin a jako hostitelskou komponentu zvolíme spark.componen­ts.Button (obrázek 3).

Skinování FLEXu

Osobně vždy začínám tak, že si základní skin hostitelské komponenty očistím o vše nepotřebné a drobně jej přeformátuji, protože preferuji jiný typ vzhledu kódu než Adobe. Nehraje to vůbec žádnou roli ve funkcionalitě a každý z vás si osvojí to, co mu bude nejvíce vyhovovat.

Náš počáteční stav při vytváření skinu pro Button vypadá tedy takto:

<?xml version="1.0"
encoding="utf-8"?>
<s:SparkSkin
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
      minWidth="21"
minHeight="21" alpha.disabled="0.5">
    <fx:Metadata>
            <![CDATA[
                  [HostComponent("spark.components.Button")]
            ]]>
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <s:Label
            id="labelDisplay"
            textAlign="center"
            verticalAlign="middle"
            maxDisplayedLines="1"
            horizontalCenter=""
verticalCenter="1"
            left="10"
right="10" top="2" bottom="2"
      />
</s:SparkSkin>

Zachovali jsme pouze nezbytné části kódu:

  • Definici hostitelské komponenty
  • Definici stavů – stavy jsou součástí komponenty a ve skinu je třeba se všemi počítat
  • Label – komponenta Label s id labelDisplay, kterou je povinné ve skinu mít. Bez ni nebude fungovat, ale pokud ji nechcete využívat, nemusí být vidět.

Skin, který vytváříme, je složený ze dvou obdélníků, jednoho textového pole, efektů a výplní. Na první pohled se může zdát složitější, ale opak je pravdou. Níže je kód celého připraveného skinu včetně komentářů.

<?xml version="1.0"
encoding="utf-8"?>
<s:SparkSkin
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
      minWidth="21" minHeight="21"
alpha.disabled="0.5">
    <fx:Metadata>
            <![CDATA[
            [HostComponent("spark.components.Button")]
      ]]>
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
      <!-- Hlavni obdelnik, ktery bude mit 10pixelove zaobleni -->
      <s:Rect
            width="100%"
height="100%"
            radiusX="10"
radiusY="10">
            <s:fill>
                  <!--
Linearni gradient otoceny o 90 stupnu -->
                  <s:LinearGradient rotation="90">
                        <!-- Prvni barva gradientu, nadefinovana pro vsechny tri stavy -->
                        <s:GradientEntry color="#c10000"
color.over="#9a0000" color.down="#730000"/>
                        <!-- Druha barva gradientu, nadefinovana pro vsechny tri stavy -->
                        <s:GradientEntry color="#7f0000"
color.over="#650000" color.down="#4c0000"/>
                  </s:LinearGradient>
            </s:fill>
            <s:stroke>
                  <!--
                        Oramovani siroke 2 pixely, nadefinovane barvy pro vsechny tri stavy
                        Pixel hinting zlepsuje kvalitu vykreslovani radiusu
                  -->
                  <s:SolidColorStroke
                        weight="2"
pixelHinting="true"
                        color="#7f0000"
color.over="#650000" color.down="#4c0000"
                  />
            </s:stroke>
            <s:filters>
                  <!-- Glow kolem hlavniho obdelniku -->
                  <s:GlowFilter color="#000000" quality="3" blurX="6"
alpha="0.5"/>
            </s:filters>
      </s:Rect>
      <!-- Obdelnik pres pul hlavniho, ktery dela skleneny efekt -->
      <s:Rect
            width="100%"
height="50%"
            topLeftRadiusX="10"
topLeftRadiusY="10" topRightRadiusX="10" topRightRadiusY="10"
            blendMode="softlight"
alpha="0.45">
            <s:fill>
                  <s:SolidColor color="#ffffff"/>
            </s:fill>
      </s:Rect>
    <s:Label
            id="labelDisplay"
        textAlign="center"
        verticalAlign="middle"
        maxDisplayedLines="1"
        horizontalCenter="" verticalCenter="1"
        left="20"
right="20" top="15" bottom="15"
            fontFamily="Arial"
fontSize="20" color="#ffffff"
            fontWeight="bold">
            <s:filters>
                  <!-- Glow
kolem textu na tlacitku -->
                  <s:GlowFilter color="#000000"
quality="3" blurX="6"
alpha="0.75"/>
            </s:filters>          
      </s:Label>
</s:SparkSkin>

Na první pohled na kódu není nic komplikovaného. Teď jen potřebujeme skin navázat na naše tlačítko. Jsou dva jednoduché způsoby:

  • Parametr skinClass v MXML kódu
    <s:Button label=„Můj Button“ skinClass=„Muj­Button“/>
  • Navázat skin v CSS na konkrétní komponentu nebo na všechny
    s|Button {
    skin-class: ClassReference('MujButton');
    }
    s|Button.mujButton {
                skin-class: ClassReference('MujButton');
    }

Přišel čas na vyzkoušení výsledků našeho snažení. Pokud jsme nikde neudělali chybu, tak výsledek vypadá takto:

Skinování FLEXu

Jediný rozdíl je ve fontu, což není předmětem tohoto článku. Je vidět, že práce se skiny je opravdu jednoduchá a Flex 4 nám developerům tak ušetřilo hodně práce.

Ukázkový příklad ke stažení: Flex 4 – příklad ke skinování 

V dalším článku si ukážeme jak si skinování usnadnit pomocí Photoshopu, Illustratoru a Flash Catalystu. 

Komentáře

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

Zaujimave. Je pravda, ze vzhlad je dolezity… Ja osobne sa ale tesim na pokrocilejsie veci. Nezaujimam sa az tak o to, ako naskynovat komponenty… tesim sa skor (ako som uz pisla minule) na take zaujimavosti, ako su vlastne komponenty, servisy a komunikacia smerom na DB, rady, ako tvorit vacsie aplikacie – pouzitie modulov atd.
Kedy by sme sa tak na toto mohli tesit? budeme robit aj nejaku „vzorovu“ aplikaciu? Z mojej skusenosti je najlepsie pracovat na nejakej konkretnej veci, na ktorej by si nam ukazal co a ako. Ja uz sice flex trosku poznam, ale som samouk a predpokladam, ze nie vsetko robim dobre… takze ak by sa serial uberal smerom nejakej aplikacie, v ktorej by si nam ukazal vsetky ficurie, to by bolo skvele.

Urcite by sa dalo vymysliet nieco jednoduche – nejaky katalog hudby, filmov, evidencia receptov alebo cokolvek… Mozeme sa na taketo nieco tesit? Kedy asi tak? v ktorych castiach serialu (uz o chvilku? v lete? buduci rok?)?

PS: Momentalne bezim na flex SDK 3.2, nove veci robim v 3.5… aky velky rozdiel je podla teba v tejto verzii v porovnani s verziou 4?

Tesim sa.

pr.rybar

Zbytocne sa asi tesite. :(
Aj ja som sa tesil, ale uz ma to uplne preslo, co nova cast serialu tym vacsie sklamanie.
Katalog hudby, filmov, evidencia receptov, to su idealne aplikacie pre HTML CSS a Javascript.
Falsh je skratka na ustupe.

pas2007

Flash není na „ústupu“, ale na „přestupu“ – do oblastí, které HTML neřeší zatím ani na papíře, natož v praxi. Je jasné, že by vás tutorialy z těchto oblastí dráždily méně. Třeba vás autoři jednou potěší… Třeba i já, až budu mít někdy trochu času. :)

Erender

Nuz, dovolim si nesuhlasit. Resp. z casti suhlasit a z casti nesuhlasit.

1. Mam z vas pocit, ze ste mali z flexu urcite ocakavania a tie sa u vas nenaplnili. To ale neznamena, ze to tak bude u vsetkych. Mne sa tato technologia paci. Neberiem vsak vase vyjadrenia ako pokus principialne znechutit flex u ostatnych ludi (clovek by mozno mohol nadobudnut tento pocit po precitani vasich prispevkov). Beriem to tak, ze vam to proste nesadlo a zase, aj negativny nazor je nazor a treba ho respektovat :-).

2. Uvedene prikaldy som mal na mysli ciste ako priklady, na ktorych by sa dalo nieco ukazat. Musim s vami suhlasit, ze nariklad taky receptar by mohol byt kludne postaveny na klasickej technologii… je to ale vec autora, v com sa rozhodne urobim implementaciu. Ak by som mal teda uviest nejaky realistickejsi priklad, tak by som mohol pouzit napriklad aplikaciu pre podniky, ktore maju siroku pobockovu siet (typicky napr. poistovne a ich aplikacie), rozne ine programy pre sirsi pocet ludi atd. Napriklad ja som si vo flexe urobil aplikaciu – pomocnika pre hranie rulety. Urobit to klasickom webovom trojboji by bolo pre mna omnoho narocnejsie (nepovazujem sa vsak za nejakeho prebornika, vam by to mozno trvalo omnoho menej).

Je to zrejme o tom, co chcete vlastne urobit a potom, v com to urobit. Vsetko ma svoje pre a proti. V kazdom pripade, nemyslim si, ze by bol flax – flash na ustupe, myslim, ze jeho cas este len pride.

Prajem pekny den =)

peter

> 1. Mam z vas pocit, ze ste mali z flexu urcite ocakavania a tie sa u vas nenaplnili.

Nemam ocakavania, mam skusenosti, mam technologicky prehlad, sledujem vyvoj a mam odhad. Chcel som Vam dat tip aby ste sa o rok neprebudili a nebili hlavou do stola. :)

> Urobit to klasickom webovom trojboji by bolo pre mna omnoho narocnejsie.

Nejde o Vas a to ako Vam to, ci ono ide. Na webe ide o to, aby to bolo pouzitelne. Naco je web aplikacia vo flashi, ktoru nikto nechce. Hoci Vam to islo dobre, bol to strateny cas a smarna snaha.

O tom bol moj prispevok.

Aj pan Simek hovori, ze flesh je na prestupe. Prestupa z nohy na nohu a nevie ktorym smerom vykrocit. :)

pas2007

„Chcel som Vam dat tip aby ste sa o rok neprebudili a nebili hlavou do stola. :)“

Tohle mi říkali už v roce 2000. Od té doby se úspěšně živím Flashem. :) Chce to pochopitelně držet si ten technologický přehled, sledovat, kam směřuje Flash a kam směřují jiné technologie a používat všechno s rozvahou. Ne jako starosta Prahy 5, který si nechá udělat web ve Flashi, který opravdu nikdo kromě něj nechce. Kdyby však po více než 10 let nějakou technologii nikdo nechtěl, zcela určitě by tu už nebyla. :)

„Prestupa z nohy na nohu a nevie ktorym smerom vykrocit. :)“

Další z vašich zbytečných výroků, kterým ani sám nevěříte. :) Flash se zcela cílevědomě neustále rozšiřuje o vlastnosti, které v danou dobu HTML standardy neobsahují. To není konstantní množina vlastností. Například video – dřív ve Flashi nebylo, teď je na vrcholu a za pár let třeba zase nebude (resp. nebude se používat). Přirozený vývoj. Analogický přístup měl třeba Google se svým proprietárním pluginem Gears, který v danou dobu dělal to, co v danou dobu HTML neumělo.

-tom-

Nelze než souhlasit, tento typ tutoriálů (zaměřený na konkrétní příklady) bych také velmi uvítal, abych se zase po půlroce samostudia nedozvěděl, že vše dělám naprosto špatně a takto se už mezi profíkama vůbec nejede, viz. krátká diskuze na flash.cz :-))))

Nicméně chápu, že se vše píše až po práci ve volném čase, kterého nikdo nemá nazbyt, prostě nějak se s tím musíme, my samouci, poprat ;-)

Erender

My samouci – pekne povedane. Patrim presne do tejto kategorie. Nuz, ja som vecny optimista a tak, ako stale dufam, ze vyhram v sportke (moju ziadost o jackpot vytvalo zamietaju) tak stale dufam, ze tento serial:
1. neskonci niekde v polovici
2. bude zaujimavejsi a zaujimavejsi
3. budu prakticke priklady a ukazky

Budem sa tesit jak to hovado.

peter

> Nuz, ja som vecny optimista a tak, ako stale dufam, ze vyhram v sportke …

Ti co rozmyslaju hlavou vedia ze existuje pravdepodobnost a statistika a vedia si spocitat ze na sportke sa prakticky zbohatnut neda. :)
Na sportke bohatne iba spolocnost, ktora ju prevadzkuje. :)

Viktor Bezděk

Zdravim vsechny,

bylo pro me hodne neprirozene psat clanek na jednu konkretni vec, protoze se na ni vaze vzdy spousta dalsich veci, ktere nejsou soucasti tematu a ja se nemuzu rozepsat. Vase nazory tedy vitam.

Udelejme serial, behem ktereho udelame aplikaci od A do Z. Napada me hned nekolik typu, ze kterych si vy, ctenari, vyberte:

– formularova aplikace – primarne o komunikaci s databazi a validaci
– multimedialni aplikace – video, hudba, nahravani vlasnich dat, komunikace s databazi
– web vytvoreny ve flexu – primarne se bude jednat o tvorbu GUI, troska komunikace s databazi
– neco jineho – navrhnete

To co dostane nejvice „hlasu“ v nasledujicich tydnech zpracuji.

-tom-

Líbí se mi ten web+gui+databáze, tím bych asi začal a pak plynule přešel na ostatní témata :-D

Všechno z toho je zajímavý, takže si myslím, že je vcelku jedno, čím se začne, hlavně když to tím pak i neskončí ;-)

pr.rybar

web+gui+databáze je typicky priklad kedy nepouzit flash, skuste vymysliet nieco lepsie. :)

pas2007

Co takhle spíš nějakou AIR aplikaci? Typu klienta datové schránky, twitter klienta, apod.? U ní není žádný důvod používat webové technologie (takže pan Rybar zůstane v klidu :)) a nejlíp demonstruje poměr nákladů na vývoj ku pokrytí cílových platforem, v čemž je Flex bezkonkurenční.

pr.rybar

1) Vazne si stojite za tym co pisete? Ja osobne napriklad dam prednost desktopovemu klientovi pred nejakym Flashom a zrejme nebudem sam s tymto nazorom.

2) Pomaha Vam psychicky ked si pomenujete vsetkych, ktori nesuhlasia s Vasimi utkvelymi predstavami mojim menom? Asi z toho mate potom lepsi pocit, ked stoji proti Vasim nazorom jeden clovek ako ked je to masa internetovych pouzivatelov.

pas2007

ad 1) Nedovedu si představit běžného uživatele, který si vybírá mezi různými alternativními programy, že by se rozhodoval podle technologie, ve které byl program napsaný – zda v C++ nebo v Javě nebo v MXML/AS… Spíše se rozhoduje podle komfortu, který mu program dá. Můžeme říct velmi obecně, že nativně zkompilované aplikace jsou rychlejší než aplikace s runtimovou architekturou (na to asi narážíte, ne?). Ale to je jen jedno z mnoha kritérií. Pak jsou tu kritéria, která ocení vývojář, a ta se pochopitelně promítnou i k uživateli – program je rychleji a levněji vyvinutý, cílený na velké množství platforem současně, se standarně vyřešenou instalací a automatickou aktualizací, atd. Příkladem je http://www.multischranka.cz/

ad 2) Ne, nepomáhá, to jsem pochytil od vás (http://zdrojak.root.cz/clanky/vyvojar-si-jen-s-programovanim-nevystaci/nazory/7561/), je to špatný zlozvyk, omlouvám se a slibuju, že se ho zbavím.

Erender

Tak sa sa jednoznacne priklanam k volbe c. 1.
Nemyslim si, ze FLEX by bol najvhodnejsi kandidat na web urobeny vo flexy… V tom musim dat za pravdu nasemu Rybarovi. Multimedialna aplikacia – to by mozno slo, ale osobne niesom zamerany na nejake multimedia (Ostatni ludia by to ale mozno uvitali, to neviem).

Preto sa priklanam k volbe c. 1. Predstavujem si to ako nejaku formularovu aplikacijku, ktora bude predstavovat nejaky maly, uceleny system. Obsah uz necham na autora, napadov je vela:
– sprava statickych dat nejakeho systemu. Imaginarium: medzinarodna spolocnost ma prevadzky po celom svete a ma centralne spravovany ciselniky
– evidencny system pre pozicovnu aut. Imaginarium: obchodne miesto vo vsetkych vacsich mestach v republike. Centralne spravovane udaje o autach. V bode A si auto poziciam, v bode B ho vratim. Prehlad parku atd.
– personalna evidencia. Imaginarium: medzinarodna firma ma v kazdej krajine lokalne HR, ktore spravuje ich primarny okruh ludi pricom si mozeme domysliet jedno centralne HR kde sa budu collectovat globalne informacie
– jednoduchy system pre banku, ktory bude bezat v pripade vypadku core systemu (dodrzanie zakladneho business continuity planu – poskytnutie klientom zakladne operacie (nemusi ich byt vela)) – toto by bolo zaujimave aj z pohladu bezpecnosti (obfuscatory … atd.).

atd
atd
atd

No proste nametov je habadej. Jednoducho nieco, kde sa predvedu sikovnosti a vyhody flexu. Samozrejme, pouzitie FLEX technologie si obhajime sami pred sebou tym, ze sa zbavime jednotlivych instalacii kade tade, bezproblemovy prechod na vyssiu verziu programu. Staci mat na PCdle iba prehliadac. No a samozrejme cela ta omacka okolo toho vsetkeho. Ako by som to uz videl pred ocami.

Tesim sa.

Erender

Este som sa chcel spytat, ako casto je planovane vydavanie dielov a ci by bolo mozne jednotlive diely cislovat vzostupne ako boli vydane… nech v tom maju ludia jasno.

rostapetr

Osobně si myslím, že není zas až tak moc potřeba napsat aplikaci od A až do Z. Popravdě kdo půjde a napíše podle toho celou aplikaci? Pokud by o to někdo zájem měl, tak má možnost postupovat například dle http://www.adobe.com/devnet/flex/videotraining/ (videotutoriály i s příklady) Zvládne to i člověk, který nevládne angličtinou.
Jak jsem pochopil, tyto články slouží spíše o všeobecnou osvětu. Viděl bych zde tedy spíše ukázat na to, že flash je v něčem opravdu lepší. Ukázat zde třeba nějaké vychytávky. Třeba jednoduchou ukázku nějaké aplikace Augmented reality (třeba vizitky). Práce s kamerou videm fotografiemi,„3D“. Nějaké live služby, vizualizace dat, efekty a podobně. Každý už si pak dohledá co potřebuje. Samozřejmě neopomenutelná záležitost jak vůbec aplikaci psát správně.
Ten kdo by měl větší zájem může navštívit Adobe Users Group Meeting, probírají se i zde některý vychytávky a rozhodně se zde nachází spousta lidí, kteří rádi nejasnosti osvětlí.

Miki

Proče se proboha pod každým tutorialem objeví hromada příspěvků o tom jak je ta technologie špatná. Proč to lidem kteří mají potřebu nám sdělit jenom to, že ONI by pracovali jinak, v něčem jiném atd., vůbec stojí za to. Já když mě to nezajímá tak to nečtu.

Jinak autorovi moc děkuju a všechny tyto články vítám.

LZ.

Článek je dobrý, ale to skinovani pomoci xmlka.. yeach, zas na druhou stranu ušetři se tim místo na disku (pár kilobaitu) za cenu tvorby opravku škaredych buttonku.

Zkusim vymyslet něco lepšiho.

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.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.