java-beginner.com ブログ

プログラミングを学習するブログ（Javaをメインに）

JSF（JavaServer Faces）でチェック・リスト・メニュー

投稿日：

最終更新日：2018年04月29日

アイキャッチ

こんにちは。「Javaを復習する初心者」です。

今回はJSF（JavaServer Faces）で次の3つを表示して受け取る値を確認しました。

  1. チェックボックス
  2. リスト
  3. メニュー

基本的にJSFのタグを知っていれば出来ます。

チェックボックス

ひとつだけのチェックボックス

selectBooleanCheckboxtタグが用意されています。このタグを使うと、boolean型の値を受け取ることが出来ます。

以下、サンプルを挙げます

まず、バッキングビーンは次のようにします。

ソース

package beans;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class SelectBooleanCheckboxBean {
	private boolean checkboxFlg;

	public String next() {
		System.out.println(checkboxFlg);
		return null;
	}

	public boolean isCheckboxFlg() {
		return checkboxFlg;
	}

	public void setCheckboxFlg(boolean checkboxFlg) {
		this.checkboxFlg = checkboxFlg;
	}
}

変数checkboxFlgで画面側のチェックボックスの状態を受け取る想定です。また、next()メソッドでコンソールにメンバ変数の値を表示するということをしています。

次はxhtmlファイルです。

ソース

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
	<h:form>
	    <h:selectBooleanCheckbox value="#{selectBooleanCheckboxBean.checkboxFlg}" />
		チェックのテスト
	    <h:commandButton value="送信" action="#{selectBooleanCheckboxBean.next()}"/>
	</h:form>
</h:body>
</html>

selectBooleanCheckboxタグで真偽値を受け取るチェックボックスを表示することが出来ます。value属性にはバッキングビーンのメンバ変数を指定します。

送信ボタンを押下すれば、以下のように、コンソールに値が表示されます。

結果

2018-04-23T22:48:23.836+0900|情報: false
2018-04-23T22:48:27.604+0900|情報: true

複数のチェックボックス

selectManyCheckboxタグを使うと、複数選択が可能なチェックボックスを表示させることが出来ます。

以下、例を挙げます。

まず、バッキングビーンです。

ソース

package beans;

import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class SelectManyCheckBoxTest {
	private Integer[] itemValues;
	private static Map<String, Integer> selectItems;
	static {
		selectItems = new LinkedHashMap<>();
		selectItems.put("A", 1);
		selectItems.put("B", 2);
		selectItems.put("C", 3);
		selectItems.put("D", 4);
	}

	public String next() {
		System.out.println(Arrays.toString(itemValues));
		return null;
	}

	public Integer[] getItemValues() {
		return itemValues;
	}

	public void setItemValues(Integer[] itemValues) {
		this.itemValues = itemValues;
	}

	public Map<String, Integer> getSelectItems() {
		return selectItems;
	}

}

どのチェックボックスがチェックされているのかを配列で受け取る想定です。メンバ変数itemValuesで受け取ります。
selectItemsは画面に項目を表示するための変数です。インスタンスごとに持つ必要がないので、staticで定義しています。

次はhtmlxファイルです。

ソース

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
	<h:form>
		<h:selectManyCheckbox value="#{selectManyCheckBoxTest.itemValues}">
			<f:selectItems value="#{selectManyCheckBoxTest.selectItems}" />
		</h:selectManyCheckbox>
	    <h:commandButton value="送信" action="#{selectManyCheckBoxTest.next()}"/>
	</h:form>
</h:body>
</html>

selectManyCheckboxタグのvalue属性には、値を受け取るためのメンバ変数を記述します。selectItemsタグのvalue属性には表示と値を定義したMapをします。selectItemタグもありますが、ここではそれは使ってません。

例えば、BとDを選択すると、以下のように対応する値を受け取ることが出来ます。

結果

2018-04-23T23:09:51.526+0900|情報: [2, 4]

ラジオボタン

selectOneRadioタグを使うとラジオボタンを使うことが出来ます。一つだけ選択できるボタン群です。

以下、例を挙げます。

まず、バッキングビーンです。

ソース

package beans;

