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

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

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

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

<h:dataTable></h:dataTable>

<h:panelGrid>タグにちょっと似ているのですが、<h:dataTable>タグでもテーブルを作成することができます。

<h:dataTable>の属性にvalueがあり、バッキングビーンのリストや配列を指定します。varという属性はvalue属性のリストを取り出す値です。今回は「l」としています。

「#{l.name}」とすることで、リストに追加したPOJOのぷろぱてぃにあくせすすることができます。

以下、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:dataTable value="#{employee.employee}" var="l">
<h:column>#{l.name}</h:column>
<h:column>#{l.age}</h:column>
<h:column>#{l.birthday}</h:column>
</h:dataTable>
</h:body>
</html>

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

Employee.java

package jp.confrage;
import java.util.ArrayList;
import java.util.List;

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

@Named
@RequestScoped
public class Employee {

  private List<Tekito001> employee;
  {
    employee = new ArrayList<>();
    employee.add(new Tekito001("山田",new Integer(20),"2000/01/01"));
    employee.add(new Tekito001("田中",new Integer(21),"1999/01/02"));
  }

  public List<Tekito001> getEmployee() {
    return employee;
  }
  public void setEmployee(List<Tekito001> employee) {
    this.employee = employee;
  }

}

以下、Tekito001.java(POJO)です。

Tekito001.java

package jp.confrage;

public class Tekito001 {
private String name;
private Integer age;
private String birthday;

  public Tekito001(String name, Integer age, String birthday) {
    this.name = name;
    this.age = age;
    this.birthday = birthday;
  }
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }

  public Integer getAge() {
    return age;
  }
  public void setAge(Integer age) {
    this.age = age;
  }

  public String getBirthday() {
    return birthday;
  }
  public void setBirthday(String birthday) {
    this.birthday = birthday;
  }
}

これで表が表示されます。

以下、表示例です。

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

表示できましたがヘッダや罫線がないので見づらいですね。

ヘッダは<f:facet name=”header”></f:facet>で指定することができます。

<h:column>タグ内に記述します。

以下、ヘッダを追加した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:dataTable value="#{employee.employee}" var="l">
 <h:column>
 <f:facet name="header">名前</f:facet>
 #{l.name}
 </h:column>
 <h:column>
 <f:facet name="header">年齢</f:facet>
 #{l.age}
 </h:column>
 <h:column>
 <f:facet name="header">生年月日</f:facet>
 #{l.birthday}
 </h:column>
 </h:dataTable>
</h:body>
</html>

以下、表示例です。

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

FaceletsタグとHTML5

FaceletsタグとHTML5を連携することができます。

具体的にはp:html5の属性とするだけです。

ネームスペース宣言を以下のように追加します。

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

<h:inputText>タグに以下のようにp:タグでhtml5の属性を追加します。

<h:inputText p:type="date" value="tekito001.date" />

以下、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"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
</h:head>
<h:body>
<h:form>
<h:inputText p:type="date" value="tekito001.date" />
</h:form>
</h:body>
</html>

以下、表示例です。

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

その他、p:placeholder等も使えます。

以下、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"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
</h:head>
<h:body>
<h:form>
<h:inputText p:placeholder="テキストボックス" value="tekito001.date" />
</h:form>
</h:body>
</html>

以下、表示例です。

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA