お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

XForms 入門、第 3 回: アクションとイベントを使う

Chris Herborth, Freelance, Freelance Writer

Chris Herborth は、数々の賞を受賞したテクニカル・ライターであり、オペレーティング・システムやプログラミングに関する執筆に 10 年以上携わっています。彼は息子の Alex と遊んでいる時や妻の Lynette と時間を過ごしている時以外は、ビデオ・ゲームの設計やプログラミング、そして研究 (つまりゲームで遊ぶこと) を行っています。

概要： XForms は、次世代の Web ベースのデータ処理です。XForms は従来の HTML フォームを、XML データ・モデルとプレゼンテーション要素で置き換えています。この 3 回シリーズでは、XForms とその機能について、基本的な XForms モデルとフォーム、様々なタイプのコントロール、基本的なフォーム送信や高度なフォーム送信などを含めて解説します。第 3 回目の今回は、XForms でのアクションとイベントの使い方と、フォームの出力フォーマットのコントロールについて説明します。

タグを付ける!

日付: 2006年 9月 26日
レベル: 中級
この記事の原文: 英語
アクティビティー： 3014 ビュー
お気軽にご意見・ご感想をお寄せください：

はじめに

XForms は、エクステンションやプラグインを使って一般的なブラウザーでサポートできるようになったこと、また IBM® Workplace Forms のような技術 (詳細についてはこの記事の最後にある「参考文献」を参照してください) によって、急速に勢いを増しています。XForms の柔軟性と強力さは Web 開発者にとって魅力的であり、またフットプリントが小さなことやクライアントサイドでの処理はシステム管理者にとって魅力的です。W3C は現在、ワーキング・ドラフト文書として XForms 1.1 をレビュー中であり (1.0 は正式なインターネット勧告であり、XHTML や PNG、CSS などと同じレベルです)、また IBM は現在、機能や能力で XForms と競合するいくつかの XMLベースのフォーム標準を統合する作業の先頭に立っています。

XForms フォームをブラウズする

このシリーズでは、XForms 文書を閲覧し XForms 文書と対話動作を行うための XForms エクステンションをインストールした、Firefox Web ブラウザーを使います。このエクステンションは、現在のバージョンの Mozilla と Firefox、Seamonkey に XForms サポートを追加します。Microsoft® Internet Explorer 6 のユーザーは、formsPlayer をダウンロードしてインストールすることで、ActiveX プラグインとして XForms サポートを追加することができます (両方のブラウザーに関する情報は「参考文献」を参照してください)。

この記事では、XForms でのアクションとイベントの使い方と、フォームの出力フォーマットのコントロールについて説明します。第 1 回では、様々なブラウザーについて、またそうしたブラウザーで XForms 文書の閲覧や XForms 文書を使った対話動作を行うためのプラグインに関して説明したので、今回はそれらの説明を省略します。第 2 回では、XForms で利用できる様々なコントロールを使った XForms ベースのフォームの作成と、データ・モデルの作成、様々なタイプの基本的な送信アクションについて説明しました。この記事で取り上げる内容を追うためには、あるいは既にブラウザーでプラグインが動作しているのであれば、この記事のためのコードを早速ダウンロードし、サンプルの XForms を見てください。

上に戻る

イベントとアクション

XForms は、文書中の特定の要素にイベント・ハンドラーを付加するために、XML Events 標準 (参考文献を参照) を使います。XML Events は、HTML の DOM イベント・モデルの XML 表現です。まだイベント・モデルを見たことのない人のために、ちょっとイベント・モデルを見てみましょう。

イベントはどのようにディスパッチされるか

イベント(例えば、クリックやマウス・オーバーなど) が発生すると、キャプチャー・フェーズが開始されます。ドキュメント・ツリーのルートを最初として、イベントがトリガーされた要素に至るまで、各要素には、そのイベントを処理する機会が与えられます。もしイベントが処理されずにターゲット要素に達し、そのことがイベント・タイプで許されている場合には、バブリング・フェーズが開始され、イベントはドキュメント・ルートに向かって逆方向に移動します。

要素はオブザーバーになることができます。オブザーバーのイベント・ハンドラーは、両方向のイベントが通過すると有効になります。イベント・ハンドラーは 1 つのフェーズしかリッスンできないため、それぞれのフェーズで何かをしたい場合には、1 つの要素に 2 つのハンドラーを付加する必要があります。

