Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました（２）

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました（１）の続きです。

<h:selectOneRadio>

<h:selectOneRadio>は複数のラジオボタンから一つだけを選ぶ入力部品です。

このタグも、タグ内で<f:selectItems/>を使用します。

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
  <h:form>
    <h:selectOneRadio value="#{tekito001.lang}">
      <f:selectItems value="#{tekito001.langs}"/>
    </h:selectOneRadio >
    <h:commandButton action="#{tekito001.submit()}" value="送信" />
  </h:form>
</h:body>
</html>

<?xml version='1.0' encoding='UTF-8' ?>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

</h:head>

<h:body>

<h:form>

<h:selectOneRadio value="#{tekito001.lang}">

<f:selectItems value="#{tekito001.langs}"/>

</h:selectOneRadio >

<h:commandButton action="#{tekito001.submit()}" value="送信" />

</h:form>

</h:body>

</html>

以下、SelectItemを使用したバッキングビーンです。チェックボックスと異なり、一つしか選べない為、lang変数はInteger[]ではなくInteger型になっています。

Tekito001.java

package jp.confrage;
import javax.enterprise.context.RequestScoped;
import javax.faces.model.SelectItem;
import javax.inject.Named;

@Named
@RequestScoped
public class Tekito001 {
  private Integer lang;
  private static SelectItem[] langs = {
    new SelectItem(1, "Java"),
    new SelectItem(2, "C"),
    new SelectItem(3, "C#")
  };

  public SelectItem[] getLangs() {
    return langs;
  }
  public Integer getLang() {
    return lang;
  }
  public void setLang(Integer lang) {
    this.lang = lang;
  }

  public String submit(){
    return "out.xhtml";
  }
}

package jp.confrage;

import javax.enterprise.context.RequestScoped;

import javax.faces.model.SelectItem;

import javax.inject.Named;

@Named

@RequestScoped

public class Tekito001 {

private Integer lang;

private static SelectItem[] langs = {

new SelectItem(1, "Java"),

new SelectItem(2, "C"),

new SelectItem(3, "C#")

};

public SelectItem[] getLangs() {

return langs;

}

public Integer getLang() {

return lang;

}

public void setLang(Integer lang) {

this.lang = lang;

}

public String submit(){

return "out.xhtml";

}

これで送信ボタンを押します。

以下、表示例です。

以下、送信ボタン押下後の表示例です。

<h:selectOneListbox>

<h:selectOneListbox>タグは複数のリストボックスから一つだけを選ぶ入力部品です。

このタグも、タグ内で<f:selectItems/>を使用します。

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form>
<h:selectOneListbox value="#{tekito001.lang}">
<f:selectItems value="#{tekito001.langs}" />
</h:selectOneListbox>
<h:commandButton action="#{tekito001.submit()}" value="送信" />
</h:form>
</h:body>
</html>

<?xml version='1.0' encoding='UTF-8' ?>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

</h:head>

<h:body>

<h:form>

<h:selectOneListbox value="#{tekito001.lang}">

<f:selectItems value="#{tekito001.langs}" />

</h:selectOneListbox>

<h:commandButton action="#{tekito001.submit()}" value="送信" />

</h:form>

</h:body>

</html>

以下、SelectItemを使用したバッキングビーンです。バッキングビーンは<h:selectOneRadio>の時と変わりません。

Tekito001.java

package jp.confrage;
import javax.enterprise.context.RequestScoped;
import javax.faces.model.SelectItem;
import javax.inject.Named;

@Named
@RequestScoped
public class Tekito001 {
  private Integer lang;
  private static SelectItem[] langs = {
    new SelectItem(1, "Java"),
    new SelectItem(2, "C"),
    new SelectItem(3, "C#")
  };

  public SelectItem[] getLangs() {
    return langs;
  }
  public Integer getLang() {
    return lang;
  }
  public void setLang(Integer lang) {
    this.lang = lang;
  }

