JSF 2複数選択リストボックスの例

投稿日: 2019-11-05 2019-11-05
タグ: jsf2, listbox

JSFでは、

<h:selectManyListbox/>

タグを使用して、複数選択リストボックス – HTML

select要素を ”

multiple

“および ”

size ** “属性でレンダリングします。

….//JSF…
<h:selectManyListbox value=”#{user.favFood1}”>
<f:selectItem itemValue=”Fry Checken” itemLabel=”Food1 – Fry Checken”/>
<f:selectItem itemValue=”Tomyam Soup” itemLabel=”Food1 – Tomyam Soup”/>
<f:selectItem itemValue=”Mixed Rice” itemLabel=”Food1 – Mixed Rice”/>
</h:selectManyListbox>
<select name=”j

idt6:j

idt8″ multiple=”multiple” size=”3″>
<option value=”Fry Checken”>Food1 – Fry Checken</option>
<option value=”Tomyam Soup”>Food1 – Tomyam Soup</option>
<option value=”Mixed Rice”>Food1 – Mixed Rice</option>
</select>

===  h:selectManyListboxの例

"**  h:selectManyListbox ** "タグを使用して複数の選択リストボックスをレンダリングし、3つの異なる方法でデータを取り込むJSF 2.0の例:

.  "**  f:selectItem ** "タグのハードコードされた値.

. マップで値を生成し、それを "**  f:selectItems ** "タグに入れます.

. オブジェクト配列を使って値を生成し、それを "**  f:selectItems ** "に入れる

タグを使用し、値を "**  var ** "属性で表します。

===  1.バッキングビーン

複数選択リストボックス値のデータを保持および生成するバッキングBean。複数選択リストボックス値** を保持するプロパティは、CollectionまたはArray ** の型でなければなりません。それ以外の場合は、次のエラーメッセージが表示されます

Warning

Target model Type is no a Collection or Array
javax.faces.FacesException: Target model Type is no a Collection or Array

package com.mkyong;

import java.io.Serializable;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name=”user”)
@SessionScoped
public class UserBean implements Serializable{

public String[]favFood1;
public String[]favFood2;
public String[]favFood3;

//getter and setter methods...

public String getFavFood1InString() {
    return Arrays.toString(favFood1);
}

public String getFavFood2InString() {
    return Arrays.toString(favFood2);
}

public String getFavFood3InString() {
    return Arrays.toString(favFood3);
}

//Generated by Map
 private static Map<String,Object> food2Value;
 static{
     food2Value = new LinkedHashMap<String,Object>();
     food2Value.put("Food2 - Fry Checken", "Fry Checken");//label, value
     food2Value.put("Food2 - Tomyam Soup", "Tomyam Soup");
     food2Value.put("Food2 - Mixed Rice", "Mixed Rice");
 }

public Map<String,Object> getFavFood2Value() {
    return food2Value;
}

//Generated by Object array
 public static class Food{
     public String foodLabel;
     public String foodValue;

public Food(String foodLabel, String foodValue){
    this.foodLabel = foodLabel;
    this.foodValue = foodValue;
}

public String getFoodLabel(){
    return foodLabel;
}

public String getFoodValue(){
    return foodValue;
}

public Food[]food3List;

public Food[]getFavFood3Value() {

food3List = new Food[3];
food3List[0]= new Food("Food3 - Fry Checken", "Fry Checken");
food3List[1]= new Food("Food3 - Tomyam Soup", "Tomyam Soup");
food3List[2]= new Food("Food3 - Mixed Rice", "Mixed Rice");

    return food3List;
}

}

===  2. JSFページ

「**  h:selectManyListbox ** 」タグの使用方法を示すJSFページ。

<?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://java.sun.com/jsf/html”
xmlns:f=”http://java.sun.com/jsf/core”
>
<h:body>

<h1>JSF 2 multi-select listbox example</h1>
<h:form>

Hard-coded with “f:selectItem” :
<h:selectManyListbox value=”#{user.favFood1}”>
<f:selectItem itemValue=”Fry Checken” itemLabel=”Food1 – Fry Checken”/>
<f:selectItem itemValue=”Tomyam Soup” itemLabel=”Food1 – Tomyam Soup”/>
<f:selectItem itemValue=”Mixed Rice” itemLabel=”Food1 – Mixed Rice”/>
</h:selectManyListbox>
```
<br/><br/>
```
Generated by Map :
<h:selectManyListbox value=”

{user.favFood2}”>
<f:selectItems value=”

{user.favFood2Value}”/>
</h:selectManyListbox>
```
<br/><br/>
```
Generated by Object array and iterate with var :
<h:selectManyListbox value=”

{user.favFood3}”>
<f:selectItems value=”

{user.favFood3Value}” var=”f”
itemLabel=”

{f.foodLabel}” itemValue=”

{f.foodValue}”/>
</h:selectManyListbox>
```
<br/><br/>
```
```
    <h:commandButton value="Submit" action="result"/>
<h:commandButton value="Reset" type="reset"/>
```
```
</h:form>
```
```
</h:body>
```

</html>

result.xhtml ...

<h:body>

<h1>JSF 2 multi-select listbox example</h1>

<h2>result.xhtml</h2>

    <ol>
        <li>user.favFood1 : #{user.favFood1InString}</li>
        <li>user.favFood2 : #{user.favFood2InString}</li>
        <li>user.favFood3 : #{user.favFood3InString}</li>
    </ol>
</h:body>

</html>

=== デモ

image://wp-content/uploads/2010/10/jsf2-multi-select-listbox-example-1.png[jsf2-multi-select-listbox-example-1、title = "jsf2-multi-select-listbox -example-1 "、width = 624、height = 480]

"submit"ボタンをクリックすると、 "result.xhtml"ページにリンクし、送信された複数選択リストボックス値を表示します。

image://wp-content/uploads/2010/10/jsf2-multi-select-listbox-example-2.png[jsf2-multi-select-listbox-example-2、title = "jsf2-multi-select-listbox -example-2 "、width = 639、height = 411]

=== 複数のリストボックス値をあらかじめ選択する方法は？

"**  h:selectManyListbox ** "タグの "value"と一致する場合、 "**  f:selectItems ** "タグの値が選択されます。上記の例で、favFood1プロパティを "Fry Checken"と "Tomyam Soup"に設定した場合は、次のようになります。

@ManagedBean(name=”user”)
@SessionScoped
public class UserBean{

public String[]favFood1 = {"Fry Checken", "Tomyam Soup"};

//...

"favFood1"リストボックスの値、 "Fry Checken"、 "Tomyam Soup"がデフォルトで選択されています。

=== ソースコードをダウンロードする

ダウンロード - リンク://wp-content/uploads/2010/10/JSF-2-Multi-Select-Listbox-Example.zip[JSF-2-Multi-Select-Listbox-Example.zip]（10KB）

===== リファレンス

.  https://javaserverfaces.dev.java.net/nonav/docs/2.0/pdldocs/facelets/h/selectManyListbox.html[JSF

<h:selectManyListbox/> JavaDoc]。 http://www.w3schools.com/tags/att__select__multiple.asp

link://tag/jsf2/[jsf2]link://タグ/listbox/[listbox]

getdocs

13036