JSFによるWebアプリケーション開発 第9回 イベント処理 JSFによるWebアプリケーション開発 第9回

ここでの内容 JSFのイベント処理について学ぶ。

イベント処理とは イベント ＝ アプリケーションで行われる操作 イベント処理とは、ある特定のイベントが起こったときに、何らかの処理を行うこと イベント　＝　アプリケーションで行われる操作 ボタンを押する 入力フィールドにデータを入力する イベント処理とは、ある特定のイベントが起こったときに、何らかの処理を行うこと

イベント処理のしくみ イベント発生元 イベントリスナー イベントが起こるところ ボタン、テキストフィールドなど 発生したイベントを受け取り、イベントに対応する処理を行うところ

JSFでの２種類のイベント処理 Action イベント Value Change イベント ボタンやハイパーリンクが押されたときに発生するイベント Value Change イベント ボタンが押されたとき、対象となるUIコンポーネントが変化していたら発生するイベント

Action イベント

やりたいこと (1)

やりたいこと (2) 「名前」を入力してボタンを押すと、次の２つの情報を出力する。 入力された「名前」 どのボタンが押されたか

JSPの記述 <h:inputText id="word“ value="#{ParameterBean.name}" /> <h:commandButton id="button1" value="Button1" actionListener= "#{ParameterBean.assembleMessage}" /> <h:commandButton id="button2" value="Button2" <h:outputText id="message" value="#{ParameterBean.message}" />

イベントリスナーの設定 <h:commandButton id="button1" value="Button1" actionListener= "#{ParameterBean.assembleMessage}" /> actionListener 属性の値は Method Binding 式となっている。 ParameterBean の assembleMessage メソッドがイベントリスナーとなる。

イベントリスナーの実装 public void assembleMessage(ActionEvent event) { String id = event.getComponent().getId(); StringBuffer sb = new StringBuffer(); sb.append(name); sb.append("さん、"); sb.append(id); sb.append("が押されました。"); message = new String(sb); }

イベントリスナーのルール public void assembleMessage(ActionEvent event) { ……… } 返値はなし

ActionEvent オブジェクトの操作 String id = event.getComponent().getId(); イベントが起こったUIコンポーネントの id 属性の値を返す。

Action Method と Action Event outcome が便利 ActionEvent オブジェクトを利用することで、イベント発生元のUIコンポーネントの情報を取得できる。

Value Change イベント

やりたいこと (1) “Go!”ボタンが押されたとき、ラジオボタンの選択内容が変化していたらメッセージを表示する

やりたいこと (2) “Go!”ボタンが押されても、ラジオボタンの選択内容が変化していなかったらメッセージも変わらない。

JSPの記述 <h:selectOneRadio value="#{ParameterBean.sports}" valueChangeListener= "#{ParameterBean.assembleMessage}"> ……… </h:selectOneRadio> <h:commandButton id="button" value="Go!" /> <h:outputText id="message" value="#{ParameterBean.message}" />

h:selectOneRadio 要素 (1) value="#{ParameterBean.sports}" valueChangeListener= "#{ParameterBean.assembleMessage}"> <f:selectItem itemValue="baseball“ itemLabel="野球" /> <f:selectItem itemValue="soccer“ itemLabel="サッカー" /> </h:selectOneRadio>

h:selectOneRadio 要素 (2) ラジオボタンを表す UIコンポーネント ラジオボタンは、１つだけ選択ができるボタンのグループ 選択されたボタンの値は value 属性で Value Binding を使う <h:selectOneRadio value="#{ParameterBean.sports}“> </h:selectOneRadio>

f:selectItem 要素 <f:selectItem itemValue="baseball“ itemLabel="野球" /> １つの選択肢を表すUIコンポーネント itemValue 属性は、この選択肢が選ばれたときにh:selectOneRadio 要素の value 属性に入る値 itemLabel 属性は、表示される文字列

イベントリスナーの設定 <h:selectOneRadio value="#{ParameterBean.sports}" valueChangeListener= 　 "#{ParameterBean.assembleMessage}"> </h:selectOneRadio> valueChangeListener 属性の値は Method Binding 式となっている。 ParameterBean の assembleMessage メソッドがイベントリスナーとなる。

イベントリスナーの実装 public void assembleMessage( ValueChangeEvent event) { String str = event.getNewValue().toString(); ...... if (str.equals("baseball")) { sb.append("野球"); } message = new String(sb);

イベントリスナーのルール public void assembleMessage( ValueChangeEvent event) { 返値はなし

ActionEvent オブジェクトの操作 String str = event.getNewValue().toString(); イベントが起こったUIコンポーネントの現在の値を返す。