Flex tiptrik – změna vzhledu za běhu aplikace
8.2.2007· Autor: Ondřej Brichta·
Počet komentářů: 9
Nedávná aktualizace Flex Builderu přinesla zajímavou novinku v podobě možnosti načítání stylů za běhu aplikace a tím tak měnit celkový vzhled. Dnes si ukážeme jak na to.
Změna vzhledu pomocí CSS
V tomto článku jsme si představili možnosti změny vzhledu jednotlivých komponent. Pokud se podíváme do Helpu k Flex Builderu, necháme si zobrazit některou z komponent a podíváme se do části se seznamem stylů, vidíme, že lze měnit opravdu vše.
Abychom měli jednotlivé styly přehledně uspořádané, budeme je vždy vyčleňovat do externích CSS souborů, které jsou k tomuto určené. Jak již bylo v úvodníku řečeno, od poslední aktualizace Flex Builderu máme možnost načítat tyto styly za běhu aplikace.
Lze namítnout, že tato možnost zde byla i před aktualizací (změna stylu pomocí funkcí aplikace), ovšem tyto styly by musely být součástí vyvíjené aplikace. To teď nemusí.
SWF místo CSS
Aby to ale nebylo zas tak jednoduché, nemůžeme samotné CSS soubory načítat přímo, styly se musí načítat v podobě SWF souborů. Nemusíme se ovšem obávat náročné kompilace SWF souborů, vše zařídí Flex Builder.
Pokud máme v projektu CSS soubor, který chceme za běhu načítat, v okně prohlížeče souborů (Navigator) na něj klikneme na něj pravým tlačítkem myši a ze zobrazeného menu zaškrtneme položku „Compile CSS to SWF“:
Po této akci se společně se souborem aplikace vyexportuje příslušný SWF soubor se styly CSS z souboru.
Ukázková aplikace
Ukažme si nyní jednoduchý příklad načítání externích stylů. Nejdříve si připravíme tři CSS soubory:
Styl_1.css:
Application {
backgroundGradientColors:#0000a0, #000040;
}
Panel{
backgroundAlpha: 0.6;
backgroundColor: #FFFFFF;
cornerRadius: 5;
borderColor: #FFFFFF;
borderAlpha: 0.3;
}
Text{
fontWeight: "normal";
fontStyle: "normal";
}
Styl_2.css:
Application {
backgroundGradientColors: #ff8000, #400000;
}
Panel{
backgroundAlpha: 0.6;
backgroundColor: #FFFFFF;
cornerRadius: 10;
borderColor: #FFFFFF;
borderAlpha: 0.2;
}
Text{
fontWeight: "normal";
fontStyle: "italic";
}
Styl_3.css:
Application {
backgroundGradientColors: #80ff00, #004000;
}
Panel{
backgroundAlpha: 0.6;
backgroundColor: #FFFFFF;
cornerRadius: 15;
borderColor: #FFFFFF;
borderAlpha: 0.6;
}
Text{
fontWeight: "bold";
fontStyle: "normal";
}
Z jejich obsahu je patrné, že jejich načtením budeme měnit pozadí aplikace a styl komponenty Panel a vzhled textu v komponentě Text. Nezapomeneme zaškrtnout volbu „Compile CSS to SWF“ a můžeme se podívat na MXML kód aplikace:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
private function setStyl(num:Number):void{
var file:String = "styl_"+String(num)+".swf";
StyleManager.loadStyleDeclarations(file);
}
]]>
</mx:Script>
<mx:Panel width="358" height="200" layout="absolute" title="Okno">
<mx:Text x="10" y="10" text="Nullam ultrices, odio non faucibus dapibus, tortor nisi sollicitudin lectus, ut sodales justo odio ut elit. In commodo sollicitudin mauris. Sed quis odio sit amet eros molestie vehicula. Vestibulum ornare cursus lorem. Nullam ligula diam, tincidunt quis, cursus quis, viverra sed, elit." width="318" height="104"/>
<mx:ControlBar horizontalAlign="center">
<mx:Button click="setStyl(1)" label="Načíst Styl 1"/>
<mx:Button click="setStyl(2)" label="Načíst Styl 2"/>
<mx:Button click="setStyl(3)" label="Načíst Styl 3"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Vidíme, že pro načítání nového stylu je použita třída StyleManager jejíž metoda loadStyleDeclarations umožňuje načítat externí SWF soubory se styly. Po exportu bude aplikace vypadat takto:
runtime_css.swf
Ondřej Brichta Vývojář multimediálních aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server
Web:
http://www.obria.cz
|
Motto: <°))))><
Seriál:
Tipy a triky
Tipy a triky je seriál zaměřený na zajímavá řešení a vylepšení flashových aplikací