To Reduce the Vertical Space Between the Separator and the Texts

Recently I have seen some articles introducing how to realize the PopUpButton control’s pop up menu. Till now, there are quite some ways to realize it. Now let’s first have a look at them:

1. TWaver’s earliest way to realize it is the use of flash’s own pop-up menu which is set through ContextMenu. However, there is a shortage in this way: it has flash’s information on the menu with itself, which cannot be deleted. So it’s inconvenient.

2. Menu can also be popped out at the click of the left button. This way is agreeable as it has no requirement for the edition of flash.
3. It can be realized by Flash Player 11.2’s new function. Although this way is good, we have to use flash of higher edition and many users in our project are still using old editions of flash. So this way is not that suitable.

Of the above three methods, we have finally chosen the second one. But I came across a problem in the process of realizing the pop-up menu through Menu—the classifications and layering of the menu in actual applications.

This effect, in general, is enough. But we have found that the vertical space between the separator and the above & below texts is too big. In order to reduce it, we have searched for solutions and found out that a parameter can make it: variableRowHeight. Here’s the detailed example: Reducing the vertical space around a separator in a Flex PopUpButton control’s pop up menu by enabling variable row heights.

Let’s see the effects of the menu. But it turns out to be disagreeable after setting variableRowHeight=true in menu.

The vertical space has been reduced on the first-level menu, but not on the second-level. Why? On google we only find that many viewpoints saying that the problem will be solved as long as this attribute value has been set. It can’t be a bug of Adobe. You will find the crux of the problem on seeing the following source code.


mx_internal function openSubMenu(row:IListItemRenderer):void
{
supposedToLoseFocus = true;

var r:Menu = getRootMenu();
var menu:Menu;

// check to see if the menu exists, if not create it
if (!IMenuItemRenderer(row).menu)
{
menu = new Menu();
menu.parentMenu = this;
menu.owner = this;
menu.showRoot = showRoot;
menu.dataDescriptor = r.dataDescriptor;
menu.styleName = r;
menu.labelField = r.labelField;
menu.labelFunction = r.labelFunction;
menu.iconField = r.iconField;
menu.iconFunction = r.iconFunction;
menu.itemRenderer = r.itemRenderer;
menu.rowHeight = r.rowHeight;
menu.scaleY = r.scaleY;
menu.scaleX = r.scaleX;

// if there's data and it has children then add the items
if (row.data &&
_dataDescriptor.isBranch(row.data) &&
_dataDescriptor.hasChildren(row.data))
{
menu.dataProvider = _dataDescriptor.getChildren(row.data);
}
menu.sourceMenuBar = sourceMenuBar;
menu.sourceMenuBarItem = sourceMenuBarItem;

IMenuItemRenderer(row).menu = menu;
PopUpManager.addPopUp(menu, r, false);
}

It seems that the main menu’s attribute value of variableRowHeight hasn’t been copied to the second-level menu. So I define an itemRenderer by myself, and then set the attribute value in itemrenderer.

public class CustomMenuItemRenderer extends MenuItemRenderer {
public function CustomMenuItemRenderer() {
}
override protected function measure():void {
super.measure();
(this.owner as Menu).variableRowHeight = true;
}
}

Next, we set the renderer we just defined: menu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);

Now let’s run it to see the result: