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

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

XML設定ファイル

　有効なプログレスバー設定ファイルを次に示します。

<?xml version="1.0"?>
<ProgressIndicator>
  <styles>
    <leftBackgroundColor>gray</leftBackgroundColor>
    <leftFontColor>white</leftFontColor>
    <rightBackgroundColor>white</rightBackgroundColor>
    <rightFontColor>black</rightFontColor>
    <borderTop>1px solid black</borderTop>
    <borderLeft>1px solid black</borderLeft>
    <borderBottom>1px solid black</borderBottom>
    <borderRight>1px solid black</borderRight>
    <height>25</height>
    <width>200</width>
  </styles>
  <percentComplete>0</percentComplete>
</ProgressIndicator>

　このファイルでは、使用するプログレスバーのスタイルおよび既定のパーセント値を定義します。

XSLTファイル

　初期化および更新の際にプログレスバーXMLに適用されるXSLTドキュメントを次に示します。

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:dt="urn:schemas-microsoft-com:datatypes">
  <xsl:template match="ProgressIndicator">
    <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
      <xsl:attribute name="STYLE">
        border-top: <xsl:value-of select="styles/borderTop"/>;
        border-left: <xsl:value-of select="styles/borderLeft"/>;
        border-bottom: <xsl:value-of select="styles/borderBottom"/>;
        border-right: <xsl:value-of select="styles/borderRight"/>;
        height: <xsl:value-of select="styles/height"/>;
        width: <xsl:value-of select="styles/width"/>;
      </xsl:attribute>
      <TR>
        <TD ALIGN="right">
          <xsl:attribute name="STYLE">
            background-color: 
            <xsl:value-of select="styles/leftBackgroundColor" />;
            color: <xsl:value-of select="styles/leftFontColor" />;
            font-family: arial;
            font-size: 11px;
            font-weight: bold;
            width: <xsl:value-of 
              select="styles/width div 100 * percentComplete" />px;
          </xsl:attribute>
          <xsl:if test="percentComplete > 50">
            <span style="padding-left: 5px; padding-right: 5px;">
              <xsl:value-of select="percentComplete" />%
            </span>
          </xsl:if>
        </TD>
        <TD ALIGN="left">
          <xsl:attribute name="STYLE">
            background-color: <xsl:value-of 
              select="styles/rightBackgroundColor" />;
            color: <xsl:value-of select="styles/rightFontColor" />;
            font-family: arial;
            font-size: 11px;
            font-weight: bold;
            width: <xsl:value-of select= 
"styles/width - (styles/width div 100 * percentComplete)" />px;
          </xsl:attribute>
          <xsl:if test="percentComplete <= 50">
            <span style="padding-left: 5px; padding-right: 5px;">
              <xsl:value-of select="percentComplete" />%
            </span>
          </xsl:if>
        </TD>
      </TR>
    </TABLE>
  </xsl:template>
</xsl:stylesheet>

　このスタイルシートは、2つのセルを持つテーブルを作成します。パーセント値が0から50まで増えると、パーセントラベルの位置が右側のセルから左側のセルに切り替わります（パーセントラベルはHTMLのSPAN要素内に含まれています）。この位置の計算式は左側セルと右側セルで異なっており、上記のドキュメントにはそれぞれの式が示されています。

デモ

　デモ用のプログレスバーは、1秒ごとに10パーセント単位で更新を行うように設定されています。本稿のプログレスバーをデータバインドテーブルに関連付け、簡単なレコード/行の式を使ってプログレスバーを更新すると、クライアント側のデータバインドプロセスの進捗状況をリアルタイムで表示できるようになります。

• ライブデモを見る

次回記事の予定

　次回は、このプログレスバーをデータ連結テーブルで利用する方法を紹介します。図2は予告用のスクリーンショットです。

図2　次回記事のプレビュー

終わりに

　本稿の内容が、Webアプリケーションインターフェイスの質的向上に役立てば幸いです。質問・コメント・提案があれば、著者紹介にあるアドレスまで遠慮なくメールをお送りください。

　最後に、ここNashvilleに滞在している間、PC機器を使わせてくれたBarry Carter氏に感謝します。

本連載のその他の記事

• パート1：高度なUIデザイン
• パート2：カスタムコンテキストメニューの作成
• パート3：フォルダツリーの管理
• パート4：フォルダツリーのドラッグ＆ドロップ
• パート6：プログレスバーの使用
• パート7：フォルダツリーの関係線