今回作成するアプリケーションについて
今回は、ブラウザからユーザー名とパスワードを入力し、その結果をメッセージで返すサンプルアプリケーションを作成しながら、JSF2でAjaxを実装する方法について学んでいきます。また、入力チェックとその結果メッセージの追加のやり方を通して、機能追加の方法を見ていきましょう。
作成手順は以下の順序になります。
- まずは下地となるFacelets（XHTML）を作成する
- ManagedBeanを作成する
- 作成した（1）（2）を元にして、Ajaxの機能を追加し、確認する
- 入力チェック機能を追加する
今回は（1）から（3）までを行います。
Faceletsを作成する
まずは画面となるFaceletsを作成します。SampleWebAppのWebページを右クリックし、［新規］-［JSFページ］を選択します。
図2 JSFページの作成（1）
次に、作成するJSFの名称やオプションを定義します。ファイル名を「ajaxsamplejsf」とし、オプションは「Facelets」そのままにして、［完了］を押します。
図3 JSFページの作成（2）
テンプレートから自動生成されたFaceletsが表示されます。
図4 JSFページの作成（3）
Faceletsのベースができたら、入力項目を追加していきましょう。コードは次のようになります。
［リスト1］Faceletファイル ajaxsamplejsf.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>JSF+Ajaxサンプル</title>
</h:head>
<h:body>
<h:form id="form1">
名前<h:inputText id="username" value="#{user.username}"> …①
</h:inputText>
<br />
パスワード<h:inputSecret id="password" value="#{user.password}"></h:inputSecret> …②
<br />
<hr></hr>
<h:commandButton id="sender" value="送信する"> …③
</h:commandButton>
<h:outputText id="result" value="#{user.result}"></h:outputText> …④
</h:form>
</h:body>
</html>
h:の名前の付いたタグについては前回紹介した内容のものです。ではリスト1で印をつけた内容について説明します。
- ユーザー名の入力欄
- パスワードの入力欄
- フォームの送信ボタン
- サーバからの処理結果を返す領域（ここは出力されない）
それぞれのタグで、サーバから値を出力する #{user.○○○○} があります。#{ }で囲まれた内容はサーバからの値を出力する箇所です。userはサーバ側から返されるオブジェクトの名称となり、ドットで繋がれた右側の値は、そのオブジェクトのもつプロパティの値となります。
では、次ページから、サーバ側からのオブジェクトを用意しましょう。それがFaceletsからアクセスできるManagedBeanです。