リスト 1 は、非常に単純な XHTML 文書を示しています。この文書が Web ブラウザーにロードされると、この文書を表す DOM ツリーが図 1 に示すように作成されます。

リスト 1. 単純な XHTML 文書

                
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Event path</title>
</head>
<body>
<h1>Event path</h1>
<p>
What happens if you click on <em>this</em> element?
</p>
</body>
</html>

<p> 要素の中で強調されている「this」をユーザーがクリックすると、イベントは図 1 の赤いパスに沿って移動を開始します。これはキャプチャー・フェーズを表します。このクリックが、どのイベント・ハンドラーでも処理されない場合には、このイベントは同じパスを逆にたどり、最後にルート要素に達します。ルート要素では、デフォルトのクリック・ハンドラーが、このイベントを無視します。

図 1. イベントが DOM ツリーを下っていく

HTML では、様々なイベント (onclick や mouseover など) に JavaScript™ アクションを付加してイベントを処理することができます。例えばリスト 1 の <p> 要素をリスト 2 に示すものに変更すると、「this」をクリックした時に JavaScript 警告ボックスをポップアップさせることができます。このイベントは、クリックであり、これはオブザーバー (<em> 要素) によって扱われて、ハンドラー (JavaScript のスニペット) によって処理されます。

リスト 2. XHTML イベント・ハンドラー

                
<p>
What happens if you click on <em onclick="alert('Click!'); return
true;">this</em> element?
</p>

この手法は長年使われてきましたが、なぜ XForms で使うには不十分なのでしょう。その理由は、イベント名が言語 (この場合は XHTML) にハードコーディングされているためです。新しいイベントを追加するには新しい属性を追加しなければなりません。また、イベント名は、例えば要素が有効になった場合の「onclick」など、ハードウェア特有のものになってしまいます (本来は、マウスのクリックであったり、キーボードで Return を押すとフォーカスが与えられて有効になったり、その他任意の方法でトリガーできるはずです)。オブザーバーの中では属性のインスタンスは 1 つ以上持てないため、ハンドラーの作成には 1 つのスクリプト言語しか使えません。そして最後に、イベント処理スクリプトがフォームのプレゼンテーション・マークアップと混在してしまうという問題があります。

XForms はこうした問題を、XML を応用することで、そして XML Events 標準（「参考文献」参照）を活用することで解決しています。イベントとオブザーバー、そしてハンドラーは、XForms コントロールの一部として指定されます。例えば、リスト 3 の XHTML は、クリックが行われると警告をポップアップします。

リスト 3. <button> 要素に埋め込まれた XHTML イベントとハンドラー

                
<button name="Click me" onclick="alert("You clicked me!"); return true;"/>

リスト 4 は、同じことを XForms を使って実現しています。

リスト 4. XForms イベントとハンドラー

                
<xf:trigger>
<xf:label>Click me</xf:label>
<xf:message level="modal" ev:event="DOMActivate">You clicked
me!</xf:message>
</xf:trigger>

これによって、トリガーへの <xf:message> アクション (警告メッセージを表示します) に対する DOMActivate イベント (XHTML での onclick イベントと同じです) を監視するオブザーバーが作成されます。トリガーをクリックすると、警告がポップアップされます。

XForms 標準には、大量のイベントがあります。コントロールを目的としたもの (<xf:group> や <xf:input>、<xf:output>、<xf:range>、<xf:submit>、<xf:secret>、<xf:select>、<xf:select1>、<xf:textarea>、<xf:trigger>、<xf:upload> などの要素) や、モデル、<xf:submission>、インスタンスなどを目的としたものもあります。様々なイベントの種類や、それらの使い方についての情報は、「参考文献」のセクションを見てください。

リスト 4 を見るとわかるように、XForms のイベント・ハンドラー (<xf:message> など) は、指定されたイベントに付加されます。イベント・ハンドラーに使える XForms アクションは、次のようにたくさんあります。

