UIコンポーネント

各種UIの前に、そのUIで使用できる《属性》から整理します。
※ 属性 = [name][value]等

属性には２種類あり、殆どのUIで使用できる一覧を以下にまとめます。

○ HTMLパススルー属性

style	インラインCSS
for	h:outputLabel や h:message で使用（ラベル使用時）
disabled	要素を非活性にする
readonly	要素を読取り専用にする
onclick	JavaScriptイベント
onchange	JavaScriptイベント
onblur	JavaScriptイベント
onfocus	JavaScriptイベント
onkeyup	JavaScriptイベント

○ Facesの制御用属性

id	コンポーネントの識別子
value	画面に表示する値、またはユーザーが入力した値を格納するバッキングビーンのプロパティを紐付けます
required	true に設定すると、必須入力項目になります
binding	コンポーネント自体をJavaのバックエンドコード（UIComponentオブジェクト）と直接紐付ける場合に使用
rendere	true または false（El式 #{...} で制御可能）。false にすると、HTML自体が出力されなくなります
converter	データの型変換（文字列から日付など）を行うクラスを指定します
validator	入力チェック（必須チェック、文字数制限など）を行うクラスを指定します
styleClass	HTMLの class 属性に変換されます

次に限定的なUIで使用できる一覧を以下にまとめます。

①	f:ajax	基本は「hタグ」にネストして使用
②	immediate="true"	form内のバリデーションをスキップ
③	action	ボタン押下時の実行するJavaメソッドを指定
③	actionListener	AJAX通信による画面遷移を伴わないイベント
④	type	ボタンの挙動切り替え（submit、button、reset）
⑤	globalOnly="true"	役割: 画面全体のサマリーに、「特定の入力項目に紐づかないシステムエラー（グローバルメッセージ）」だけを表示させる属性
⑤	showDetail	役割: エラーメッセージの「概要（Summary）」と「詳細（Detail）」のどちらを画面に出すかを true / false で制御します
⑥	showSummary	役割: エラーメッセージの「概要（Summary）」と「詳細（Detail）」のどちらを画面に出すかを true / false で制御します
⑥	infoClass	役割: メッセージの重大度（ログレベル）に応じて、適用するCSSクラスを自動で出し分けるための属性
⑥	warnClass	役割: メッセージの重大度（ログレベル）に応じて、適用するCSSクラスを自動で出し分けるための属性
⑥	errorClass	役割: メッセージの重大度（ログレベル）に応じて、適用するCSSクラスを自動で出し分けるための属性
⑥	fatalClass	役割: メッセージの重大度（ログレベル）に応じて、適用するCSSクラスを自動で出し分けるための属性
⑦	redisplay	役割: 画面がエラーなどで再描画された際、パスワード入力を画面に残すかどうか（true/false）を制御します

お待たせいたしました。以下がUI一覧となります。

	①	②	③	④	⑤	⑥	⑦
h:inputText	○	○	-	-	-	-	-	1行のテキスト入力
h:inputSecret	○	○	-	-	-	-	○	パスワード入力（文字が伏字になる）
h:inputTextarea	○	○	-	-	-	-	-	複数行のテキスト入力
h:inputHidden	-	○	-	-	-	-	-	画面には表示されない隠しデータの保持
h:inputFile	○	○	-	-	-	-	-	ファイルアップロード
h:form	-	-	-	-	-	-	-	入力値をサーバーに送信するためのフォーム外枠
h:commandButton	○	○	○	○	-	-	-	処理を実行したり画面を遷移させるボタン
h:commandLink	○	○	○	-	-	-	-	JavaScriptを使ってフォームを送信するリンク
h:outputText	-	-	-	-	-	-	-	バッキングビーンの値を画面にテキスト表示
h:outputLabel	-	-	-	-	-	-	○	入力項目に対するラベル（for 属性と連動）
h:outputLink	-	-	-	-	-	-	-	純粋なHTMLリンク（アクションを起こさない画面遷移）
h:graphicImage	-	-	-	-	-	-	-	画像の表示
h:message	-	-	-	-	○	-	○	特定のコンポーネントに対するエラーメッセージ表示
h:messages	-	-	-	○	○	-	○	画面内のすべてのエラーメッセージをまとめて表示
h:selectBooleanCheckbox	○	○	-	-	-	-	-	単一のチェックボックス（Boolean用）
h:selectManyCheckbox	○	○	-	-	-	-	-	複数選択可能なチェックボックス群
h:selectOneRadio	○	○	-	-	-	-	-	単一選択のラジオボタン群
h:selectOneMenu	○	○	-	-	-	-	-	プルダウンメニュー（単一選択）
h:selectManyListbox	○	○	-	-	-	-	-	リストボックス（複数選択）
h:head / h:body	-	-	-	-	-	-	-	ページ全体の外枠（リソース管理機能付き）
h:panelGrid	-	-	-	-	-	-	-	コンポーネントを格子状（グリッド）に自動配置
h:panelGroup	-	-	-	-	-	-	-	複数のコンポーネントを1つにグループ化
h:dataTable	-	-	-	-	-	-	-	リストデータをループ処理して表形式で出力
h:column	-	-	-	-	-	-	-	h:dataTable の中で列を定義する

