aqubi+shin1
 
Search this site

Recent site activity
Adobe Air‎ > ‎

Flex(Air)画面のメニュー

Contents

  1. 1 メニューの概要
  2. 2 NativeMenu
    1. 2.1 Application,Windowのメニュー
    2. 2.2 Contextのメニュー
    3. 2.3 Dock,SystemTrayのメニュー
  3. 3 NativeMenuの作成
  4. 4 メニューアイテムのショートカットキーの設定
    1. 4.1 アクセラレータの設定
    2. 4.2 ニーモニックの設定


メニューの概要

Air(Flex)の画面では、いくつかのメニューを表示することができます。
メニューには、大きく分けてOSの機能と連携したNativeMenu と Flexの機能を使ったFlexMenuとを使えます。

 ApplicationMenu  Application全体のメニュー。WindowsOSでは使用できません。
 WindowMenu  1つのWindowに表示されるメニュー。MaxOSXでは使用できません。NativeMenuはSystemChomeのWindowでのみ使用できます。
 ContextMenu  画面内で、右クリックして表示されるメニュー。
 Dock,SystemTrayMenu  MaxOSXでのDoc,WindowsOSでのSystemTrayのメニュー。
 FlexMenu  Flex独自のメニュー。MenuをMXMLて定義することができます。
 PopupMenu
  任意の位置にPopupするメニュー
 カスタムMenu  

NativeMenu

NativeメニューはOSの機能と連携したものになるので、Window用の設定、Mac用の設定....と色々確認しながら条件分けが必要になります。
まぁ面倒なのですが、AdobeAIRはマルチプラットフォームで動くのが大きな魅力ですし、OSと連携することにより使用者の使い勝手が良くなったたりしますので、普通はやることになるのでしょぅ。

Application,Windowのメニュー

Application,Window,Contextと色々表示できる部分がありますが、いづれもNativeMenuを作成して指定のRootMenuらに設定する形になります。
ウィンドウのメニューを表示する場合(かつSystemChomeを使っている画面の場合)は、MacとWindowsと両方使えるようにするため、以下のようになります。

var menu:NativeMenu;
if (NativeWindow.supportsMenu) {
　　menu = new NativeMenu();
} else if (NativeApplication.supportsMenu) {
    menu = NativeApplication.nativeApplication.menu;
}

var item:NativeMenuItem = new NativeMenuItem("Sample");
menu.addItem(item);

メニューはsupportMenuで対応しているか？を確認して条件分けしてます。
Macの場合、NativeApplication.nativeApplication.menuを使用することになりますが、これを使うと、Macで標準表示されるメニューに追加する形になります。

ASlimTimerというAirアプリケーションを作成して、View, Settingというメニューを追加してみたときは...
となっていました。
OSメニューとして、アプリケーションのメニュー(今回はASlimTimer)、ファイル、編集、ウィンドウ というものが追加されているようです。
かくメニューの中身は以下のようになっていました。






Windowsの場合はOSメニューは無いため、自分で設定したメニューのみ表示されます。

Contextのメニュー

ContextMenuというのは、画面の右クリック（もしくはCtl+クリック）して表示されるメニューになります。
ContextMenu というクラスが用意されていて、これを使います。
Windowへの設定は、contextMenuへ設定すれば反映されます。(WindowedApplicationのAPIにはcontextMenuってのはないのですが、コンパイルは通り、使えるみたい。なぜなのかはよくわかっていない(笑))

var window:WindowdApplication;
var editContextMenu:ContextMenu = new ContextMenu();
var cutItem:ContextMenuItem = new ContextMenuItem("Cut")
editContextMenu.customItems.push(cutItem);
window.contextMenu = editContextMenu;

また、window.contextMenuに設定するメニューは、NativeMenuでも大丈夫のようです。



ASlimTimer にてApplicationメニューをそのままContextMenuに設定した時は上記のイメージ。

Dock,SystemTrayのメニュー

Macの時はDockに表示されるアイコン、Windowsの場合はSystemTrayに表示されるアイコンにて表示するメニューの設定です。

var menu:NativeMenu;
...(menuの中身を設定)...
    if (NativeApplication.supportsSystemTrayIcon) {
        setSystemTrayIcon(menu);
     } else if (NativeApplication.supportsDockIcon) {
        setDockIcon(menu);
     }

    [Embed(source='../icons_application/SlimTimer16.png')]
    protected var icon16x16:Class
     [Embed(source='../icons_application/SlimTimer128.png')]
    protected var icon128x128:Class
    /* DocIconの設定 */
    private function setDockIcon(menu:NativeMenu):void {
        var dock:DockIcon = NativeApplication.nativeApplication.icon as DockIcon;
        dock.bitmaps = [new icon16x16(), new icon128x128()];
        dock.menu = menu;
    }
   
    /* SystemTrayの設定 */
    private function setSystemTrayIcon(menu:NativeMenu):void {
        var tray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
        tray.bitmaps = [new icon16x16(), new icon128x128()];
        tray.menu = menu;
    }

左のイメージはMacのDocにてメニューが表示されているものになります。
メニューは右クリック(もしくはCtl+クリック)で表示されます。













NativeMenuの作成

メニューの作成では、NativeMenuとNativeMenuItemを使用します。
NativeMenuItemには、NativeMenuを追加でき、階層を作ることができます。

var rootMenu:NativeMenu = new NativeMenu();
var item1:NativeMenuItem = new NativeMenuItem("Item1");
item1.checked = true;
rootMenu.addItem(item1);
var item2:NativeMenuItem = new NativeMenuItem("Menu1");
rootMenu.addItem(item2);
var menu1:NativeMenu = new NativeMenu();
item2.submenu = menu1;
var item2_1:NativeMenuItem = new NativeMenuItem("Item2_1");
menu1.addItem(item2_1);
item1.addEventListener(Event.SELECT, function():void {trace("item1 select!");});
item2_1.addEventListener(Event.SELECT, function():void {trace("item2_1 select!");});

上記のような設定をすると、以下のようなメニューになります。

セパレータを追加する場合には、
new NativeMenuItem("", true)
と第二引数をtrueにします。

メニューアイテムのショートカットキーの設定

アクセラレータの設定

メニューにショートカットキー(アクセラレータ)を設定する場合は、
NativeMenuItemのkeyEquivalentに指定します。
NativeMenuの作成で使ったコードに以下を追加すると...

item1.keyEquivalent = "A";
item2_1.keyEquivalent = "b";

MacOSの場合は以下のようになります。

MacOSの場合には、小文字の場合にはCommandキーが、大文字の場合にはShift+Commandキーが装飾キー(Modifier)になります。
WindowsOSの場合には、小文字の場合にはCtrlキーが、大文字の場合にはShift+Ctrlキーが装飾キーになります。

ショートカットキーは、Application,Windowメニューで設定されている場合には、メニューにフォーカスが無くても反応します。
ですが、ContextメニューやPopupメニューでは反応しないので、注意してください。

ニーモニックの設定

ニーモニックの設定では、NativeMenuItem#mnemonicIndexを使い、文字の何番目か？を指定する形になります。
ラベルの最初のインデックスは0になります。
...ですが、MacOSでは見た目を変わらず反応せず。WindowsOSであれば動くのかもしれないです。