プログラミングノート

一からものを作ることが好きなエンジニアの開発ブログです。

メニューバーやコンテキストメニューを使ってみる

AIR

Javascriptで作ろうとすると割りと面倒くさいメニューバーやコンテキストメニューですが、AIRでは簡単に利用できるJavascriptライブラリが準備されていたので、使ってみました。

定義ファイルを準備する

まずはメニュー定義ファイルをXMLかJSON形式で準備します。どちらでも同じなので好みの方を選択すればよいかと思います。

[定義ファイルのサンプル]

[詳細プロパティ]

メニューを登録する

下記のライブラリをロードして、上記定義ファイルを登録すれば完了です。コンテキストメニューの場合は、メニューを有効にするエレメントを指定して、デフォルトのコンテキストメニューを無効にします。（JSONで定義ファイルを作成した場合は、createFromJSONを利用します）

<script type="text/javascript" src="AIRAliases.js"></script>
<script type="text/javascript" src="AIRMenuBuilder.js"></script>
メニューバー
<script type="text/javascript">	
var textMenu = air.ui.Menu.createFromXML("menu.xml"); 
air.ui.Menu.setAsMenu(textMenu, true); 
</script>
コンテキストメニュー
<div id="contextEnabledText"></div> 

<script type="text/javascript">	
var textMenu = air.ui.Menu.createFromXML("menu.xml"); 
air.ui.Menu.setAsContextMenu(textMenu, "contextEnabledText"); 
air.ui.Menu.setAsContextMenu(null); 
</script>

イベント処理

あとはメニューがクリックされた時のイベントを処理できるようにすればOK。イベントはメニュー定義ファイルのonSelectで設定します。

[XML]  <menuitem label="Save" onSelect="doSave"/>
[JSON] {label: "Save", onSelect: "doSave"}

メニューがクリックされると、下記メソッドが実行されます。一つ目の引数にイベントオブジェクト、二つ目の引数に選択されたメニューの各種プロパティ情報をもったデータオブジェクトが渡されます。こちらのページにそれぞれの内容をダンプする方法が載っています。

function doSave(event, data) { 
  //ここでイベント処理
}

サンプル

menu.xml

<?xml version="1.0" encoding="utf-8"?>
<root> 
  <menuitem label="MenuItem A" onSelect="MenuAClicked"/> 
</root>

menu.html

<html>
<head>
<script type="text/javascript" src="AIRMenuBuilder.js"></script>
<script type="text/javascript" src="AIRAliases.js"></script>
<script type="text/javascript">  
function MenuAClicked(event, data) { 
  alert("MenuItem A");
}
</script>
</head>
<body>
  <!-- body内に記述しないとメニューが生成されない -->
  <script type="text/javascript">  
  var textMenu = air.ui.Menu.createFromXML("menu.xml"); 
  air.ui.Menu.setAsMenu(textMenu, true); 
  </script>
</body>
</html>

参考