主なGUIコンポーネントの利用 (5/6)
作成:2011-07-06 08:11
更新:2011-11-04 16:25
更新:2011-11-04 16:25
■ダイアログとDialogBox
GUI Guilderには「スクリプトから呼び出さないと使えないGUI」がいろいろとあります。ここで是非取り上げておきたいのが「ダイアログ」です。例えばボタンを押したりメニューを選んだ時に画面にぱっとダイアログが現れる、というのは、割とよくあるインターフェイスですね。こうしたダイアログは、普段は表示されず、必要に応じてポップアップして表示されるものですから、GUI Builderで画面に作りこんでおくことはできませんね。
同様のものとして、既にPopupPanelというものを紹介しましたが、あれはただ四角いエリアとして表示するだけのものでした。ここで紹介する「DialogBox」というオブジェクトは、文字通りダイアログウインドウとして機能するパネルを画面に表示するものです。タイトルバーをもって自由にドラッグして動かしたり、基本的な機能はひと通り持っています。
ただし、実際にダイアログの中に表示される部分は「からっぽ」の状態です。DialogBoxを作成した後、表示する内容を用意してはめ込んでやらないといけません。これを忘れると、ダイアログ表示そのものが崩れて、わけのわからない状態になりますので注意！
DialogBoxの作成は、UiInstanceにある「createDialogBox」を呼び出して行います。これは引数の異なるものが３種類用意されています。
これでDialogBoxを作成し、中に表示するコンポーネントを作成して組み込めばDialogBoxは作れます。が、更に使いやすくするには他にも色々と考えないといけません。とりあえず、実際の動作例を見ながら説明をしていきましょう。
下のリスト欄にあげたのは、先ほどのメニューバーのサンプルを修正し、メニュー項目を選んだら画面にダイアログが表示されるようにしたものです。現れたダイアログは、タイトルバーをドラッグして動かしたりできます。そして「OK」ボタンを押すと消えます。
ポイントをチェックしていきましょう。まずダイアログの表示／非表示ですが、これは「setVisible」を使います。これで引数にtrueを指定すれば表示され、falseにすれば消えます。ここではあらかじめdoGetでダイアログを非表示の状態で用意しておき、メニューでsetVisible(true)、ボタンを押すとsetVisible(false)を実行していたのですね。
また、ダイアログをドラッグして動かしていますが、これは以下の文を用意しているおかげです。
表示する中身は、まずVertical Panelを作ってDialogBoxに組み込んでおき、実際の表示内容はVertical Panelに追加していきます。このあたりは普通のGUI設計と同じですね。
同様のものとして、既にPopupPanelというものを紹介しましたが、あれはただ四角いエリアとして表示するだけのものでした。ここで紹介する「DialogBox」というオブジェクトは、文字通りダイアログウインドウとして機能するパネルを画面に表示するものです。タイトルバーをもって自由にドラッグして動かしたり、基本的な機能はひと通り持っています。
ただし、実際にダイアログの中に表示される部分は「からっぽ」の状態です。DialogBoxを作成した後、表示する内容を用意してはめ込んでやらないといけません。これを忘れると、ダイアログ表示そのものが崩れて、わけのわからない状態になりますので注意！
DialogBoxの作成は、UiInstanceにある「createDialogBox」を呼び出して行います。これは引数の異なるものが３種類用意されています。
《UiInstance》.createDialogBox();真偽値1は、オートハイド（自動非表示）という機能に関するもので、真偽値2はモーダルかどうかを示すものです。オートハイドは例えば新たに別のダイアログを開いたときに自動的に前のダイアログを閉じたりするのに用いるものです。モーダルは、表示中、他のGUIコンポーネントを使えなくする（モーダルにする）ものです。
《UiInstance》.createDialogBox( 真偽値1 );
《UiInstance》.createDialogBox( 真偽値1 , 真偽値2 );
これでDialogBoxを作成し、中に表示するコンポーネントを作成して組み込めばDialogBoxは作れます。が、更に使いやすくするには他にも色々と考えないといけません。とりあえず、実際の動作例を見ながら説明をしていきましょう。
下のリスト欄にあげたのは、先ほどのメニューバーのサンプルを修正し、メニュー項目を選んだら画面にダイアログが表示されるようにしたものです。現れたダイアログは、タイトルバーをドラッグして動かしたりできます。そして「OK」ボタンを押すと消えます。
ポイントをチェックしていきましょう。まずダイアログの表示／非表示ですが、これは「setVisible」を使います。これで引数にtrueを指定すれば表示され、falseにすれば消えます。ここではあらかじめdoGetでダイアログを非表示の状態で用意しておき、メニューでsetVisible(true)、ボタンを押すとsetVisible(false)を実行していたのですね。
また、ダイアログをドラッグして動かしていますが、これは以下の文を用意しているおかげです。
dlog.setStyleAttribute("position", "absolute");そう、スタイルシートのpositionを設定しておかないと、ダイアログは動かせるようになりません。デフォルトでは、addしてもそのまま画面の中にコンポーネントの１つとして組み込まれてしまうので注意が必要です。表示する中身は、まずVertical Panelを作ってDialogBoxに組み込んでおき、実際の表示内容はVertical Panelに追加していきます。このあたりは普通のGUI設計と同じですね。
(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 dlog = app.createDialogBox(false, true);
dlog.setId("dlog1");
dlog.setStyleAttribute("position", "absolute");
dlog.setStyleAttribute("top", "100px");
dlog.setStyleAttribute("left", "100px");
dlog.setText("Dialog");
dlog.setWidth("300px").setHeight("200px");
dlog.setVisible(false);
var vpanel = app.createVerticalPanel();
vpanel.setWidth("200px").setHeight("150px");
vpanel.add(app.createLabel("これはダイアログです。"));
var clickhander = app.createServerClickHandler("onbtnclick");
var btn = app.createButton("click");
btn.addClickHandler(clickhander);
vpanel.add(btn);
dlog.add(vpanel);
app.add(dlog);
return app;
}
function item1Cmd(e){
var app = UiApp.getActiveApplication();
var dlog = app.getElementById("dlog1");
dlog.setVisible(true);
return app;
}
function onbtnclick(e){
var app = UiApp.getActiveApplication();
var dlog = app.getElementById("dlog1");
dlog.setVisible(false);
return app;
}
※関連コンテンツ
「初心者のためのGoogle Apps Scriptプログラミング入門」に戻る