h:messageの使い方

JSF2.0

をつかってみる

これはメッセージを表示するためのタグ。
たとえば入力チェックのエラーメッセージだったり。

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html">
<h:head>
 <title>h:message</title>
</h:head>
<h:body>
<h:form>
  <h:message for="inputText"/>
  <br/>
  <h:inputText id="inputText" required="true" value="#{messageBean.inputText}"/>
  <br/>
  <h:commandButton action="#{messageBean.action}" value="button"/>
</h:form>
</h:body>

こんなxhtmlをつくってテキストボックスに何も入力されていない状態でボタンを押すと

j_idt6:inputText: 検証エラー: 値が必要です。

と表示されます。

for属性

h:messageを使う上でこの属性は必須です。
この属性はidを指定する属性で、上のxhtmlの場合はh:inputTextのid属性の値を設定しています。
すると、h:inputTextで発生したエラーとかのメッセージが表示されるようになります。

showDetail属性

入力チェックなどでメッセージを設定するときにsummaryとdetailを設定することができ、
detailに設定した内容を表示するかどうか。
booleanでデフォルトがtrue。

showSummary属性

入力チェックなどでメッセージを設定するときにsummaryとdetailを設定することができ、
summaryに設定した内容を表示するかどうか。
booleanでデフォルトがfalse。

tooltip属性

表示されたメッセージに対してツールチップを表示するかどうかの設定。
booleanでデフォルトはfalse。
条件としてshowSummary属性がtrueになっていないと
tooltip属性をtrueにしてもダメです。

errorClass、fatalClass、infoClass、warnClass属性

メッセージを設定する時にseverityとして、
・error
・fatal
・info
・warn
を設定することができ、それぞれの場合のときのClassが設定できる。

errorStyle、fatalStyle、infoStyle、warnStyle属性

メッセージを設定する時にseverityとして、
・error
・fatal
・info
・warn
を設定することができ、それぞれの場合のときのClassが設定できる。

他の属性については

ちょっと前に共通的な属性としてまとめているので、そっちを見てください。

メッセージの設定・・？

validatorとか作ってそこで設定したりするので
それについては後からまとめます。

h:commandButton の使い方

JSF2.0

をつかってみる。

htmlで<button>を使用したいときに使うタグ

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html">
<h:head>
 <title>h:commandButton</title>
</h:head>
<h:body>
<h:commandButton value="button"/>
</h:body>
</html>

↓出力結果

<html xmlns="http://www.w3.org/1999/xhtml"><head> 
 <title>h:commandButton</title></head><body><input type="submit" name="j_idt6" value="button" /></body> 
</html>
属性

いろいろ属性を設定することができますが、
あとで。

h:form　の使い方

JSF2.0

をつかってみる

htmlの<form>を使いたいときに使用するタグ

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html">
<h:head>
 <title>h:form</title>
</h:head>
<h:body>
  <h:form>
  </h:form>
</h:body>
</html>

普通に使うときは何の属性も設定しなくても良い。かも。。
↓出力結果

<html xmlns="http://www.w3.org/1999/xhtml"><head> 
 <title>h:form</title></head><body> 
<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" enctype="application/x-www-form-urlencoded"> 
<input type="hidden" name="j_idt6" value="j_idt6" /> 
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="654063665875284213:-400417663052271228" autocomplete="off" /> 
</form></body> 
</html>

出力結果をみても分かるとおりいろいろ勝手に必要な情報が出力されます。
"hidden"の<input>が2つ生成されてますが、これはJSFを動かすために必要な情報が勝手に出力されているのだとか。。

accept属性

MIME タイプを指定したりする属性。

<h:form accept="image/jpeg">
</h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" accept="image/jpeg" enctype="application/x-www-form-urlencoded">

複数設定したいときはカンマ区切りらしい。

acceptcharset属性

このフォームで使用できる文字コードを指定できる。

  <h:form acceptcharset="UTF-8">
  </h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded">

複数設定したいときはカンマ区切りらしい。

enctype属性

フォームでデータを送るときのエンコードタイプを指定できる。
デフォルトは"application/x-www-form-urlencoded"

  <h:form enctype="multipart/form-data">
  </h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" enctype="multipart/form-data">

target属性

<a>とかに使ったりするtarget属性と一緒
別windowとかで開きたいときとか使ったりします。

  <h:form target="_blank">
  </h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" enctype="application/x-www-form-urlencoded" target="_blank">

prependId属性

これなんだか分からないので実験
documentには

Flag indicating whether or not this form should prepend its id to its descendent's id during the clientId generation process. If this flag is not set, the default value is true.

google翻訳にお願いしてみた結果、日本語

フラグは、このフォームclientIdは生成プロセス中にIDがいるその子孫に、そのidを付加するかどうかを示す。このフラグが設定されていない場合、デフォルト値はtrueです。

日本語から分かったことは
・重要そう
・デフォルトはtrue
・idを付加するかどうか

またいろいろ調べてたら、フォームの中の要素があーだこーだかいてありました。
なので、まずはprependId属性をtrueで実行

  <h:form prependId="true">
    <h:inputText id="id"/>
  </h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" enctype="application/x-www-form-urlencoded"> 
<input type="hidden" name="j_idt6" value="j_idt6" /> 
<input id="j_idt6:id" type="text" name="j_idt6:id" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-5334207208270918163:4440497486920892556" autocomplete="off" /> 
</form>

次にprependId属性をfalseで実行

  <h:form prependId="false">
    <h:inputText id="id"/>
  </h:form>

↓出力結果

<form id="j_idt6" name="j_idt6" method="post" action="/jsfstudy/view/tag/form.jsf" enctype="application/x-www-form-urlencoded"> 
<input type="hidden" name="j_idt6" value="j_idt6" /> 
<input id="id" type="text" name="id" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="4746133946035856457:-3302799949423928232" autocomplete="off" /> 
</form>

どうやら内部的にformのid属性をその中のタグに付与するのがデフォルトで
falseにすると付与しませんってことらしい。

確かにjavascrptとかでgetElementByIdとかしてたらid変わっちゃうと動かないし、
CSSをid指定して適用できなくなっちゃう。

結構重要かもです。

h:inputText　の使い方

JSF2.0

をつかってみる。

テキストボックスを表示したいときに使用するタグ。

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html">
<h:head>
 <title>inputText</title>
</h:head>
<h:body>
  <h:inputText value="#{inputTextBean.inputText}"/>
</h:body>
</html>

@ManagedBean
public class InputTextBean {
    private String inputText="inputText";
    public String getInputText() {
        return inputText;
    }
    public void setInputText(String inputText) {
        this.inputText = inputText;
    }
}

テキストボックスの中にinputTextと表示されます。
↓出力結果

<html xmlns="http://www.w3.org/1999/xhtml"><head> 
 <title>inputText</title></head><body><input type="text" name="j_idt6" value="inputText" /></body> 
</html>

h:outputText　の使い方

JSF2.0

をつかってみる

出力系のタグ
おそらく基本中の基本っぽい

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html">
<h:head>
 <title>outputText</title>
</h:head>
<h:body>
<h:outputText value="#{outputTextBean.outputText}"/>
</h:body>
</html>

@ManagedBean
public class OutputTextBean {
    private String outputText = "outputText";
    public String getOutputText() {
        return outputText;
    }
    public void setOutputText(String outputText) {
        this.outputText = outputText;
    }
}

実行すると、outputTextと表示されます。
↓出力結果

<html xmlns="http://www.w3.org/1999/xhtml"><head> 
 <title>outputText</title></head><body>outputText</body> 
</html>

出力されたhtmlを見てみるとタグに囲まれること無くただoutputText出力されてます。

属性を設定すると・・・

タグに囲まれずに出力されましたが、h:outputTextにも属性を設定できます。
試しにid属性を設定してみると

<h:outputText value="#{outputTextBean.outputText}" id="id"/>

