CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/01/19 12:00

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

目次

はじめに

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

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

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


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • Joe Slovinski(Joe Slovinski)

    1993年以来、Webアプリケーションの開発に継続的に携わる。本稿で紹介したコードについてのお問い合わせはJoe Slovinskiまで。

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5