import java.util.LinkedHashMap;
import java.util.Map;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class SelectOneRadioTest {
	private Integer itemValue;
	private static Map<String, Integer> selectItems;
	static {
		selectItems = new LinkedHashMap<>();
		selectItems.put("A", 1);
		selectItems.put("B", 2);
		selectItems.put("C", 3);
		selectItems.put("D", 4);
	}

	public String next() {
		System.out.println(itemValue);
		return null;
	}

	public Integer getItemValue() {
		return itemValue;
	}

	public void setItemValue(Integer itemValue) {
		this.itemValue = itemValue;
	}

	public Map<String, Integer> getSelectItems() {
		return selectItems;
	}

}

画面側から受け取る値は、選択されたボタンに対応するひとつの値です。なので、メンバ変数itemValueは配列ではありません。

次はxhtmlファイルです。

ソース

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
	<h:form>
		<h:selectOneRadio value="#{selectOneRadioTest.itemValue}">
			<f:selectItems value="#{selectOneRadioTest.selectItems}" />
		</h:selectOneRadio>
	    <h:commandButton value="送信" action="#{selectOneRadioTest.next()}"/>
	</h:form>
</h:body>
</html>

構成はselectManyCheckboxタグの場合と同じです。

2番目のボタンを選択して送信ボタンを押下すると以下のようにコンソールに表示されます。

結果

2018-04-26T21:47:27.116+0900|情報: 2

リスト

selectOneListboxタグを使うとリストが表示できます。ユーザはひとつだけ選択できます。複数選択の場合、selectManyListboxタグを使います。

以下は、selectOneListboxを使った例です。

まず、バッキングビーンです。

ソース

package beans;

import java.util.LinkedHashMap;
import java.util.Map;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class SelectOneListboxTest {
	private Integer itemValue;
	private static Map<String, Integer> selectItems;
	static {
		selectItems = new LinkedHashMap<>();
		selectItems.put("A", 1);
		selectItems.put("B", 2);
		selectItems.put("C", 3);
		selectItems.put("D", 4);
	}

	public String next() {
		System.out.println(itemValue);
		return null;
	}

	public Integer getItemValue() {
		return itemValue;
	}

	public void setItemValue(Integer itemValue) {
		this.itemValue = itemValue;
	}

	public Map<String, Integer> getSelectItems() {
		return selectItems;
	}

}

作りは、selectOneRadioタグの場合と似ています。

次はxhtmlファイルです。

ソース

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
	<h:form>
		<h:selectOneListbox value="#{selectOneListboxTest.itemValue}" size="2">
			<f:selectItems value="#{selectOneListboxTest.selectItems}" />
		</h:selectOneListbox>
	    <h:commandButton value="送信" action="#{selectOneListboxTest.next()}"/>
	</h:form>
</h:body>
</html>

例えば、Cをを選択するとコンソールに以下のように表示されます。

結果

2018-04-29T15:21:20.463+0900|情報: 3

メニュー

selectOneMenuタグを使うと、メニューを表示することが出来ます。ユーザは一つだけ選択することが出来ます。複数選択をしてもらう場合は、selectManyMenuタグを使います。

以下は、selectOneMenuタグの例です。

まず、バッキングビーンです。

ソース

package beans;

import java.util.LinkedHashMap;
import java.util.Map;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class SelectOneMenuTest {
	private Integer itemValue;
	private static Map<String, Integer> selectItems;
	static {
		selectItems = new LinkedHashMap<>();
		selectItems.put("A", 1);
		selectItems.put("B", 2);
		selectItems.put("C", 3);
		selectItems.put("D", 4);
	}

	public String next() {
		System.out.println(itemValue);
		return null;
	}

	public Integer getItemValue() {
		return itemValue;
	}

	public void setItemValue(Integer itemValue) {
		this.itemValue = itemValue;
	}

	public Map<String, Integer> getSelectItems() {
		return selectItems;
	}

}

作りは、selectOneRadioタグの場合と似ています。

次はxhtmlファイルです。

ソース

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
	<h:form>
		<h:selectOneMenu value="#{selectOneMenuTest.itemValue}">
			<f:selectItems value="#{selectOneMenuTest.selectItems}" />
		</h:selectOneMenu>
	    <h:commandButton value="送信" action="#{selectOneMenuTest.next()}"/>
	</h:form>
</h:body>
</html>

例えば、Dを選択した場合、以下のようにコンソールに表示されます。

結果

2018-04-29T15:29:19.830+0900|情報: 4