↓出力結果

<span id="id">outputText</span
>||<
<span>で囲まれました。

**つまり・・・？
タグで囲まずに文字を出力したいときにつかうタグ？
ただ属性を設定すると&lt;span&gt;になっちゃうので注意！？

*1286034000*[JSF2.0]タグの共通的な属性の使い方 その２
頻繁に見かける属性の使い方を勉強していく　その２です。

**escape属性
valueの値をescapeするかどうか。<とか>とかを&amp;lt;にしたり&amp;gt;にしたり
その他いろいろescapeするかどうかをbooleanで設定。
デフォルトはfalse。trueにするとescapeしてくれます。
>|xhtml|
<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  escape="true"
/>

on○○属性

たとえばonblur属性とかonclick属性とかのこと。
指定する値はjavasriptとかにすれば良いとおもいます。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  onclick="alert('onclick')"
/>

もしかしたらすごい使い方があるかもしれませんが今のところは
これしか分かりません。

style属性

cssを指定する属性。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  style="color: #ff0000;"
/>

こんな感じ。今回は文字色を赤にするのを書いてみました。
htmlのstyle属性と一緒です。

styleClass属性

これはclass属性を設定できるようです。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  styleClass="styleClass"
/>

↓出力結果

<label class="styleClass">output</label>

binding属性

どうやらHTMLを置き換えたいときに使うような気がします。
いろいろ調べてみたけど分からなかったので実験してみました。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  binding="#{outputLabelBean.htmlOutputLabel}"
/>

@ManagedBean
public class OutputLabelBean {
    private String outputLabel = "output";
    private HtmlOutputLabel htmlOutputLabel;
    public OutputLabelBean(){
        this.htmlOutputLabel = new HtmlOutputLabel();
        this.htmlOutputLabel.setValue("binding");
    }
    public String getOutputLabel() {
        return outputLabel;
    }
    public void setOutputLabel(String outputLabel) {
        this.outputLabel = outputLabel;
    }
    public HtmlOutputLabel getHtmlOutputLabel() {
        return htmlOutputLabel;
    }
    public void setHtmlOutputLabel(HtmlOutputLabel htmlOutputLabel) {
        this.htmlOutputLabel = htmlOutputLabel;
    }
}

this.htmlOutputLabel.setValue("binding");

ここで"binding"とセットしたのでhtmlには"binding"と出力されました。

元々設定していた"output"と言う文字は出力されませんでした。

ただ、this.htmlOutputLabel.setValue("binding");をコメントアウトしたら"output"と出力されました。

って事はbindingはhtmlを置き換えたいときつかうのかなぁと。

ただ、HtmlOutputLabelクラスをbindingできたけど、HtmlInputTextクラスでためしたら何も表示されなくなったので
同じスーパークラスをもってるのを設定してあげないとダメなのかなぁと。
まぁいろいろ試していこうと。。。

lang属性とtitle属性

documentには
lang属性

Code describing the language used in the generated markup for this component.

title属性

Advisory title information about markup elements generated for this component.

markupって書いてあったので一緒にまとめてみました。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  lang="ja"
  title="title"
/>

↓出力結果

<label xml:lang="ja" title="title">output</label>

lang属性はxhtml書くときはじめの方で指定しておけばよいような気がするのであんまり使わなそう。
title属性はとかに使うalt属性に似た感じとのこと。使うことはありそう。

タグの共通的な属性の使い方 その２

JSF2.0

頻繁に見かける属性の使い方を勉強していく　その２です。

escape属性

valueの値をescapeするかどうか。<とか>とかを&lt;にしたり&gt;にしたり
その他いろいろescapeするかどうかをbooleanで設定。
デフォルトはfalse。trueにするとescapeしてくれます。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  escape="true"
/>

on○○属性

たとえばonblur属性とかonclick属性とかのこと。
指定する値はjavasriptとかにすれば良いとおもいます。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  onclick="alert('onclick')"
/>

もしかしたらすごい使い方があるかもしれませんが今のところは
これしか分かりません。

