最終投稿日：2026年07月19日
<h:head id="sampleHead"> ～ </h:head>
ID属性名を付与する事ができます。
主に「JavaScript（Ajax）を使って、特定の部分だけを書き換えることができます。
<h:outputStylesheet library="css" name="style.css" />
<h:outputScript library="js" name="base.js" />
<h:form id="hoge" enctype="multipart/form-data" prependId="false">
</h:form>
<form id="hoge" name="hoge" method="post" action="/jakaruta-pj/sample.xhtml" enctype="multipart/form-data">
</form>
jacarutaの特性として『method="post" action="{自画面}"』は必須です。
これは「sample.xhtml」「SampleBean.java」が密接な関係にあるためです。
<h:inputText id="inpText" value="#{sampleBean.name}" styleClass="parts_text" style="width:300px;height:25px;" />
<input id="inpText" type="text" name="inpText" value="初期値としての名前" class="parts_text" style="width:300px;height:25px;" />
[id][name]属性の値に何やら不思議な文字『j_idt6:』が接頭辞の様に付与されています。
これは《form》タグの『ID属性値』です。
そんな値を設定した覚えはないと思いますが、そもそも[form]タグに[id]を指定していません。
この場合はシステムが勝手にランダムに値を決めてしまいます。
<input id="hoge:inpText" ... また、接頭辞自体不要の場合は『<form id="hoge" prependId="false">』とする事で適用できます。
<h:inputTextarea id="area" value="#{sampleBean.name}" styleClass="parts_text" style="width: 300px; height: 150px; resize: none;" />
<textarea id="area" name="area" class="parts_text" style="width: 300px; height: 150px; resize: none;">
初期値としての名前
</textarea>
<h:inputFile id="file" value="#{sampleBean.name}" />
<input id="file" type="file" name="file" />
ファイルを扱う場合『<form enctype="multipart/form-data">』とします。
描画結果に『value="#{sampleBean.name}"』はありませんが、
JAVA側でアップロードファイルを処理するため必要な属性となります。
<h:outputText id="outText" value="#{sampleBean.name}" />
<span id="outText">初期値としての名前</span>
<h:outputLabel for="inpText" value="ユーザー名：" />
<label for="inpText">ユーザー名：</label>
※「id = "inpText"」のUIと紐付く
<h:graphicImage library="img" name="bluesky_1.png" alt="SNSロゴ" />
<img src="/jakaruta-pj/jakarta.faces.resource/bluesky_1.png.xhtml?ln=img" alt="SNSロゴ" />
<h:outputStylesheet library="css" name="style.css" />
<link rel="stylesheet" href="/jakaruta-pj/jakarta.faces.resource/style.css.xhtml?ln=css" />
<h:outputScript library="js" name="base.js" />
<script src="/jakaruta-pj/jakarta.faces.resource/base.js.xhtml?ln=js"></script>
<h:commandLink id="link_1" value="詳細ページへ移動する" action="#{sampleBean.submit()}" />
<a id="link_1" href="#" onclick="mojarra.cljs(document.getElementById('hoge'),{'link_1':'link_1'},'');return false">詳細ページへ移動する</a>
描画結果の『link_1』は、自身のタグのIDです。
『hoge』は『<h:form id="hoge">』の部分です。
クリックすると『action="#{sampleBean.submit()}"』へ処理が渡されます。
また、引数のない関数の場合「()」は省略する事が可能です。
<h:link id="get_link" value="nextへ(GET)" outcome="next">
<f:param name="hoge" value="123" />
<f:param name="foo" value="987" />
</h:link>
<a id="get_link" name="get_link" href="/jakaruta-pj/next.xhtml?hoge=123&foo=987">nextへ(GET)</a>
『<f:param name="hoge" value="123" />』で、リンクにGETパラメータを付与できます。
また「f」タグを利用する場合は、HTMLタグに以下宣言が必要です。
『xmlns:f="jakarta.faces.core"』
<h:outputLink value="https://reidream.net" target="_blank">
[ReiDream]へ
</h:outputLink>
<a href="https://reidream.net" target="_blank">
[ReiDream]へ
</a>
<h:selectBooleanCheckbox id="agree_no_check" value="#{sampleBean.agree}" />
<h:outputLabel for="agree_no_check" value="同意する。" />
<input id="agree_no_check" type="checkbox" name="agree_no_check" />
<label for="agree_no_check">同意する。</label>
<h:selectBooleanCheckbox id="agree_check" value="#{sampleBean.agree}">
<f:ajax execute="@this" render="msg_area" />
</h:selectBooleanCheckbox>
<h:panelGroup id="msg_area">
<h:outputText value="同意されています！" rendered="#{sampleBean.agree}" style="color:green;font-weight: bold;" />
<h:outputText value="同意されていません。" rendered="#{not sampleBean.agree}" style="color:red;font-weight: bold;" />
</h:panelGroup>
<input id="agree_check" type="checkbox" name="agree_check" onclick="mojarra.ab(this,event,'valueChange','@this','msg_area')" />
<span id="msg_area">
<span style="color:red;font-weight: bold;">同意されていません。</span>
</span>
AJAX処理により変数『agree』の値を変更し、結果メッセージの内容が変化します。
また「f」タグを利用する場合は、HTMLタグに以下宣言が必要です。
『xmlns:f="jakarta.faces.core"』
<div style="width:400px;">
<h:selectManyCheckbox id="chk_list" value="#{sampleBean.myList}" styleClass="grid-checkbox">
<f:selectItem itemValue="1" itemLabel="読書" />
<f:selectItem itemValue="2" itemLabel="映画" />
<f:selectItem itemValue="3" itemLabel="洗濯" />
<f:selectItem itemValue="4" itemLabel="旅行" />
<f:selectItem itemValue="5" itemLabel="賭博" />
</h:selectManyCheckbox>
</div>
<div style="width:400px;">
<table id="chk_list" class="grid-checkbox">
<tr>
<td><input name="chk_list" id="chk_list:0" value="1" type="checkbox" /><label for="chk_list:0" class=""> 読書</label></td>
<td><input name="chk_list" id="chk_list:1" value="2" type="checkbox" /><label for="chk_list:1" class=""> 映画</label></td>
<td><input name="chk_list" id="chk_list:2" value="3" type="checkbox" /><label for="chk_list:2" class=""> 洗濯</label></td>
<td><input name="chk_list" id="chk_list:3" value="4" type="checkbox" /><label for="chk_list:3" class=""> 旅行</label></td>
<td><input name="chk_list" id="chk_list:4" value="5" type="checkbox" /><label for="chk_list:4" class=""> 賭博</label></td>
</tr>
</table>
</div>
サンプルの『layout="plain" styleClass="grid-checkbox"』ですが、
縦並びする場合は『layout="pageDirection"』とし、[grid-checkbox]も不要です。
そこで[style]属性で強引にレイアウトを整えます。
※『class="grid-checkbox"』の部分で制御しています
<h:selectOneRadio id="my_youbi" value="#{sampleBean.name}">
<f:selectItem itemValue="1" itemLabel="月曜日" />
<f:selectItem itemValue="2" itemLabel="火曜日" />
<f:selectItem itemValue="3" itemLabel="水曜日" />
<f:selectItem itemValue="4" itemLabel="木曜日" />
<f:selectItem itemValue="5" itemLabel="金曜日" />
<f:selectItem itemValue="6" itemLabel="土曜日" />
<f:selectItem itemValue="7" itemLabel="日曜日" />
</h:selectOneRadio>
<table id="my_youbi">
<tr>
<td><input type="radio" name="my_youbi" id="my_youbi:0" value="1" /><label for="my_youbi:0"> 月曜日</label></td>
<td><input type="radio" name="my_youbi" id="my_youbi:1" value="2" /><label for="my_youbi:1"> 火曜日</label></td>
<td><input type="radio" name="my_youbi" id="my_youbi:2" value="3" /><label for="my_youbi:2"> 水曜日</label></td>
<td><input type="radio" name="my_youbi" id="my_youbi:3" value="4" /><label for="my_youbi:3"> 木曜日</label></td>
<td><input type="radio" name="my_youbi" id="my_youbi:4" value="5" /><label for="my_youbi:4"> 金曜日</label></td>
<td><input type="radio" name="my_youbi" id="my_youbi:5" value="6" /><label for="my_youbi:5"> 土曜日</label></td>
<td><input type="radio" name="my_youbi" id="my_youbi:6" value="7" /><label for="my_youbi:6"> 日曜日</label></td>
</tr>
</table>
※要素の制御は『h:selectManyCheckbox』と同じです
<h:panelGrid columns="2" border="1">
<h:outputLabel value="名前" />
<h:inputText value="#{sampleBean.name}" />
<h:outputLabel value="性別" />
<h:panelGroup>
<h:selectOneRadio value="#{sampleBean.name}">
<f:selectItem itemValue="1" itemLabel="男" />
<f:selectItem itemValue="2" itemLabel="女" />
</h:selectOneRadio>
</h:panelGroup>
</h:panelGrid>
<table border="1">
<tbody>
<tr>
<td><label>名前</label></td>
<td><input type="text" name="j_idt77" value="初期値としての名前" /></td>
</tr>
<tr>
<td><label>性別</label></td>
<td>
<table>
<tr>
<td>
<input type="radio" name="j_idt80" id="j_idt80:0" value="1" /><label for="j_idt80:0"> 男</label>
</td>
<td>
<input type="radio" name="j_idt80" id="j_idt80:1" value="2" /><label for="j_idt80:1"> 女</label>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<h:dataTable value="#{sampleBean.userList}" var="user" binding="#{myTable}" border="1">
<h:column>
<f:facet name="header">行数</f:facet>
#{myTable.rowIndex + 1}
</h:column>
<h:column>
<f:facet name="header">user</f:facet>
#{user.user}
</h:column>
<h:column>
<f:facet name="header">suuti</f:facet>
#{user.suuji}
</h:column>
</h:dataTable>
<table border="1">
<thead>
<tr>
<th scope="col">行数</th>
<th scope="col">user</th>
<th scope="col">suuti</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ほげ</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>ほげ</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>ほげ</td>
<td>2</td>
</tr>
</tbody>
</table>
項目「行数」はDBの値ではなく、実際の一覧表の行数となります。
これを実現するために『binding="#{myTable}"』と定義し、表全体を「myTable」オブジェクトでバインドします。
すると『myTable.rowIndex』で描画している行数が取得できます。
<h:message id="reqText_message" for="reqText" style="color:red;font-weight:bold;display: block;" />
<h:inputText id="reqText" value="#{sampleBean.name}" required="true" requiredMessage="ユーザー名を入力してください！" />
<span id="reqText_message"></span>
<input id="reqText" type="text" name="reqText" value="初期値としての名前" />
<span id="reqText_message" style="color:red;font-weight:bold;display: block;">
ユーザー名を入力してください！
</span>
<input id="reqText" type="text" name="reqText" value="" />
複数のUIの属性に『required="true" requiredMessage="エラー内容"』を追記してみて下さい。
<h:messages globalOnly="false" showSummary="true" showDetail="false" style="color:red;font-weight:bold;list-style-type:square;" />
<ul style="color:red;font-weight:bold;list-style-type:square;">
<li>男女を選択してください。 </li>
<li>ユーザー名を入力してください！</li>
</ul>
エラーの中黒点を消したい場合は、style部を『list-style-type:none;』に変更してください。
[globalOnly="true"]は、全てのエラーを出力しますが、[false]とすると、
Java側で『context.addMessage(null, ...)』と、第１引数を[null]にしたエラーのみ表示となる。
[showSummary="true"][showDetail="false"]は、エラー《概要|詳細》のどちらを表示するかの設定です。
Java側で『new FacesMessage("サマリー", "ディテール")』と設定できたりします。
<h:form>
<h:commandButton value="下書き" action="#{sampleBean.submit()}">
<f:param name="actionType" value="DRAFT" />
</h:commandButton>
<h:commandButton value="送信して保存" action="#{sampleBean.submit()}">
<f:param name="actionType" value="SAVE" />
</h:commandButton>
</h:form>
public String submit() {
// リクエストパラメータから "actionType" を取得
String actionType = FacesContext.getCurrentInstance()
.getExternalContext().getRequestParameterMap().get("actionType");
}
<head id="indexHead"> ～ </head>