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 ...
<?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”
>
<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]