style属性

cssを指定する属性。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  style="color: #ff0000;"
/>

こんな感じ。今回は文字色を赤にするのを書いてみました。
htmlのstyle属性と一緒です。

styleClass属性

これはclass属性を設定できるようです。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  styleClass="styleClass"
/>

↓出力結果

<label class="styleClass">output</label>

binding属性

どうやらHTMLを置き換えたいときに使うような気がします。
いろいろ調べてみたけど分からなかったので実験してみました。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  binding="#{outputLabelBean.htmlOutputLabel}"
/>

@ManagedBean
public class OutputLabelBean {
    private String outputLabel = "output";
    private HtmlOutputLabel htmlOutputLabel;
    public OutputLabelBean(){
        this.htmlOutputLabel = new HtmlOutputLabel();
        this.htmlOutputLabel.setValue("binding");
    }
    public String getOutputLabel() {
        return outputLabel;
    }
    public void setOutputLabel(String outputLabel) {
        this.outputLabel = outputLabel;
    }
    public HtmlOutputLabel getHtmlOutputLabel() {
        return htmlOutputLabel;
    }
    public void setHtmlOutputLabel(HtmlOutputLabel htmlOutputLabel) {
        this.htmlOutputLabel = htmlOutputLabel;
    }
}

this.htmlOutputLabel.setValue("binding");

ここで"binding"とセットしたのでhtmlには"binding"と出力されました。
元々設定していた"output"と言う文字は出力されませんでした。
ただ、this.htmlOutputLabel.setValue("binding");をコメントアウトしたら"output"と出力されました。

って事はbindingはhtmlを置き換えたいときつかうのかなぁと。
ただ、HtmlOutputLabelクラスをbindingできたけど、HtmlInputTextクラスでためしたら何も表示されなくなったので
同じスーパークラスをもってるのを設定してあげないとダメなのかなぁと。
まぁいろいろ試していこうと。。。

lang属性とtitle属性

documentには
lang属性

Code describing the language used in the generated markup for this component.

title属性

Advisory title information about markup elements generated for this component.

markupって書いてあったので一緒にまとめてみました。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  lang="ja"
  title="title"
/>

↓出力結果

<label xml:lang="ja" title="title">output</label>

lang属性はxhtml書くときはじめの方で指定しておけばよいような気がするのであんまり使わなそう。

title属性はとかに使うalt属性に似た感じとのこと。使うことはありそう。

タグの共通的な属性の使い方

JSF2.0

タグの勉強をしていく上で、頻繁に見かける属性の使い方。
使い道がわからないのはとりあえず無視。

converter属性

タグの値をconvertする。java.faces.convert.converterインターフェースをimplementsしているクラス
を作って設定する。

とりあえず大文字に変換するconverterを作成。

@FacesConverter(value="toUpperCase")
public class ToUpperCaseConverter implements Converter{
    @Override
    public Object getAsObject(FacesContext context, UIComponent component, String value) {
        return value != null ? value.toUpperCase() : null;
    }
    @Override
    public String getAsString(FacesContext context, UIComponent component, Object value) {
        return value != null ? value.toString().toUpperCase() : null;
    }
}

<h:body>
<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  converter="toUpperCase"
/>
</h:body>

そしてh:outputLabelのconverter属性にアノテーションのvalueに設定した文字列を設定

するとOUTPUTと表示されました。

以前は設定ファイル(faces-config.xml)にconverter-idなるものを記述したらしいのですが
JSF2.0ではアノテーションを書くだけでよいらしい。
converterの場合は

@FacesConverter(value="[converter-id]")

こんな感じ

id属性

id属性に指定した値がそのままid属性で出力されます。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  id="id"
/>

↓出力結果

<label id="id">output</label>

rendered属性

booleanで設定します。falseにすると出力されなくなります。
デフォルトはtrueです。

<h:outputLabel
  value="#{outputLabelBean.outputLabel}"
  rendered="false"
/>
残り

近いうちにつづきをやります。