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

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

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

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

<h:panelGrid></h:panelGrid>

<h:panelGrid>タグはテーブルを作成します。

<h:dataTable>タグでもテーブルを作成できますが別の記事で記述します。

<h:panelGrid>の属性に行指定はありませんが列指定はあります。columnsという属性です。

以下、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:panelGrid columns="2" border="1">
言語1:<h:inputText value="#{tekito001.lang1}" />
言語2:<h:inputText value="#{tekito001.lang2}" />
言語3:<h:inputText value="#{tekito001.lang3}" />
</h:panelGrid>
</h:form>
</h:body>
</html>

columnsで列数を指定します。borderで罫線を表示します。

以下、表示例です。

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

<f:facet></f:facet>

<h:panelGrid>タグ内に<f:facet>タグを入れることによりヘッダ行を作成することができます。ヘッダの場合は、name=”header”属性を指定します。

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:panelGrid columns="2" border="1">
<f:facet name="header">得意な言語</f:facet>
言語1:<h:inputText value="#{tekito001.lang1}" />
言語2:<h:inputText value="#{tekito001.lang2}" />
言語3:<h:inputText value="#{tekito001.lang3}" />
</h:panelGrid>
</h:form>
</h:body>
</html>

以下、表示例です。

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

テーブル作成はできたのですが、よく見ると罫線が二重線になっています。

これを一重線にするには、<h:panelGrid>の属性にcellspacing=”0″を指定します。

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:panelGrid columns="2" border="1" cellspacing="0">
<f:facet name="header">得意な言語</f:facet>
言語1:<h:inputText value="#{tekito001.lang1}" />
言語2:<h:inputText value="#{tekito001.lang2}" />
言語3:<h:inputText value="#{tekito001.lang3}" />
</h:panelGrid>
</h:form>
</h:body>
</html>

以下、表示例です。

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

出来たと思ったら内部の罫線は二重線のままです。これを全部に適用するには、rules=”all”も指定する必要があるようです。

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:panelGrid columns="2" border="1" cellspacing="0" rules="all">
<f:facet name="header">得意な言語</f:facet>
言語1:<h:inputText value="#{tekito001.lang1}" />
言語2:<h:inputText value="#{tekito001.lang2}" />
言語3:<h:inputText value="#{tekito001.lang3}" />
</h:panelGrid>
</h:form>
</h:body>
</html>

これで内部も罫線が一重線になりました。

<h:inputText>タグを使用しているのでパッと見は二重線に見えてますが。

以下、表示例です。

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

<h:outputFormat>

<h:outputFormat>タグは{0}{1}のようなバインド変数を使用して文字列を置換することができる変わったタグです。

<h:outputFormat>タグ内では<f:param>を使用します。これが置換文字になります。

以下、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:outputFormat value="{0}と{1}">
<f:param value="Java"/>
<f:param value="c"/>
</h:outputFormat>
</h:form>
</h:body>
</html>

以下、表示例です。

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

<h:outputLabel></h:outputLabel>

<h:outputLabel>タグはラベルを出力するタグです。

ラベルは入力部品とセットなので、入力部品とセットで使用します。

セットにするには、<h:outputLabel>タグのfor属性値と、入力部品のid属性値を同じ値にします。

以下、<h:inputText>のラベルとして使用している例です。

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:outputLabel for="test">ラベル</h:outputLabel>
<h:inputText id="test"/>
</h:form>
</h:body>
</html>

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

<label for="j_idt4:test">ラベル</label><input id="j_idt4:test" type="text" name="j_idt4:test" />

以下、表示例です。

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

<h:grapchicImage/>

<h:grapchicImage/>タグは画像を出力するタグです。

Eclipseの以下場所にサンプルの画像を置きます。

JSFではwebapp配下にresourcesというフォルダを作成し、その配下に画像などを置きます。

resourcesフォルダをライブラリと言います。

プロジェクトの構成は以下画像の通りです。

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

resources配下にimageというフォルダを作成しています。その配下にimage1.PNGを置きました。

この画像を<h:grapchicImage/>タグを使って表示してみたいと思います。

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:graphicImage library="image" name="image1.PNG"/>
</h:form>
</h:body>
</html>

libraryにresources配下のフォルダ名を指定し、name属性に画像名を指定します。

以下、表示例です。

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

libraryとname属性を使う他にvalueやurl属性でも画像を表示できるようです。

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:graphicImage value="#{resource['image:image1.PNG']}"/><br/>
<h:graphicImage url="#{resource['image:image1.PNG']}"/>
</h:form>
</h:body>
</html>

以下、表示例です。

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

コメント

タイトルとURLをコピーしました