gkk created FLEX-33351:
--------------------------
Summary: mx menubar problems using embedded font
Key: FLEX-33351
URL: https://issues.apache.org/jira/browse/FLEX-33351
Project: Apache Flex
Issue Type: Bug
Components: mx: Menu Bar
Affects Versions: Adobe Flex SDK 4.5.1 (Release)
Environment: FlashBuilder 4.6, SDK 4.5.1
Reporter: gkk
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>
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira
