主なGUIコンポーネントの利用 (6/6)

メニューバーは、2011年６月現在、まだGUI Builderには用意されていません。が、スクリプトからはちゃんと利用することができます。簡単な利用例を、下のリスト欄にあげておきました。アドレスにアクセスすると、「helo」というメニューに「Helo」というメニュー項目を持ったメニューバーが表示されます。メニュー項目を選ぶと、Labelにメッセージを表示します。

メニューバーは、MenuBarとMenuItem、そしてServerCommandというオブジェクトの組み合わせによって構築されます。それぞれ以下のような働きをします。

MenuBar――複数のメニュー関連オブジェクトをまとめます。メニューバーのみならず、メニュー項目をまとめるメニューもこれを利用します。
MenuItem――メニューに表示される各項目です。実際に選んで何らかの動作をするものです。
ServerCommand――MenuItemに組み込むコマンドです。これに、実行する関数などの情報が管理されます。

これらの組み合わせでメニューは作成されます。MenuBarでメニューバーを作り、更にMenuBarでメニューバーに表示するメニューを作り、MenuItemでそれぞれのメニュー項目を作り、ServerCommandでメニュー項目を選んだ時に実行する処理を用意します。これらは、以下のようなメソッドで行います。

・MenuBarの作成

変数 = 《UiInstance》.createMenuBar(); // メニューバー用
変数 = 《UiInstance》.createMenuBar(true); // メニュー用

・MenuItemの作成

変数 = 《UiInstance》.createMenuItem( 名前 ,《ServerCommand》);

・ServerCommandの作成

変数 = 《UiInstance》.createServerCommand( 関数名 );

・MenuBarの組み込み

《UiInstance》.add(《MenuBar》);
《MenuBar》.add(《MenuBar》);

・MenuItemの組み込み

《MenuBar》.addItem(《MenuItem》);

MenuBarを作成するcreateMenuBarは、引数を省略したものとtrueにしたものがあります。この引数は「縦に作るかどうか」を指定するものです。省略すると水平に（つまりメニューバーに）なり、trueを指定すると垂直に（つまりメニューに）なります。

メニュー用のMenuBarは、メニューバー用のMenuBarにaddで組み込みます。またMenuItemは、作成時にServerCommandを渡してオブジェクトを作り、できたものをMenuBarにaddItemで組み込みます。ServerCommandは作成する際に呼び出す関数名を指定しておきます。

ちょっとややこしいので、実際の利用例を見ながらメニューバーの構築の流れを理解してください。作成されたオブジェクトがどういう順番でどのように組み込まれるかがわかれば、それほど利用は難しくありません。


――以上、比較的重要なものに絞ってコンポーネントを幾つか紹介しました。この他にもまだまだ用意されているコンポーネントはあります。テーブルやツリー表示など複雑なものは今回取り上げていませんし、RichTextAreaやToggleButtonなど面白そうなものもまだまだあります。興味のある人は、どんなコンポーネントが眠っているか調べてみると面白いでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function doGet(e){
	var app = UiApp.createApplication().setTitle("Sample Page");
	
	var mbar = app.createMenuBar();
	var menu1 = app.createMenuBar(true);
	mbar.addItem("helo",menu1);
	var cmd1 = app.createServerCommand("item1Cmd");
	var item1 = app.createMenuItem("Helo", cmd1);
	menu1.addItem(item1);
	app.add(mbar);
	
	var panel = app.createVerticalPanel();
	app.add(panel);
	var l1 = app.createLabel("This is Sample Page.");
	l1.setStyleAttribute("font-size", "18pt");
	l1.setStyleAttribute("background-color", "#CCCCFF");
	l1.setStyleAttribute("margin", "10px");
	panel.add(l1);
	var l2 = app.createLabel("label1");
	l2.setId("label1");
	l2.setText("簡単なメニューのテストです。");
	panel.add(l2);
	return app;
}

function item1Cmd(e){
	var app = UiApp.getActiveApplication();
	var l1 = app.getElementById("label1");
	l1.setText("メニューだよ。");
	return app;
}