XMLとXSLによるフォルダツリーの作成

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

この連載では、1回に1つずつ、XMLとXSL（XML用のスタイルシート言語）を使用して高度なユーザーインタフェース（UI）コンポーネントを作成していきます。今回は第1回として、深さ無制限のフォルダツリーを作成します。

はじめに

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

　今回は第1回として、XMLとXSLで深さ無制限のフォルダツリーを作成してみましょう。以下で説明するフォルダツリーは、XMLフィードとして与えられるフォーマットにXSLスタイルシートを適用し、その適用結果をクライアントに書き出すことで作成されます。ツリー自体とそこに含まれる諸エンティティの展開と折り畳み・最大化と最小化の要求は、すべてクライアント側で処理されます。本稿で使用するクライアントはInternet Explorer 5.5以降です。

　作成したフォルダツリーのデモをサンプルとして用意しています。ダウンロードして、実行してみてください。このダウンロードサンプルには、フォルダツリーを構成する諸ファイル（「tree.xsl」「tree.xml」「tree.js」「tree.css」「common.js」および画像ファイル）が含まれています。

フォルダツリーに固有のアーキテクチャ

　Webページオブジェクトには、いく通りもの作成方法があるのが普通で、フォルダツリーも同様です。フォルダツリーの開発では、フォルダツリー独特のアーキテクチャ条件に留意してください。たとえば、次のような条件です。

1. ネスティング（入れ子）
2. 関係線

ネスティング

図1　ブラウザ内でネスティングなし

図2　ブラウザ内でネスティングあり

　図1と図2では、DOM（ドキュメントオブジェクトモデル）内にある各オブジェクトの相互関係とネスティング状態をわかりやすくするために、フォルダツリーに一時的に境界線を描いています。

関係線

　ツリー内部に関係線を引けば、見映えがよくなるだけでなく、大きなツリーの構造が把握しやすくなります。反面、パフォーマンスが低下するというマイナスもあります。100個の項目を含むツリーでは、エンティティ間の関係を表示するだけで約300個の画像が必要になります。画像のキャッシュ保存やプリロードを行うことで多少はパフォーマンス低下を防ぐことができますが、それでも、画像がDOM内に独立のオブジェクトとして存在することは変わりません。関係線なしのインデントだけでも親子関係を示すには十分ですから、本稿では、関係線のないツリーでいくことにします。