Question

I’m using the Flex 4 beta and the ability to load an external css seems to be broken. Running the code below shows no styling at all. Have I missed something?

Here’s the code:

package components
{
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.StyleSheet;

import mx.controls.Label;
import spark.components.Panel;

public class MainPanel extends Panel
{
    private var mainLabel:Label = new Label();
    private var label2:Label = new Label();


    public function MainPanel()
    {
        super();

        var cssUrl:URLRequest = new URLRequest("css/style.css");
        var cssLoader:URLLoader = new URLLoader();
        cssLoader.addEventListener(Event.COMPLETE, cssLoaded);
        cssLoader.load(cssUrl);
    }

    function cssLoaded(event:Event):void {
        var css:StyleSheet = new StyleSheet();
        css.parseCSS(URLLoader(event.target).data);

        mainLabel.styleSheet = css;
        mainLabel.htmlText = "Main Label";
        mainLabel.horizontalCenter = 0;
        mainLabel.verticalCenter = -350;
        mainLabel.setStyle("styleName", "h1");
        addElement(mainLabel);

        label2.htmlText="Sub-Label";
        label2.horizontalCenter="0";
        label2.verticalCenter="-300";
        addElement(label2);
    }
}

}

css/style.css

.h1 {
color:#ffe145;
font-family: Verdana;
font-size: 36;
font-style: italic;
font-weight: bold;
}

Loaded with this code (the s:Application tags get dropped by the stackoverflow software):

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<custom:MainPanel horizontalCenter="0" verticalCenter="0"/>

Answer 1

If the CSS file is in a relative position to the SWF on the web server, you can try adding this tag to your application MXML.

<fx:Style source="css/style.css"/>

That will pull in all the CSS settings and automatically make the assignments for you.