Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました（４）
Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました（１）
Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました（２）
Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました（３）の続きです。
<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;
}
}これで表が表示されます。
以下、表示例です。
表示できましたがヘッダや罫線がないので見づらいですね。
ヘッダは<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>以下、表示例です。
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>以下、表示例です。
その他、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>以下、表示例です。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
資格：少額短期保険募集人,FP3級,宅建士
コメント