JSF と Ajax：Rational Application Developer V7 で ... ョンを容易に作成

JSF と Ajax：Rational Application Developer V7 で Web 2.0 アプリケーシ
ョンを容易に作成
レベル:中級
Yury Kats ([email protected]), Advisory Software Engineer, IBM, Intel, Microsoft, HP
2006 年 12 月 5 日
Ajax は一般に Web 2.0 と呼ばれるものに不可欠であることから、現在の Web においてもっとも人気の
高い技術と言えるでしょう。しかし残念なことに Ajax アプリケーションの作成は容易な作業ではありません
。JavaServer™ Framework (JSF) など他のフレームワークとの統合が必要な場合には、特にそうで
す。幸い、IBM Rational Application Developer V7 リリースには、JSF コンポーネントに対応した Ajax
機能が搭載されています。これにより、Ajax アプリケーションの作成作業は格段に容易になります。本記
事では、Ajax と JSF を Rational Application Developer V7 で同時に使用する方法を説明し、さら
に Ajax サポートを既存のアプリケーションに追加する例について順を追って説明します。
IBM Rational Software Delivery Platform デスクトップ製品 V7
新しい V7 製品の詳細については、次のリソースを参照してください。
ここからはじめる IBM Rational Application Developer for WebSphere Software V7
Ajax の長所と短所
Ajax テクノロジーは、とりたてて最新または画期的というほどの技術ではないのですが、ここ 1、2 年で非
常に人気が高まっています。多くの主要 Web サイト (Google、Yahoo!、Amazon、Netflix など) が
、Ajax を使用してユーザー・エクスペリエンスを改善しています。実際、Ajax はユーザー・エクスペリエンスを
高めるためにあるようなものです。
過去 10 年間に開発された一般的な Web アプリケーションでは、ユーザーとブラウザー間の対話、および
ブラウザーとサーバー間の対話は明白で、わかりやすいものでした。ユーザーはブラウザーのページを見て、
何らかの操作を行い (コンテキスト・ドロップダウン・メニューから目的のものを選択する、チェック・ボックスを
選択するなど)、次にリンクまたは「送信」ボタンをクリックして、サーバーと通信するようブラウザーに指示しま
す。ブラウザーはサーバーに要求を送り、その要求の中でユーザーの入力を受け渡します。サーバーは要求
を処理し、応答を新しいページか更新済みの同じページのいずれかに表示します。
こうした Web アプリケーションは、今では一般に Web 1.0 と呼ばれています。それらはユーザー・エクスペリ
エンスという視点から見て、次の 2 つの弱点を持っています。
•
ブラウザーとサーバー間の対話は、ページ上の限られたわずかなコントロールによるもので、通常は
リンクとボタンのみで開始される。ユーザーがページ上のチェック・ボックスを選択、またはコンボ・ボッ
クス内の選択肢にマークをつけた直後に、サーバーが通知を受けることはほとんどない。
•
ブラウザーとサーバー間の対話の結果として、ブラウザー・ウィンドウ全体が更新される。この処理
はかなりの時間がかかることが多く、ユーザーはページが更新されるまで長時間待機する必要が
ある。さらに悪いことに、同じページが再ロードまたはリフレッシュされると、通常ブラウザー・ウィンド
ウの中で明滅してしまう。
一般に
Web 2.0 と 呼 ば れ る
Web ア プ リ ケ ー シ ョ ン の 新 世 代 は 、 Ajax テ ク ノ ロ ジ ー
(Asynchronous JavaScript and XML の略、「AJAX」と表記されることもある) を使用してこれらの弱点
に対処しています｡Ajax では、ブラウザーとサーバー間の対話は、ユーザーの気づかないバックグラウンドで
行われます。さらに、ページ中のたった 1 つのサブセットでもサーバーに送信することができ、またサーバーも
ページ中で更新される 1 つのサブセットのみを返すことができるので、通常のブラウザーとサーバー間の対
話よりも対象が絞られます。このアプローチの結果、ブラウザーとサーバー間の通信は、コンボ・ボックスやチ
ェック・ボックスの選択の変更や、マウス・ポインターの移動など、ほぼあらゆるイベントによって開始できるよう
になります。このことは、次のような大きな利点をもたらします。
•
伝送データの減少による通信の高速化
•
ページ間の移動が必要となる場面が減ることにより、ユーザーは同じページに留まる。
•
それぞれの Ajax 要求で更新されるページ・セットの領域が小さいため、再ロードされたページは
明滅しない。
Ajax の背景にあるアイデアは、非常に単純です。ブラウザー内のイベントを待ち受けて、発生したイベント
に反応し、サーバーにバックグラウンド要求を送信し、サーバーが応答したらページの一部を更新する、とい
うものです。とはいえ、実装はかなり複雑になる可能性があります。JavaScript™、クライアント/サーバー
通信プロトコル、およびサーバー・サイド・コードに関する深い知識が要求されます。主要ブラウザーのバー
ジョン間の差異により、開発とデバッグはさらに難しくなります。これに対し
、IBM® Rational® Application Developer Version 7 リリースには、Ajax 対応の Web アプリケー
ションの開発に必要なものがすべて用意されているため、この製品を使用すれば、下位の詳細すべてを実
装する必要なく Ajax 対応の Web アプリケーションを開発できます。
Rational Application Developer V7 は以下の機能を備えています。
•
JavaServer™ Framework (JSF) 内で Ajax 要求を処理できるようにする、JSF の拡張
•
主要ブラウザーの最近のバージョンすべてで Ajax 要求を開始し、ページの一部のみを更新する
ことによりサーバー応答を処理できる JavaScript™ ライブラリー
Rational Application Developer V7 における Ajax および JSF 実装に関する技術詳細情報は、
本記事では取り上げませんが、その代わりに、これら 2 つのテクノロジーを同時に使用する方法について、
見ていきましょう。
Ajax を JSF コンポーネントで使用する方法
Ajax を JSF ページに追加するプロセスには、次の 4 つのステップがあります。
1.
Ajax 要求により更新されるページの領域を特定します。Rational Application Developer V7 では
、ほぼあらゆるパネル・コンポーネントのコンテンツに Ajax を使用できます。パネルの範囲は、単純な
コンテナー (<h:panelGroup> や <h:panelGrid> など) から豊富な機能を持つパネル (メニュ
ー <hx:panelMenu> やダイアログ <hx:panelDialog> など) に及びます。
2.
使用する Ajax 要求のタイプを選択します。Rational Application Developer V7 の JSF ラ
イブラリーでサポートされる Ajax 要求には、次の 3 種類があります。
3.
4.
•
同じページの GET 要求 (<hx:ajaxRefreshRequest>)
•
同じページの POST 要求 (<hx:ajaxSubmitRequest>)
•
他のページの GET 要求 (<hx:ajaxExternalRequest>)
Ajax 要求とともにサーバーに受け渡すパラメーターを構成します。
•
GET 要求では、ページ上のさまざまな入力フィールドの値を受け渡すことができます。
•
POST 要求では、フォーム全体がサブミットされます。
Ajax 要求を開始するイベントを特定します。これには、ボタンの onclick、入力フィールドの onblur
、チェック・ボックスの onchange など、いずれのクライアント・サイド JavaScript イベントでも選択で
きます。
それでは、「Hello, world」タイプのアプリケーションの単純な例を使って、これらのステップを順を追ってすべ
て説明していきましょう。この例では、入力と出力という 2 つのフィールドを持つページを作成します。ユー
ザーが Tab で入力フィールドを抜け出した後、Ajax を使って、ユーザーがサーバーに入力した値を送信
し、あいさつメッセージで出力フィールドを更新します。
Web プロジェクトをセットアップする
はじめに、Web プロジェクトを作成します (図 1 参照)。
•
メニューから「File」、「New」、「Project」、「Dynamic Web Project」の順に選択します。
•
「New Project」ウィザードで次の操作を行います。
1. プロジェクト名を入力します (例: HelloWorld)。
2. コンフィギュレーションとして、「Faces Project」を選択します。
3. 「Add project to an EAR」を選択します。
•
「Finish」をクリックします。
図 1. 「New Dynamic Web Project」画面
Web ページを作成するには、次の操作を行います (図 2 参照)。
•
「Project Exploｒer」でプロジェクト名を右クリックします。
•
コンテキスト・メニューで「New」、「Web Page」を順に選択します。
•
「New Web Page」ウィザードで、ページ名を入力します (例: hello)。
•
「Finish」をクリックします。
図 2. 「New Web Page」ウィザード
ページにコンポーネントを追加する
作業するページができたので、コンポーネントを追加します。ユーザーが名前を入力するテキスト・フィールド
には inputText コンポーネントを、あいさつメッセージの表示には outputText コンポーネントを使用しま
す。Ajax で outputText を更新することになるため、outputText はパネル・コンポーネントの内部に置く
必要があります。このページには panelGroup コンポーネントを使用します。
コンポーネントを追加するには、次の操作を行います。
•
パレットの「Enhanced Faces Components」ドロワーから「Input」コンポーネントをページ上にドラッ
グします。
•
パレットから「Panel Group box」コンポーネントを「Input」コンポーネントの下のページにドラッグしま
す。グループ・ボックス・タイプを尋ねるプロンプトが出されたら、「Group」を選択します。
•
パレットから「Output」コンポーネントを「Panel Group box」上にドラッグします。
Ajax サポートをパネルに追加する
パネル・コンテンツを Ajax (この場合には Output フィールド) で更新できるようにするには、パネルに
「Ajaxable」のマークを付け、ユーザー要求によってサーバーに受け渡されるパラメーターを構成する必要が
あります。(図 3 参照)
1.
「outputText」コンポーネントを選択して、「Properties」ビューに切り替えます。
2.
「 Properties 」 ビ ュ ー で 、 左 側 の タ グ ・ ナ ビ ゲ ー タ ー の 「 h:outputText 」 タ グ の す ぐ 上 に あ る
「h:panelGroup」タグを選択します。
3.
「h:panelGroup」タグの「Ajax」ページを選択します。
4.
「Allow Ajax updates」チェック・ボックスをクリックします。
5.
「Ajax request type」は「Refresh」を選択します。
図 3. panelGroup の「Properties」ビュー
この例では、Refresh 要求を使用して、Ajax 要求でパラメーターがどのように受け渡されるかを示します
。Refresh 要求と異なり、Submit 要求はフォーム全体をサブミットします。その場合、サンプル・ページ上
のフォームには入力フィールドが 1 つしかないため、Ajax 要求のためにパラメーターを構成する必要はあり
ません。
Ajax 要求のためにパラメーターを構成するには、次の操作を行います (図 4)。
•
Ajax のプロパティー・ページで「Click to edit Ajax request properties」を選択します (上の図 3
を参照)。
•
「hx:ajaxRefreshRequest」タグの「Properties」ページで次の操作を行います。
1.
ブラウザーから送信するパラメーターを設定するために、「Add Parameter」をクリックします。
2.
「Input」コンポーネントの名前 (この例では text1) をコンボ・ボックスから選択します。
図 4. ajaxRefreshRequest の「Properties」ページ
ここまでの操作で、panelGroup タグが Ajax 要求によって更新され、Input フィールドの値を要求のパラ
メーターとして使用するように構成しました。あとは、outputText コンポーネントがこのパラメーターを使用し
てあいさつメッセージを表示するようにするだけです (図 5 参照)。
•
「outputText」コンポーネントを選択します。
•
「Value」フィールドに「Hello, #[param.text1}」と入力します。
図 5.outputText の「Properties」ページ
Ajax 要求を開始する
Ajax の使用に必要な 4 つのステップを振り返ると、既に最初の 3 つのステップは完了していることがわか
ります。あとは、Ajax 要求を起動するイベントを特定するだけです。「inputText」コンポーネント上の「
onblur」イベントを使用して、ユーザーが入力フィールドの外側を選択したらすぐにあいさつメッセージが更新
されるようにします (図 6 参照)。:
•
「inputText」コンポーネントを選択します。
•
「Quick Edit」ビューに切り替えます。
•
「Quick Edit」ビューで次の操作を行います。
1.
左側のイベント・リストで「onblur」イベントを選択します。
2.
「Use predefined behavior」チェック・ボックスをクリックします。
3.
「Invoke Ajax behavior on the specified tag」アクションを選択します。
4.
「Target」に panelGroup の名前 (この場合は group1) を選択します。
図 6. 「Quick Edit」ビュー
これで、ページを保存し、サーバー上で実行することができるようになりました。ブラウザー・ウィンドウが開い
た時に、入力フィールドと、その下の「Hello」テキストが表示されます。ユーザーがフィールドに何かを入力し
、入力フィールドの外側を選択するとすぐに、あいさつメッセージはユーザーが入力フィールドに入力したテキ
ストで更新されます(図 7 参照)。
図 7. サーバー上で Web ページを実行する
これまでのステップで、JavaScript コードをまったく使用することなく、標準的な JSF コンポーネントを使
用して、シンプルながら機能的な Ajax ページを構築することができました。
次は、さらに複雑な例を検討していきましょう。
既存の JSF アプリケーションに Ajax を追加する方法
さてここで、最新の e-コマース Web アプリケーションに共通して備わっている、ショッピング・カートについて
考えてみましょう。オンラインで買い物した経験のある方であれば、目にしたことがあるでしょう。典型的なシ
ョッピング・カートでは、サイトの閲覧中にユーザーが加えた商品のリスト、数量を更新する入力フィールド、
精算に進むボタンなどが表示されます。
さまざまなショッピング・カートを見れば、少なくとも次の 2 点がそれらに共通して備わっていることに気付く
はずです。
•
通常は、ユーザーが入力フィールドに入力した数量をもとに、合計、税、および送料を再計算す
る「更新」ボタンがある。
•
カート内の各項目は通常、商品の詳細ページにリンクしている。
これらは、本記事の冒頭に述べた弱点をよく表す例です。カートはユーザーがボタンをクリックしたときにのみ
更新され、ユーザーは商品の詳細を確認するためには別のページに進む必要があります。Ajax テクノロジ
ーを使用すれば、ユーザー・エクスペリエンスを格段に改善することが可能です。合計は数量が変更される
とすぐに更新され、商品の詳細は同じページ内 (デザインされた領域またはポップアップ・ウィンドウ) に表
示されるようにすることができます。
本記事最後の「参考文献」セクションあるプロジェクトをダウンロードして内容を見ると、Web 1.0 ショッピン
グ・カートをいかに簡単に Web 2.0 アプリケーションに移すことが可能かがわかります。ここではこのサンプル
・アプリケーションについて順を追って説明し、その構築方法と、変更して Ajax を使用できるようにする方
法を解説します。
注: ここから先、すべての項目への言及 (JavaServer Pages™ [JSP™] の名前、コンポーネント ID
など) は、ダウンロード可能な AjaxSample アプリケーションに関するものです。AjaxSample.zip ファイルを
お使いのコンピューター・システムに保存し、このファイルをプロジェクト交換形式
で Rational Application Developer V7 にインポートしてください。
ショッピング・カート: 従来の方法
この例のショッピング・カートでは、Product、CartItem、および ShoppingCart という 3 つの Java™
bean が使用されています。それらは 「Project Explorer」 の「Java Resources」カテゴリー下の Bean
パッケージで確認できます。
•
Product は、このサイトで販売している商品の情報 (ID、名前、説明、画像、および価格) を
格納します。
•
CartItem は、カート内の各商品の数量を追跡します。
•
ShoppingCart は、カート項目 (商品と数量のペア) のリストを保持し、合計、税、および送料を
計算します。また、要求パラメーター内で受け渡される ID をもとに、ユーザーが商品を見つけや
すくする手段を提供します。
図 8 が示すように、cart.jsp はショッピング・カート・ページのかなり単純な実装例です。
図 8. ショッピング・カート
ページは、dataTable コンポーネントを使用して、カート内のすべての項目を表示します。「Quantity」カラ
ムは、inputText フィールドを使用して、ユーザーが注文数を変更できるようにします。ユーザーは、必要な
すべての変更を行った後、「Recalculate」ボタンをクリックして、合計、税、および送料を更新することがで
きます。また商品名は、商品の詳細を見られる他のページ product.jsp にリンクしています。商品の ID
は、パラメーターとして受け渡されます(図 9 参照)。
図 9. 商品の詳細
ショッピング・カート:新しい方法
この例では、cartajax.jsp は同じショッピング・カートのページですが、ユーザー・エクスペリエンスを改善する
ために Ajax を使用し、再設計されています。新しい cartajax.jsp (図 10) と従来の cart.jsp との間に
は、次のような注目すべき差異が 3 つあります。
•
「Recalculate」ボタンはありません。合計は、ユーザーが入力フィールドの外側を選択するとすぐに
更新されます。
•
商品名の上でマウス・ポインターを動かすと、商品の説明がポップアップ画面で表示されます。
•
商品リンクをクリックすると、商品のすべての詳細がカートの下に表示されますが、カート自身は更
新されません。
図 10. Ajax を使用したショッピング・カート
このような変換がどのように行われたかを見てみましょう。説明のために、このページでは 3 種類すべて
の Ajax 要求を使用します。また、本記事の最初で Ajax 機能をセットアップするために IDE 機能のみ
を用いたケースとは異なり、ここでは Source モードで JSF タグを確認することができます。
「Recalculate」機能を削除する
「Recalculate」ボタンの代わりに、リスト 1 に示す ajaxSubmitRequest タグを使用して、合計、税、
および送料を含むパネルを「Ajaxable」として宣言します。
リスト 1. ajaxSubmitRequest のコード
ここでは、Submit タイプの Ajax 要求を使用します。これにより、カート・フォーム全体がサブミットされるた
め、パラメーターの受け渡しは必要ありません。これで、すべての数量入力フィールドの値が、サーバー・サイ
ド・コードで利用できるようになります。パネルと Ajax タグは、ID とターゲット属性 (この例では太字で強
調) に結び付けられます (リスト 1)。合計は、ユーザーが入力フィールドの外側を選択するとすぐに更新さ
れます。したがって、次のようにして、inputText コンポーネントの onblur イベントを使用して、要求を開
始することができます。
リスト 2. Ajax を通じて「Submit」要求を開始するコード
hx:behavior タグは、定義済みの JavaScript 機能を JSF コンポーネント上のクライアント・サイド・イ
ベントに付加する非常に強力な手段です。この例では、inputText コンポーネント (「hx:behavior」は
「h:inputText」の子) 上で onblur イベント (イベント属性) を使用して、totals コンポーネント上で
get アクションを実行しようとしています。ここでは、Totals は更新するパネルで、get アクションは「コンテン
ツの取得」すなわち Ajax を使用した更新を意味します。
注: 「cartajax.jsp」を選択して、さらに「Run On Server」を選択し、これらのタグがブラウザーで連携す
ることを確認してください。
テーブル内の入力フィールドの外側を選択するとすぐに、onblur イベントに付加された JavaScript コード
が実行されます。JavaScript コードは、ページ上の Totals コンポーネントを検出し、それに関連付けら
れた ajaxRefreshSubmit コンポーネントが存在するかどうかを検証し、さらにサーバーにフォームを送信
することにより Ajax POST 要求を開始します。サーバーが応答すると、サーバーからの新しいコンテンツ
で Totals パネルが更新されます。
ポップアップの説明を追加する
次の例では、モデルなしの Dialog コンポーネント (これも Rational Application Developer V7 の
新機能) を使用して、ショッピング・カート内の項目の説明を表示します。Dialog はパネルなので、そのコン
テンツは (先に panelGroup および panelGrid コンポーネントを更新したのと同じ単純な方法で) Ajax
を使用して更新できます (リスト 3)。
リスト 3. 新しい Dialog コンポーネントを使用して商品の説明を表示する
これは前述のタグによく似ています。ただし今回は Refresh タイプの Ajax 要求を使用します。したがって
、サーバーにパラメーター (具体的には説明を表示するカート項目の ID) を受け渡す必要があります。項
目は dataTable 内にあり、JSF はテーブルの各コンポーネントの 1 つのインスタンスしか保持しないため
、アクティブ行 (すなわち要求を生成した行) のコンポーネントの値を使用することをサーバー・サイド・コー
ドに知らせる必要があります。このためには、コンポーネントの ID の前に $$AJAXROW$$ キーを入力
します。
ユーザーが項目の上でマウス・ポインターを動かした時にダイアログを表示したり隠したりするには、リスト 4
の示すように、Link コンポーネントの onmouseover イベントおよび onmouseout イベントを使用しま
す。
リスト 4. ユーザーが項目の上でのマウス・ポインターを動かした時にダイアログを表示したり隠したりするコ
ード
ユーザーがマウス・ポインターを項目の上で動かした時に、ダイアログのコンテンツが更新され (get アクショ
ン)、ダイアログが表示される (show アクション) ようにします。マウス・ポインターが項目の上から外れた時
には、ダイアログが隠れる (hide アクション) ようにします。
同じページに商品の詳細を表示する
最後に改善する点は、商品の詳細を同じページのショッピング・カートの下に表示することです。項目の詳
細を表示するページ product.jsp は既にあります。したがって、そのページの設計で行ったすべての作業
を再実行し、cartajax.jsp に同様のタグを再実装する必要があっては煩雑です。幸い、3 つ目の Ajax
要求タイプである External 要求を用いて、既存の JSP ファイルを使用することができます (リスト 5 参
照)。
リスト 5. 同じページに商品の詳細を表示するコード
ここまでで読者はおそらく、panel コンポーネントと関連する Ajax タグ、という一定のパターンがあることに
お気付きのことでしょう。商品の panelGrid は、商品詳細のプレースホルダーとして機能します。ユーザー
が商品を選択していない時には、ページの当該領域の目的を説明するヘルパー・テキストのみが表示され
ます。ユーザーが商品をクリックすると、product.jsp ファイル (href 属性) で定義されたものと同様
の panelGrid で、パネルのコンテンツが更新されます。
この時、Link コンポーネントの onclick イベントが Ajax 要求を開始します (リスト 6 参照)。
リスト 6. onclick イベントを使用して Ajax 要求を開始するコード
動作の第 2 のアクション (停止) は、ブラウザーにおけるイベントのバブルアップを回避するためです。この
場合は、リンクが通常のリンクのように動作するのではなく、Ajax 要求を開始するだけで、その後イベントの
処理を停止するようにします。
必要な最後の変更は、現在選択されている商品の ID をサーバーに受け渡す方法についてです。リンク
を使用してユーザーを他のページに移動させる cart.jsp バージョンのショッピング・カートでは、ID をリンク
・パラメーターとして定義しました (リスト 7)。
リスト 7. 変換前のショッピング・カートのパラメーターでリンクとして定義された ID
Ajax を使用すると、実リンクはなくなり、Ajax タグの params 属性を使用して、要求とともにコンポーネン
トの値を受け渡します。そのため、リンク上にパラメーターを持つ代わりに、リンクの隣に ID を保持する隠し
入力フィールドを作成し、そのコンポーネントを Ajax パラメーターとして使用する必要があります (リスト 8
参照)。
リスト 8. 隠し ID 入力フィールドを作成し、Ajax パラメーターとして使用する
この変更で、ショッピング・カートへの変更は完了です。
Rational Application Developer の Ajax ツールのその他の使用法
こ の 演 習 で 行 っ た 変 更 で は 、 単 に 説 明 上 の 目 的 で JSF タ グ を 表 示 し ま し た が 、 そ れ ら
は Rational Application Developer でのドラッグ・アンド・ドロップ、「Properties」ビュー、および「
Quick Edit」ビューで簡単に複製することができます。これは、「Hello, world」アプリケーションを作成した本
記事の最初の部分で使用したものとまったく同じプロセスです。これまで見てきたように、アプリケーションの
使いやすさは大幅に改善でき、しかも既に実行した作業を無駄にしなくて済みます。
ダウンロード
説明
ファイル名
サイズ
ダウンロード形式
本記事用のサンプル Ajax アプリケーション
AjaxSample.zip
4.7 MB
HTTP