CodeZine(コードジン)

特集ページ一覧

XMLとXSLによるカスタムコンテキストメニューの作成

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2005/12/26 12:00

この連載では、1回に1つずつ、XMLとXSL(XML用のスタイルシート言語)を使用して高度なユーザーインタフェース(UI)コンポーネントを作成していきます。今回は、個々のオブジェクト用に深さ無制限のカスタムコンテキストメニューを作成してみます。

目次

はじめに

 この連載では、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アプリケーションで可能となりました。

図1 MS Internet Explorer内に作成されたオブジェクト固有コンテキストメニューの例
図1 MS Internet Explorer内に作成されたオブジェクト固有コンテキストメニューの例

 この例では、番号体系によってメニューのレベルを表しています。

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」です。このファイルはダウンロードサンプルに含まれています。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • Joe Slovinski(Joe Slovinski)

    1993年以来、Webアプリケーションの開発に継続的に携わる。本稿で紹介したコードについてのお問い合わせはJoe Slovinskiまで。

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5