  public String submit(){
    return "out.xhtml";
  }
}

package jp.confrage;

import javax.enterprise.context.RequestScoped;

import javax.faces.model.SelectItem;

import javax.inject.Named;

@Named

@RequestScoped

public class Tekito001 {

private Integer lang;

private static SelectItem[] langs = {

new SelectItem(1, "Java"),

new SelectItem(2, "C"),

new SelectItem(3, "C#")

};

public SelectItem[] getLangs() {

return langs;

}

public Integer getLang() {

return lang;

}

public void setLang(Integer lang) {

this.lang = lang;

}

public String submit(){

return "out.xhtml";

}

以下、表示例です。

以下、送信ボタン押下後の表示例です。

<h:selectOneMenu>

<h:selectOneMenu>タグはメニュー形式の表示部品で、その中から一つだけを選ぶ入力部品です。

このタグも、タグ内で<f:selectItems/>を使用します。

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form>
<h:selectOneMenu value="#{tekito001.lang}">
<f:selectItems value="#{tekito001.langs}" />
</h:selectOneMenu>
<h:commandButton action="#{tekito001.submit()}" value="送信" />
</h:form>
</h:body>
</html>

<?xml version='1.0' encoding='UTF-8' ?>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

</h:head>

<h:body>

<h:form>

<h:selectOneMenu value="#{tekito001.lang}">

<f:selectItems value="#{tekito001.langs}" />

</h:selectOneMenu>

<h:commandButton action="#{tekito001.submit()}" value="送信" />

</h:form>

</h:body>

</html>

以下、SelectItemを使用したバッキングビーンです。バッキングビーンは<h:selectOneRadio>の時と変わりません。

Tekito001.java

package jp.confrage;
import javax.enterprise.context.RequestScoped;
import javax.faces.model.SelectItem;
import javax.inject.Named;

@Named
@RequestScoped
public class Tekito001 {
  private Integer lang;
  private static SelectItem[] langs = {
    new SelectItem(1, "Java"),
    new SelectItem(2, "C"),
    new SelectItem(3, "C#")
  };

  public SelectItem[] getLangs() {
    return langs;
  }
  public Integer getLang() {
    return lang;
  }
  public void setLang(Integer lang) {
    this.lang = lang;
  }

  public String submit(){
    return "out.xhtml";
  }
}

package jp.confrage;

import javax.enterprise.context.RequestScoped;

import javax.faces.model.SelectItem;

import javax.inject.Named;

@Named

@RequestScoped

public class Tekito001 {

private Integer lang;

private static SelectItem[] langs = {

new SelectItem(1, "Java"),

new SelectItem(2, "C"),

new SelectItem(3, "C#")

};

public SelectItem[] getLangs() {

return langs;

}

public Integer getLang() {

return lang;

}

public void setLang(Integer lang) {

this.lang = lang;

}

public String submit(){

return "out.xhtml";

}

以下、表示例です。

以下、送信ボタン押下後の表示例です。

デフォルト表示は空白にする

メニューボックスでデフォルト表示を空白にし、空白を選んで送信を押下した場合はエラーとするようにすることができます。

まず、<f:selectItem/>を1行追加します。noSelectionOption=”true”も追加します。

<f:selectItem itemLabel="" noSelectionOption="true"/>

1	<f:selectItem itemLabel="" noSelectionOption="true"/>

また、<h:selectOneMenu/>に、required=”true”を追加します。

<h:selectOneMenu value="#{tekito001.lang}" required="true">

1	<h:selectOneMenu value="#{tekito001.lang}" required="true">

上記をindex.xhtmlに反映します。

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
  <h:form>
    <h:selectOneMenu value="#{tekito001.lang}" required="true">
      <f:selectItem itemLabel="" noSelectionOption="true"/>
      <f:selectItems value="#{tekito001.langs}" />
    </h:selectOneMenu>
    <h:commandButton action="#{tekito001.submit()}" value="送信" />
  </h:form>
</h:body>
</html>

<?xml version='1.0' encoding='UTF-8' ?>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

</h:head>

<h:body>

<h:form>

<h:selectOneMenu value="#{tekito001.lang}" required="true">

<f:selectItem itemLabel="" noSelectionOption="true"/>

<f:selectItems value="#{tekito001.langs}" />

</h:selectOneMenu>

<h:commandButton action="#{tekito001.submit()}" value="送信" />

</h:form>

</h:body>

</html>

これでバッキングビーンは変更せずにhttp://localhost:8080/Test001/faces/index.xhtmlにアクセスします。

以下、表示例です。

空白を表示したまま送信ボタン押下します。

このように検証エラーが出て画面遷移されなくなります。

<h:selectManyMenu>

<h:selectManyMenu>タグは、メニュー形式の入力部品で、その中から複数選択できる入力部品です。

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form>
<h:selectManyMenu value="#{tekito001.lang}">
<f:selectItems value="#{tekito001.langs}" />
</h:selectManyMenu>
<h:commandButton action="#{tekito001.submit()}" value="送信" />
</h:form>
</h:body>
</html>

<?xml version='1.0' encoding='UTF-8' ?>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

</h:head>

<h:body>

<h:form>

<h:selectManyMenu value="#{tekito001.lang}">

<f:selectItems value="#{tekito001.langs}" />

</h:selectManyMenu>

<h:commandButton action="#{tekito001.submit()}" value="送信" />

</h:form>

</h:body>

</html>

この入力部品はブラウザによって表示方法が異なるようです。

なので使わないのが無難ですが、PrimeFacesというjarにはこのタグがあるのでそちらを使用した方が良いかもしれません。PrimeFacesについては別の記事で書きます。

ctrlを押しながらクリックすると複数選択できるので、バッキングビーンは配列にする必要があります。

Tekito001.java

package jp.confrage;
import java.util.Arrays;

import javax.enterprise.context.RequestScoped;
import javax.faces.model.SelectItem;
import javax.inject.Named;

@Named
@RequestScoped
public class Tekito001 {
  private Integer[] lang;// 複数選択できるので配列にする
  private static SelectItem[] langs = {
    new SelectItem(1, "Java"),
    new SelectItem(2, "C"),
    new SelectItem(3, "C#")
  };