<xf:action> -- 他のアクションのためのコンテナー。<xf:action> 要素の中で指定される順序で呼び出されます。
<xf:dispatch> -- 与えられたターゲット要素にイベント (作成されたイベント、あるいは事前定義された XForms イベント) をディスパッチします。ターゲット要素がそのイベントを処理しない場合、そのイベントをルートに向かってバブルアップすべきかどうかを指定することができます。
<xf:load> -- 指定された URL をロードし、新しいウィンドウに入れるか、あるいは現在の文書と置き換えます。
<xf:message> -- 指定されたメッセージ (インスタンスの中にあることもあれば、外部ファイルからロードされることもあり、<xf:message> 要素の中にカプセル化されていることもあります) をユーザーに表示します。
<xf:rebuild> -- インスタンス・データ要素間の依存関係の追跡に使われる内部データ構造を、XForms プロセッサーに再構築させます。xforms-rebuild イベントを発生します。
<xf:recalculate> - インスタンス・データ要素を再計算し、更新します。xforms-recalculate イベントを発生します。
<xf:refresh> -- XForms ユーザー・インターフェースをリフレッシュし、インスタンスの現在の状態を反映するようにコントロールを更新します。xforms-refresh イベントを発生します。
<xf:reset> -- xforms-reset イベントをディスパッチすることでフォームをリセットします。ユーザーがフォームをオリジナルの状態にリセットすることはないので、これを使うことは恐らくないはずです。
<xf:revalidate> -- プロセッシング・モデルによって指定されるインスタンス・データを再検証します。xforms-revalidate イベントを発生します。
<xf:send> -- xforms-submit イベントをディスパッチし、フォームの送信処理を有効にします。
<xf:setfocus> -- 指定されたコントロールに xforms-focus イベントをディスパッチします。これは、アクセシビリティー機能などを実装するために使われます。
<xf:setvalue> -- 指定されたデータ・インスタンス要素の値を明示的に設定します。

このシリーズの、これまでの 2 回の記事で作った単純な検索フォームを見てみましょう。このフォームは、検索キーワード用に 1 つのテキスト入力フィールドを持ち、また検索内容を送信するためのボタンを 1 つ持っていることを思い出してください。リスト 5 では、コントロールに「ephemeral (一時的な) 」というポップアップを追加するために、いくつかの DOMFocusIn イベント・ハンドラー (二重引用符で囲まれています) が追加されています。

リスト 5. <xf:message> を使って有益なメッセージを追加する

                
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Search Form</title>
<xf:model>
<xf:instance>
<data>
<query/>
</data>
</xf:instance>
<xf:submission action="http://localhost/imaginary-search-engine" 
method="get" id="submit-search"/>
</xf:model>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.
</p>

<p>
<xf:input ref="query">
<xf:label>Find:</xf:label>
<xf:message level="ephemeral" ev:event="DOMFocusIn">
Enter your search keywords here, then click Search.
</xf:message>
</xf:input>
<xf:submit submission="submit-search">
<xf:label>Search</xf:label>
<xf:message level="ephemeral" ev:event="DOMFocusIn">
Click here to begin searching for your keywords.
</xf:message>
</xf:submit>
</p>
</body>
</html>

これらは多くの場合、ツールチップなどのミニ・ウィンドウとして描画されます (図 2)。

図 2. <xf:message> の実際
図 1. イベントが DOM ツリーを下っていく

これで、XForms でイベントを処理するための基礎はできたので、今度はもう少し高度な送信やオプションについての話題を見ることにしましょう。

上に戻る

送信フォーマットとオプション

このシリーズの第 2 回では、様々な種類の基本的な XForms の送信メソッドを見てきました。それらをまとめると、次のようになります。

<xf:submission method="form-data-post" action="url"/> は、HTML の <form method="post" enctype="multipart/form-data"> と同じであり、受信側の URL でも同じように処理することができます。データ・インスタンスは、マルチパート・フォーム・データとしてシリアライズされます。

<xf:submission method="get" action="url"/> は、HTML の <form method="get"> と同じです。データ・インスタンスは URL エンコーディングでシリアライズされ、指定された URL に追加されます。

<xf:submission method="post" action="url"> は、フォームの現在のデータ・モデル・インスタンスを、指定された URL に XML 文書として送信します。これに対応する HTML はありません。

