tags:

views:

415

answers:

1

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.

+2  A: 

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.

RJ Owen
Thanks, I'll take a look at this. But, why can't I place two LinkBars side by side? I was expecting that was the easiest way.
Tong Wang
Unfortunately, this didn't work for 2 reasons:1. I can't set the width to 100% - it has to be an explicit pixel number;2. Setting the width of the last separator doesn't push the last LinkButton to the right; the LinkButton stays at the same position, it's just the vertical separator bar that's got pushed to the right.
Tong Wang
Very strange - can you post the code somewhere? It's very odd to me that the Separator's wouldn't affect in the underlying box layout code, or that the linkbutton items would be rendered apart from it. It seems to me like your quickest solution might be to write your own - the linkBar isn't too complex of a component, and you could write one that would correctly implement this spacer in a few hours tops.
RJ Owen
I found a workaround: put a LinkBar and a separate LinkButton in a layout container. Thanks for the tip on monkey-patching.
Tong Wang