はじめに
この連載では、XMLとXSLを使った高度なUIデザインに挑戦します。1回に1つずつ、XMLとXSL（XML用のスタイルシート言語）を使用して高度なユーザーインタフェース（UI）コンポーネントを作成していきます。
今回はXMLとXSLTを使い、個々のオブジェクト用に深さ無制限のカスタムコンテキストメニューを作成してみましょう。以下で説明するコンテキストメニューは、XMLフィードとして与えられるフォーマットにXSLTスタイルシートを適用し、その適用結果をクライアントに書き出すことで機能します。メニュー内の移動要求は、すべてクライアント側で処理されます。本稿で使用するクライアントはInternet Explorer 5.5以降です。
このコンテキストメニューは、Webページ中のどのオブジェクトにでも適用できます。本稿では1つの例として、フォルダツリー内のオブジェクトにコンテキストメニューを適用してみます。
今回使用するのは、この連載のパート1で作成したフォルダツリーです。パート1でも述べたとおり、このツリーのXMLに含まれる各エンティティには、「onContextMenu」と呼ばれる特殊な要素が追加されています。onContextMenu要素は、要求されたコンテキストメニューの構成を定義しているXMLファイルを参照します。
実際に動作するコンテキストメニューのデモを見たい方は、ダウンロードサンプルをご利用ください。このサンプルには、コンテキストメニューを構成する一連のファイル（XML、XSL、JS、CSS、HTMLの各ファイルと、画像ファイル）が含まれています。
コンテキストメニューの概要
Windowsアプリケーションでは、普通、オブジェクトを右クリックすると、そのオブジェクトに固有のコンテキストメニューが表示されます。たとえば、SQL Serverテーブルの行やExcelスプレッドシートの行はもちろん、単にコンピュータのデスクトップを右クリックしても、それぞれに固有のカスタムコンテキストメニューが現れます。
コンテキストメニューには、使用中のアプリケーションと、そのアプリケーション中でクリックされたオブジェクトに応じたオプションが並びます。初期のWebブラウザでは、開発者がオブジェクトごとにコンテキストメニューを作成することなどできませんでしたが、DOM（ドキュメントオブジェクトモデル）とWebブラウザの進歩により、それがWebアプリケーションで可能となりました。
この例では、番号体系によってメニューのレベルを表しています。
XML構造
私が選んだXMLフォーマットは、再帰的XSLTスタイルシートに適したフォーマットです。本稿で取り上げる深さ無制限のコンテキストメニューの諸条件をよく満たしています。
私が作成したXMLドキュメントには、menuという名前のルート要素が含まれています。これはentity要素だけを含むことができます。オプション要素をこれらのentity要素内のcontents要素の入れ子とすることで、コンテキストメニューの構造が暗黙裏に定義されます。次に示すのは、オプション要素に属するすべての要素と属性のリストです。
| 名前 | 種類 | 内容 |
id | 属性 | 個々のオプションを指し示すのに用いられる一意の文字列または整数です。 |
description | 要素 | 個々のオプションの記述。このテキストがユーザーに表示されます。 |
onClick | 要素 | onClickイベントで実行されるクライアント側機能の名前です。 |
image | 要素 | オプションが閉じたとき、または選択されなかったときに表示される画像です。 |
imageOpen | 要素 | オプションが開いたときに表示される画像です。 |
contents | 要素 | entity要素を含みます。オプションにサブメニューがあるかどうかを調べるのに使われます。 |
次のXMLで記述されているのは、ユーザーが「Customer」を右クリックしたときに表示されるコンテキストメニューです。わかりやすいように静的XMLドキュメントとしていますが、XMLデータベースクエリによって取り出す形にもできます。
<?xml version="1.0"?> <menu> <entity id="c1"> <description>Add Customer</description> <image>images/add_small.gif</image> <imageOpen>images/add_small.gif</imageOpen> <contents> <entity id="c2"> <description>Business</description> <image>images/spacer.gif</image> <imageOpen>images/spacer.gif</imageOpen> <contents> </contents> </entity> <entity id="c3"> <description>Individual</description> <image>images/spacer.gif</image> <imageOpen>images/spacer.gif</imageOpen> <contents> </contents> </entity> </contents> </entity> <entity id="c4"> <description>Modify Customer</description> <image>images/modify_small.gif</image> <imageOpen>images/modify_small.gif</imageOpen> <contents> </contents> </entity> <entity id="c5"> <description>Remove Customer</description> <image>images/x_small.gif</image> <imageOpen>images/x_small.gif</imageOpen> <contents> </contents> </entity> </menu>
このXMLファイルの名前は「contextCustomer.xml」です。このファイルはダウンロードサンプルに含まれています。
