0 Replies Latest reply on Dec 28, 2009 9:33 AM by Dean Schulze

    Using an external css in Flex 4

    Dean Schulze

      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?

       

       

       

      components.MainPanel.as:

       

      package components {

       

      import flash.events.Event;

      import flash.net.URLLoader;

      import flash.net.URLRequest;

      import flash.text.StyleSheet;

       

      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; }

       

      app.mxml:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/halo"
                     xmlns:custom="components.*"
                     minHeight="768"
                     minWidth="1024"
                     backgroundColor="#333399">

       

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

       

      </s:Application>