Flex 4: skinování aplikací

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.

Seriál: Stručný průvodce po frameworku Flex 4 (6 dílů)

  1. Flex 4: začínáme 25.1.2010
  2. Flex 4: States a Transitions 1.2.2010
  3. Flex 4: Drag-and-drop 8.2.2010
  4. Flex 4 – formuláře a validace 1.3.2010
  5. Flex 4: skinování aplikací 9.3.2010
  6. Flex 4: Webové služby 12.4.2010

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. 

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 20

Přehled komentářů

Erender Zaujimave, ale tesim sa na viac
pr.rybar Re: Zaujimave, ale tesim sa na viac
pas2007 Re: Zaujimave, ale tesim sa na viac
Erender Re: Zaujimave, ale tesim sa na viac
peter Re: Zaujimave, ale tesim sa na viac
pas2007 Re: Zaujimave, ale tesim sa na viac
-tom- Re: Zaujimave, ale tesim sa na viac
Erender Re: Zaujimave, ale tesim sa na viac
peter Re: Zaujimave, ale tesim sa na viac
Viktor Bezděk Tema na serial
-tom- Re: Tema na serial
pr.rybar Re: Tema na serial
pas2007 Re: Tema na serial
pr.rybar Re: Tema na serial
pas2007 Re: Tema na serial
Erender Re: Tema na serial
Erender Re: Tema na serial
rostapetr Re: Tema na serial
Miki Proč?
LZ. skinovani
Zdroj: https://www.zdrojak.cz/?p=3184