title: In ActionScript 3.5/Flex, how do I apply a border to whatever UI Component or container the user clicks?
body: <p>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:</p>
  
  <pre><code>    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();
          }
      }
  </code></pre>
  
  <p>This code is in a .as file, not the .mxml.</p>
  
  <p>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. </p>
  
  <p>Does anyone have any idea why the border is not changing?</p>