【JSF入門02】ボタン押下時のイベントを扱う。actionとactionListenerについて

  • 2017年7月22日
  • 2018年4月16日
  • IT系, JSF
  • 3941view
JSF
Youtubeでもレブル250/グラディウス400/GN125の情報を発信してます! (登録してもらえると超喜びます!!)

はじめに

前回は、JSF入門初回ということで、環境構築とバッキングビーンの値をビューに表示しただけでした。
これではあまりに動きが無さ過ぎるので、今回はボタン押下時のイベントを付与していきます。

h:commandタグ

JSFでは、ボタンを画面上に表示するためにh:commandタグを使用します。

[html] <h:commandButton value="ボタン" action="#{bean.mymethod}" />
[/html]

画面描画時は、htmlタグのinputタグ(type=”submit”)に変換されて出力されます。
h:commandタグに、action、又はactionListener属性を付与し、そこにEL式でバッキングビーンのメソッドを紐付けることでイベントをハンドルします。

actionとactionListenerの違い

前述の通り、h:commandButtonタグは、actionとactionListenerの2種類の属性を与えることが出来ます。
使い分けとしては、actionはページ遷移を伴う場合に使用し、actionListenerは画面遷移を伴わない場合に使用します。
actionで与えるメソッドの戻り値が、ページ遷移先のURLとなります。

また、バッキングビーン側のメソッド定義も異なり、
actionではString型の戻り値を返し、引数は無しのメソッドを、
actionListenerではvoid型、引数にActionEventを受け付けるメソッドを、定義します。

actionListenerにActionEventを受け付けないメソッドを与えると、ページ表示時にJavaのExceptionが発生しますのでご注意を。

実際にコーディングして確認する

それでは、実際にボタンイベントをハンドルするページを作ってみましょう。ベースは前回のソースです。

/WebContent/index.xhtml

[html] <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" >
<h:head>
<meta charset="utf-8"/>
<title>Index Page</title>
</h:head>
<h:body>
<h2>Login Page!!</h2>
<h:form>
<div>
<h:inputText value="#{indexBean.id}" />
</div>
<div>
<h:inputText value="#{indexBean.password}" />
</div>

<h:commandButton value="ページ遷移を伴うボタンイベント" action="#{indexBean.actionMethod}" />
<h:commandButton value="画面内ボタンイベント" actionListener="#{indexBean.actionListener}" />
</h:form>
#{indexBean.message}
</h:body>
</html>
[/html]

ログイン画面風に2つの入力項目を持つ画面にしてみました。
JSFにおける入力項目の配置は、h:inputTextタグを使用します。value属性にEL式でバッキングビーンのプロパティを与えることでデータバインドが行われます。

ちなみに、お察しの通り、画面に描画される際にはh:inputTextタグはinputタグ(type=”text”)に変換されます。

次に、今回記事のメインであるh:commandButtonを2つ配置しています。
1つ目のボタンはaction属性を、2つ目のボタンはactionListener属性を与えて、それぞれEL式でバッキングビーンのメソッドを与えます。

/src/view/IndexBean.java

 

[java] package view;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

@ManagedBean
@SessionScoped
public class IndexBean{

private String id;
private String password;
private String message;

public String actionMethod(){
return "/resources/page/mainpage.xhtml";
}

public void actionListener(ActionEvent actionEvent){
this.message = "login button pressed!! id=" + this.id + ", " + "password=" + this.password;
}

public String getId() {
return id;
}

public void setId(String id) {
this.id = id;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}

}
[/java]

ビューでid, password, messageプロパティを表示しているので、バッキングビーン側でもそれに対応するように定義しています。
また、h:commandButtonのaction属性とactionListener属性で、actionMethod, actionListenerをそれぞれバインドしているので、actionMethod側はString値を返却するメソッドを、actionListener側はvoidでActionEvent型の引数を受け取るメソッドを定義します。

actionMethod側は、返却する値が遷移先のページとなるため、飛びたいURLを返却します。
今回は、/resources/page/mainpage.xhtml を遷移先として与えています。

/WebContent/resources/page/mainpage.xhtml

[html] <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" >
<h:head>
<meta charset="utf-8"/>
<title>MainPage</title>
</h:head>
<h:body>
<h2>Main Page!!</h2>
<div>
Your ID = #{indexBean.id}, Your Password=#{indexBean.password}
</div>
</h:body>
</html>
[/html]

遷移先ではid, passwordを画面に表示しています。それだけです。

実行結果

2つの入力項目と2つのボタンが表示されて、2つ目のボタンを押下するとページ遷移無しで画面下部にメッセージが描画されます。

1つ目のボタンを押下すると、ページ遷移します。

今回は以上です。

Youtubeでもレブル250/グラディウス400/GN125の情報を発信してます! (登録してもらえると超喜びます!!)
最新情報をチェックしよう!