CodeZine(コードジン)

特集ページ一覧

JWLフレームワークでのAJAXコンポーネントの実装

3つの演習で実装、AJAXコンポーネント

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

ダウンロード サンプルソース (12.0 KB)

JWL(JavaScript-based Widget Library)は、豊富な入出力コンポーネントやナビゲーションコンポーネントを利用してJSPおよびHTMLページの機能を向上させるものです。JWLライブラリには3つのAJAXコンポーネントが用意されています。本稿では、これらのコンポーネントについて詳しく説明します。

目次

はじめに

 2005年にIBMはJWL(JavaScript-based Widget Library)を導入しました。JWLは、豊富な入出力コンポーネントやナビゲーションコンポーネントを利用してJSPおよびHTMLページの機能を向上させるものです。JWLになじみがなく、詳しく知りたいという読者の方は、IBM Developer WorksのWebサイトに掲載されている下記の記事を読むと、JWLのおおよその機能を理解できるでしょう。

  1. Developing an application with the JWL DataGrid using Rational Application Developer
  2. The JWL Tree component

 IBMのRAD 6.0(Rational Application Developer)では、JWLのAJAXコンポーネントのサポートシステムが大幅に改良されました。この記事ではこれらのコンポーネントの概要を紹介し、ステップバイステップの演習を3つ行います。お使いのワークスペースにインポートできるサンプルソースコードも用意してあります。

AJAXタグの定義(1) ―コンテンツの取得―

 AJAXタグは、任意のJWLパネルタグの子タグとして定義しなければいけません。AJAXタグでは、パネルの代わりとなるコンテンツを定義します。AJAXタグを含むパネルが実行されると、そのAJAXタグはサーバーリクエストを生成します。サーバーはリクエストを処理して、パネルに制御を戻します。

 JWLライブラリには3つのAJAXコンポーネントが用意されています。以降では、これらのコンポーネントについて詳しく説明します。

コンテンツの取得: <hx:ajaxRefreshRequest>

 <hx:ajaxRefreshRequest>タグを使用すると、同じJSFページの親タグ内のコンテンツを非同期に置き換えることができます。置き換えるためのコンテンツはHTTP GETリクエストで取得します。このタグは、サーバーへ大量の情報を渡す必要がないとき、もしくはフォーム全体に対して少数のパラメータのみを扱いたいときに使用します。

 このタグの使い方を、順を追って見ていきましょう。なお、この記事の演習はすべてRAD 6.1を使って実施しています。

  1. [File]→[New]→[Other]→[Web]→[Web Page]をクリックし、新規JSFページ「ajaxRefreshRequestExample.jsp」を作成します。
  2. 図1 ajaxRefreshRequestExample.jspの新規作成
    図1 ajaxRefreshRequestExample.jspの新規作成
  3. Sourceモードで「ajaxRefreshRequestExample.jsp」を開きます。
  4. [Palette]ペイン内で[Enhanced Faces Components]をクリックします(Webパースペクティブにいることを確認してください)。
  5. 図2 [Palette]ペインの画面
    図2 [Palette]ペインの画面
  6. Inputコンポーネントをパレットからページへドラッグ&ドロップします。リスト1のようなコードが生成されます。
  7. リスト1 Inputコンポーネントのソースコード
    <f:view>
       <body>
       <hx:scriptCollector id="scriptCollector1">
          <h:form id="form1" styleClass="form">
             <h:inputText id="text"
                          styleClass="inputText">
             </h:inputText>
          </h:form>
       </hx:scriptCollector>
       </body>
    </f:view>
    
  8. Panel Groupコンポーネントをパレットからページへドラッグ&ドロップします。
  9. Text Outputコンポーネントをパレットから手順5で追加したパネルにドラッグ&ドロップします。Outputコンポーネントの[Properties]をクリックし、[Value]フィールドに#{param.text1}と入力します。
  10. 図3 OutputTextコンポーネントのプロパティ
    図3 OutputTextコンポーネントのプロパティ
  11. Panel Groupを選択し、[Properties]→[AJAX]をクリックします。[Allow Ajax Updates]をクリックし、Ajaxリクエストを[Refresh]に設定します。
  12. 図4 AJAXのプロパティ
    図4 AJAXのプロパティ
  13. 手順7で追加した<hx:ajaxRefreshRequest>タグをクリックし、ブラウザから送られるパラメータを追加します。ここでは手順4で追加した入力フィールド「text1」を指定します。
  14. 図5 ajaxRefreshRequestのプロパティ
    図5 ajaxRefreshRequestのプロパティ
  15. Button Commandをドラッグ&ドロップし、新規ビヘイビアを追加します。このビヘイビアではターゲットアクションを「group1」とし、マウスクリックで呼び出されるようにします。
  16. リスト2 [Submit]ボタンのビヘイビアのソースコード
    <hx:behavior event="onclick"
                 behaviorAction="get"
                 targetAction="group1" />
    
  17. このJSFページをサーバー上で実行してみます(Websphere 6.1以上で実行していることを確認してください)。
  18. 図6 Websphere 6.1サーバー上でサンプルを実行
    図6 Websphere 6.1サーバー上でサンプルを実行
  19. ページが読み込まれたら、入力フィールドに値を入力し、ボタンをクリックします。入力した値がボタンの横に表示されるはずです。
  20. 図7 ajaxRefreshRequestサンプルの出力
    図7 ajaxRefreshRequestサンプルの出力

 リスト3は、ここまで作成してきたサンプルの全ソースコードです。全体のソースコードはこの記事のダウンロードサンプルにも収録されています。

リスト3 ajaxRefreshRequestサンプルの全ソースコード
<f:view>
   <body>
   <hx:scriptCollector id="scriptCollector1">
      <h:form id="form1" styleClass="form">
         <h:inputText id="text1"
                      styleClass="inputText">
         </h:inputText>
         <hx:commandExButton type="submit"
                             value="Submit"
                             id="button1"
                             styleClass="commandExButton">
            <hx:behavior event="onclick"
                         behaviorAction="get"
                         targetAction="group1">
            </hx:behavior>
         </hx:commandExButton>
         <h:panelGroup    id="group1" styleClass="panelGroup">
            <h:outputText id="text2"  styleClass="outputText"
                          value="#{param.text1}">
            </h:outputText>
         </h:panelGroup>
         <hx:ajaxRefreshRequest id="ajaxRefreshRequest1"
                               target="group1" params="text1">
         </hx:ajaxRefreshRequest>
      </h:form>
   </hx:scriptCollector>
   </body>
</f:view>

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

あなたにオススメ

著者プロフィール

  • Aleksey Shevchenko(Aleksey Shevchenko)

    オブジェクト指向言語に関わる仕事に8年間従事。過去4年間は、技術リーダー、プロジェクトマネージャを務める。金融、メーカー、出版の各業界にエンタープライズITソリューションを提供。

  • 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