目次


JSF 2.0 の Ajax と GMaps4JSF

Comments

はじめに

GMaps4JSF の目的は、Google マップと JSF (JavaServer Faces) を統合し、JSF 開発者がストリート・ビューの複雑なパノラマや地図を数個の JSF タグで作成できるようにすることです。また、そうした地図に対して、さまざまなコンポーネント (マーカー、情報テキスト、コントロール、グラウンド オーバーレイ、ポリゴン、ポリラインなど) を追加することもできます。GMaps4JSF を使用すると、サーバー・サイドとクライアント・サイドのさまざまなイベントをコンポーネントに追加することができ、イベントとコンポーネントをバインドするために JavaScript コードを作成する必要がありません。コンポーネントのクライアント・サイドでのイベント・ハンドラーを実装する場合には、JavaScript コードのみを作成すればよいのです。

Ajax は、最近のどのような Web アプリケーションでも主要技術として使われています。これまでのバージョンの JSF では Ajax は導入されていませんでしたが、多くの JSF コンポーネント・ライブラリー (Apache MyFaces Trinidad、JBoss RichFaces、ICEFaces など) によって Ajax が実現されていました。そして嬉しい知らせとして、JSF 2.0 の実装では Ajax がネイティブでサポートされるようになりました。

この記事では、JSF 2.0 アプリケーションの中で GMaps4JSF を構成する方法を説明し、また JSF 2.0 の Ajax について簡単に紹介します。そして最後に、JSF 2.0 の Ajax と GMaps4JSF の両方を使う簡単なマッシュアップ・アプリケーションについて説明します。

JSF 2.0 アプリケーションによって GMaps4JSF を構成する

まず、JSF 2.0 アプリケーションによって GMaps4JSF を構成しましょう。そのためには以下の作業を行います。

Google Maps API に登録します (「参考文献」を参照)。そのためには利用規約を受け入れ、アプリケーションに使用するサイトを登録する必要があります。すると、そのアプリケーション専用のキーが Google から提供されます。

図 1. Google Maps API に登録する
Screen shot of the agreement screen for Google Maps API
Screen shot of the agreement screen for Google Maps API

Google Maps API を使うためには、Google Maps API のスクリプトをアプリケーションのページの中に含める必要があります。リスト 1 は Google Maps API のスクリプトを示しており、このスクリプトを <h:head> タグの中に含める必要があります。このコードの使い方の詳細は Google Maps API のドキュメントに説明されています (「参考文献」を参照)。

リスト 1. Google Maps API を含むヘッダー・コード
<head> 
     <script 
          src="//maps.google.com/maps?file=api&amp;v=2&amp";
          key="gen_website_key"
          type="text/javascript">
     </script>
</head>

リスト 1 のコードでは、登録の際に提供されたキーで「gen_website_key」の部分を置き換える必要があります。図 2 は Google マップの Web サイト上で提供されるこのキーの例と、そのキーをコードのどこに入れるかを示しています。

図 2. Google Maps API スクリプトを含む <h:head> タグをアプリケーションのページに含める
Google Maps API スクリプトを含む <h:head> タグをアプリケーションのページに含める
Google Maps API スクリプトを含む <h:head> タグをアプリケーションのページに含める

次に、GMaps4JSF の JAR ファイルが必要です。GMaps4JSF プロジェクトの Web サイト (「参考文献」を参照) から最新バージョンをダウンロードします。図 3 はこのプロジェクトのページを示しており、ダウンロードは右側にあります。

図 3. 最新のライブラリーのスナップショットの jar をダウンロードする
最新のライブラリーのスナップショットの jar をダウンロードする
最新のライブラリーのスナップショットの jar をダウンロードする

ダウンロードされた JAR ファイルを JSF 2.0 Web アプリケーションの WEB-INF/lib ディレクトリーに配置します。

最後に、リスト 2 に示すライブラリー宣言を XHTML ページに追加し、GMaps4JSF コンポーネントを使えるようにします。

Listing 2. Library declaration for GMaps4JSF components
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:m="http://code.google.com/p/gmaps4jsf/">

