SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

次のページ
XSLスタイルシート

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

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

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Joe Slovinski(Joe Slovinski)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/237 2006/04/11 19:05

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング