Question

I am working on a project where I want to add a click listener to the root DisplayObjectContainer, which, if the user clicks on a UIComponent, will add a red border to whatever the user clicked on. Currently, my code to do so looks something like this:

    private static var _root:DisplayObjectContainer;
    private static var labelStyle:CSSStyleDeclaration;

    public static function initialize(root:DisplayObjectContainer):void
    {
        _root = root;

        labelStyle = new CSSStyleDeclaration();
        labelStyle.setStyle("borderColor", "red");
        labelStyle.setStyle("borderThickness", 4);
        labelStyle.setStyle("color", "red");
        labelStyle.setStyle("borderStyle", "solid");

        StyleManager.setStyleDeclaration(".mystyle", labelStyle, true);
        _root.addEventListener(MouseEvent.CLICK, highlightBorder, true, Infinity, true);
    }

    private static function highlightBorder(event:MouseEvent):void
    {           
        event.stopPropagation();

        if(event.target is UIComponent)
        {
            var tmp:UIComponent = event.target as UIComponent;
            tmp.styleDeclaration = labelStyle;
            tmp.invalidateProperties();
            tmp.invalidateDisplayList();
            tmp.validateNow();
        }
    }

This code is in a .as file, not the .mxml.

Unfortunately, nothing actually happens. The UI component the user clicks on remains distinctly un-bordered. I’ve tested event.target and am reasonably sure that it does actually point to the UI Component the user clicked on; I also used Alerts to make sure that the if statement was actually executing fully.

Does anyone have any idea why the border is not changing?

Answer 1

Use the setStyle method on the UIComponent. So instead of tmp.styleDeclaration = labelStyle, do something like tmp.setStyle("styleName", "mystyle"), or skip the CSSStyleDeclaration part and do tmp.setStyle("borderColor", "red") and so on directly on the UIComponent.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html#setStyle