<xf:submission method="put" action="url"> は、フォームの現在のデータ・モデル・インスタンスを、指定された URL に XML ファイルとして書き込みます (サーバー上で、その URL に PUT パーミッションを持っているという前提です)。これに対応する HTML はありません。

<xf:submission method="urlencoded-post" action="url"> は、HTML の<form method="post" enctype="application/x-www-form-urlencoded"> と同じです。データ・インスタンスは、マルチパートの関連データとしてシリアライズされます。

put メソッドと get メソッドは file: URL と http:/https: URLをサポートしますが、他は http:/https: URL と mailto: URL をサポートします。

<xf:submission> 要素では、XForms プロセッサーがデータ・モデル・インスタンスから作成する XML のコントロールを補助するために、次のようないくつかのオプション属性を使うことができます。

version -- 作成すべき XML のバージョンを指定します (デフォルトは当然ながら「1.0」です)。
indent -- 生成される XML が、読みやすくするための空白を含むべきかを指定します。
mediatype -- 生成される XML の MIME タイプを指定します (メディア・タイプがデフォルトの application/xml に準拠していることを確認する必要があります)。
encoding - 生成される XML のテキスト・エンコーディングを指定します。
omit-xml-declaration -- XML 宣言を省略するかどうかを指定します。
standalone - XML の中にstandalone 宣言を含めるかどうかを指定します。
cdata-section-elements - CDATA セクションとしてシリアライズすべき要素をカンマで区切ったリストです。
includenamespaceprefixes -- カンマで区切った名前空間のリストです。これらの名前空間に一致する要素は、出力 XML の中に含まれます。

URL エンコーディングの中の key=value 対の区切りに使われる文字を指定するために、separator 属性も使われます (デフォルトは「;」です)。

ファイルへの put が使えるように、基本的な検索フォームを少し変更すると、XML 出力はリスト 6 に示すような結果になります。この出力は、データ・モデル・インスタンスからXForms によって作られたデフォルトの XML がどのように見えるかを示しています。この中には、XForms 文書の XML 名前宣言が含まれていますが、このインスタンスには必ずしも適切ではありません。

リスト 6. サンプル XForms の XML 出力

                
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns:xf="http://www.w3.org/2002/xforms" 
xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
xmlns:ev="http://www.w3.org/2001/xml-events">
<query>xforms standard</query>
</data>

<xf:submission> 要素に includenamespaceprefixes="#default" を追加すると、リスト 7 のような文書になります。これは、モデルに割り当てたデフォルトの名前空間しか含んでいません。この場合には名前空間は何もなく、データ・モデル・インスタンスのデータのみを含んだ、基本的で飾り気のない XML 文書が得られます。

リスト 7. デフォルトの名前空間のみ

                
<?xml version="1.0" encoding="UTF-8"?>
<data>
<query>another test</query>
</data>

<xf:submission> とそのオプションを使うと、サーバーへのデータ送信を自在にコンロールすることができます。

ターゲットを持たないフォーム

XForms では、<xf:submission> 要素をまったく持たないフォームが可能です。データはユーザーの Web ブラウザーと共に作成されて破棄されますが、やはり何らかの有益なことをします。例えば、皆さんは自分を高校のコンピューター・サイエンスの生徒であるとして、温度コンバーターを作ることができます (図 3)。

図 3. 高校のコンピューター・サイエンスの課題: 温度コンバーターを作る

暑いとか寒いとか文句を言うインターネット上の友人がおり、そこの温度にどんな問題があるかを素早く調べたい場合には、リスト 8 のような手軽なツールを使うことができます。

リスト 8. XForms スタイルの温度コンバーター

                
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Temperature Converter</title>
<xf:model>
<xf:instance>
<data>
<f/>
<c>20</c>
</data>
</xf:instance>
</xf:model>
</head>
<body>
<h1>Temperature Converter</h1>

<p>
Enter a value, then click the appropriate button to convert
between units:
</p>

<p>
<xf:input ref="c"><xf:label>Degrees Celcius (&deg;C): 
</xf:label></xf:input>
</p>

<p>
<xf:input ref="f"><xf:label>Degrees Fahrenheit (&deg;F): 
</xf:label></xf:input>
</p>

