本文へジャンプ

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む。


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

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

  • 閉じる [x]

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

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

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む。


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

  • 閉じる [x]

言語を選択する：

  • 閉じる [x]
  • 閉じる [x]

XForms のヒント: Ajax と XForms とを組み合わせる

Nicholas Chase (nicholas@nicholaschase.com), President, Chase and Chase, Inc.
Nicholas Chase は、Lucent Technologies や Sun Microsystems、Oracle、the Tampa Bay Buccaneers などの会社で Web 開発に携わってきました。彼は高校の物理の先生であり、低レベル放射性廃棄物施設の管理者であり、オンライン SF 雑誌の編集者であり、マルチメディアのエンジニアであり、Oracle インストラクターであり、あるインタラクティブ・コミュニケーション会社の最高技術責任者でもあります。『XML Primer Plus』(Sams 刊) を含めて、何冊かの著作があります。

概要： Web の世界では、しばらく前から Ajax (Asynchronous JavaScript and XML) が話題を呼んでいます。Ajax を利用すると、ページ全体をリロードしなくてもユーザーのアクションに応答するアプリケーションを作成することができます。これは、XForms には元々備わっている機能です。今回のヒントでは、XForms を使った場合と Ajax を使った場合について、またこの 2 つの技術を組み合わせる方法について説明します。実際に Ajax リクエストを行う方法を解説した資料は豊富にありますが、XForms を使う場合には、戻りデータの使い方について、特別な難しさと利点とがあります。

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


Ajax Resource Center を調べてみてください。Ajax Resource Center では、Ajax のプログラミング・モデルに関する記事やチュートリアル、ディスカッション・フォーラム、ブログ、wiki、イベント、そしてニュースなどのさまざまな情報を、1 ヶ所ですべて入手することができます。もし世の中で何かが起きていたら、それはここで解説されています。

はじめに: このヒントについて

このヒントは、XForms に関する特定のタスクについてのヒントです。XFroms についての背景となる情報については、3 回シリーズの「XForms 入門」を参照してください。

このヒントで説明する XForms のサンプルは、(XForms エクステンションをインストールした) Firefox 1.5 と、Formsplayer コントロールをインストールした Microsoft® Internet Explorer 6 でテストされ、動作しています。ダウンロードには、Firefox 用の XHTML ファイルと IE 用の HTML ファイルが含まれています。

上に戻る

アプリケーション

XForms は、ページ全体を置き換えなくてもページ内容の定義データを置き換えられる、という意味で、独自のバージョンの Ajax と言うことができます。例えば、カウボーイの知恵 (cowboy wisdom) を記述したページ・スニペットを考えてみましょう。このインスタンスは、リスト 1 のようなものです。


リスト 1. インスタンス・データ
                
<pearls>
   <pearl>
      Never ask a barber if he thinks you need a haircut.
   </pearl>
   <pearl>
      Making it in life is kind of like busting broncos. You're 
going to get thrown a lot. The simple secret is to keep getting 
back on.
   </pearl>
   <pearl>
      Never miss a good chance to shut up.
   </pearl>
   <pearl>
      The quickest way to double your money is to fold it over and 
put it back in your pocket.
   </pearl>
</pearls>

そうすると、次のようなフォームを作ることができます (リスト 2)。


リスト 2. フォーム
                
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ev="http://www.w3.org/2001/xml-events" 
xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>Instance Data-To-XHTML/XForms Example</title>
    <xforms:model id="model_pearls">
      <xforms:instance id="instance_model_pearls" src="wisdom.xml"/>
      <xforms:submission id="submit_model_pearls" 
          action="http://localhost/newwisdom.xml"
          method="post" replace="instance"
                instance="instance_model_pearls"/>
    </xforms:model>
    <link href="gen_default.css" rel="stylesheet"/>
  </head>
  <body>
  
<h1>Cowboy Wisdom</h1>
   
    <xforms:output id="thePearl" ref="/pearls/pearl[2]" 
                     model="model_pearls" />

    <xforms:submit submission="submit_model_pearls">
      <xforms:label>Get new sayings</xforms:label>
    </xforms:submit>
  </body>
</html>

その結果、図 1 のようなページができます。


図 1. 基本的なページ

output 要素の ref 属性は、位置を含んだ XPath 文であることに注意してください。この XPath 文をコントロールすることによって、このページ上に表示されるものをコントロールすることができます。

ページのコントロールは、実際のデータをコントロールすることによっても可能です。リスト 2 を見て、太字のテキストの部分が submission 要素に関する情報であることに気が付いた人もいると思います。そこでは XForms エンジンに対して、ページではなく、特定のインスタンスを置き換えるように命令しているのです。同じ構造をしているが異なるデータを返す URL へのリクエストを送ることで、即座に新しいデータを得ることができます。例えば Submit ボタンをクリックすると、ブラウザーは別の文書をロードします。出力文は、常にある特定の場所を調べるように設定されているので、そこがフォームに入れるデータのための場所になっています (図 2)。


図 2. ページの一部を置き換える

