I need to create a menu component in which each menu item looks like this:
icon label right-aligned-keyboard-shortcut
I tried creating a custom menu item renderer, but a) keyboard shortcuts are not right aligned
b) there are a lot of issues with sub menus.
I also tried using data grids and panels and a mixture thereof to draw this kind of menu but it is too messed up.
Any pointers on how I can achieve this?
EDIT: Adding source code
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
package
{
[Bindable]
public class FlyOutMenuItem
{
public var label:String;
public var shortCut:String;
public var icon:String;
public function FlyOutMenuItem(label:String, shortcut:String, icon:String)
{
this.label = label + " Ctrl+"+shortcut;
this.shortCut = shortcut;
this.icon = icon;
}
}
}
FlyOutMenuRenderer.as
package
{
import mx.controls.Label;
import 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 /*from justfortechies.com */
package com.jusfortechies.controls
{
import 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 /*from justfortechies.com */
package com.jusfortechies.controls
{
[Bindable]
public class ValueObject
{
public var id:String;
public var label:String;
public var styleName:String;
public function ValueObject(id:String, label:String, styleName:String)
{
this.id = id;
this.label = label;
this.styleName = styleName;
}
}
}
This is my source code for the MenuBar experiment intending to the same thing – use a custom renderer to display a different type of menu.
P.S.: This is NOT the answer to this question. This post was created to separate the two approaches that I have taken.
FlyOutMenuItem.as
FlyoutMenuBar.as
FlyoutMenuItemRenderer.as
Main.mxml