リスト 2. GMaps4JSF コンポーネントに対するライブラリー宣言

JSF 2.0 の Ajax を使う

Ajax は今や、最近のほとんどの Web 2.0 アプリケーションの一部になっています。「Ajax 化された」アプリケーションをゼロの状態から作成する作業は楽ではありません。クライアント・サイドでは、Ajax リクエストを送信して Ajax レスポンスを受信する JavaScript クライアントを作成する必要があります。サーバー・サイドでは、アプリケーションはクライアントが理解できるレスポンスを用意する必要があります。こうした複雑なことに加え、JavaScript クライアントはブラウザーに依存しない互換性を持たなければなりません。JSF 2.0 の Ajax は、こうしたことをすべて処理してくれるのです。

JSF 2.0 では、JSF 2.0 アプリケーションに Ajax サポートを追加する方法が 2 つあります。それは、JSF に提供されている JavaScript ライブラリーを使う方法と、JSF コンポーネントが Ajax をサポートすることを宣言する新しい <f:ajax> タグを使う方法です。

<f:ajax> タグを使うと、JSF コンポーネントのアクションに追加できる Ajax リクエストを作成することができます。例えば、<f:ajax> タグをアクション・ソース・コンポーネント (<h:commandButton> など) の中に配置すると、このコンポーネントの「onclick」アクションによって Ajax リクエストを送信することができます。また、値を保持するコンポーネント (<h:selectOneListbox> など) の中に <f:ajax> タグを配置すると、そのコンポーネントの「onchange」アクションによって Ajax リクエストを送信することができます。

リスト 3 を見ると JSF 2.0 の Ajax の使い方がいかに容易であるかわかります。この例では <f:ajax> タグが <h:inputText> コンポーネントの中に配置されています。そのため、ユーザーが txtName というテキスト入力フィールドに値を入力し、そのフィールドからタブで抜けると、入力された値で txtEnteredNameoutputText が更新されます。

リスト 3. JSF 2.0 の <f:ajax> タグの使い方の例
<h:panelGrid columns="2">
    <h:outputText value="Enter your name:"/>
    <h:inputText id="txtName" value="#{person.name}">
        <f:ajax render="txtEnteredName"/>
    </h:inputText>
    <h:outputText value="You entered: "/>
    <h:outputText id="txtEnteredName" value="#{person.name}"/>
</h:panelGrid>

Countries アプリケーション

では、GMaps4JSF と JSF 2.0 の Ajax の両方を使う Countries アプリケーションに移りましょう。このアプリケーションには、マスターとしての dataTable と詳細な地図があります。dataTable の各行は 1 つの国を表し、ある 1 つの行をユーザーがクリックすると、その国の場所が詳細な地図に表示されます。図 4 は 実際の Countries アプリケーションのスクリーンショットです。

図 4. Countries アプリケーションのスクリーンショット
A screenshot of the Countries application shows a list of various countries in the top of the window with a google country map below.  There is a marker in Egypt with a description window giving details about the country.
A screenshot of the Countries application shows a list of various countries in the top of the window with a google country map below. There is a marker in Egypt with a description window giving details about the country.

