XMLとXSLによるフォルダツリーの管理

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

この連載では、1回に1つずつ、XMLとXSL（XML用のスタイルシート言語）を使用して高度なユーザーインタフェース（UI）コンポーネントを作成していきます。今回は第1回に作成したフォルダツリーを発展させ、ツリー内部の項目を挿入・更新・削除・名前変更できるようにします。

はじめに

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

　今回は、第1回に作成したフォルダツリーを発展させ、ツリー内部の項目を挿入・更新・削除・名前変更できるようにしてみましょう。すべての操作はクライアントに対して実行されますから、サーバーの負担は軽くて済みます。本稿で使用するクライアントはInternet Explorer 5.5以降です。

　実際に動作するデモを見たい方は、ダウンロードサンプルをご利用ください。このサンプルには、管理用のフォルダツリーと表示用のフォルダツリーの両方が含まれています。

フォルダツリーの更新

　前回の記事以後、フォルダツリーに次の変更を加えました。

1. 自動ID
2. 無制限のメタデータサポート
3. 挿入/更新機能
4. 改名機能
5. 削除機能

自動ID

　ツリー内のどのエンティティにも、一意のIDが必要です。前回、フォルダツリーを作成したときには、このIDの割り当てをユーザーに任せていました。今回は、このID割り当てが実行時に自動的に行われるよう改めました。

　新版フォルダツリーでは、ツリーレンダリングの直前に、XSL変換によって一意のIDが割り当てられます。

<xsl:stylesheet version="1.1" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  xmlns:dt="urn:schemas-microsoft-com:datatypes">
  
  <xsl:template match="/tree">
    <xsl:element name="tree">
      <xsl:apply-templates select="entity"/>
    </xsl:element>
  </xsl:template>

  <xsl:template match="entity">
    <xsl:element name="entity">
      <xsl:attribute name="id">
        <xsl:value-of select="generate-id(.)"/>
      </xsl:attribute>
      <xsl:for-each select="*">
        <xsl:if test="name() = 'contents'">
            <xsl:element name="contents">
            <xsl:apply-templates select="entity"/>
          </xsl:element>
        </xsl:if>
        <xsl:if test="name() != 'contents'">
            <xsl:element name="{name()}">
            <xsl:value-of select="."/>
          </xsl:element>
        </xsl:if>
      </xsl:for-each>
    </xsl:element>
  </xsl:template>
</xsl:stylesheet>

　スタイルシートは「tree.xml」ファイルを先頭から末尾までたどりながら、generate-id()メソッドによってエンティティの1つ1つに一意のIDを割り当てていきます。

　これがn層アプリケーションで、各エンティティがデータベースから取り出されるようになっている場合は、このプロセスは不要です。データベース中の行に対応する各エンティティには、既に一意のIDフィールドが存在します。

無制限のメタデータサポート

　どのツリー操作でも、それぞれの要件に応じた記述的メタデータを使用することができます。これはつまり、エンティティを記述するために、任意の名前と値を持つ要素を追加できるということです。

　たとえば、次に示すのは、前回の記事で使用した顧客情報XMLです。「image」は予約語であるため、「image」というエンティティ名を「imageBase」に変更してあることに注意してください。

<entity id="e2">
  <description>Microsoft</description>
  <imageBase>images/book.gif</imageBase>
  <imageOpen>images/bookOpen.gif</imageOpen>
  <onClick>displayCustomer(12345)</onClick>
  <onContextMenu>context/contextCustomer.xml</onContextMenu>
  <contents>
  </contents>
</entity>

　次に示すのは、本稿で使用する顧客情報XMLのサンプルです。

<entity id="e2">
  <description>Microsoft</description>
  <imageBase>images/book.gif</imageBase>
  <imageOpen>images/bookOpen.gif</imageOpen>
  <onClick>displayCustomer(12345)</onClick>
  <onContextMenu>context/contextCustomer.xml</onContextMenu>
  <contact>Bill Gates</contact>
  <address1>1234 Microsoft Dr.</address>
  <address2>Suite 123</address>
  <city>Microsoft City</city>
  <state>MS</state>
  <zip>12345</zip>
  <phone>[phone]</phone>
  <contents>
  </contents>
</entity>

　本稿のXMLでは、連絡先（contact）、住所（address）、電話番号（phone）などの顧客固有のメタデータが追加されていることがおわかりでしょう。今回のフォルダツリーはこの新しいメタデータを自動的に読み取り、解釈します。

　新しいフォルダツリーアーキテクチャでは、子エンティティが親エンティティからメタデータを継承します。たとえば、「Customers」フォルダを右クリックして「Insert」を選択すると、「Customers」フォルダの持つ全メタデータが子にも引き継がれます。