【发布时间】：2011-09-21 18:27:35
【问题描述】：
我需要创建一个菜单组件，其中每个菜单项如下所示：
图标标签右对齐键盘快捷键
我尝试创建自定义菜单项渲染器，但是 a) 键盘快捷键未正确对齐 b) 子菜单有很多问题。
我也尝试使用数据网格和面板以及它们的混合物来绘制这种菜单，但它太乱了。
关于如何实现这一点的任何指示？
编辑：添加源代码
Main.mxml
<mx:Style source="assets/main.css" />
<mx:Script>
<![CDATA[
import FlyOutMenuItem;
import FlyOutMenuRenderer;
import com.jusfortechies.controls.CustomMenuItemRenderer;
import com.jusfortechies.controls.ValueObject;
import mx.collections.ArrayCollection;
import mx.controls.Menu;
import mx.events.CollectionEvent;
import mx.events.MenuEvent;
[Bindable]
private var myMenuData:ArrayCollection = new ArrayCollection();
[Bindable]
private var mainMenuData:ArrayCollection = new ArrayCollection();
[Bindable]
[Embed(source="Button.png")]
public var Button:Class;
[Bindable]
public var state:Boolean = false;
[Bindable]
private var myMenu:Menu;
[Bindable]
private var mainMenu:Menu;
// Create and display the Menu control.
private function createAndShow():void {
mainMenu = Menu.createMenu(null, mainMenuData, false);
mainMenu.labelField="label";
//myMenu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);
mainMenu.itemRenderer = new ClassFactory(FlyOutMenuRenderer);
mainMenu.addEventListener(KeyboardEvent.KEY_DOWN,handleFlyOutMenuKeyStroke);
mainMenu.addEventListener(KeyboardEvent.KEY_UP,handleFlyOutMenuKeyStrokeUp);
mainMenu.addEventListener(MenuEvent.ITEM_CLICK,handleFlyOutMenuHandleClick);
myMenu = Menu.createMenu(mainMenu, myMenuData, false);
myMenu.labelField="label";
//myMenu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);
myMenu.itemRenderer = new ClassFactory(FlyOutMenuRenderer);
myMenu.addEventListener(KeyboardEvent.KEY_DOWN,handleFlyOutMenuKeyStroke);
myMenu.addEventListener(KeyboardEvent.KEY_UP,handleFlyOutMenuKeyStrokeUp);
myMenu.addEventListener(MenuEvent.ITEM_CLICK,handleFlyOutMenuHandleClick);
mainMenu.addChild(myMenu);
//Position the menu and show it when the button is clicked
mainMenu.show((this.width/2 - this.myButton.width/2), 50);
}
protected function handleFlyOutMenuKeyStrokeUp(event:KeyboardEvent):void {
state = false;
}
protected function handleFlyOutMenuKeyStroke(event:KeyboardEvent):void {
trace("target:"+event.currentTarget+"state:"+state+";keycode:"+event.keyCode);
// tried to check for keycode's like 2, 3 which correspond to ctrl+b and ctrl+c respectively
// did not work. Hence go for state based individual key check
if(event.keyCode == Keyboard.ESCAPE && myMenu.visible) {
myMenu.hide();
} else if (state) {
if (event.keyCode >=65 && event.keyCode <= 90) { // check if any alphabet was pressed after control key
// A ascii code = 65. But in our data array, A starts at 1 NOT 0. So we detect 65-1 = 64
trace("Inside handleFlyOutMenuKeyStroke"+event.keyCode);
}
} else if(event.keyCode == Keyboard.CONTROL){
state = true;
return;
}
state=false;
if(myMenu.visible) {
myMenu.hide();
}
}
protected function handleFlyOutMenuHandleClick(event:MenuEvent):void
{
if(event.currentTarget == mainMenu){
trace('MainMenu HandleClick');
myMenu.show((mainMenu.x + mainMenu.width), (mainMenu.y + mainMenu.height/2));
//myMenu.show((this.width/2 - this.myButton.width/2), 50);
}
trace("Inside MenuHandleClick");
}
public function init():void {
/*mainMenuData.addItem(new ValueObject("MA", "MenuItem A", "menuOddItem"));
mainMenuData.addItem(new ValueObject("MB", "MenuItem B", "menuEvenItem"));
mainMenuData.addItem(new ValueObject("MC", "MenuItem C", "menuOddItem"));
mainMenuData.addItem(new ValueObject("MD", "MenuItem D", "menuEvenItem"));*/
myMenuData.addItem(new FlyOutMenuItem("Item A", "A", "Button"));
myMenuData.addItem(new FlyOutMenuItem("Item B", "B", "Button"));
myMenuData.addItem(new FlyOutMenuItem("Item CM", "C", "Button"));
myMenuData.addItem(new FlyOutMenuItem("Item DE", "D", "Button"));
}
]]>
</mx:Script>
<mx:VBox>
<!-- Define a Button control to open the menu -->
<mx:Button id="myButton" initialize="init()" label="Open Menu" click="createAndShow();"/>
</mx:VBox>
FlyOutMenuItem.as
包装 { [可绑定] 公共类 FlyOutMenuItem { 公共变量标签：字符串； 公共变量快捷方式：字符串； 公共变量图标：字符串；
public function FlyOutMenuItem(label:String, shortcut:String, icon:String)
{
this.label = label + " Ctrl+"+shortcut;
this.shortCut = shortcut;
this.icon = icon;
}
}
}
FlyOutMenuRenderer.as
包装 { 导入 mx.controls.Label； 导入 mx.controls.menuClasses.MenuItemRenderer；
import spark.components.Label;
[Bindable]
public class FlyOutMenuRenderer extends MenuItemRenderer
{
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
//Get the style name from Menu VO and set to the menu item
//this.styleName = ValueObject(this.data).styleName;
this.label.ignorePadding = true;
trace("Style.align.MenuRenderer.label:"+this.label.getStyle("textAlign"));
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
public function FlyOutMenuRenderer()
{
super();
}
}
}
CustomMenuItemRenderer.as /*来自 justfortechies.com */
包 com.jusfortechies.controls { 导入 mx.controls.menuClasses.MenuItemRenderer；
[Bindable]
public class CustomMenuItemRenderer extends MenuItemRenderer
{
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
//Get the style name from Menu VO and set to the menu item
this.styleName = ValueObject(this.data).styleName;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
}
}
ValueObject.as /*来自 justfortechies.com */
包 com.jusfortechies.controls { [可绑定] 公共类值对象 { 公共变量ID：字符串； 公共变量标签：字符串； public var styleName:String;
public function ValueObject(id:String, label:String, styleName:String)
{
this.id = id;
this.label = label;
this.styleName = styleName;
}
}
}
【问题讨论】：
-
您可以在此处为您的自定义项目渲染器添加代码
-
Neeraj.. 我编辑了我的问题以包含源代码。所以你可以看到我正在创建一个自定义渲染器，然后我需要像普通菜单一样显示所有内容。子菜单显示不太好，事件处理有问题。任何指针都会很棒。
-
另外，我试图用一个菜单栏来做到这一点。我将在一段时间后在对这篇文章的回复中包含其源代码。所以不允许我回答我自己的问题，因为我的代表
标签： apache-flex flex4