Adding a custom UI component as a panel titleIcon (should be easy, I'm kind of a newbie)

Question

The concept of this seems easy, but I'm having trouble getting it right and can't find anything to help me on this.

I have a panel I need to perform a drag and drop operation on, but I only want to perform that if the user mouses down on a particular area of the panel. I can add an Icon to the panel by doing this:

[Embed("/img/icon.png")]
[Bindable]
public var dragIcon:Class;

newPanel.titleIcon = dragIcon;

But what I really want to add is a box, which I can then add my listeners to for the drag and mouse down like I do on some canvases created in actionscript like so

var tempBox:Box = new Box;
tempBox.x=0;
tempBox.y=0;
tempBox.width = 20;
tempBox.height = 44;
tempBox.setStyle("horizontalAlign","center");
tempBox.setStyle("verticalAlign","middle");
tempBox.addEventListener(MouseEvent.ROLL_OVER,over);
tempBox.addEventListener(MouseEvent.ROLL_OUT,out);
tempBox.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownAnswer);
var tempImg:Image = new Image();
tempImg.source = grabbableItem;
tempBox.addChild(tempImg);
myCanvas.addChild(tempBox);

So what do I need to do to use that tempBox and turn it into a class to be used as my panels titleIcon?

Edit 12/29/09: So I came up with something where I'm extending the panel class (shown below) but all this is really doing is covering up the icon with something I can access publicly. I'm sure there's a better way out there right?

package custClass
{
    import mx.containers.Box;
    import mx.containers.Panel;
    import mx.controls.Image;

    public class DragPanel extends Panel
    {
        [Bindable] public var iconBox:Box = new Box();

        [Embed("../img/doc_page.png")] [Bindable] public var grabbableItem:Class;

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

            iconBox.x = 10
            iconBox.y = 4
            iconBox.width = 20;
            iconBox.height = 20;
            iconBox.setStyle("horizontalAlign","center");
            iconBox.setStyle("verticalAlign","middle");
            iconBox.setStyle("borderStyle","solid");
            iconBox.setStyle("backgroundColor",0x000000);
            var tempImg:Image = new Image();
            tempImg.source = grabbableItem;
            iconBox.addChild(tempImg);
            this.rawChildren.addChild(iconBox);
        }
    }
}

EDIT 1/7/10 (or 16 according to my windows mobile phones text messages): Using Chaims help from below here is my new answer.

Create a box mxml component like Chaim says but also add the following script block to it.

<mx:Script>
        <![CDATA[
            import mx.core.Application;
            [Embed("/img/doc_page.png")]
            [Bindable]
            public var grabbableItem:Class;

            public function init():void{
                this.addEventListener(MouseEvent.MOUSE_DOWN,Application.application.mouseDownSection);
                this.addEventListener(MouseEvent.ROLL_OVER,Application.application.over);
                this.addEventListener(MouseEvent.ROLL_OUT,Application.application.out);
            }
        ]]>
    </mx:Script>

This adds in all the event listeners I want on the Box that will be used as my icon. Now just add the box as an Icon and it's good to go.

panel.titleIcon = DraggableBox;

I guess since it's a separate mxml component it is now a class, though I don't think I understand why.

Answer 1

The Panel expecting titleIcon property value to be a IFactory and create an instance by himself.

Make your box a component (lets name it DraggableBox.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml"
    x="0" y="0" width="20" height="44"
    horizontalAlign="center" verticalAlign="middle">
    <mx:Image source="{grabbableItem}"/>
</mx:Box>

And assign it to titleIcon:

<mx:Panel titleIcon="{DraggableBox}" >
...
</mx:Panel>

If you want do it in ActionScript use ClassFactory:

panel.titleIcon = new ClassFactory(DraggableBox);