Ajaxの機能を追加する
先ほどまでの画面では、入力項目と送信ボタンを使ってサーバへ送信することまではできています。ではサーバ側での処理を行いましょう。手順としては次の2ステップになります。
- ManagedBeanにメソッド追加し、そのメソッドに処理を記述する
- ManagedBeanで追加したメソッドを起動するかをFaceletに追加する
では手順通り、最初はManagedBeanにメソッドを追加してみましょう。追加する内容は、入力されたユーザー名とパスワードの内容をもとに、resultのメッセージを作成することです。実はすでにresultの受け渡しの部分は完成していたのですが、先ほどまでの処理では特にresultに対して何も行っていなかったため、何も表示されませんでした。今回はresult値を作成し、その結果を表示してもらうようにします。
［リスト5］actionメソッドを追加したSampleManagedBean.java
@Named(value="user")
@SessionScoped
public class SampleManagedBean {
/** Creates a new instance of SampleManagedBean */
public SampleManagedBean() {
}
String username;
String password;
String result; …(中略)…
public void action() { if ( password != null ) {
result = "ようこそ！" + username + "さん！" + "パスワードの長さは" + password.length() + "文字ですね。";
}
}
}
追加するメソッド名は任意です。今回はactionとしました。このactionメソッドでは、resultにユーザー名とパスワードの長さを返すメッセージをresultに格納する処理を行いました。
これでManagedBean側の処理は完了です。続いて、Faceletsでこのactionメソッドを呼び出す定義をしましょう。
［リスト6］ManagedBeanのメソッドを呼ぶ処理を追加した 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" action="#{user.action}" value="送信する"> …①
</h:commandButton>
<h:outputText id="result" value="#{user.result}"></h:outputText>
</h:form>
</h:body>
</html>
実は、1の<h:commandButton>にaction属性を追加しただけです。#{user.action}にて送信するメソッドを指定しています。userは今回作成したManagedBeanのことなので、そのactionを参照する＝actionメソッドを実行することになります。