リスト 4 は mashups.xhtml (Countries アプリケーションの XHTML ページ) のコード・リストの一部を示しています。ここでは <f:param> タグを <f:ajax> タグの内側に配置し、この表の行の「View Country Location (国の場所を表示)」という commandLink がクリックされた場合にパラメーターを送信するようにしています。<f:ajax> タグの render 属性の中で、地図のコンポーネントを含むパネル・グループが「mapGroup」と規定されています。サーバーからレスポンスが返されると、新しい情報 (#{param.selectedCountry}#{param.selectedCapital}#{param.continent}) で地図が更新されます。

リスト 4. Countries アプリケーションの XHTML ページ (mashups.xhtml)
<!-- some code here -->
<h:dataTable value="#{countryTable.data}" var="row">
   <!-- some code here -->
   <h:column>
    <f:facet name="header">
      <h:outputText value="Action"/>
    </f:facet>
	<h:commandLink id="cmdShow" value="View Country Location"> 
       <f:ajax render="mapGroup"> 
          <f:param name="selectedCapital" value="#{row.capital}"/> 
          <f:param name="continent" value="#{row.continent}"/> 
          <f:param name="selectedCountry" value="#{row.id}"/> 
       </f:ajax> 
    </h:commandLink> 
   </h:column>
</h:dataTable>   
<!-- some code here -->
 <h:panelGroup id="mapGroup"> 
    <m:map id="map" width="460px" height="460px" type="G_NORMAL_MAP" 
            address="#{param.selectedCountry}" 
      rendered="#{param.selectedCountry ne null}" renderOnWindowLoad="false" zoom="4"> 
    <m:marker id="marker"/> 
    <m:htmlInformationWindow id="window" 
       htmlText="Country: #{param.selectedCapital} <br/> Continent: #{param.continent}"/> 
    </m:map> 
    <!-- some code here --> 
 </h:panelGroup>

リスト 5 は Countries アプリケーションの Managed Bean の例を示しています。この Managed Bean のデータは、データベースまたは Web サービスから得られますが、ここでは単にさまざまな国々の静的な情報を保持していることに注意してください。

リスト 5. Countries アプリケーションの Managed Bean の例
@ManagedBean(name="countryTable")
@RequestScoped
public class CountryTableModel {
	private static List<Country> data = new ArrayList<Country>();
	static {
		data.add(new Country("Egypt", 
		                     "Cairo, Egypt", 
		                     "Africa"));
		data.add(new Country("Germany", 
		                     "Berlin, Germany", 
		                     "Europe"));
		data.add(new Country("Austria", 
		                     "Vienna, Austria", 
		                     "Europe"));
		data.add(new Country("US" , 
		                     "Washington, USA", 
		                     "North America"));
		data.add(new Country("China" , 
		                     "Beijing, China", 
		                     "Asia"));
		data.add(new Country("Brazil" , 
		                     "Brazilia, Brazil", 
		                     "South America"));		
	}

	public List<Country> getData() {
		return data;
	}

	public void setData(List<Country> data) {
		this.data = data;
	}	
}

まとめ

この記事では、「Ajax 化された」アプリケーションの作成が JSF 2.0 によってどれほど単純になるかを学びました。また、Google マップの作成や、作成した Google マップにさまざまなマーカー、メモ、コントロールを追加することが、GMaps4JSF を使うことで非常に容易になることも学びました。またこの記事では、JSF 2.0 アプリケーションで GMaps4JSF を使うのがいかに簡単であるかも説明しました。これで皆さんは JSF 2.0 開発者として、JavaScript コードを作成することなく、JSF 2.0 アプリケーションの中で容易に Web 2.0 のマッシュアップを作成することができます。


ダウンロード可能なリソース


関連トピック

  • JSF 2 の魅力: 第 1 回 Web アプリケーション開発を効率化する」(developerWorks、2009年5月) は、JSF 2 によって開発を効率化するための方法として、XML による構成をアノテーションと規約に置き換え、ナビゲーションを単純化し、そしてリソースに容易にアクセスする方法を解説しています。
  • Roger Kitain と Ed Burns は JSF 2.0 仕様を策定する 2 人のリーダーです。Roger のブログを読み、最新情報を知ってください。
  • Jim Driscoll は JSF 2.0 に関して非常に興味深いブログを書いています。
  • Ryan Lubke のブログでは JSF 2.0 の最新情報を知ることができます。
  • Google Maps API の登録サイトでサインアップしてください。
  • Google Maps API の使い方を解説した詳細なドキュメントを読んでください。
  • GMaps4JSF プロジェクトのホームページにはドキュメントとダウンロードが用意されています。
  • JSF 2.0 と GMaps4JSF をダウンロードしてください。

コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Java technology
ArticleID=431378
ArticleTitle=JSF 2.0 の Ajax と GMaps4JSF
publish-date=08252009