「.js」「.css」「.png」等の静的ファイルは通常以下に設置します。
※後述する「各種UIコンポーネント（詳細）」でも参照しているため、設定するとより理解が深まります

○ src/main/webapp/resources/js/base.js

base.js

○ src/main/webapp/resources/img/bluesky_1.png

※任意の画像

○ src/main/webapp/resources/css/style.css

style.css

/* 角を10px丸くする */
.parts_text {
    border-radius: 6px;
    border: 1px solid #AAA;
}
.parts_text:hover {
    border-radius: 6px;
    border: 1px solid #CCC;
    box-shadow: 0 0 5px rgba(153, 141, 247, 0.5);
}
.parts_text:focus {
    border: none;
    outline:solid 1px #998df7;
}

/* ボタン */
.parts_button {
    padding: 7px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    background: #32CD32;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.parts_button:hover {
    border-radius: 15px;
    transform: scale(1.1);
    color: #FFF;
    background: #1E90FF;
}

/* セレクトボックス */
.parts_combo {
    font-size: 16px;
    padding:5px 5px 5px 5px;
    border-radius: 6px;
    border: 1px solid #AAA;
}
.parts_combo:hover {
    border-radius: 6px;
    border: 1px solid #CCC;
    box-shadow: 0 0 5px rgba(153, 141, 247, 0.5);
}
.parts_combo:focus {
    border: none;
    outline:solid 1px #998df7;
}

/* テーブルの挙動を「グリッド」に上書きする */
.grid-checkbox {
    display: grid !important;
    /* 3列に等分割 */
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
    width: 100%;
}

/* テーブルの行（tr）と中身（tbody）のレイアウト特性を無効化する */
.grid-checkbox tbody,
.grid-checkbox tr {
    display: contents !important;
}

/* チェックボックスと文字の間の隙間調整 */
.grid-checkbox td label {
    margin-left: 5px;
    cursor: pointer;
}

/* ラジオボタン */
input[type="radio"] {
    transform: scale(1.5);
    border: 10px solid #AAA;
}

『SampleBean.java』を以下の様に修正すると、次章で紹介するUIサンプルが機能します。

SampleBean.java

package view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import jakarta.annotation.PostConstruct;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import lombok.Getter;
import lombok.Setter;

@Named(value = "sampleBean")
@ViewScoped
public class SampleBean implements Serializable {
    private static final long serialVersionUID = 1L;
    @Getter
    @Setter
    private String name;
    @Getter
    @Setter
    private boolean agree;
    @Getter
    @Setter
    private List<String> myList = new ArrayList<>();
    @Getter
    private List<Object> userList = new ArrayList<>();

    // 画面が開かれたときに最初に1回だけ実行される初期化メソッド
    @PostConstruct
    public void init() {
        for(int i=0; i < 5; i++) {
            Map map = new HashMap<>();
            map.put("user", "ほげ");
            map.put("suuji", String.valueOf(i));
            userList.add(map);
        }

        System.out.println("バッキングビーンが初期化されました！");
        this.name = "初期値としての名前";
    }

    public void submit() {
        System.out.println("submitメソッドです。[" + this.name + "]が送信されました。");
    }
}