How to create a “spacer” in a Flex LinkBar?

Question

I was trying to achieve the following: create a LinkBar with the width set to 100%, and put 4 LinkButtons on the left side, and the 5th button needs to be placed to the right side. At first, I was trying to put 2 LinkBar controls in a HBox, however, this seemed to corrupt the flex application and caused a blank screen. Then I tried to put a mx:Spacer in the dataProvider property of the linkbar, but it didn't work either, the spacer only spans about 1 character wide and didn't push the 5th button all the way to the right. Please help, thanks.

Answer 1

You're going to need to monkey-patch the class for this. LinkBar is essentially a horizontal box who automatically adds spacer objects between its children. Check out the updateDisplayList method - note that the size of the separators is set with this bit of code:

if (isVertical())
{
...
    separator.setActualSize(separatorWidth, verticalGap);
...
}
else
{
...
    separator.setActualSize(horizontalGap, separatorHeight);
...
}

You'll need to change this behavior somehow. My recommendation is to detect if this is the last spacer in the object (by comparing the loop iterator "i" to the total number of objects "n" in the child list) and, if it is, set it's width to either 100% or an explicitly calculated version of the same thing.

It seems like monkey-patching the class is the best option to implement this change, as any attempt to change the size of the spacers outside of the actual class (in a derived class, for example) will probably wind up calling this method and forcing the size to reset.

For more information on how to monkey patch the class, watch this short presentation by Doug McCune , or check out this post by Jesse Warden where he uses a monkey patch to update the Flex cursor functionality.