右クリックメニューを作る

リストボックスをクリックしたら、何かしらのコマンドが実行されるようにする。

リストアイテム1つ1つに設定は出来ない。なのでリストボックスのonChange関数を使う。で、その関数内で選択したアイテムによって振り分けをする。

var w = new Window('dialog{ margins : 0 , spacing : 2 , properties : {borderless : true},\

lb : ListBox{ alignment : ["fill","fill"] , preferredSize : [200,-1] , properties : { items : ["menu1","menu2","menu3"] } }\

}');

w.lb.onChange = function(){

if( !this.selection ) return; //選択がなかったら何もしない

w.close(); //実際のコマンド実行する前に閉じとく。

//好きな関数を実行

switch( this.selection.index ){

case 0: alert("I am menu1!!"); break;

case 1: alert("I am menu2!!"); break;

case 2: alert("I am menu3!!"); break;

default : alert("コマンドが定義されてません");

}

}

w.show();

これで、リストアイテムをクリックしたらアラートが出るようになった。ウィンドウを閉じるコマンドを書いておくのも忘れずに。

先程、メニュー実行前にウィンドウを閉じるようにしたが、ウィンドウを閉じたいタイミングは他にもある。

普段、右クリックメニュー出した後、キャンセルしたい時どうしてるか思い出して。・・・思い出した？

殆どの人が「メニュー以外の場所をクリック」を想像したろう。次点で「Escキーを押す」が来るか。

「メニュー以外の場所をクリック」というのは、要は「ウィンドウのアクティブが外れたら消える」ということであろう。だったら、アクティブが外れた時に実行される onDeactivate が使えそう。

「Escキーを押す」はそのままの意味。これはウィンドウが dialog であれば最初から出来る状態なので dialog のほうがいい気もするが、そうすると逆に「メニュー以外の場所をクリック」つまり「ウィンドウのアクティブが外れたら消える」というのが実装しにくい。「アクティブが外れたら閉じたい」のに、dialog は「閉じるまではアクティブのまま」だから。なのでここでようやく dialog から palette に書き換える。

キーイベントは onClick などのようには用意されていない（多分）のでイベントリスナーを使う。

• • • addEventListener( イベントの種類 , 実行する関数 )

で定義する。今回は「キーを押したら」なのでイベントの種類は "keydown" になる。

var w = new Window('palette{ margins : 0 , spacing : 2 , properties : {borderless : true},\

lb : ListBox{ alignment : ["fill","fill"] , preferredSize : [200,-1] , properties : { items : ["menu1","menu2","menu3"] } }\

}');

w.lb.onChange = function(){

if( !this.selection ) return; //選択がなかったら何もしない

w.close(); //実際のコマンド実行する前に閉じとく。

//好きな関数を実行

switch( this.selection.index ){

case 0: alert("I am menu1!!"); break;

case 1: alert("I am menu2!!"); break;

case 2: alert("I am menu3!!"); break;

default : alert("コマンドが定義されてません");

}

}

w.onDeactivate = function(){

//this.close(); //開発中には邪魔なので今はコメントアウトしておく

$.writeln("onDeactivate"); //代わりにコンソールへの表示をする

}

w.addEventListener ("keydown", function(e){

if( e.keyName == "Escape" ) this.close();

});

w.show();

onDeactivate は発動させるためにウィンドウのアクティブを外す必要がある。もし、クリックせずとも「マウスカーソルが外れたらその時点で消える」としたい場合はイベントリスナーに書き換えてやればいい。イベントの種類は "mouseout"。その場合は以下のようになる。

w.addEventListener ("mouseout", function(e){

this.close();

});

これまでで、ウィンドウの見た目、実行時とキャンセル時の挙動が実装できた。あとはこのウィンドウをどのタイミングで表示させるのか。

右クリックの想定で進めてきたが、別に、ボタン左クリック時でもいいし、なんでもいい。作りたいように作れば。

ここでは当初の目的である「右クリック時に表示」のまま進める。

で、早速、右クリックの判定方法が問題になる。どうやって右クリックされたと知るのか。onClick は左クリックしか反応しない。

ここで出てくるのがまたしてもイベントリスナー。イベントリスナーで実行する関数にはマウスの状態が格納されている MouseEventObject が渡されるのでそれの中身を見れば、どのボタンがクリックされたのかがわかる。左、右、中ボタンが判定できる。

テスト用に以下のコードを実行してみる。

var main = new Window('dialog{ text : "右クリックメニューのテスト" , preferredSize : [400,400] , \

gr : Panel{ text : "この中を右クリック" , preferredSize : [200,200] , alignment : ["center","center"] }\

}');

main.addEventListener ('click' , function(e){

if( e.button== 0 ) alert("左クリック");

if( e.button== 1 ) alert("中クリック");

if( e.button== 2 ) alert("右クリック");

});

main.show();

ここでちょっと問題がある。よく上記のコードを見ればわかる。イベントリスナーを当てているのは、ウィンドウに対してである。にも関わらず、パネルの中しかクリックの反応がない。これ、バグと言っていいと思うが、バージョンごとに挙動が違う。CS6だと左クリックしか反応しないという絶望を味わう。実際CS6ではこれのせいで右クリックメニューは実装できない（多分。やり方わからん。）。詳しくは別ページにまとめる。

ともあれ、上記のアラートの部分を書き換えて、先程までで作ったウィンドウを表示すればいい。さっきまでの右クリックメニュー作成から表示までの一連を showContextMenu として関数化して次のようにした。

var main = new Window('palette{ text : "右クリックメニューのテスト" , preferredSize : [400,400] , \

gr : Panel{ text : "この中を右クリック" , preferredSize : [200,200] , alignment : ["center","center"] }\

}');

main.addEventListener ('click' , function(e){

if( e.button == 0 && parseFloat (app.version) == 11 ) showContextMenu (); //テスト用の措置としてCS6の時は左クリックに当てておく。

if( e.button == 2 ) showContextMenu ();

});

function showContextMenu(){

var w = new Window('palette{ text : "aaa" , margins : 0 , spacing : 2 , properties : {borderless : true},\

lb : ListBox{ alignment : ["fill","fill"] , preferredSize : [200,-1] , properties : { items : ["menu1","menu2","menu3"] } }\

}');

w.lb.onChange = function(){

if( !this.selection ) return; //選択がなかったら何もしない

//好きな関数を実行

switch( this.selection.index ){

case 0: alert("I am menu1!!"); break;

case 1: alert("I am menu2!!"); break;

case 2: alert("I am menu3!!"); break;

default : alert("コマンドが定義されてません");

}

this.window.close(); //実際のコマンド実行する前に閉じとく。

}

w.onDeactivate = function(){

this.close(); //コメントアウトを外して実装した

//$.writeln("onDeactivate"); //コメントアウト

}

w.addEventListener ("keydown", function(e){

if( e.keyName == "Escape" ) this.close();

});

w.show();

}

main.show();

これでパネルの中を右クリック（CS6ならパネルの外を左クリック）すればメニューが出るはず。

実行した人は気づくであろうが、実はまだ足りないものがある。

以上で右クリックメニュー（コンテキストメニュー）を作成することが出来る。おめでとう！