load css dynamicly in flex 3

[hussein006]

is there a way to load a style sheet dynamically based on resource file in flex 3.0

thanks

[alvijee]

is there a way to load a style sheet dynamically based on resource file in flex 3.0

thanks

This will work in either Flash or Flex. (this is non-working psuedo-code for demo purposes only)

1. Load the text of the CSS file with an URLLoader, something like:

var cssLdr : URLLoader = new URLLoader();
cssLdr.addEventListener (Event.COMPLETE, handleCSSLoadComplete);
cssLdr.load ();

1. Parse the CSS into a StyleSheet object.

function handleCSSLoadComplete (evt:Event) : void {
var sSheet : StyleSheet = new StyleSheet();
sSheet.parseCSS (evt.target.data);
}

1. Apply that style sheet where you need it

Application.styleSheet = sSheet.

[rutger]

[...]

1. Apply that style sheet where you need it

Application.styleSheet = sSheet.

¿A way to do that last part in Flex?, i've tried but just cant set just loaded StyleSheet as Application's one.

Thnx in advance.

[justme123]

I'm working on dynamic css support for a flex app aswell.

Here are 2 approaches that may be useful for you:

#1 A custom CSSLoader (http://www.rubenswieringa.com/blog/cssloader) by Ruben Swieringa.

#2 Convert StyleSheet to CSSStyleDeclarations and use StyleManager.setStyleDeclaration to apply them.(see example below)
I'm not quite happy with it yet (need to set styleNames in css, using Label{color:#FF0000} doesn't apply the color to all Labels at runtime and defining style names for everything kind of defeats a purpose of css).

A 2004 blogpost (http://rantworld.blogs.com/flashlit/2004/02/using_styleshee.html) talks about StyleSheet having a private Array of CSSStyleDeclarations available, but so far i didn't find out how to access it (hints apreciated).


public function loadCSS(url:String){
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE,cssLoaded);
loader.load(new URLRequest(url));
}

private function cssLoaded(e:Event):void{
var ss:StyleSheet = new StyleSheet();
var cssDec:CSSStyleDeclaration;
var style:Object;
ss.parseCSS((e.currentTarget as URLLoader).data);
for each(var styleName:String in ss.styleNames){
cssDec = new CSSStyleDeclaration(styleName);
style=ss.getStyle(styleName);
for(var styleProp:String in style){
cssDec.setStyle(styleProp,style[styleProp]);
}
StyleManager.setStyleDeclaration(styleName,cssDec, true);
}
}

[Eedanna]

Hi folks,

I am new to flex working for the last 1 month. I have a scenario like loading the css file externally and populating the stylenames to the List(This is done and working fine). but my issue is i need to show the preview of the stylename in the listbox.

Example: .css file is having the data like below:

.color{
color:red;
font-size:12;
text-align:center;
font-weight:bold;
}

.color is the stylename. while displaying the stylename in the list i need to show the preview of the color.

like color should display in the center(center of the listbox) with red color,bold and fontsize 12.

can any one please give me the suggestions how to move a head.

Thanks in Advance.