Adding a button (or whatever) to a Panel header

The other day I had the need to add an Image control to the header area of a Panel. Since the Panel component does not support adding things to its header I had to find my own solution. My first simple approach was to just add the Image to the Panel content and then tweak the paddingTop style of the Panel to make the Image appear in the header. This worked for appearance but any mouse interaction on the Image was blocked. So I looked around a bit and found several solutions for extending the Panel component to add a single button to the Panel header. Since, in my case, I needed to add an Image and I figured in other use cases I might want to add several Buttons or a ButtonBar or whatever I decided to extend the Panel class to create a generic Panel component that would accept and place any kind of UIComponent in its header.
Here is the code. Feel free to re-use it in any way you deem fit.

package com.flexceptional.components
{
   import mx.containers.Panel;
   import mx.core.UIComponent;

   public class ExtendedPanel extends Panel
   {
       public var headerPanel:UIComponent;

       override protected function createChildren():void
       {
           super.createChildren();

           // Add the title panel
           if (headerPanel)
           {
               titleBar.addChild(headerPanel);
           }
       }

       override protected function updateDisplayList
(unscaledWidth:Number, unscaledHeight:Number):void
       {
           super.updateDisplayList(unscaledWidth, unscaledHeight);

           // Position the title panel
           if (headerPanel)
           {
               var y:int = (titleBar.height - headerPanel.height) / 2;
               var x:int = this.width - headerPanel.width - 5;
               headerPanel.move(x, y);
           }
       }
   }
}

Now, thanks to the convenience of MXML and the way it is compiled, we can specify our additions to the Panel header in MXML when defining the Panel.
Example:

<comp:ExtendedPanel width="100%" height="100%" title="Properties">
   <comp:headerPanel>
       <mx:Image source="{helpIcon}"
                 width="16"
                 height="16"
                 toolTip="Open help documentation in new window"
                 useHandCursor="true"
                 buttonMode="true"
                 mouseChildren="false"
                 click="propertyHelpIcon_clickHandler(event)" />
   </comp:headerPanel>
   <!-- Panel content -->
   <comp:PropertiesGrid />
</comp:ExtendedPanel>

Flex: Disable mouse wheel scrolling for Text

In several places in our application we have Text components that dynamically resize depending on their content. An annoying thing about these Text components is that they start scrolling when the user uses the mouse wheel while hovering the components. I have been trying to disable this scrolling for a while but all of the proposed solutions* that I have found have not worked.

It was only today when I broadened my search criteria to target the Flash community rather than limit the search to Flex that I finally found a solution:

http://www.eddieoneverything.com/articles/disabling-textarea-scrolling-in-flash-as3.php

Based on the solution proposed in this link I created a new text component for Flex that does not allow the user to scroll the content.

Here is the code. Feel free to re-use it in any way you deem fit.

package com.flexceptional.components
{
    import flash.events.Event;
    import flash.text.TextFieldAutoSize;
    
    import mx.controls.Text;
    import mx.events.FlexEvent;
    
    public class TextNoScroll extends Text
    {
        override protected function createChildren():void
        {
            super.createChildren();
            
            // To get rid of unwanted scrolling. Needs to
            // be done any time the component is resized
            // or the content changes.
            addEventListener(FlexEvent.UPDATE_COMPLETE,
                             updateCompleteHandler);
        }
        
        private function updateCompleteHandler(event:Event):void
        {
            textField.autoSize = TextFieldAutoSize.LEFT;
            var tempHeight:Number = textField.height;
            textField.autoSize = TextFieldAutoSize.NONE;
            textField.height = tempHeight + 20; // Padding 20px
        }
    }
}

* Proposed solutions that did not work:

• Setting mouseWheelEnabled=false on the internal textfield
• Stopping propagation of any mouse wheel events on the text component or the internal text field
• Setting mouseEnabled = false on the Text component. Well, this actually does disable the scrolling but it also disables any other mouse action, like selecting text or clicking links.