XMLとXSLによるプログレスバーの使用

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

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

はじめに

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

　今回は、前回紹介したプログレスバーオブジェクトの利用法をいくつか紹介します。

データバインドテーブルで利用する

概要

　このプログレスバーを使って、データバインド処理の進行状況を表示することができます。図1では、420レコードのデータバインド処理の進行状況をユーザーに示すためにプログレスバーを使用しています。

図1　データバインドの進行状況をプログレスバーで表示

プログレスバーのセットアップ

　このプログレスバーは、次に示すスクリプトを介してクライアント側でセットアップされます。

<SCRIPT LANGUAGE="Javascript">
  var progressIndicator1;

  function init()
  {
    progressIndicator1 = new ProgressIndicator();

    progressIndicator1.xmlDoc = 
        "ProgressIndicator/ProgressIndicator.xml";
    progressIndicator1.xslDoc = 
        "ProgressIndicator/ProgressIndicator.xslt";

    progressIndicator1.target = progressIndicator;

    progressIndicator1.init();
    
    dataTable.dataSrc = "#CustomerData";
    updateDataBindProgress();
  }

  function updateDataBindProgress()
  {
    var percent;
    
    percent=Math.round((dataTable.rows.length-1)/
        CustomerData.documentElement.childNodes.length * 100 );
    progressIndicator1.update(percent);

    if(percent != 100)
    {
      setTimeout("updateDataBindProgress()", 100);
      dataTableCount.innerText = dataTable.rows.length-1 + " rows";
    }
    else
    {
      dataTableStatus.innerText = "Complete.";
      dataTableCount.innerText = dataTable.rows.length-1 + " rows";
    }
  }
</SCRIPT>

　上記のとおり、まずはinit()関数でプログレスバーのインスタンスの作成と設定を行います。プログレスバーのinit()メソッドを呼び出した後、テーブルのdataSrcプロパティを設定します。dataSrcプロパティの設定によってデータバインド処理が開始されるので、そのすぐ後にupdateDataBindProgress()関数を呼び出します。この関数は100ミリ秒ごとに自分自身を呼び出し、すべての行の読み込みが終わるまでクライアントを更新し続けます。

データバインドXML

　参考までに、今回のサンプルで使用するXMLデータソースを図2に示します。

図2　「customers.xml」データファイル

　customer要素の下にあるすべての要素は、データバインドテーブル中の列として表示されます。データバインドテーブルの設定時に、表示する要素を選択することができます。

データバインドテーブル

　本稿で使用するデータバインドテーブルを次に示します。

<TABLE ID="dataTable" BORDER="0" CELLSPACING="0" CELLPADDING="2">
  <TBODY>
    <TR>
      <TD CLASS="dataValue">
        <DIV DATAFLD="id" STYLE="width: 30px; overflow: hidden;"
             NOWRAP="true" />
      </TD>
      <TD CLASS="dataValue">
        <DIV DATAFLD="company" STYLE="width: 120px; overflow: hidden;"
             NOWRAP="true" />
      </TD>
      <TD CLASS="dataValue">
        <DIV DATAFLD="address" STYLE="width: 120px; overflow: hidden;"
             NOWRAP="true" />
      </TD>
      <TD CLASS="dataValue">
        <DIV DATAFLD="city" STYLE="width: 100px; overflow: hidden;"
             NOWRAP="true" />
      </TD>
      <TD CLASS="dataValue">
        <DIV DATAFLD="state" STYLE="width: 40px; overflow: hidden;"
             NOWRAP="true" />
      </TD>
      <TD CLASS="dataValue">
        <DIV DATAFLD="zip" STYLE="width: 30px; overflow: hidden;"
             NOWRAP="true" />
      </TD>
    </TR>
  </TBODY>
  <TFOOT>
    <TR>
      <TD CLASS="dataLabel" STYLE="border-bottom: 0px solid black;"
          ALIGN="center" COLSPAN="100%">
        <b>End</b>
      </TD>
    </TR>
  </TFOOT>
</TABLE>

　各列に表示する要素を指定するためにDIVタグのDATAFLDプロパティを使用していることに注意してください。DATAFLDプロパティを設定するときには、利用するデータソース内の対応フィールド名の大文字／小文字に合わせる必要があります。