Details
-
Bug
-
Status: Open
-
Major
-
Resolution: Unresolved
-
Adobe Flex SDK 4.5.1 (Release)
-
None
-
FlashBuilder 4.6, SDK 4.5.1
Description
1. Copy/paste the below Flex application into your IDE of choice (I'm using FB4.6, with Flex SDK 4.5.1).
2. Copy Arial.ttf from your system library folder into the workspace folder you've copied this code.
3. Run the application.
4. Observe that when you select the checkbox to enable variableRowHeight, that the menuBar does not allow enough vertical height to fit the menu options. This occurs for all pull-down menus, although it's easier to see when there are a lot of options (e.g. click on "File" pull-down and position your mouse over the last option that appears).
5. Also observe, regardless of variableRowHeight setting, there are visual artifacts in the menubar. For example, click on "Edit1", and observe a gray vertical line running about 10 pixels to the left of the menu-bar's pull-down text area. The right-side of the menubar pull-down area has a white pixel border mistakenly placed between the right-edge of the menubar and the shadow region.
6. Remove `fontFamily="arial_mx"` from the menubar's properties, run the program again, and observe the menubar looks perfect.
7. As a side note, however, there appears to be functional bug now, in that when you click, for example, the first item in a pull-down menu (e.g. "File" then "New" in my example below), then click outside the menu to collapse the menubar, the click again the same pull-down "File" selection, then mouse-over the "New" option (which you previously clicked), Flex doesn't highlight to show the mouse is hovering over "New".).
8. As another aside, I implemented the spark menuBar component from here: https://github.com/badu/SparkComponents
This did remove the visual artifacts, perhaps because there's no dropshadow. However, the embedded text appears more blurrly than the already somewhat blurry embedded text in Adobe's spark (e.g. dataGrid) components. Zooming in on the text using my Mac's DigitalColor Meter, I can see that Adobe's text, in the darkest portion, is truly black (0x000000) whereas the new spark MenuBar's embedded spark text (same font settings) is gray (0x626262) (I zoomed in on a straight letter "l" as in "lobster"). The darkest part of the spark menubar text seems to spill into neighboring pixels, making it appear blurry.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
>
<!-- modified from: http://blog.flexexamples.com/2010/02/19/setting-a-variable-row-height-on-an-mx-menubar-control-in-flex/ -->
<fx:Script>
<![CDATA[
import mx.events.MenuEvent;
protected function mBar_menuShowHandler(evt:MenuEvent):void
{ evt.menu.variableRowHeight = ch.selected; evt.menu.invalidateSize(); } ]]>
</fx:Script>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@font-face
{ font-family:arial_mx; src:url("Arial.ttf"); embed-as-cff:false; }</fx:Style>
<s:controlBarContent>
<s:CheckBox id="ch" label="variableRowHeight" />
</s:controlBarContent>
<mx:MenuBar id="mBar"
labelField="@label"
horizontalCenter="0" top="20"
menuShow="mBar_menuShowHandler(event);"
fontFamily="arial_mx">
<mx:dataProvider>
<s:XMLListCollection>
<fx:XMLList xmlns="">
<menu label="File">
<item label="New" />
<item label="Open" />
<item label="Save" />
<item label="Save As" />
<fake type="separator" />
<item label="Exit1" />
<item label="Exit2" />
<item label="Exit3" />
<item label="Exit4" />
<item label="Exit5" />
<item label="Exit6" />
<item label="Exit7" />
<item label="Exit8" />
<item label="Exit9" />
<item label="Exit10" />
</menu>
<menu label="Edit1">
<item label="Cut" />
<item label="Copy" />
<item label="Paste" />
<fake type="separator" />
<item label="Undo" />
<item label="Redo" />
<fake type="separator" />
<item label="radio button" type="radio" toggled="true" />
<item label="check box" type="check" toggled="true" />
</menu>
<menu label="Edit2">
<item label="Cut" />
<item label="Copy" />
<item label="Paste" />
<fake type="separator" />
<item label="Undo" />
<item label="Redo" />
<fake type="separator" />
<item label="radio button" type="radio" toggled="true" />
<item label="check box" type="check" toggled="true" />
</menu>
<menu label="Edit3">
<item label="Cut" />
<item label="Copy" />
<item label="Paste" />
<fake type="separator" />
<item label="Undo" />
<item label="Redo" />
<fake type="separator" />
<item label="radio button" type="radio" toggled="true" />
<item label="check box" type="check" toggled="true" />
</menu>
</fx:XMLList>
</s:XMLListCollection>
</mx:dataProvider>
</mx:MenuBar>
</s:Application>