<p>
<xf:trigger>
<xf:label>&deg;C &rarr; &deg;F</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="f" value="number(/data/c) * 9 div 5 + 32"/>
</xf:action>
</xf:trigger>
<xf:trigger>
<xf:label>&deg;F &rarr; &deg;C</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="c" value="( number(/data/f) - 32 ) * 5 div 9"/>
</xf:action>
</xf:trigger>
</p>
</body>
</html>

リスト 8 の XForms の部分が強調表示されています。まず、非常に単純なデータ・モデルを宣言します。このモデルは、Celcius (摂氏、メートル法) と Fahrenheit (華氏、帝国式) の単位の両方で、1 つの温度情報を持っています。データの値は 1 つしか入力できません。つまり、自分でこの変換を計算する代わりに、コンピューターに変換させようというわけです。

また、ユーザーがいずれかの単位で温度を入力できるように、2 つの入力フィールドも作りました。ここで、入力データを数字に制限するための <xf:bind> 要素を使っていないことに注意してください。<xf:bind> 要素はもっと高度な XForms 機能の 1 つであり、このシリーズの範囲では説明しきれないものです。

最後に、Celcius を Fahrenheit に変換するボタンを 1 つ作り、そしてその逆を行うボタンを 1 つ作ります。<xf:action> 要素の中では、<xf:setvalue> を使って他方の単位での温度を計算しており、スクリプト (value 属性の中の単なる XPath 式にすぎません) は何も使っていません。そしてもちろん、サーバーの介在はまったく必要ありません。

この温度コンバーターこそ、XForms のすべてです。つまり Web サーバーに負担をかけることなく、豊かなクライアント・エクスペリエンスを実現するのです。

上に戻る

まとめ

この記事では、様々な XForms アクションの概要と、XForms コントロールの中に XForms イベントのためのオブザーバーを作る方法について簡単に説明しました。また、様々な送信テクニックや、サーバーへのデータ送信をコントロールするためのオプションの使い方についても説明しました。

このシリーズは、皆さんが独自の XForms フォームを作れるようになるまでの基本を解説しました。これで、皆さんも XForms を作成する実験を始められるでしょう。

上に戻る

ダウンロード

内容	ファイル名	サイズ	ダウンロード形式
Part 3 sample code	xforms3.zip	3KB	HTTP

ダウンロード形式について

参考文献

学ぶために

W3C の XForms home にアクセスしてください。
XForms.org: The Nexus for Intelligent Web Apps には、XForms の宝庫として、様々な情報やリンクが用意されています。
この、XForms 入門シリーズの第 2 回を読んでください。
この、XForms 入門シリーズの第 1 回を読んでください。
XForms と似ていますが競合する、Web Forms 2.0 の仕様を見てください。
「XForms 入門」(devleoperWorks、2002年9月) は、この重要な技術の概要をうまくまとめています。
XPath に関する素晴らしい入門チュートリアルとして、「Get Started With XPath」(developerWorks、2004年5月) を見てください。
XPath を使うことによる強みを解説した記事として、「The Java XPath API」(developerWorks、2006年7月) を読んでください。
XPath の具体的な機能を取りあげた記事として、「データ用のXML: XPath 2.0の新機能」(developerWorks、2002年9月) を読んでください。
XML Events がどのように登場したか、何に対して有効なのか、どのように動作するのか、などを知るために、「XML Events入門」(developerWorks、2004年11月) を読んでください。
John Boyer が XForms に関して書いているブログ、WXForms, Web Forms 2.0 and the future of XML content on the Web を読んでください。
「SVGとXForms: 入門」(developerWorks、2003年11月) は、この 2 つの技術の概要を紹介し、両者の間にシナジー効果の可能性があることをハイライトしています。
O'Reilly Media から出版されている、Micah Dubinko の著による XForms Essentials を読んでください。
XForms に関して調べるための出発点として、XML.com の Ten Favorite XForms Engines を読んでください。
W3C の XForms に関するインタラクティブでクロス・プラットフォームのチュートリアルを利用するために、XForms institute を訪ねてください。
XForms の起源と目的の歴史的な概要を知るために、SGML の歴史についての簡潔な説明を見てください。
XML に関する基礎を学ぶために、チュートリアル、「Introduction to XML」(developerWorks、2002年8月) を利用してください。
developerWorks の XML ゾーンでは、XML に関するすべてを学ぶことができます。