Flex: how I highlight items in a HorizontalList control (using a custom ItemRenderer)

I have a HorizontalList control that uses a custom ItemRenderer to present each item as a toggle button. The list is drag-and-drop, and I used this method to rotate the feedback (line) with feedback to a vertical position instead of horizontal, but with the buttons stacked together, the feedback feedback is pretty subtle. I would like to hide the buttons somehow, so that the feed back is more obvious.

I have looked at the properties and nothing is highlighted. There are padding and margin properties, but their descriptions say they affect the list control, not items.

Below is the code for my ItemRenderer. I added a registration, but it doesn't change anything. If I add padding it affects the inside of the button, not the spacing between them, and the button control has no margin properties.

I suppose I could base my ItemRenderer on a canvas to get the margin, but then I would not inherit all the functionality of the 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>

      

+1


a source to share


3 answers


How about writing an item renderer as a container (Canvas or HBox) and placing a Button inside?



+1


a source


Create your own skin for your buttons that includes the spacing you need. You may need to combine it with fill styles to keep text or icons from outside the skin.



+1


a source


A bit on the hacky side, but you can also lie about your width column for the actual HorizontalList object. Set it to something larger than your actual element width.

0


a source







All Articles