レベル: 中級 Hazem Saleh (Hazems@eg.ibm.com), Staff Software Engineer, IBM
2009年 8月 25日 GMaps4JSF は Google マップと JSF (JavaServer Faces) を統合する JSF マッシュアップ・ライブラリーです。GMaps4JSF を利用すると、ストリート・ビューの複雑なパノラマや地図を数個の JSF タグで作成することができます。また、さまざまなコンポーネントを容易に地図に追加することができます。この記事では JSF 2.0 アプリケーションの中で GMaps4JSF を構成する方法を説明し、また JSF 2.0 の Ajax (Asynchronous JavaScript and XML) について簡単に紹介します。この記事を利用して、JSF 2.0 の Ajax と GMaps4JSF の両方を使用する簡単なマッシュアップ・アプリケーションの作成方法を学びましょう。
はじめに
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 に登録する
Google Maps API を使うためには、Google Maps API のスクリプトをアプリケーションのページの中に含める必要があります。リスト 1 は Google Maps API のスクリプトを示しており、このスクリプトを <h:head> タグの中に含める必要があります。このコードの使い方の詳細は Google Maps API のドキュメントに説明されています (「参考文献」を参照)。
リスト 1. Google Maps API を含むヘッダー・コード
<head>
<script
src="http://maps.google.com/maps?file=api&v=2&";
key="gen_website_key"
type="text/javascript">
</script>
</head> |
リスト 1 のコードでは、登録の際に提供されたキーで「gen_website_key」の部分を置き換える必要があります。図 2 は Google マップの Web サイト上で提供されるこのキーの例と、そのキーをコードのどこに入れるかを示しています。
図 2. Google Maps API スクリプトを含む <h:head> タグをアプリケーションのページに含める
次に、GMaps4JSF の JAR ファイルが必要です。GMaps4JSF プロジェクトの Web サイト (「参考文献」を参照) から最新バージョンをダウンロードします。図 3 はこのプロジェクトのページを示しており、ダウンロードは右側にあります。
図 3. 最新のライブラリーのスナップショットの 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 というテキスト入力フィールドに値を入力し、そのフィールドからタブで抜けると、入力された値で txtEnteredName outputText が更新されます。
リスト 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 アプリケーションのスクリーンショット
リスト 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 サービスから得られますが、ここでは単にさまざまな国々の静的な情報を保持していることに注意してください。
リスト ５. 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 のマッシュアップを作成することができます。
参考文献 学ぶために
製品や技術を入手するために
著者について  | 
| | Hazem Saleh はJEE とオープンソース技術に 5 年間の経験があります。彼は Apache MyFaces のコミッターであり、MyFaces プロジェクトでさまざまなコンポーネントに関する作業を開始してきました。その中には Tomahawk CAPTCHA、Commons ExportActionListener、Media、PasswordStrength などが含まれています。彼は GMaps4JSF (Google マップと Java ServerFaces の両方を統合するプロジェクト) の創設者であり、また『The Definitive Guide to Apache MyFaces and Facelets』(Apress 刊) の著者でもあります。現在はスタッフ・ソフトウェア・エンジニアとして IBM エジプトに勤務しており、そこでは Web 2.0 技術のエキスパートとして認められています。 |
記事の評価
| 
