「ファイル検索」ダイアログが最初に表示されたとき、プログレスバーやダミーのツリーデータを表示しても意味はありません。これらのものを追加したのは、それが役に立つ場合があるからです。これらのものを取り去って、Find ボタンを押したときにそれらが表示されるようにしましょう。そのためにはまず、それらが最初は見えないようにする必要があります。要素が見えるかどうかをコントロールするには、CSS プロパティーの display が使えます。

変更を加えて、プログレスメーターが最初は隠されているようにしましょう。また、id を追加して、スクリプトから参照して、それを表示したり隠したりできるようにします。一方、検索が実行されて必要になるまで、スプリッターと結果ツリーは隠すことにしましょう。

<tree id="results" style="display:none;">

  .
  .
  .
<splitter id="splitbar" collapse="before" resizeafter="grow" style="display:none;"/>

<box orient="horizontal">

  <progressmeter id="progmeter" value="50%"
    style="margin: 4px; display: none;"/>

CSS スタイルプロパティー display を追加して、それを none という値に設定しました。これによって、要素は、最初に表示されたときは隠されます。デフォルトでは、display プロパティーは、要素を表示するよう指示する値になります。正確な値は要素によって異なります。要素によって表示のされ方が違うからです。個々の XUL 要素のデフォルトスタイルの詳細については Mozilla クロムディレクトリーの xul.css ファイルを、また、個々の HTML 要素のデフォルトスタイルの詳細については Mozilla res ディレクトリーの html.css ファイルを参照して下さい。

progressmeter の場合、デフォルトの表示モードは inline です。プログレスメーターを表示させたいときは、display スタイルプロパティーをこの値に設定するだけです。これはすぐ後に行ないます。

まず、Find ボタンが押されたときに呼び出される関数を追加しましょう。スクリプトは、findfile.js という別ファイルに置くことにします。この前のセクションで、XUL ファイルに script 要素を付け加えました。まだしていなければ、以下に示すように、今やって下さい。onclick ハンドラーも Find ボタンに追加することにします。

<script src="findfile.js"/>
  .
  .
  .
<button id="find-button" label="Find" default="true"
   style="width: 8ex" onclick="doFind();"/>

ここで、findfile.js という名前の別ファイルを findfile.xul と同じディレクトリーに作ります。このファイルに doFind() 関数を追加します。後で、その他の関数も付け加えることにしましょう。スクリプトタグは、その内部に、直接、コードを置くこともできます。しかし、よりよいパフォーマンス引き出すことを始めとする様々な理由から、イベントハンドラー内に直接置くことのできる小さなコードは別として、いつでも、スクリプトは別のファイルに置く方がよいでしょう。

function doFind()
{
  var meter=document.getElementById('progmeter');
  meter.setAttribute("style","margin: 4ex; display: inline;");
}

この関数は、まず、progmeter という id を使って、プログレスメーターへの参照を取得します。次に、関数本体の 2 行目では、プログレスメーターのスタイル属性を、inline 表示されるよう設定しています。プログレスメーターが取り除かれないようするため、マージンも付け加えなければならなかった点に注意して下さい。これはスタイルプロパティーを設定する上で最善の方法ではありません。DOM レベル 2 では、次のようにすることができます。

function doFind()
{
  var meter=document.getElementById('progmeter');
  meter.style.display="inline";
}

これは、要素のマージンを変更しないで済むのでよりよい方法です。しかし、これは、Mozilla でまだ完全に動作する訳ではありません。(これは HTML 要素では動作します。従って、これはすぐに実現するはずです。)

最後に、何を検索しているのか表示するアラートをポップアップさせましょう。もちろん、最終バージョンではこれは必要ありませんが、何が起こっているのか再確認するために追加することにします。

function doFind()
{
  var meter=document.getElementById('progmeter');
  meter.setAttribute("style","display: inline;");
  var searchtext=document.getElementById('find-text').value;
  alert("Searching for \""+searchtext+"\"");
}

アラートボックスのおかげで、Find ボタンをクリックしたとき、何が起きているのか分かります。ドロップダウンボックスから選択する追加コードを書くこともできるでしょう。