How to Dynamically Load a CSS File into a Flex Application

How do you dynamically load a CSS file into a Flex application?

The application of CSS in Flex is handled on the server side at compilation and not on the client side at run time.

I would see two options then for you (I'm not sure how practical either are):

1. Use a server side script to compile your CSS as a SWF then load them dynamically.
2. Parse a CSS Style sheet and use the setStyle functions in flex to apply the styles. An similar example to this approach is the Flex Style Explorer where you can check out the source.

Good luck.

How do you dynamically load two different CSS file into a Flex application?

First, to load style sheets dynamically you need to compile them into separate .swf files. This can be done with mxmlc (or in Flex Builder by right-clicking on the css file and choosing "Compile CSS to SWF").
Then, to load the style-swf, you use the StyleManager

StyleManager.loadStyleDeclarations("blue.swf");

When you want to switch between styles, you'll also want to unload the previous style. So, assuming you put the name of css file in your combobox, in your css_changeHandler you'll do something like this:

StyleManager.unloadStyleDeclarations(styleid)
styleid = pickcssComboBox.selectedItem;
StyleManager.loadStyleDeclarations(styleid);

See Loading style sheets at run time for more details.

Selecting css file dynamically by clicking on the button in FLEX 3

You would have to use the facility within eclipse/flex builder to compile the CSS into SWF so that the styles can be changed at runtime.

You would also have to maintain the instance variable of the current theme id.

Is this what you are looking for?

public function switchTheme(theme:int):void {
    StyleManager.unloadStyleDeclarations("assets/styles/Theme"+currentTheme+".swf");
    StyleManager.loadStyleDeclarations("assets/styles/Theme"+theme+".swf");
    this.currentTheme = theme;
}

You would then assign the click handlers for each button to the switchTheme function - passing the theme id as a parameter.

In flex 4 Load css file from remote server

If the css file is compiled as a .swf file, yes:

StyleManager.getStyleManager(this.moduleFactory).loadStyleDeclarations("newStyle.swf");

Flex: Load images and swf's dynamically

I believe this is relevant to your case.

A SWF file can access one type of external resource only, either local or over a network; it cannot access both types. You determine the type of access allowed by the SWF file using the use-network flag when you compile your application. When the use-network flag is set to false, you can access resources in the local file system, but not over the network. The default value is true, which allows you to access resources over the network, but not in the local file system.

From Flex Image Control

Compile a Flex CSS file into a SWF using the command line

Yes, it is possible and really easy just type:

mxmlc yourFIle.css

at the command prompt

use a style sheet in flex using no MXML

You can include the style sheet into your Flex application from the mxml file of Application class using <mx:Style source="style.css"/> You can add as many css files as needed.

Now if you have a .customCSSClass{} in the css file, you can apply that to your vSlider using vSlider.styleName = "customCSSClass". Global selectors like HSlider{} will apply automatically.

---

Related Topics