上に戻る

スクリプトを使わざるを得ない場合

しかし場合によると、好むと好まざるとに関わらず JavaScript を使わざるを得ないこともあります。例えば、そのデータを使う前に何らかの方法で処理する必要がある、あるいはコントロール外のサイトからのデータを扱う、といった場合です。1 つの選択肢として、JavaScript を使ってデータを取得してから、そのデータをページに追加する方法があります。

重要なことは、単純な HTML ページの場合とは異なり、データを要素に直接追加することはできない、ということです。情報はインスタンスの中に置く必要があり、そうしてから、XForms コントロールの内容を規定する XPath 文を操作するのです。

この例として、「カウボーイの知恵」を繰り返す、2 番目のボタンをページに追加します (リスト 3)。


リスト 3. スクリプトを追加する
                
...
  <body>
  
<h1>Cowboy Wisdom</h1>
   
  <script type="text/javascript">
      var whichPearl = 0;
      function choosePearl(){
          if (whichPearl == 0) {
            whichPearl = 1;
          } else if (whichPearl == 1) {
            whichPearl = 2;
          } else if (whichPearl == 2) {
            whichPearl = 3;
          } else if (whichPearl == 3) {
            whichPearl = 0;
          }
          refString = "/pearls/pearl["+whichPearl+"]";
          theTarget = document.getElementById("thePearl");
          theTarget.setAttribute("ref", refString);
      }
  </script>
  
 
      <xforms:output id="thePearl" ref="/pearls/pearl[2]"       
                                 model="model_pearls" />

      <form>
          <input type="button" value="Change saying" 
                                onclick="choosePearl();" />
      </form>

    <xforms:submit submission="submit_model_pearls">
      <xforms:label>Get new sayings</xforms:label>
    </xforms:submit>
  </body>
</html>

この関数そのものは単純で、数値に従って次々と繰り返すだけです。実際のアプリケーションであれば、これはおそらくスクリプトであり、その中で Ajax リクエストを行い、戻りデータを処理するはずです。具体的には、各インデックス値に対して、thePearl 要素の ref 属性の中に入る新しいテキストを作成しています。

次に、このスクリプトをコールするための from which を追加します。これでページをリロードすると、ボタンが現れ、このボタンをクリックすることができます。このボタンをクリックして ref 属性を変更する度に、その XPath 文と一致するように、ページは自動的にデータを変更します (図 3)。


図 3. 新しいスクリプト

上に戻る

まとめ

XForms は、ページ自体をリロードしなくてもページ上のデータを変更できるという意味で、元々 Ajax に似た機能を提供しています。一方で、もしスクリプトを使わざるを得ない場合には、XForms フォームの表示方法を定義する XML データを操作し、必要な変更を外部データを使って行うことができます。


上に戻る

ダウンロード

内容ファイル名サイズダウンロード形式
Ajax XForms samplesxforms_ajax_source.zip4KBHTTP

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


参考文献

著者について

Nicholas Chase

Nicholas Chase は、Lucent Technologies や Sun Microsystems、Oracle、the Tampa Bay Buccaneers などの会社で Web 開発に携わってきました。彼は高校の物理の先生であり、低レベル放射性廃棄物施設の管理者であり、オンライン SF 雑誌の編集者であり、マルチメディアのエンジニアであり、Oracle インストラクターであり、あるインタラクティブ・コミュニケーション会社の最高技術責任者でもあります。『XML Primer Plus』(Sams 刊) を含めて、何冊かの著作があります。

閉じる [x]

不正使用の報告のヘルプ

不正使用の報告

ありがとうございます。 このエントリーは、モデレーターの注目フラグが設定されました。

閉じる [x]

不正使用の報告のヘルプ

不正使用の報告

不正使用の報告の送信に失敗しました。

閉じる [x]

developerWorks: サイン・イン


IBM ID が必要ですか?
IBM IDをお忘れですか？


パスワードをお忘れですか？
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 利用条件。

 

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

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

閉じる [x]

表示名をお選びください

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

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

（半角英数字で3文字以上31文字以下にする必要があります）

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 利用条件。

 

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

この記事を評価する

コメント

上に戻る

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML
ArticleID=243047
ArticleTitle=XForms のヒント: Ajax と XForms とを組み合わせる
publish-date=10032006
author1-email=nicholas@nicholaschase.com
author1-email-cc=dwxed@us.ibm.com

目次

タグ

Help
このタグで、My developerWorks のすべてのタイプのコンテンツを見つけるために検索フィールドを使用します。

スライダーバーを使用することで、より多く（少なく）タグを表示します。

人気のタグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するトップのタグを表示します。

マイ・タグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するお客様ご自身のタグを表示します。

このタグで、My developerWorks のすべてのタイプのコンテンツを見つけるために検索フィールドを使用します。人気のタグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するトップのタグを表示します。マイ・タグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するお客様ご自身のタグを表示します。

 

このページを共有する：

  • 閉じる [x]

developerWorks をフォロー：

  • 閉じる [x]