はじめに
この連載では、XMLとXSLを使った高度なUIデザインに挑戦します。1回に1つずつ、XMLとXSL（XML用のスタイルシート言語）を使用して高度なユーザーインタフェース（UI）コンポーネントを作成していきます。
今回は、プログレスバーオブジェクトについて説明します。図1は、これから紹介するプログレスバーのデモであり、プログレスバーが50%を指している様子をキャプチャしたものです。
プログレスバーの機能
今回のプログレスバーオブジェクトは、次のような進捗表示機能を備えています（これがすべてではありません）。
- データバインディング
- 画像の事前読み込み
- チャートおよびグラフの描画
プログレスバーコントロール
ここで紹介するプログレスバーコントロール（ProgressIndicator）は、クライアント側に存在し、次のように定義されています。
function ProgressIndicator() { this.xmlDoc = null; this.xslDoc = null; this.target = null; this.init = ProgressIndicator_init; this.refresh = ProgressIndicator_refresh; this.update = ProgressIndicator_update; this.xmlObj = new ActiveXObject('MSXML2.DOMDocument'); this.xmlObj.async = false; this.xslObj = new ActiveXObject('MSXML2.DOMDocument'); this.xslObj.async = false; }
このコントロールには、次のメンバが含まれています。
プロパティ
xmlDoc
xmlDocプロパティには、プログレスバー設定ファイルへのパスが格納されます。このXMLドキュメントについては後で説明します。
xslDoc
xslDocプロパティには、プログレスバーXSLT（eXtensible Stylesheet Language Transformations ）ファイルへのパスが含まれています。このXSLドキュメントについては後で説明します。
target
targetプロパティには、初期化時にプログレスバーを持つことになるオブジェクトへの参照が格納されます。
xmlObj
xmlObjプロパティには、プログレスバーのXML設定ドキュメントを含んでいる実際のXMLパーサーへの参照が入ります。
xslObj
xslObjプロパティには、プログレスバーのXSLTドキュメントを含んでいる実際のXMLパーサーへの参照が入ります。
メソッド
init()
init()メソッドの定義は次のとおりです。
function ProgressIndicator_init() { this.xmlObj.load(this.xmlDoc); this.xslObj.load(this.xslDoc); this.refresh(); }
refresh()
refresh()メソッドの定義は次のとおりです。
function ProgressIndicator_refresh() { this.target.innerHTML = this.xmlObj.documentElement.transformNode(this.xslObj); }
このメソッドは、XSLTスタイルシートを設定ファイルに適用し、その変換結果をtarget要素のinnerHTMLプロパティに割り当てます。
update()
update()メソッドの定義は次のとおりです。
function ProgressIndicator_update(percent) { this.percentComplete = percent; this.xmlObj.documentElement. selectSingleNode("percentComplete").text = this.percentComplete; this.refresh(); }
このメソッドは、パーセント値を表す整数（実質的には0～100の値）を受け取ります。また、プログレスバーオブジェクトのpercentCompleteプロパティを設定したうえでXML設定ファイルを更新します。XML設定ファイルにパーセント値を反映したら、refresh()メソッドを呼び出して、新たな変換とクライアントブラウザの更新を行います。
