Using an external css in Flex 4

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.