2 Replies Latest reply on Dec 13, 2010 8:21 AM by JoshBeall

    Changing background (chrome) color of a Panel without having the color cascade to all children

    JoshBeall Level 1

      Hi All,

       

      I'd like to change the color on a Panel such that the header (e.g., the chrome color) is a light blue.  I have been experimenting with different CSS selectors and found that chrome-color: #E4EAF1 works.

       

      However, the problem is that everything inside the Panel also changes color as well--it looks like the chrome-color value is being applied not only to the Panel but also to all the children.

       

      How can I indicate in my CSS style that I only want to apply this CSS rule to the Panel itself, and not to any children?  I've been doing some searching and found a suggestion that I try using s|Panel #titleDisplay for my rule, but that doesn't work--the chrome-color value is ignored.  It does honor the plain "color" value, which applies to the text that appears in the header.  I'm guessing that titleDisplay is too deep in the Panel's internal tree, and so chrome-color isn't working.

       

        -Josh

        • 1. Re: Changing background (chrome) color of a Panel without having the color cascade to all children
          JoshBeall Level 1

          Do I have to get into skinning for this?  Or can I use CSS, as I originally attempting?

          • 2. Re: Changing background (chrome) color of a Panel without having the color cascade to all children
            JoshBeall Level 1

            I couldn't figure out how to do this with just CSS, so I looked into skinning.  I was able to do it with skinning, but I'm wondering if my skin is overly-verbose.  It's the skin that Flash Builder created for me when I created a new Panel skin, and based it off of the existing Panel skin.

             

            The only thing I need is the following:

             

             

                            <!-- layer 0: title bar fill -->
                            <!--- @private -->
                            <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
                                <s:fill>
                                    <s:LinearGradient rotation="90">
                                          <!-- The following two lines define the fill color for the panel header -->
                                          <s:GradientEntry color="0xe4eaf1" />
                                          <s:GradientEntry color="0xc1d0e0" />
                                    </s:LinearGradient>
                                </s:fill>
                            </s:Rect>
            

             

             

            But, the entire skin is 275 lines.  Here it is--can I cut some of this out?

             

             

            <?xml version="1.0" encoding="utf-8"?>
            
            <!--
            
            ADOBE SYSTEMS INCORPORATED
            Copyright 2008 Adobe Systems Incorporated
            All Rights Reserved.
            
            NOTICE: Adobe permits you to use, modify, and distribute this file
            in accordance with the terms of the license agreement accompanying it.
            
            -->
            
            <!--- The default skin class for a Spark Panel container.  
            
                @see spark.components.Panel
            
                @langversion 3.0
                @playerversion Flash 10
                @playerversion AIR 1.5
                @productversion Flex 4
            -->
            <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false" 
                minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
                
                <fx:Metadata>
                    <![CDATA[ 
                    /** 
                     * @copy spark.skins.spark.ApplicationSkin#hostComponent
                     */
                    [HostComponent("spark.components.Panel")]
                    ]]>
                </fx:Metadata> 
                
                <fx:Script fb:purpose="styling">
                    /* Define the skin elements that should not be colorized. 
                    For panel, border and title background are skinned, but the content area and title text are not. */
                    static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
                    
                    /**
                     * @private
                     */  
                    override public function get colorizeExclusions():Array {return exclusions;}
                    
                    /**
                     * @private
                     */
                    override protected function initializationComplete():void
                    {
                        useChromeColor = true;
                        super.initializationComplete();
                    }
                    
                    /**
                     * @private
                     */
                    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                    {
                        if (getStyle("borderVisible") == true)
                        {
                            border.visible = true;
                            background.left = background.top = background.right = background.bottom = 1;
                            contents.left = contents.top = contents.right = contents.bottom = 1;
                        }
                        else
                        {
                            border.visible = false;
                            background.left = background.top = background.right = background.bottom = 0;
                            contents.left = contents.top = contents.right = contents.bottom = 0;
                        }
                        
                        dropShadow.visible = getStyle("dropShadowVisible");
                        
                        var cr:Number = getStyle("cornerRadius");
                        var withControls:Boolean = 
                            (currentState == "disabledWithControlBar" || 
                             currentState == "normalWithControlBar");
                        
                        if (cornerRadius != cr)
                        {
                            cornerRadius = cr;
                            
                            dropShadow.tlRadius = cornerRadius;
                            dropShadow.trRadius = cornerRadius;
                            dropShadow.blRadius = withControls ? cornerRadius : 0;
                            dropShadow.brRadius = withControls ? cornerRadius : 0;
                            
                            setPartCornerRadii(topMaskRect, withControls); 
                            setPartCornerRadii(border, withControls); 
                            setPartCornerRadii(background, withControls);                
                        }
                        
                        if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls); 
                        
                        borderStroke.color = getStyle("borderColor");
                        borderStroke.alpha = getStyle("borderAlpha");
                        backgroundFill.color = getStyle("backgroundColor");
                        backgroundFill.alpha = getStyle("backgroundAlpha");
                        
                        super.updateDisplayList(unscaledWidth, unscaledHeight);
                    }
                    
                    /**
                     * @private
                     */  
                    private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
                    {            
                        target.topLeftRadiusX = cornerRadius;
                        target.topRightRadiusX = cornerRadius;
                        target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
                        target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
                    }
                    
                    private var cornerRadius:Number;
                </fx:Script>
                
                <s:states>
                    <s:State name="normal" />
                    <s:State name="disabled" />
                    <s:State name="normalWithControlBar" stateGroups="withControls" />
                    <s:State name="disabledWithControlBar" stateGroups="withControls" />
                </s:states>
                
                <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
                <!--- @private -->
                <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
                                         angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
                
                <!-- drop shadow can't be hittable so all other graphics go in this group -->
                <s:Group left="0" right="0" top="0" bottom="0">
                    
                    <!-- top group mask -->
                    <!--- @private -->
                    <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
                        <!--- @private -->
                        <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                            <s:fill>
                                <s:SolidColor alpha="0"/>
                            </s:fill>
                        </s:Rect>
                    </s:Group>
                    
                    <!-- bottom group mask -->
                    <!--- @private -->
                    <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask" 
                             includeIn="normalWithControlBar, disabledWithControlBar">
                        <!--- @private -->
                        <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                            <s:fill>
                                <s:SolidColor alpha="0"/>
                            </s:fill>
                        </s:Rect>
                    </s:Group>
                    
                    <!-- layer 1: border -->
                    <!--- @private -->
                    <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
                        <s:stroke>
                            <!--- @private -->
                            <s:SolidColorStroke id="borderStroke" weight="1" />
                        </s:stroke>
                    </s:Rect>
                    
                    <!-- layer 2: background fill -->
                    <!--- Defines the appearance of the PanelSkin class's background. -->
                    <s:Rect id="background" left="1" top="1" right="1" bottom="1">
                        <s:fill>
                            <!--- @private
                                  Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                            <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
                        </s:fill>
                    </s:Rect>
                    
                    <!-- layer 3: contents -->
                    <!--- Contains the vertical stack of titlebar content and controlbar. -->
                    <s:Group left="1" right="1" top="1" bottom="1" id="contents">
                        <s:layout>
                            <s:VerticalLayout gap="0" horizontalAlign="justify" />
                        </s:layout>
                        
                        <!--- @private -->
                        <s:Group id="topGroup" mask="{topGroupMask}">
                            
                            <!-- layer 0: title bar fill -->
                            <!--- @private -->
                            <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
                                <s:fill>
                                    <s:LinearGradient rotation="90">
                                          <s:GradientEntry color="0xe4eaf1" />
                                          <s:GradientEntry color="0xc1d0e0" />
                                    </s:LinearGradient>
                                </s:fill>
                            </s:Rect>
                            
                            <!-- layer 1: title bar highlight -->
                            <!--- @private -->
                            <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
                                <s:stroke>
                                    <s:LinearGradientStroke rotation="90" weight="1">
                                        <s:GradientEntry color="0xEAEAEA" />
                                        <s:GradientEntry color="0xD9D9D9" />
                                    </s:LinearGradientStroke>
                                </s:stroke>
                            </s:Rect>
                            
                            <!-- layer 2: title bar divider -->
                            <!--- @private -->
                            <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
                                <s:fill>
                                    <s:SolidColor color="0xC0C0C0" />
                                </s:fill>
                            </s:Rect>
                            
                            <!-- layer 3: text -->
                            <!--- @copy spark.components.Panel#titleDisplay -->
                            <s:Label id="titleDisplay" maxDisplayedLines="1"
                                     left="9" right="3" top="1" bottom="0" minHeight="30"
                                     verticalAlign="middle" fontWeight="bold">
                            </s:Label>
                        </s:Group>
                        
                        <!--
                            Note: setting the minimum size to 0 here so that changes to the host component's
                            size will not be thwarted by this skin part's minimum size.   This is a compromise,
                            more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
                        -->
                        <!--- @copy spark.components.SkinnableContainer#contentGroup -->
                        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
                        </s:Group>
                        
                        <!--- @private -->
                        <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                                 includeIn="normalWithControlBar, disabledWithControlBar" >
                            
                            <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
            
                                <!-- layer 0: control bar divider line -->
                                <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                                    <s:fill>
                                        <s:SolidColor color="0x000000" />
                                    </s:fill>
                                </s:Rect>
                                
                                <!-- layer 1: control bar highlight -->
                                <s:Rect left="0" right="0" top="1" bottom="0">
                                    <s:stroke>
                                        <s:LinearGradientStroke rotation="90" weight="1">
                                            <s:GradientEntry color="0xE5E5E5" />
                                            <s:GradientEntry color="0xD8D8D8" />
                                        </s:LinearGradientStroke>
                                    </s:stroke>
                                </s:Rect>
                                
                                <!-- layer 2: control bar fill -->
                                <s:Rect left="1" right="1" top="2" bottom="1">
                                    <s:fill>
                                        <s:LinearGradient rotation="90">
                                            <s:GradientEntry color="0xDADADA" />
                                            <s:GradientEntry color="0xC5C5C5" />
                                        </s:LinearGradient>
                                    </s:fill>
                                </s:Rect>
                            </s:Group>
                            <!-- layer 3: control bar -->
                            <!--- @copy spark.components.Panel#controlBarGroup -->
                            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                                <s:layout>
                                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                                </s:layout>
                            </s:Group>
                        </s:Group>
                    </s:Group>
                </s:Group>
            </s:SparkSkin>