チェックボックス・リストボックス・複数選択可プルダウンメニュー
今回はユーザーが複数の値を選べるコンポーネントについて説明します。前回の第3回と違うところは主にマネージドビーンの作りが違います。また表示ページも複数の値が表示できるように工夫が必要です。
まず画面イメージ
今回は音楽の趣味について聞いてみるようなアンケートページだと思ってください。要素は３つです。
- ラジオボタン
- リストボックス
- プルダウンメニュー
リストボックスで色が濃くなっているところは選択されている項目です。１つ選択するにはクリックでいいですが、2つ目以降はCtrlキー＋クリック、あるいはShft＋クリックで連続領域が選択されます。
送信ボタンを押すと次のように入力された情報が表示されます。いくつ回答があるかわからないので工夫が必要です。
入力ページ
チェックボックスはh:selectManyCheckboxを使います。リストボックスはh:selectManyListboxを使います。プルダウンメニューはh:selectManyMenuです。selectMenyという言葉が共通していることに気付きましたか？f:selectItemで選択肢を与えることは前回と同様です。h:selectManyListboxのsizeは同時にいくつの選択肢を見えるようにするか、つまり、行数を指定するものです。
送信ボタンを押すとcomponents2Result.xhtmlに移動します。
[components2.xhtml]
・・・省略・・・
<h:body>
<h2>Welcome to Music Agency</h2>
<hr width=”500″ align=”left”/>
<h:form>
<h:panelGrid id=”pg1″ columns=”1″>
<h:outputText value=”好きな音楽ジャンル： ”/>
<h:selectManyCheckbox value=”#{musicBean.type}”>
<f:selectItem itemValue=”J-POP” itemLabel=”J-POP”/>
<f:selectItem itemValue=”ロック” itemLabel=”ロック”/>
<f:selectItem itemValue=”ポップス” itemLabel=”ポップス”/>
<f:selectItem itemValue=”R＆B” itemLabel=”R＆B”/>
<f:selectItem itemValue=”ジャズ” itemLabel=”ジャズ”/>
<f:selectItem itemValue=”クラシック” itemLabel=”クラシック”/>
</h:selectManyCheckbox>
<h:outputText value=”好きな歌手： ”/>
<h:selectManyListbox size=”6″ value=”#{musicBean.musician}”>
<f:selectItem itemValue=”Ariana Grande” itemLabel=”Ariana Grande”/>
<f:selectItem itemValue=”Taylor Swift” itemLabel=”Taylor Swift”/>
<f:selectItem itemValue=”Justin Bieber” itemLabel=”Justin Bieber”/>
<f:selectItem itemValue=”Sam Smith” itemLabel=”Sam Smith”/>
<f:selectItem itemValue=”Bruno Mars” itemLabel=”Bruno Mars”/>
</h:selectManyListbox>
<h:outputText value=”好きなコンサート会場： ”/>
<h:selectManyMenu value=”#{musicBean.hall}”>
<f:selectItem itemValue=”日本武道館” itemLabel=”日本武道館”/>
<f:selectItem itemValue=”東京国際フォーラム” itemLabel=”東京国際フォーラム”/>
<f:selectItem itemValue=”東京ドーム” itemLabel=”東京ドーム”/>
<f:selectItem itemValue=”東京オペラシティ” itemLabel=”東京オペラシティ”/>
<f:selectItem itemValue=”サントリーホール” itemLabel=”サントリーホール”/>
</h:selectManyMenu>
<h:panelGrid id=”pg2″ columns=”2″>
<h:commandButton type=”submit” value=”送信” action=”components2Result” />
<h:commandButton type=”reset” value=”キャンセル” />
</h:panelGrid>
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
マネージドビーン
入力ページから情報を受け取るプロパティはArrayListクラスにします。これは複数の値を受け取れるようにするためです。３つのプロパティを用意したら、それらのゲッターとセッターを用意するだけです。
[MusicBean .java]
package com.myjsf;
import java.util.ArrayList;
import javax.inject.Named;
import javax.enterprise.context.RequestScoped;
@RequestScoped
@Named
public class MusicBean {
ArrayList type;//ジャンル
ArrayList musician;//歌手
ArrayList hall;//コンサートホール
public MusicBean() {
type=new ArrayList();
musician=new ArrayList();
hall=new ArrayList();
}
public ArrayList getType() {
return type;
}
public void setType(ArrayList type) {
this.type = type;
}
public ArrayList getMusician() {
return musician;
}
public void setMusician(ArrayList musician) {
this.musician = musician;
}
public ArrayList getHall() {
return hall;
}
public void setHall(ArrayList hall) {
this.hall = hall;
}
}
表示ページ
３つの情報表示とも同じテクニックを使っています。ui:repeatタグを使ってArrayList型のプロパティを受け取って、その要素があるだけ繰り返して表示します。そのvarプロパティの値にArrayListから１つずつのデータが取り出され、<span>#{eachData} / </span>というような方法で、その値を逐次表示します。/は単に表示を見やすくするための区切子です。
[component2Result.xhtml]
・・・省略・・・・
<<?xml version=’1.0′ encoding=’UTF-8′ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:h=”http://xmlns.jcp.org/jsf/html”
xmlns:ui=”http://xmlns.jcp.org/jsf/facelets“>
<h:head>
<title>いただいた情報</title>
</h:head>
<h:body>
<h:panelGrid columns=”2”>
<h:outputText value=”【入力情報】”/>
<h:outputText value=””/>
<h:outputText value=”好きな音楽ジャンル： ”/>
<ui:repeat var=”eachData” value=”#{musicBean.type}”>
<span>#{eachData} / </span>
</ui:repeat>
<h:outputText value=”好きな歌手： ”/>
<ui:repeat var=”eachData” value=”#{musicBean.musician}”>
<span>#{eachData} / </span>
</ui:repeat>
<h:outputText value=”好きなコンサート会場： ”/>
<ui:repeat var=”eachData” value=”#{musicBean.hall}”>
<span>#{eachData} / </span>
</ui:repeat>
</h:panelGrid>
</h:body>
</html>
まとめ
チェックボックス ＝h:selectManyCheckbox
リストボックス ＝h:selectManyListbox
プルダウンメニュー ＝h:selectManyMenu
を使う。
マネージドビーンのプロパティはArrayListクラスを使う。
表示にはui:repeatタグを使う。
JSF2.2のすべてをまとめたkindle電子書籍 「JavaServer Faces2.2 入門」もぜひご覧ください。パソコン、iPhone、Androidどんな端末用にもamazonが無料のKindle電子書籍リーダーを用意しています。それをつかってKindle本を手軽にお楽しみください。あなたが今お使いの端末用Kidle電子書籍リーダーのご案内