メニューバーとマルチウインドウ処理
では、このother.zulを内部にマルチウインドウで表示するサンプルを作成しましょう。よりデスクトップらしく見せるためメニューバーを用意し、メニューを選んでウインドウを開いたり閉じたりするようにしてみます。
<?page id="other" title="Index Page"?>
<zk>
<menubar id="menubar" width="100%">
<menu label="Project" image="/img/Centigrade-Widget-Icons/Briefcase-16x16.png">
<menupopup>
<menuitem label="新規ウインドウ" onClick="doAction()" />
<menuitem label="閉じる" onClick="doClose()" />
<menuseparator />
<menuitem label="終了" onClick="alert(self.label)" />
</menupopup>
</menu>
</menubar>
<zscript>
var selectedWindow = null;
var counter = 0;
void doAction(){
var mywindow = (org.zkoss.zul.Window)Executions.createComponents
("/other.zul",null,null);
mywindow.setTitle("window " + ++counter);
mywindow.setSizable(true);
mywindow.setClosable(true);
mywindow.doOverlapped();
mywindow.addEventListener("onZIndex",new MyAdapter());
}
void doClose(){
if (selectedWindow != null){
selectedWindow.onClose();
}
}
class MyAdapter implements EventListener {
public void onEvent(Event event){
selectedWindow = event.getTarget();
}
}
</zscript>
</zk>
ここでは、アクセスすると［ファイル］というメニューを持つメニューバーが現れます。ここから［新規ウインドウ］メニューを選ぶと、画面にother.zulのウインドウが現れます。ウインドウはマウスでクリックして選択したり、ドラッグして移動やリサイズが可能です。またメニューから［閉じる］を選ぶと、現在選択されているウインドウが閉じられます。
メニューの構成
メニューは、全部で4種類のコンポーネントから構成されています。ここで使われているメニュー関係のタグを整理すると次のようになっていることが分かります。
- <menubar>：メニューバー。これはバーだけで、何も項目は表示されない
- <menu>：メニュー。これがメニューバーに表示されるメニューとなる
- <menupopup>：メニューをクリックすると下に現れる部分。ポップアップメニューとして定義される
- <menuitem>：ポップアップメニューに表示されるメニュー項目。これが実際に選択されるメニューになる
このように、メニューは4つの部品から構成されます。これらのタグを構造的に記述すれば、それだけでメニューが作成されるため、メニューの表示や動作のためにコードを書く必要はありません。
ウインドウを作成し表示する
続いて、「新規ウインドウ」メニューで新しいウインドウを表示する処理についてです。これは、doActionというグローバル関数として定義されています。ここでは、まずウインドウであるWindowクラスのインスタンスを生成し、そのプロパティなどを設定していきます。
var mywindow = (org.zkoss.zul.Window)Executions.createComponents
("/other.zul",null,null);
Windowコンポーネントの生成は、new Windowなどという形で作成をしません。「Executions」という、クライアントからの要求を処理するための専用クラスが用意されており、ここにあるコンポーネント生成のためのメソッド「createComponents」を利用します。これは、引数にコンポーネントのテンプレートとなるzulファイルのURL、親コンポーネント、初期設定するプロパティをまとめたオブジェクトなどが渡されます。ここでは、テンプレートとなるother.zulのURLだけを渡しておきます。
続いて、作成したWindowオブジェクトのプロパティを設定していきます。
mywindow.setTitle("window " + ++counter);
mywindow.setSizable(true);
mywindow.setClosable(true);
「setTitle」でタイトル、「setSizable」ではリサイズ可能かどうか、「setClosable」は閉じられるかどうかを設定します。これで一通りの設定はできましたが、まだこの状態ではWindowは独立したウインドウとして使うことはできません。
独立したウインドウとして扱えるようにしているのが次の部分です。
mywindow.doOverlapped();
「doOverlapped」は、ウインドウをオーバラップ可能にするものです。ウインドウは、その性質などからいくつかのモードに分けて考えることができます。Windowにある以下のメソッドで、ウインドウの動作モードを変更できます。
- doOverlapped：オーバーラップ・ウインドウにする
- doPopup：ポップアップ・ウインドウにする。オーバーラップ・ウインドウと同じように表示されるが、他のエリアをクリックすると消える
- doModal：モーダル・ウインドウにする。表示されている間、他の処理を停止し、閉じるまでウインドウ外にアクセスできなくなる
- doEmbedded：デフォルトの状態（ドキュメント内に埋め込まれた状態）に戻す
