次に、ヘルプメニューを「ファイル検索」ダイアログウィンドウに追加する必要があります。このためには、同じ id をもつメニューを適切な場所に加えるだけです。最も適切な場所は edit メニューのすぐ後でしょう。
<menu id="edit-menu" label="Edit" accesskey="e">
<menupopup id="edit-popup">
<menuitem label="Cut" accesskey="t" key="cut_cmd" oncommand="doCut()"/>
<menuitem label="Copy" accesskey="c" key="copy_cmd" oncommand="doCopy()"/>
<menuitem label="Paste" accesskey="p" key="paste_cmd" oncommand="doPaste()"/>
</menupopup>
</menu>
<menu id="help-menu" label="Help" accesskey="h"/>
</menubar>
|
ここでは、ヘルプメニュー要素には内容が何もありません。メニューの項目は、id がマッチするのでオーバーレイから取られます。次に、オーバーレイを別のウィンドウでインポートできます。そのため、一個所で定義したヘルプメニューの内容だけがあれば十分です。
ヘルプメニューの属性 (この例では label と accesskey) をオーバーレイに置くことによって、ウィンドウ内のコードの両をもっと減らすことができます。これらの属性は、要素が継承します。要素とウィンドウの両方に同じ属性を指定すると、オーバーレイ内の値が要素の値を上書きします。
ヘルプメニューをこのやり方で変更しましょう。
findfile.xul:
<menu id="edit-menu" label="Edit" accesskey="e">
<menupopup id="edit-popup">
<menuitem label="Cut" accesskey="t" key="cut_cmd" oncommand="doCut()"/>
<menuitem label"Copy" accesskey="c" key="copy_cmd" oncommand="doCopy()"/>
<menuitem label="Paste" accesskey="p" key="paste_cmd" oncommand="doPaste()"/>
</menupopup>
</menu>
<menu id="help-menu"/>
</menubar>
helpoverlay.xul:
<?xml version="1.0"?>
<overlay id="toverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menu id="help-menu" label="Help" accesskey="h">
<menupopup id="help-popup">
.
.
.
|
オーバーレイとウィンドウの要素の両方に内容があると何が起こるのでしょうか。この場合、ウィンドウの内容がそのまま使われ、オーバーレイの内容はその末尾に追加されます。以下の例は、このことを示しています。
stopandgo.xul:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<window title="Stop and Go" id="test-window"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<?xul-overlay href="chrome://findfile/content/toverlay.xul"?>
<box id="singlebox">
<button id="gobutton" label="Go"/>
<button id="stopbutton" label="Stop"/>
</box>
</window>
toverlay.xul:
<?xml version="1.0"?>
<overlay id="toverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<box id="singlebox">
<button id="backbutton" label="Back"/>
<button id="forwardbutton" label="Forward"/>
</box>
</overlay>
|
この例では、識別子 singlebox をもつボックスにはそれ自身の内容があります。要素は結び付けられ、オーバーレイの 2 つのボタンがボックスの末尾に追加されます。それらを先頭に追加したい場合、もう一つ内部ボックスを追加し、その中に要素をインポートすればよいでしょう。外側のボックスに id を置く代わりに、ボタンを置きたい内側のボックスにそれを置きます。もっとよい方法は、すぐあとで説明します。
メニューを使うと、余分な menupopup 要素が必要となるため、少々トリッキーになります。ウィンドウとオーバーレイにポップアップを置くと、その一方だけが使われます。メニューはポップアップを一つしか使えないからです。ポップアップの id を使うことによって、これは簡単に回避できます。
findfile.xul:
<menu id="help-menu">
<menupopup id="help-popup">
<menuitem id="help-findfiles" label="Find files help"/>
</menupopup>
</menu>
</menubar>
helpoverlay.xul:
<menu id="help-menu" label="Help" accesskey="h" />
<menupopup id="help-popup">;
<menuitem id="help-contents" label="Contents"/>
<menuitem id="help-index" label="Index"/>
<menuitem id="help-about" label="About..."/>
</menupopup>
|
今度は、属性を取得するための menu 要素とメニュー内容を取得するための menupopup 要素の両方をオーバーレイすることにします。こうすることにより、項目 4 つからなるメニューが得られます。
オーバーレイされた要素を置く
しかし、前の例では、オーバーレイ内のメニュー項目を末尾にではなくメニューの先頭に置きたかったのでした。XUL は、それらを先頭だけでなく、項目の幾つかを先頭に置き残りを下部 (あるいは、その間のどこにでも) 置くメカニズムを提供しています。これによって、メニュー、ツールバー、その他のウィジェットを必要な正確な場所にオーバーレイすることができます。
このためには、メニュー項目に insertbefore 属性を使います。その値は、項目を挿入したい位置のすぐ後の要素の id にします。それ以外に、どの要素の後ろに項目を挿入したいのかを指示するため、insertafter 属性が使えます。これらの属性は、それが指定されている要素だけに影響します。ある要素が '前に挿入された' としても、残りの要素は末尾に追加されます。要素すべてを前に表示させたい場合、要素すべてに insertbefore を置かなければなりません。
更に、特定のインデックスの位置を指定したい場合は、position 属性が使えます。最初の位置は 1 です。
オーバーレイの Contents と Index 項目を「ファイル検索」ヘルプメニューの前に表示し、 About 項目を後ろに表示したいとしましょう。このためには、Contents と Index メニュー項目の両方に insertbefore 属性を追加します。完璧を期すため、About メニューにも insertafter を追加しても構いませんが、これは必要ありません。それはデフォルトで末尾に表示されるからです。
上のヘルプメニューの例では、メニュー項目の id は help-findfiles です。このため、insertbefore をこの id に設定する必要があります。下の例はこの変更を示しています。
<menupopup id="help-popup"> <menuitem id="help-contents" label="Contents" insertbefore="help-findfiles"/> <menuitem id="help-index" label="Index" insertbefore="help-findfiles"/> <menuitem id="help-about" label="About..."/> </menupopup> |
これで、(「ファイル検索」ダイアログなどの) ヘルプオーバーレイを使ったウィンドウ が開かれると、次のことが起こります。
- オーバーレイ要素の子供であるオーバーレイ内に直接ある項目すべてに対して、ベースとなるウィンドウの要素が同じ id をもつか調べられる。もしなければ、オーバーレイ内の要素は無視される。この例の場合、help-menu と help-popup という id をもつ要素がそれに当たる。
- もしあれば、オーバーレイ要素の属性が見付けられた要素にコピーされる。
- オーバーレイの要素の子供それぞれが挿入される。この場合、ベースとなるウィンドウの要素の子供として、個々のメニュー項目が挿入される。
- オーバーレイの要素に insertafter 属性があれば、要素は、この属性の値にマッチする id をもつベースウィンドウ内の要素の直後に追加される。
- オーバーレイの要素に insertbefore 属性があれば、要素は、この属性の値にマッチする id をもつベースウィンドウ内の要素の直前に追加される。
- オーバーレイの要素に position 属性があれば、要素は、この属性で指定された 1 をベースとするインデックスの位置に追加される。
- それ以外の場合、要素は、最後の子供として追加される。
実際には、insertbefore と insertafter の値は、カンマで区切ったリストでも構いません。この場合は、ウィンドウで見付かったリスト内の最初の id が、その位置を決めるのに使われます。
(進む) 次は、オーバーレイを異なったパッケージ内のウィンドウに適用する場合を見ることにしましょう。
例: 12.2.1