Windows and menus in XULRunner

XULRunner を使った基本的なデスクトップアプリケーションを作ろうという、私たちのクエストは続きます。前回 は、XULRunner をインストールし、非常に簡単なベアボーンテストアプリケーションを作りました。今回は、デスクトップアプリケーションのユーザインターフェースに共通するものをいくつか追加したいと思います。:

• ウィンドウとダイアログ
• メニューとツールバー
• OS コモンダイアログ
• コントロールとウィジット

ウィンドウ

ウィンドウやダイアログは、それ自身の XUL ファイルによって作成されるべきです。XULファイルには、後で説明する、CSS と DTD のための他のトップレベルの装飾をも含むでしょう。<window> は、XUL において、基礎となるウィンドウを実現する要素です。それは、タイトル (title)/キャプション (caption)、及び、幅 (width)と高さ (height)を調整するために属性を持ちます。まだ説明していませんでしたが、XUL ファイルごとに、一つだけの <window> 要素を持たせることができます。以下に例を挙げます。:

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

<!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd">

<window id="main"
    title="&title;"
    xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script src="main.js"/>
...
</window>

CSS と DTD ファイルへの参照があることに注目してください。CSS は、 HTML における働きと同様に、要素を整形するために使用されます。DTD は、エンティティへの参照を作成するために使用されます。これを用いることで、タイトルとラベルのための文字列を XUL ファイルに直接保存する必要がなくなります。つまり、これは、テキストの更新、そして、アプリケーションのローカリゼーションを容易化します。上記例におけるウィンドウタイトルは、この方法を用いています。また、<script> 要素にも注目してください。これは、XUL ファイルに、ウィンドウで実行される JavaScript を埋め込むために使われています。XUL ファイルの 外部に、CSS、DTD、JavaScript を置くのは、ベストプラクティスだと思います。

あなたの XUL アプリケーションを立ち上げたときに、XULRunner があなたのウィンドウにデフォルトアイコンを表示させていることに気付くかもしれません（ウィンドウの左上角です）。あなたは、きっと、あなた自身のアイコンを指定したくなるでしょう。その方法は、Window icons の記事で学ぶことができます。

メニューとツールバー

ほとんどのデスクトップアプリケーションは、アプリケーションに用意されたコマンドを構成するためにメニューやツールバーの整列を必要とするほどに、十分に複雑です。XUL は、メニューとツールバーの両方をサポートするための要素を提供します。

簡単なウィンドウコードを作成するための、XUL のメニューとツールバーがどのようなものか、以下に示します。:

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

<!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd">

<window id="main"
    title="&title;"
    xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script src="main.js"/>
  <toolbox>
    <menubar id="menubar">
      <menu id="file-menu" label="&file;">
        <menupopup id="file-popup">
          <menuitem label="&file.new'" oncommand="doFileNew();"/>
          <menuitem label="&file.open;" oncommand="doFileOpen();"/>
          <menuitem label="&file.save;" oncommand="doFileSave();"/>
          <menuseparator/>
          <menuitem label="&file.exit;" oncommand="doFileExit();"/>
        </menupopup>
      </menu>
      <menu id="edit-menu" label="&edit;">
        <menupopup id="edit-popup">
          <menuitem label="&edit.undo;" oncommand="doEditUndo();"/>
          <menuitem label="&edit.redo;" oncommand="doEditRedo();"/>
        </menupopup>
      </menu>
    </menubar>
    <toolbar id="main-toolbar">
      <toolbarbutton id="open" label="&file.open;" oncommand="doFileOpen();"/>
      <toolbarbutton id="save" label="&file.save;" oncommand="doFileSave();"/>
    </toolbar>
  </toolbox>
...
</window>

私がメニューとツールバーのラベルにエンティティ参照を使用していることに注意してください。oncommand イベントは、HTML における onclick のように、JavaScript によって実現されています。JavaScript は、<tt>main.js</tt> ファイルに含まれています。XUL は、上記例の <var>open</var> と <var>save</var> のように、同じことを行うメニューとツールバーのコマンドとイベントハンドラーをひとつにまとめるための方法を持っています。 あなたは、以下のような <commandset> と <command> 要素を追加することができます。:

<commandset>
  <command id="cmd_open" label="&file.open;" oncommand="doFileOpen();"/>
  <command id="cmd_save" label="&file.save;" oncommand="doFileSave();"/>
</commandset>
...
<menuitem  command="cmd_open"/>
<menuitem command="cmd_save"/>
...
<toolbarbutton id="open" command="cmd_open"/>
<toolbarbutton id="save" command="cmd_save"/>
...

CSS ファイルを通して、ツールバーのボタンに画像を追加することができます。XUL ファイル内に画像をハードコーディングできますが、CSS の方がベタープラクティスです。以下に、CSS ファイルを示します。:

/* global skin --------------------------------------------------- */
@import url(chrome://global/skin/);

/* toolbar ------------------------------------------------------- */
#open {
  list-style-image: url(chrome://basicapp/skin/open.png);
  -moz-box-orient: vertical;
}

#save {
  list-style-image: url(chrome://basicapp/skin/save.png);
  -moz-box-orient: vertical;
}

もちろん、PNG ファイルをアプリケーションに含めることを忘れずに行う必要があります。

ここでは、XUL が提供する アプリケーション UI についてのほんの少しを取り上げました。 このひとつの記事に終わることなく、XULRunner で UI を作成する試みは、次の記事に続きます。

参照

• XUL:Windows
• XUL Tutorial:Creating a Window
• XUL:commandset
• XUL:command
• XUL Tutorial:Commands
• XUL Tutorial:Simple Menu Bars
• XUL Tutorial:Toolbars