JSF2の画面でAjaxの非同期通信を作る

JavaEE6 開発入門（4）

　それでは、先ほどのFaceletsでやりとりする変数を追加していきましょう。追加する内容は、ユーザー名（username）、パスワード（password）、処理結果（result）だったので、次のように変数を追加します。

［リスト3］変数を追加したSampleManagedBean.java

@Named(value="user")
@SessionScoped
    public class SampleManagedBean { 
    /** Creates a new instance of SampleManagedBean */ 
      public SampleManagedBean() {
      } 
      // 変数を追加
      String username;
      String password;
      String result;
      // 変数を追加 
    }

　変数を追加した場所はリスト3の下の部分になります。ではこれに対してsetメソッド、getメソッドを追加していきましょう。NetBeansでは補助機能でコードを生成してくれるため、今回はそれを使います。コードエディタ上の任意の場所で右クリックし、「コードを挿入」を選択します。

図7 コード生成機能（1）

　次の選択ボックスが表示されるので「取得メソッドおよび設定メソッド」を選択します。

図8 コード生成機能（2）

　最後に生成する変数名が表示されます。今回は全ての変数に対して出力するため、SampleManagedBeanにチェックをして、全てのチェックボックスに自動的にチェックされたのを確認し、［生成］を押します。

　すると、リスト4にあるように、username、password、resultの全てにset、getメソッドが追加されます。

［リスト4］setメソッドとgetメソッドを追加したSampleManagedBean.java

@Named(value="user")
@SessionScoped
  public class SampleManagedBean { 
  /** Creates a new instance of SampleManagedBean */ 
    public SampleManagedBean() {
    } 
      String username; 
      String password; 
      String result; 
      // set,getメソッドの開始↓ 
        public String getPassword() { return password; } 
        public void setPassword(String password) { this.password = password; } 
        public String getResult() { return result; } 
        public void setResult(String result) { this.result = result; } 
        public String getUsername() { return username; } 
        public void setUsername(String username) { this.username = username; } 
      // set,getメソッドの終了↑ 
  }

　これでひとまず定義は完了しました。現在の状態でアプリケーションを起動してみましょう。ブラウザから、http://localhost:8080/SampleWebApp/faces/ajaxsamplejsf.xhtmlを開いてみましょう。すると次のような画面が表示されます。

図9 Facelet表示画面

　ちなみに、この状態でも［送信する］ボタンを押せばサーバへの送信がされるのですが、resultでの値を作成してないため、特に何も変化はなく、また、値を受け取った後に何らかの処理を実行させる機能もつけていません。これらの機能を搭載し、実際にAjaxを使った送受信も行ってみましょう。