Panels

パネル

パネルはあらゆる種類の内容に対応するポップアップです。データを選択または入力するための一時的なポップアップを提供する時に使用します。

panel 要素

パネルを作成するには panel 要素を使います。パネルは panel 要素の子要素として設置されたどんな要素でも表示できます。例えば、次のパネルは検索用のテキストボックスを表示します。

<panel id="search-panel">
  <label control="search" value="Terms:"/>
  <textbox id="search"/>
</panel>

popup 属性を使うとパネルを要素に取り付けることができ、例えばボタンを押すとパネルが開くといった事が可能になります。popup 属性は同じドキュメント内のパネルの id に設定しなければなりません。 popup 属性を持つ要素の上で左マウスボタンを押すと、対応するパネルが表示されます。例えば、ラベルに上記のポップアップを取り付けるには、次のコードを使います。

<label value="Search" popup="search-panel"/>

こうすると検索語句を入力するためのパネルを開く検索ボタンが出来上がります。このパネルはマウスポインタの位置にパネルの左上の角が来るように表示されます。この場合、マウスポインタの下ではなくボタンの下にポップアップを表示させたいと思うかもしれません。これはボタンにパネルを取り付けるときによくある状況なので、 position 属性を使ってポップアップの位置を配置をコントロールできるようになっています。普通は type 属性を menu に設定して作成するメニュー型のボタンを使った方が良いということに注意してください。以下が完全なサンプルです。

<panel id="search-panel" position="after_start">
  <label control="search" value="Terms:"/>
  <textbox id="search"/>
</panel>

<label value="Search" popup="search-panel"/>

「after_start」という値を持つ position 属性がパネル要素に追加されています。これによって、マウスがクリックされた位置ではなく、ラベルの底辺に沿うようにパネルが表示されるようになります。この属性と、他に使用できる値についてのより詳しい情報は、ポップアップの位置決めを参照して下さい。

popup 属性の代わりに context 属性を使えば、コンテキストメニューのようにパネルを開く事も可能です。これは menupopup 属性の代わりに panel 要素が使われる事を除けば、コンテキストメニューを使うのと同様に動作します。詳細はコンテキストメニューを参照して下さい。

スクリプトでパネルを開く

パネルは、全てのポップアップと同様に、スクリプトからポップアップを開くのに使用できる openPopup メソッドを持っています。例えば、次のコードはボタンの下にパネルを開きます。

panel.openPopup(button, "after_start", 0, 0, false, false);

同様に、 openPopupAtScreen メソッドはパネルをスクリーン上の特定の位置に開きます。この 2 つのメソッドの詳細はポップアップの開閉を参照して下さい。

パネルを閉じる

パネルはユーザがパネルの外側をクリックすると自動的に閉じられます。しかし、パネルの中にそれを閉じるためのボタン等の要素が設置される事も珍しくありません。例えば、上記の検索パネルの例に、押された時にパネルを閉じるボタンを追加できます。

<script>
function doSearch()
{
  document.getElementById("search-panel").hidePopup();
}
</script>

<panel id="search-panel" position="after_start">
  <textbox id="search"/>
  <button label="Search" oncommand="doSearch();"/>
</panel>

<toolbarbutton label="Search" popup="search-panel"/>

この例では、Search ボタンが押されると関数 doSearch が呼ばれます。この関数はポップアップを取得してその hidePopup メソッドを呼び出します。もちろん、この関数には検索を開始するコードも含まれるべきでしょう。

noautohide 属性

パネルはユーザがパネルの外側をクリックするか、escape キーを押すと閉じます。これはユーザが操作をキャンセルする通常の方法です。また、たくさんのコントロールがあるためにパネルが比較的大きい場合には、パネルの中にキャンセルボタンや「閉じる」ボタンを設置したい場合もあるでしょう。

しかしながら、ユーザがパネルの外側をクリックしても、パネルを開いたままにしておきたい事もあるかもしれません。これはフローティングツールパネルを作成したい時に便利です。これを実行するには、パネルの noautohide 属性を true に設定します。

<panel id="search-panel" noautohide="true">
  <textbox id="search"/>
  <button label="Search" oncommand="doSearch();"/>
  <button label="Cancel" oncommand="this.parentNode.hidePopup();"/>
</panel>

こうするとパネルはどこをクリックしても閉じなくなってしまうので、パネルは必ず自分自身を閉じる手段を提供しなければなりません。この例ではキャンセルボタンを追加しています。

パネルにおけるフォーカス

パネル内部の要素はマウスを使ってフォーカスすることができ、また Tab キーを押して現在フォーカスのある要素を変更する事ができます。ポップアップが開かれると、メインウィンドウの要素にフォーカスがあった場合にはその要素からフォーカスが外され、その要素で blur イベントが発生します。初期状態ではポップアップ内のどの要素にもフォーカスがありませんが、ユーザは Tab キーを押す事でパネル内部の最初の要素にフォーカスを当てる事ができます。パネルが開かれた時に初期状態で特定の要素にフォーカスが当たるようにしたければ、popupshown イベントハンドラの中でフォーカスを変更してください。例えば、上記の例で最初から textbox にフォーカスされるようにしたければ、このようにします。

<panel id="search-panel" onpopupshown="document.getElementById('search').focus()">

パネルが閉じると、パネル内部の要素に focus イベントを持つ要素があれば、その要素からフォーカスが取り除かれます。こういったポップアップの開閉時のフォーカスを取り除くプロセスは、popupshowing イベントもしくは popuphiding イベントが発生した後に起こります。したがって、これらのイベントがキャンセルされるとフォーカスは変更されません。

パネルが開かれたときのフォーカスの変更を無効にするには、noautofocus 属性を true に設定します。

<panel noautofocus="true">

こうすると、パネルが開かれたときにフォーカスされていたメインウィンドウ内の要素にフォーカスが残ります。ただし、パネルが閉じたときにもパネル内にフォーカスが残ったままになるので注意してください。