Flex 4 Custom Spark Skin using gobal CSS color schemes

文章目錄

• 1.Flex 4  CSS theme sample
• 2.Custom skin

1.Flex 4  CSS theme sample

 

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

global

{

    chrome-color: #333333;

    color: #CCCCCC;

    content-background-color: #777777;

    symbol-color: #000000;

    roll-over-color: #555555;

    selection-color: #333333;

    focus-color: #999999;

    accent-color: #8C8C8C;

}

 

2.Custom skin(1) this skin should be affected by the chromeColor style

        override protected function initializationComplete():void

        {

            useChromeColor = true;

            super.initializationComplete();

        }

 (2)Names of items ("someCustomColorID1","someCustomColorID2") should not be colorized by the chromeColor style.Only items of type DisplayObject or GraphicElement should be excluded.

 override public function get colorizeExclusions():Array

    {

        return ["someCustomColorID1","someCustomColorID2"];  

  }

 (3)Names of items ("someCustomColorID1","someCustomColorID2") should have their color property defined by the symbolColor style

 override public function get symbolItems():Array {

            return ["someCustomColorID1","someCustomColorID2"]; 

        }

 (4)Names of items ("someCustomColorID1","someCustomColorID2")  should have their color property defined by   the contentBackgroundColor style.

 override public function get contentItems():Array

    {

        return ["someCustomColorID1","someCustomColorID2"];    

  }