Dialogs in XULRunner

このシリーズの前回の記事では、ウィンドウ、メニュー、そして、ツールバーを作成するための、いくつかの単純な XUL について扱いました。今回は、カスタムダイアログと標準的なオペレーティングシステムのダイアログの両方を含む、ダイアログを作成します。ダイアログは、デスクトップアプケーションの非常に基本的な要素です。あるタイプのダイアログは、OS がデフォルト実装を提供しているためにしばしば使用されます。ファイルを開いたり、保存するためのダイアログはそれらの良い例です。出来る限り、これらの "ネイティブな" ダイアログを再利用するのは良い考えです。そうすれば、ユーザは、アプリケーション間で一定した使用感を得ることができるのですから。

カスタムダイアログ

XUL でダイアログを作成するのは、ウィンドウを作成するのにとても似ています。ダイアログの各々は、それ自身の XUL ファイルに記述されます。 XUL は、ダイアログのコンテナとして振舞う dialog 要素を提供します。ダイアログ XUL ファイルは、ウィンドウと同様に、DTD 、CSS、JavaScript を持つことができます。XUL ダイアログの例を以下に示します。:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<dialog id="myDialog" title="My Dialog"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        onload="window.sizeToContent();"
        buttons="accept,cancel"
        buttonlabelaccept="Set Favorite"
        buttonaccesskeyaccept="S"
        ondialogaccept="return doSave();"
        buttonlabelcancel="Cancel"
        buttonaccesskeycancel="n"
        ondialogcancel="return doCancel();">

  <script>
    function doSave(){
     //doSomething()
     return true;
    }

    function doCancel(){
      return true;
    }
  </script>

  <dialogheader title="My dialog" description="Example dialog"/>
  <groupbox flex="1">
    <caption label="Select favorite fruit"/>
    <radiogroup>
      <radio id="1" label="Oranges because they are fruity"/>
      <radio id="2" selected="true" label="Strawberries because of color"/>
      <radio id="3" label="Bananna because it pre packaged"/>
    </radiogroup>
  </groupbox>

</dialog>

XUL の window 要素は、window.openDialog() と呼ばれる、ダイアログを開くための、特別なメソッドを持ちます。以下に示すのが、ダイアログを開くために必要なコードです。 :

function openDialog() {
  window.openDialog("chrome://basicapp/content/dialog.xul", "newdlg", "modal");
}

今まで作ってきたダイアログは、Windows 2000 では、以下のように見えます。他のオペレーティングシステムでも、似たような感じに見えるでしょう。:

dialog 要素で、最初に私の目を引いたことは、ボタンに関連した属性があることです。XUL は、要となるダイアログボタン（例えば、"OK、" "Cancel、" "Help"）を 自動的に作成し、配置する仕組みを持っています。これは、開発者にとっては、実装をより簡単にし、ユーザにとっては、UI をより首尾一貫としたものにします。

開発者は、ボタンを押したときに呼び出される JavaScript の関数と同様に、ボタンのためのキャプション、ボタンのためのアクセスキーを必要とするでしょう。XUL は、ボタンを配置しスタイリングします。OS の各々がダイアログにボタンをどこに配置するか決めるためのそれ自身の規約を持つので、これもまたクロスプラットフォームアプリケーションにとって素晴らしいことです。

以下に、dialog 要素における、ボタンの属性の短い一覧を示します。MozillaZine knowledge base の Creating dialogs も参照してください。 :

buttons

ダイアログに表示するボタンを表す、コンマ区切りのリストです（accept、cancel、help、extra1、extra2）。

buttonlabelaccept

accept ボタンのラベルです。他のボタン型の要素にも、同じような属性が存在します。

buttonaccesskeyaccept

accept ボタンのアクセスキーです。他のボタン型の要素にも、同じような属性が存在します。

ondialogaccept

accept ボタンが押された場合に実行される JavaScript です。他のボタン型の要素にも、同じような属性が存在します。

XUL には、ダイアログで使用することができる幅広い種類の入力コントロールがあります。将来、私は、存在する、もしくは、実装予定の XUL の入力コントロールのより詳細を取り上げることに挑戦するつもりです、 私は、<dialogheader> 要素を使うかどうか迷いますが、これを用いるならば、スクラッチからヘッダーを作成するよりはるかに大きな時間の節約になると思います。

コモンダイアログ

ファイルを開いたり保存するために、コモンダイアログがよく使われます。実際、Windows は、ファイルを開いたり保存するためのダイアログを組み込みで長年サポートしていますし、Macintosh も常にそうです。このことは、開発者がアプリケーションを作成することをより簡単なものにします。加えて、首尾一貫した UI の使用感も、アプリケーションを使うことをより簡単なものにします。XUL は、ファイルピッカー (filepickers)（ファイルを開いたり保存するためのダイアログを意味する Mozilla の用語）のネイティブの実装をサポートします。より新しいリリースでは、XUL エミュレーションのファイルピッカーに切り替えるための設定が使用できるようになるでしょう。もしあなたが XUL の ファイルピッカーを使いたい場合、それは、XPCOM コンポーネントなので、使用する前にインスタンス化しなければなりません。以下のようにします。:

function doFileOpen() {
  /* 参照: https://developer.mozilla.org/en/docs/XUL_Tutorial:Open_and_Save_Dialogs */
  
  var nsIFilePicker = Components.interfaces.nsIFilePicker;
  var fp = Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);

  fp.init(window, "Open File", nsIFilePicker.modeOpen);
  fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll);
  
  var res = fp.show();
  if (res == nsIFilePicker.returnOK) {
    var thefile = fp.file;
    alert(thefile.leafName);
    // --- ファイルに関する処理 ---
  }  
}

XUL は、現在、他のコモンダイアログをサポートしていません。これは、将来のリリースで変化するでしょう。Firefox と Thunderbird は、共に、ネイティブのページ設定と印刷ダイアログをほぼサポートしています。ですが、XUL は、そのような単純なタスクのウィザードの作成を実現する要素をサポートしていません。

このシリーズの今後の記事では、入力コントロール、印刷、クリップボード、そして、XPCOM を取り上げる予定です。

参照

• XUL:dialog
• Creating dialogs
• XUL Tutorial:Creating Dialogs
• nsIFilePicker
• XUL Tutorial:Open and Save Dialogs