Flex – skinování za běhu aplikace

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

Skinování komponent za běhu aplikace je poměrně zajímavou možností pro flexové aplikace, které mají být dynamicky skinovatelné. Podívejme se jak na to

Flex skiny

Možnosti skinování flexových komponentn jsou hodně široké. Mezi atraktivní volbu patří přípravy skinu ve Flashi (pro CS3 je rozšíření zde: https://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins), kde si můžeme zvolit skin konkrétní komponenty, kterou chceme upravovat:

 

Samotný zdrojový soubor pak obsahuje MovieClip pro konkrétní komponentu, jejíž skin budeme měnit:  

 

V případě, že chceme použít uvedený soubor skinu, použijeme po exportu SWC nebo SWF soubor coby zdroj dat pro komponentu při editaci CSS stylu dokumentu:

 

uvedený způsob je ale určen pro použití v rámci kompilace SWF souboru aplikace. Jakmile bychom chtěli uvedený soubor skinu načíst a použít v průběhu chodu aplikace, musíme zvolit jiný způsob.

Základem bude opět export SWF souboru, který obsahuje exportované objekty skinu:

 

Můžeme s úspěchem využít stávajících šablon a pouze je přizpůsobit svým potřebám. V rámci flexové aplikace musíme nejprve načíst externí SWF soubor skinu, abychom k němu mohli dále přistupovat:

skinLoader = new Loader();
var request:URLRequest = new URLRequest("style.swf");
var context:LoaderContext = new LoaderContext();
context.applicationDomain = new ApplicationDomain(ApplicationDomain.currentDomain);
skinLoader.load(request, context);

O načtení externího SWF souboru se postaral objekt třídy Loader, u kterého musíme nastavit stejnou aplikační doménu, jako je ta naší aplikace. To proto, abychom mohli procházet externí dokument na úrovni tříd a pracovat s nima.

var skinClass:Class = skinLoader.contentLoaderInfo.applicationDomain.getDefinition("Button_skin") as Class;
var NewCssStyle:CSSStyleDeclaration = new CSSStyleDeclaration("tlacitko");
NewCssStyle.setStyle("skin", skinClass);
StyleManager.setStyleDeclaration(".tlacitko", NewCssStyle,true);

Jakmile jsou data načtená, můžeme pomocí metody „getDefinition" získat definici požadované třídy exportovaného skinu. Jakmile máme hotovo, vytvoříme novou CSS deklaraci a nastavíme vlastnosti „skin" hodnotu získané třídy.

Posledním krokem je pak aktivace nového stylu pomocí metody „setStyleDeclaration" třídy StyleManager a pokud je poslední parametr metody uvede logická hodnota true, budou změny automaticky zobrazeny ve všech dotčených komponentách.

Komentáře k článku