Question

I have a HorizontalList control that uses a custom ItemRenderer to represent each item as a toggle-button. The list allows drag and drop, and I used this method to rotate the drop feedback (line) into a vertical position instead of horizontal, but with the buttons mashed together, the drop feedback is pretty subtle. I’d like to space out the buttons somehow, so that the drop feedback is more obvious.

I’ve looked through the properties and nothing stands out. There are padding and margin properties, but their descriptions say they affect the list control itself, not the items.

Below is the code of my ItemRenderer. I’ve added padding to it, but that doesn’t seem to change anything. If I add padding, that affects the inside of the button, not the space between them, and the button control doesn’t have margin properties.

I suppose I could base my ItemRenderer on a canvas in order to get a margin, but then I wouldn’t inherit all of the functionality of a button.

<?xml version="1.0" encoding="utf-8"?>
<mx:Button 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="go();"
    toggle="true"
>
    <mx:Script>
        <![CDATA[
            private var _val:int = -1;
            private function go():void {
                this.label = data.title;
                _val = data.index;
            }

            override protected function clickHandler(event:MouseEvent):void{
                //todo: bubble an event that causes all other
                //buttons in the list to un-toggle

                //now do the default clickHandler 
                super.clickHandler(event);
            }
        ]]>
    </mx:Script>
</mx:Button>

Answer 1

How about writing your item renderer as a container (either Canvas or HBox) and placing the Button element inside?