Flex 4: skinování aplikací

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:

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

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

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:

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.