make a protected property public

Question

I'm trying to extend a class like panel so that I can fire click events only when the title area is clicked on. The title area is a protected uicomponent of Panel called titleBar. So I want to make that component public.

It seems like I'm almost there but I'm getting a "TypeError: Error #1009: Cannot access a property or method of a null object reference." when it tries to add an event listener to the titlebar.

here is my extended panel

package custClass{    
    import mx.containers.Panel;
    import mx.core.UIComponent;
    public class ExtPanel extends Panel{

        [Bindable] public var TitleBar:UIComponent;

        public function DragPanel(){
            super();
            TitleBar = super.titleBar;
        }
    }
}

Here is a trimmed version of the AS I'm calling in my function that is creating a new panel:

var newPanel:ExtPanel = new ExtPanel ();
newPanel.TitleBar.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);

The error is pointing to the last line. What am I missing?

Thanks

Edit: Per the answer below I am now trying this:

package custClass{    
    import mx.containers.Panel;
    import mx.core.UIComponent;

    public class extPanel extends Panel{

        public function extPanel(){
            super();
        }

        public function getTitleBar():UIComponent{
            return this.titleBar;
        }
    }
}

And then this in the AS:

newPanel.getTitleBar().addEventListener(MouseEvent.ROLL_OVER,over);

Still getting the same error. This is totally new ground for me, what is my next step?

Answer 1

You cannot make a protected property public. You can however, write an accessor function that will return the protected property.

Answer 2

Your problem is that you're trying to access the title bar before it's created (via createChildren). Instead, add the event listener after creation is complete. For example:

var newPanel:ExtPanel = new ExtPanel ();
newPanel.addEventListener(FlexEvent.CREATION_COMPLETE, function(event:Event):void {
    newPanel.getTitleBar().addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
});

(Similarly, you can't assign the TitleBar in the constructor in your first effort, as the child component isn't created yet.)