8 Replies Latest reply on Apr 22, 2010 3:56 AM by Karthik@Chennai

    Applying CSS Style

    Karthik@Chennai

      Hi All,

      I have an external CSS file which included styles for components like Button,List,TextInput ect. I need to Apply for all components at the class level instead of each component instance in the MXML as inline.

      (Note : I have launching sub applications under the main application using swfloader. so i have to set the CSS style using action script at Main application scope which applies to all sub application launched under it,please give me an solution.Currently  Iam keeping all my styles in  an xml file and loading in action script in my main application as follows...

      XML file

      -----------

      <document>

      <TTTextInput>
          <Property>
            <propertyName>color</propertyName>
            <value>0x003399</value>
          </Property>
          <Property>
            <propertyName>fontSize</propertyName>
            <value>11</value>
          </Property>
          <Property>
            <propertyName>fontFamily</propertyName>
            <value>Verdana</value>
          </Property>
          <Property>
            <propertyName>borderStyle</propertyName>
            <value>solid</value>
          </Property>
        </TTTextInput>
      </document>

       

      AS code in Main application

      ----------------------------------------

      import mx.styles.CSSStyleDeclaration;
      import mx.styles.StyleManager;
      private var controlStyle:CSSStyleDeclaration;
      private function setStylesForControls ():void
      {
      var themeXML:XML;
      var urlLoader:URLLoader = new URLLoader();
      var request:URLRequest = new URLRequest("defaultTheme.xml");
      urlLoader.load(request); 
      urlLoader.addEventListener(Event.COMPLETE, onComplete);
      function onComplete(event:Event):void
      {
        var themeXML:XML;
        var loader:URLLoader = URLLoader(event.target);
        themeXML = new XML(loader.data);
       
        for each(var controlNode:XML in themeXML.children())
        {
         controlStyle = new CSSStyleDeclaration('controlStyle');
         for each(var propertyNode:XML in controlNode.Property)
         {   
                controlStyle.setStyle(propertyNode.propertyName, propertyNode.value);
                StyleManager.setStyleDeclaration(controlNode.name().toString(), controlStyle, true);
               }
        }
      }
      }

       

       

      regards,

      karthik