JSF2.2入門 第5回様々な入力コンポーネント(2)

kanban5

katatsumuriチェックボックス・リストボックス・複数選択可プルダウンメニュー

今回はユーザーが複数の値を選べるコンポーネントについて説明します。前回の第3回と違うところは主にマネージドビーンの作りが違います。また表示ページも複数の値が表示できるように工夫が必要です。

leafまず画面イメージ

今回は音楽の趣味について聞いてみるようなアンケートページだと思ってください。要素は3つです。

  • ラジオボタン
  • リストボックス
  • プルダウンメニュー

リストボックスで色が濃くなっているところは選択されている項目です。1つ選択するにはクリックでいいですが、2つ目以降はCtrlキー+クリック、あるいはShft+クリックで連続領域が選択されます。

160607-3input

送信ボタンを押すと次のように入力された情報が表示されます。いくつ回答があるかわからないので工夫が必要です。

160607-4output

leaf入力ページ

チェックボックスは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>

leafマネージドビーン

入力ページから情報を受け取るプロパティはArrayListクラスにします。これは複数の値を受け取れるようにするためです。3つのプロパティを用意したら、それらのゲッターとセッターを用意するだけです。

[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;
}
}

leaf表示ページ

3つの情報表示とも同じテクニックを使っています。ui:repeatタグを使ってArrayList型のプロパティを受け取って、その要素があるだけ繰り返して表示します。そのvarプロパティの値にArrayListから1つずつのデータが取り出され、<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>

leafまとめ

チェックボックス =h:selectManyCheckbox

リストボックス =h:selectManyListbox

プルダウンメニュー =h:selectManyMenu

を使う。

マネージドビーンのプロパティはArrayListクラスを使う。

表示にはui:repeatタグを使う。

previousnext

JSF2.2のすべてをまとめたkindle電子書籍 「JavaServer Faces2.2 入門」もぜひご覧ください。パソコン、iPhone、Androidどんな端末用にもamazonが無料のKindle電子書籍リーダーを用意しています。それをつかってKindle本を手軽にお楽しみください。あなたが今お使いの端末用Kidle電子書籍リーダーのご案内

同書籍のPDF版は私自身が運営するこちらのサイトから直接購入できます。

コメントを残す

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

CAPTCHA