JSF 2ドロップダウンボックスの例

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

JSFでは、

<h:selectOneMenu/>

タグがドロップダウンボックスをレンダリングするために使用されます.HTML select要素は「

size = 1

」属性を持ちます。

….//JSF…
<h:selectOneMenu value=”#{user.favCoffee1}”>
<f:selectItem itemValue=”Cream Latte” itemLabel=”Coffee3 – Cream Latte”/>
<f:selectItem itemValue=”Extreme Mocha” itemLabel=”Coffee3 – Extreme Mocha”/>
<f:selectItem itemValue=”Buena Vista” itemLabel=”Coffee3 – Buena Vista”/>
</h:selectOneMenu>
<select name=”j

idt6:j

idt8″ size=”1″>
<option value=”Cream Latte”>Coffee3 – Cream Latte</option>
<option value=”Extreme Mocha”>Coffee3 – Extreme Mocha</option>
<option value=”Buena Vista”>Coffee3 – Buena Vista</option>
</select>

===  h:selectOneMenuの例

"**  h:selectOneMenu ** "タグを使用してドロップダウボックスをレンダリングし、3つの異なる方法でデータを取り込むJSF 2.0の例:

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

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

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

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

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

ドロップダウンボックス値のデータを保持および生成するバッキングBean。

package com.mkyong;

import java.io.Serializable;
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 favCoffee1;
public String favCoffee2;
public String favCoffee3;

public String getFavCoffee1() {
    return favCoffee1;
}

public void setFavCoffee1(String favCoffee1) {
    this.favCoffee1 = favCoffee1;
}

public String getFavCoffee2() {
    return favCoffee2;
}

public void setFavCoffee2(String favCoffee2) {
    this.favCoffee2 = favCoffee2;
}

public String getFavCoffee3() {
    return favCoffee3;
}

public void setFavCoffee3(String favCoffee3) {
    this.favCoffee3 = favCoffee3;
}

//Generated by Map
 private static Map<String,Object> coffee2Value;
 static{
     coffee2Value = new LinkedHashMap<String,Object>();
     coffee2Value.put("Coffee2 - Cream Latte", "Cream Latte");//label, value
     coffee2Value.put("Coffee2 - Extreme Mocha", "Extreme Mocha");
     coffee2Value.put("Coffee2 - Buena Vista", "Buena Vista");
 }

public Map<String,Object> getFavCoffee2Value() {
    return coffee2Value;
}

//Generated by Object array
 public static class Coffee{
     public String coffeeLabel;
     public String coffeeValue;

public Coffee(String coffeeLabel, String coffeeValue){
    this.coffeeLabel = coffeeLabel;
    this.coffeeValue = coffeeValue;
}

public String getCoffeeLabel(){
    return coffeeLabel;
}

public String getCoffeeValue(){
    return coffeeValue;
}

public Coffee[]coffee3List;

public Coffee[]getFavCoffee3Value() {

coffee3List = new Coffee[3];
coffee3List[0]= new Coffee("Coffee3 - Cream Latte", "Cream Latte");
coffee3List[1]= new Coffee("Coffee3 - Extreme Mocha", "Extreme Mocha");
coffee3List[2]= new Coffee("Coffee3 - Buena Vista", "Buena Vista");

return coffee3List;

}

===  2. JSFページ

"**  h:selectOneMenu ** "タグの使用方法を示す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 dropdown box example</h1>
<h:form>

Hard-coded with “f:selectItem” :
<h:selectOneMenu value=”#{user.favCoffee1}”>
<f:selectItem itemValue=”Cream Latte” itemLabel=”Coffee3 – Cream Latte”/>
<f:selectItem itemValue=”Extreme Mocha” itemLabel=”Coffee3 – Extreme Mocha”/>
<f:selectItem itemValue=”Buena Vista” itemLabel=”Coffee3 – Buena Vista”/>
</h:selectOneMenu>
```
<br/><br/>
```
Generated by Map :
<h:selectOneMenu value=”

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

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

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

{user.favCoffee3Value}” var=”c”
itemLabel=”

{c.coffeeLabel}” itemValue=”

{c.coffeeValue}”/>
</h:selectOneMenu>
```
<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 dropdown box example</h1>

        <h2>result.xhtml</h2>

        <ol>
            <li>user.favCoffee1 : #{user.favCoffee1}</li>
            <li>user.favCoffee2 : #{user.favCoffee2}</li>
            <li>user.favCoffee3 : #{user.favCoffee3}</li>
        </ol>
    </h:body>

</html>

デモ

jsf2-dropdown-example-1、title = "jsf2-dropdown-example-1"、width = 639、height = 411

「送信」ボタンをクリックすると、「result.xhtml」ページにリンクし、送信されたドロップダウンボックスの値を表示します。

f2-dropdown-example-2、title = "jsf2-dropdown-example-2"、width = 639、height = 366

ドロップダウンボックスの値をあらかじめ選択する方法は？

”

h:selectOneMenu

“タグの “value”に一致する場合、 ”

f:selectItems

“タグの値が選択されます。上記の例で、 “favCoffee1″プロパティを “Extreme Mocha”に設定した場合:

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

    public String favCoffee1 = "Extreme Mocha";

   //...

「favCoffee1」ドロップダウンボックスでは、デフォルトで「Extreme Mocha」という値が選択されています。

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

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

リファレンス

https://javaserverfaces.dev.java.net/nonav/docs/2.0/pdldocs/facelets/h/selectOneMenu.html

[JSF

<h:selectOneMenu/> JavaDoc]

リンク://タグ/ドロップダウン/[ドロップダウン]リンク://タグ/jsf2/[jsf2]

getdocs

13036