  public SelectItem[] getLangs() {
    return langs;
  }
  public Integer[] getLang() {
    return lang;
  }
  public void setLang(Integer[] lang) {
    this.lang = lang;
  }

  @Override
  public String toString() {
    return Arrays.toString(lang);
  }
  public String submit(){
    return "out.xhtml";
  }
}

package jp.confrage;

import java.util.Arrays;

import javax.enterprise.context.RequestScoped;

import javax.faces.model.SelectItem;

import javax.inject.Named;

@Named

@RequestScoped

public class Tekito001 {

private Integer[] lang;// 複数選択できるので配列にする

private static SelectItem[] langs = {

new SelectItem(1, "Java"),

new SelectItem(2, "C"),

new SelectItem(3, "C#")

};

public SelectItem[] getLangs() {

return langs;

}

public Integer[] getLang() {

return lang;

}

public void setLang(Integer[] lang) {

this.lang = lang;

}

@Override

public String toString() {

return Arrays.toString(lang);

}

public String submit(){

return "out.xhtml";

}

遷移後の画面も変更する必要があります。

toString()メソッドを表示します。

out.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
<h2>結果</h2>
あなたの得意言語：<h:outputText value="#{tekito001.toString()}"/><br/>
</h:body>
</html>

<?xml version='1.0' encoding='UTF-8' ?>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html">

<h:head>

</h:head>

<h:body>

あなたの得意言語：<h:outputText value="#{tekito001.toString()}"/><br/>

</h:body>

</html>

以下、表示例です。

送信ボタン押下後の遷移画面です。

<h:selectManyListbox>

<h:selectManyListbox>タグは、複数のリストボックスから複数を選択できる入力部品です。

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form>
<h:selectManyListbox value="#{tekito001.lang}">
<f:selectItems value="#{tekito001.langs}" />
</h:selectManyListbox>
<h:commandButton action="#{tekito001.submit()}" value="送信" />
</h:form>
</h:body>
</html>

<?xml version='1.0' encoding='UTF-8' ?>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

</h:head>

<h:body>

<h:form>

<h:selectManyListbox value="#{tekito001.lang}">

<f:selectItems value="#{tekito001.langs}" />

</h:selectManyListbox>

<h:commandButton action="#{tekito001.submit()}" value="送信" />

</h:form>

</h:body>

</html>

バッキングビーンは<h:selectManyMenu>タグで使用したものと変更していません。

ともに複数選択できるからです。

Tekito001.java

package jp.confrage;
import java.util.Arrays;

import javax.enterprise.context.RequestScoped;
import javax.faces.model.SelectItem;
import javax.inject.Named;

@Named
@RequestScoped
public class Tekito001 {
  private Integer[] lang;// 複数選択できるので配列にする
  private static SelectItem[] langs = {
    new SelectItem(1, "Java"),
    new SelectItem(2, "C"),
    new SelectItem(3, "C#")
  };

  public SelectItem[] getLangs() {
    return langs;
  }
  public Integer[] getLang() {
    return lang;
  }
  public void setLang(Integer[] lang) {
    this.lang = lang;
  }

  @Override
  public String toString() {
    return Arrays.toString(lang);
  }
  public String submit(){
    return "out.xhtml";
  }
}

package jp.confrage;

import java.util.Arrays;

import javax.enterprise.context.RequestScoped;

import javax.faces.model.SelectItem;

import javax.inject.Named;

@Named

@RequestScoped

public class Tekito001 {

private Integer[] lang;// 複数選択できるので配列にする

private static SelectItem[] langs = {

new SelectItem(1, "Java"),

new SelectItem(2, "C"),

new SelectItem(3, "C#")

};

public SelectItem[] getLangs() {

return langs;

}

public Integer[] getLang() {

return lang;

}

public void setLang(Integer[] lang) {

this.lang = lang;

}

@Override

public String toString() {

return Arrays.toString(lang);

}

public String submit(){

return "out.xhtml";

}

遷移後の画面も変更する必要があります。

toString()メソッドを表示します。

out.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
<h2>結果</h2>
あなたの得意言語：<h:outputText value="#{tekito001.toString()}"/><br/>
</h:body>
</html>