XMLとXSLによるプログレスバーの作成

XMLとXSLを使った高度なUIデザイン：パート5

この連載では、1回に1つずつ、XMLとXSL（XML用のスタイルシート言語）を使用して高度なユーザーインタフェース（UI）コンポーネントを作成していきます。今回は、プログレスバーオブジェクトについて説明します。

はじめに

　この連載では、XMLとXSLを使った高度なUIデザインに挑戦します。1回に1つずつ、XMLとXSL（XML用のスタイルシート言語）を使用して高度なユーザーインタフェース（UI）コンポーネントを作成していきます。

　今回は、プログレスバーオブジェクトについて説明します。図1は、これから紹介するプログレスバーのデモであり、プログレスバーが50%を指している様子をキャプチャしたものです。

図1　プログレスバーのデモ

プログレスバーの機能

　今回のプログレスバーオブジェクトは、次のような進捗表示機能を備えています（これがすべてではありません）。

1. データバインディング
2. 画像の事前読み込み
3. チャートおよびグラフの描画

プログレスバーコントロール

　ここで紹介するプログレスバーコントロール（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()メソッドを呼び出して、新たな変換とクライアントブラウザの更新を行います。