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

はじめに

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

h:commandタグ

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

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

画面描画時は、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

<?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>

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

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

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

/src/view/IndexBean.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;
	}

}

ビューで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

<?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>

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

実行結果

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

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

今回は以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です