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

JSFはどうもIDEはNetBeansを使うのが相性が良いようです。

が、一旦Eclipseで勉強し始めたのでとことんEclipseでJSFの勉強をしようと思います。

「EclipseでJSFプロジェクトを作成する」で作成したプロジェクトでFaceletsタグを一通り使ってみます。

色々タグがあるようですが、まずタグを使うにはネームスペースを宣言しなければいけません。

<h:～～で始まるタグのネームスペース宣言は以下の通りです。

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">

1 2	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html">

以下はHTML構成要素として基本だと思うので一覧のみとします。

<h:head></h:head>	<head></head>
<h:body></h:body>	<body></body>
<h:form></h:form>	<form></form>

<h:inputText/>

まず<h:inputText/>タグですが1行だけのテキストボックスを表示します。

この入力部品はリクエストでビジネスロジックに渡せるので<h:form>～</h:form>内に記述するのが一般的だと思います。

以下、表示例です。

<h:inputTextarea/>

次に<h:inputTextarea/>タグですが、これは複数行のテキストエリアを表示します。

この入力部品も

リクエストでビジネスロジックに渡せるので<h:form>～</h:form>内に記述するのが一般的だと思います。

以下、表示例です。

<h:inputHidden/>

ウェブアプリケーションでよくあるhidden項目です。画面には表示したくないがビジネスロジックに渡したい時などによく利用します。

以下、表示例です。

hidden項目なので表示は何もされていませんがソースは以下のようにhidden項目が記述されるようです。

<input type="hidden" name="j_idt5:j_idt7" />

1	<input type="hidden" name="j_idt5:j_idt7" />

<h:outputText/>

h:outputTextは単にテキストを出力したい時に使用するようです。

<h:outputText value="テスト" />

1	<h:outputText value="テスト" />

以下、表示例です。

<h:outputLabel/>

h:outputTextと似ていますがソース上はlabel要素で囲まれます。

<h:outputLabel value="テスト" />

1	<h:outputLabel value="テスト" />

実際のソースは以下のように出力されます。

<span class="html-tag"><label></span>テスト<span class="html-tag"></label></span>

1	<span class="html-tag"><label></span>テスト<span class="html-tag"></label></span>

以下、表示例です。

<h:selectBooleanCheckbox/>

<h:selectBooleanCheckbox/>タグは1つのチェックボックスを表示します。

実際のソースは以下のように出力されます。

<input <span class="html-attribute-name">type</span>="<span class="html-attribute-value">checkbox</span>" <span class="html-attribute-name">name</span>="<span class="html-attribute-value">j_idt5:j_idt7</span>" />

1	<input <span class="html-attribute-name">type</span>="html-attribute-value">checkbox" <span class="html-attribute-name">name</span>="html-attribute-value">j_idt5:j_idt7" />

以下、表示例です。

<h:selectManyCheckbox></h:selectManyCheckbox>

<h:selectManyCheckbox>タグは、一つのタグでは作成できません。こういう複数選択するような入力部品はf:～～で始まるタグが必要になります。

ネームスペースを以下のように修正します。

<?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">

<?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">

これで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:selectManyCheckbox>
      <f:selectItem itemValue="1" itemLabel="Java"/>
      <f:selectItem itemValue="2" itemLabel="C"/>
      <f:selectItem itemValue="3" itemLabel="C#"/>
    </h:selectManyCheckbox>
  </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:selectManyCheckbox>

<f:selectItem itemValue="1" itemLabel="Java"/>

<f:selectItem itemValue="2" itemLabel="C"/>

<f:selectItem itemValue="3" itemLabel="C#"/>

</h:selectManyCheckbox>

</h:form>

</h:body>

</html>

以下、表示例です。

<h:commandButton/>

先ほど紹介した複数チェックボックスを別画面に遷移して表示したい場合、ボタンなどの入力部品で別画面に遷移します。それが<h:commandButton/>です。

また、画面遷移する際に複数チェックボックスをバッキングビーンとバインドするには配列を使用します。

まず、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:selectManyCheckbox value="#{tekito.lang}">
      <f:selectItem itemValue="1" itemLabel="Java"/>
      <f:selectItem itemValue="2" itemLabel="C"/>
      <f:selectItem itemValue="3" itemLabel="C#"/>
    </h:selectManyCheckbox>
    <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:selectManyCheckbox value="#{tekito.lang}">

<f:selectItem itemValue="1" itemLabel="Java"/>

<f:selectItem itemValue="2" itemLabel="C"/>

<f:selectItem itemValue="3" itemLabel="C#"/>

</h:selectManyCheckbox>

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

</h:form>

</h:body>

</html>

入力部品にバインドするバッキングビーン（Java）です。toString()をオーバーライドします。

Tekito001.java

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

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class Tekito001 {
  private Integer[] lang;

  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.inject.Named;

@Named

@RequestScoped

public class Tekito001 {

private Integer[] lang;

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";

}

遷移後画面の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>

以下、表示例です。

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

<f:selectItems/>

複数チェックボックスの際に<f:selectItem/>を使用しましたが<f:selectItems/>を指定することによってチェックボックスを複数作成することができます。

複数作成するにはバッキングビーンでLinkedHashMapを使用して作成します。

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:selectManyCheckbox value="#{tekito001.lang}">
      <f:selectItems value="#{tekito001.langs}"/>
    </h:selectManyCheckbox>
    <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:selectManyCheckbox value="#{tekito001.lang}">

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

</h:selectManyCheckbox>

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

</h:form>

</h:body>

</html>

1行で済むのですっきりします。

そのかわりバッキングビーンでチェックボックスを生成する必要があります。

以下、バッキングビーンです。

Tekito001.java

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

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class Tekito001 {
  private Integer[] lang;
  private static Map<String, Integer> langs;
  static {
    langs = new LinkedHashMap<String, Integer>();// 順序の関係でLinkedHashMapを使う事
    langs.put("Java",1);
    langs.put("C",2);
    langs.put("C#",3);
  }
  public Map<String, Integer> getLangs() {// getterのみ作成
    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 java.util.LinkedHashMap;

import java.util.Map;

import javax.enterprise.context.RequestScoped;

import javax.inject.Named;

@Named

@RequestScoped

public class Tekito001 {

private Integer[] lang;

private static Map<String, Integer> langs;

static {

langs = new LinkedHashMap<String, Integer>();// 順序の関係でLinkedHashMapを使う事

langs.put("Java",1);

langs.put("C",2);

langs.put("C#",3);

}

public Map<String, Integer> getLangs() {// getterのみ作成

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";

}

これでindex.xhtmlにアクセスします。

以下、表示例です。

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

SelectItemを使用してチェックボックスを作成する

複数チェックボックスを作成するにはSelectItem（javax.faces.model.SelectItem）を使用して作成する方法もあります。

というかこれが一般的かなと思います。

バッキングビーンのみを変更します。

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