Which implementation of InteractiveObject that is lightweight should I use to keep track of mousefocus in flex?

Question

I have a spark List control that shows a side-list on ListEvent.ITEM_ROLL_OVER event. Basicaly it shows the contents of the item you are hovering. I would be also using ListEvent.ITEM_ROLL_OUT to hide it again but I want the user to be able to click on it (the sidelist) too.

So, i use MouseEvent.ROLL_OUT and check the event.relatedObject's id to see where the cursor went. I added an invisible Rectangle overlaying the sidelist that's a bit larger so it gains focus 1st. But it doesn't.

Googling around, I think that the Spark Rectangle cant gain focus as it doesn't implement InteractiveObject. What should I use?

My logic:

protected function listOUT(event:MouseEvent):void
{
     var obj:Object = event.relatedObject;
     if (obj.id != "focusRect")
     {
         sidelist.visible = false;
     }
}

My struggle is to keep the side-list visible if the user moves the cursor from the main list to the sidelist. Any other suggestions outside my approach are also welcome.

Update (image link) Red are the invisible Buttons

Answer 1

• On roll_over select the item in the mainlist, display the sidelist based on the selecteditem in the mainlist.
• Hide the sidelist when there is no item selected in the main list.
• Deselect items inthe mainlist if the sidelist loses focus.

Furthermore mx.core.UIComponent is the lightest component that dispatches focus events.