Flex 3框架中容器的边框，背景色和背景图片是如何实现的？

border = new mx.skins.halo.HaloBorder();
// Add the border behind all the children.
rawChildren.addChildAt(DisplayObject(border), 0);

global
{
    backgroundAlpha: 1.0; /* this runs the opacity of nearly every square piece of the components */
    /* backgroundDisabledColor: #DDDDDD; */
    backgroundSize: "auto";
    bevel: true;
    borderAlpha: 1.0;
      borderCapColor: #919999;
    borderColor: #B7BABC;
    borderSides: "left top right bottom";
    borderSkin: ClassReference("mx.skins.halo.HaloBorder");
    borderStyle: "inset";
    borderThickness: 1;
        ...........
}

Container
{
    borderStyle: "none";
}

/**
     *  @private
     *  Create components that are children of this Container.
     */
    override protected function createChildren():void
    {
        super.createChildren();

        // Create the border/background object.
        createBorder();

        // To save ourselves an extra layout pass, check to see
        // if the scrollbars will definitely be needed.
        // If so, create them now.
        createOrDestroyScrollbars(
            horizontalScrollPolicy == ScrollPolicy.ON,
            verticalScrollPolicy == ScrollPolicy.ON,
            horizontalScrollPolicy == ScrollPolicy.ON ||
            verticalScrollPolicy == ScrollPolicy.ON);

        // Determine the child-creation policy (ContainerCreationPolicy.AUTO,
        // ContainerCreationPolicy.ALL, or ContainerCreationPolicy.NONE).
        // If the author has specified a policy, use it.
        // Otherwise, use the parent's policy.
        // This must be set before createChildren() gets called.
        if (creationPolicy != null)
        {
            actualCreationPolicy = creationPolicy;
        }
        else if (parent is Container)
        {
            if (Container(parent).actualCreationPolicy ==
                ContainerCreationPolicy.QUEUED)
            {
                actualCreationPolicy = ContainerCreationPolicy.AUTO;
            }
            else
            {
                actualCreationPolicy = Container(parent).actualCreationPolicy;
            }
        }

        // It is ok for actualCreationPolicy to be null. Popups require it.

        if (actualCreationPolicy == ContainerCreationPolicy.NONE)
        {
            actualCreationPolicy = ContainerCreationPolicy.AUTO;
        }
        else if (actualCreationPolicy == ContainerCreationPolicy.QUEUED)
        {
            var mainApp:Application = parentApplication ?
                                      Application(parentApplication) :
                                      Application(Application.application);
            
            mainApp.addToCreationQueue(this, creationIndex, null, this);
        }
        else if (recursionFlag)
        {
            // Create whatever children are appropriate. If any were
            // previously created, they don't get re-created.
            createComponentsFromDescriptors();
        }

        // If autoLayout is initially false, we still want to do
        // measurement once (even if we don't have any children)
        if (autoLayout == false)
            forceLayout = true;

        // weak references
        UIComponentGlobals.layoutManager.addEventListener(
            FlexEvent.Update_COMPLETE, layoutCompleteHandler, false, 0, true);
    }

/**
     *  Creates the container's border skin
     *  if it is needed and does not already exist.
     */
    protected function createBorder():void
    {
        if (!border && isBorderNeeded())
        {
            var borderClass:Class = getStyle("borderSkin");

            if (borderClass != null)
            {
                border = new borderClass();
                border.name = "border";

                if (border is IUIComponent)
                    IUIComponent(border).enabled = enabled;
                if (border is ISimpleStyleClient)
                    ISimpleStyleClient(border).styleName = this;

                // Add the border behind all the children.
                rawChildren.addChildAt(DisplayObject(border), 0);

                invalidateDisplayList();
            }
        }
    }

    /**
     *  @private
     */
    private function isBorderNeeded():Boolean
    {
        //trace("isBorderNeeded",this,"ms",getStyle("mouseShield"),"borderStyle",getStyle("borderStyle"));

        // If the borderSkin is a custom class, always assume the border is needed.
        var c:Class = getStyle("borderSkin");
        
        // Lookup the HaloBorder class by name to avoid a linkage dependency.
        // Note: this code assumes HaloBorder is the default border skin. If this is changed
        // in defaults.css, it must also be changed here.
        try
        {
            if (c != getDefinitionByName("mx.skins.halo::HaloBorder"))
                return true;
        }
        catch(e:Error)
        {
            return true;
        }
            
        var v:Object = getStyle("borderStyle");
        if (v)
        {
            // If borderStyle is "none", then only create a border if the mouseShield style is true
            // (meaning that there is a mouse event listener on this view). We don't create a border
            // if our parent's mouseShieldChildren style is true.
            if ((v != "none") || (v == "none" && getStyle("mouseShield")))
            {
                return true;
            }
        }

        v = getStyle("backgroundColor");
        if (v !== null && v !== "")
            return true;

        v = getStyle("backgroundImage");
        return v != null && v != "";
    }

override public function styleChanged(styleProp:String):void
    {
        var allStyles:Boolean = styleProp == null || styleProp == "styleName";

        // Check to see if this is one of the style properties that is known
        // to affect page layout.
        if (allStyles || StyleManager.isSizeInvalidatingStyle(styleProp))
        {
            // Some styles, such as horizontalAlign and verticalAlign,
            // affect the layout of this object's children without changing the
            // view's size.  This function forces the view to be remeasured
            // and layed out.
            invalidateDisplayList();
        }

        // Replace the borderSkin
        if (allStyles || styleProp == "borderSkin")
        {
            if (border)
            {
                rawChildren.removeChild(DisplayObject(border));
                border = null;
                createBorder();
            }
        }
        
        // Create a border object, if none previously existed and
        // one is needed now.
        if (allStyles ||
            styleProp == "borderStyle" ||
            styleProp == "backgroundColor" ||
            styleProp == "backgroundImage" ||
            styleProp == "mouseShield" ||
            styleProp == "mouseShieldChildren")
        {
            createBorder();
        }

        super.styleChanged(styleProp);

        // Check to see if this is one of the style properties that is known.
        // to affect page layout.
        if (allStyles ||
            StyleManager.isSizeInvalidatingStyle(styleProp))
        {
            invalidateViewMetricsAndPadding();
        }

        if (allStyles || styleProp == "horizontalScrollBarStyleName")
        {
            if (horizontalScrollBar && horizontalScrollBar is ISimpleStyleClient)
            {
                var horizontalScrollBarStyleName:String =
                    getStyle("horizontalScrollBarStyleName");
                ISimpleStyleClient(horizontalScrollBar).styleName =
                    horizontalScrollBarStyleName;
            }
        }

        if (allStyles || styleProp == "verticalScrollBarStyleName")
        {
            if (verticalScrollBar && verticalScrollBar is ISimpleStyleClient)
            {
                var verticalScrollBarStyleName:String =
                    getStyle("verticalScrollBarStyleName");
                ISimpleStyleClient(verticalScrollBar).styleName =
                    verticalScrollBarStyleName;
            }
        }
    }