Tipy triky – Adobe Flex a styly komponent

5.10.2006· Autor: Ondřej Brichta· Přidat komentář

Dnešní tip se bude zabývat možnostmi nastavení stylů jak u jednotlivých Flex komponent tak i možnostmi globálního nastavení stylů celé aplikace nebo jednotlivým skupinám komponent.

Vlastní styly komponent

Standardní vzhledy Flex komponent jsou sice povedené a určitě se při jejich použití nemusíme za ně stydět, ale ne vždy jsme v situaci, kdy můžeme používat jednotný a široce používaný vzhled. Často je nutné přizpůsobit vzhled dle požadavků klienta. V tomto případě si s nabízenými standardními vzhledy komponent moc nepomůžeme.

Řešením jsou vlastní styly, určené jak pro celou aplikaci, tak pro jednotlivé skupiny komponent, nebo dokonce i pro jednotlivé komponenty stejného druhu.

Ruční editace

Asi nejjednodušším způsobem je vytvoření vzhledu „ručně", tedy v „Design" modu Flex aplikace. Příkladem může být „Panel" komponenta, kterou lze s využitím „Style" části panelu „Flex properties" upravit do této podoby:

Ovšem tento způsob ruční editace není praktický, pokud máme větší množství komponent, které v aplikaci používáme. Pak je mnohem vhodnější vytvoření vlastního stylu, který se dle potřeb aplikuje na vybrané komponenty. Změna vzhledu komponenty je pak záležitostí změny několika řádek kódu stylu.

Změna vzhledu komponent

Vlastní změna vzhledu se provádí implementací tagu <mx:Style>, do kterého se vloží potřebné deklarace všech stylů. Příkladem může být změna barveného schématu celé aplikace:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
 global {
 themeColor : #FF0000;
 }
</mx:Style>
</mx:Application>

Pomocí selektoru global změníme barevné schéma všech komponent na červené. Pokud bychom chtěli specifikovat podrobněji, kterou komponentu budeme zvlášť měnit, provedeme to pomocí selektoru názvu příslušné komponenty:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
 global {
 themeColor : #FF0000;
 }
 Button {
 themeColor : #008000;
 }
</mx:Style>
</mx:Application>

Stále zůstává červené barevné schéma, ale v případě komponenty „Button" je schéma změněno na zelené. Platí zde jednoduché pravidlo, že konkrétnější selektory jsou dominantní nad obecnějšími. V tomto případě tak bude správně zobrazeno tlačítko v zeleném stylu, když je globálně nastaven styl červený.

Můžeme jít ale ještě podrobněji, kdy můžeme vytvořit vlastní selektor třídy, na kterou se lze v jednotlivých komponentách odkazovat. Definice stylů pak může vypadat takto:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
 global {
 themeColor : #FF0000;
 }
 Button {
 themeColor : #008000;
 }
 .modre{
 themeColor : #00ffff;
 }
 .zlute{
 themeColor : #ffff80;
 }
</mx:Style>
</mx:Application>

Nové dvě třídy „modre" a „zlute" se ihned objeví v nabídce stylů v design módu aplikace:

Pokud bychom chtěli určit podrobněji barevné schéma jednotlivých komponent, můžeme použít tyto selektory tříd na vybrané komponenty:

 <mx:Button x="123" y="427" label="tlačítko 1" color="#000000" styleName="modre"/>
 <mx:Button x="123" y="457" label="tlačítko 2" color="#000000" styleName="zlute"/>

 

Upřesnění dané třídy stylu se provádí pomocí atributu „styleName" příslušné komponenty. Jak již bylo řečeno, tyto styly mají ze všech největší váhu, tlačítka tedy budou mít žluté/modré barevné schéma i kdyby byl globálně a nebo ke komponentám „Button" přiřazen jiný styl.

Možnosti nastavení vzhledu jednotlivých komponent jsou opravdu veliké. Stačí se jen podívat do stylů asi nejjednodušší komponenty, kterou je tlačítko: http://livedocs.macromedia.com/flex/2/langref/mx/controls/Button.html
Některé vlastnosti se naštěstí vyskytují ve více komponentách, ale i tak je to opravdu značné množství, u kterého je lepší využívat nápovědu, než se snažit jednotlivé styly zapamatovat.

Poslední zmínka ke stylům bude patřit možnosti načítání externího CSS souboru to <mx:Style> tagu. Jedná se velice jednoduchý zápis:

<mx:Style source="souborStylu.css"/>

V případě větších projektů je ta v zájmu zachování přehlednosti hlavního MXML souboru vhodné využívat externí CSS soubory pro definici jednotlivých stylů dokumentu.

Komentáře k článku