アプリ開発ときどきアウトドア

主にJavaを使ったアプリ開発やトラブルシューティング等のノウハウ、キャンプや登山の紹介や体験談など。

1. システムエンジニアリング JavaEE7 実装技術

JSFラジオボタン・チェックボックスとbootstrap

投稿日:2019年6月30日 更新日:

boostrapでラジオボタンやチェックボックスを使用する場合、div, input, label要素にbootstrapのCSSクラスを指定する必要がある。
JSFでラジオボタンを使用する場合、selectOneRadio, selectBooleanCheckbox, selectManyCheckbox等を使用するが、これらのJSF要素が出力するHTML要素のコントロールができず、上記のようなCSSクラスを指定することは難しい。
ここでは、javascript(jQuery)とJSFのinputHiddenを使った方法を説明する。

方式

  • ラジオボタンやチェックボックスは通常のHTMLで実現し、bootstrapのCSSクラスを指定する。ページ表示時やサブミット時にjavascript(jQuery)で、ラジオボタンやチェックボックスの値をJSFのinputHidden要素の格納する。
  • inputHiddenの値は選択されたラジオボタンやチェックボックスの値をカンマ区切りで格納する。
  • ページ表示時、ラジオボタンやチェックボックスの初期値を設定するためにinputHiddenの値をラジオボタンやチェックボックスに設定する。
  • サブミット時は、ラジオボタンやチェックボックスの値をinputHiddenの値に設定する。
  • より良い解決策は、カスタムのJSFコンポーネントを作成することだと思うが、これは将来の課題とする。

ソースコード例

ラジオボタン・チェックボックスとinputHiddenとの値のマッピングを行うために、mapHiddenToChecked, mapCheckedToHidden関数を作成しました。

混乱するのはHTMLとJSFの要素名やjQueryでの要素名の指定方法です。
JSF上で宣言した要素のIDは、HTML上ではフォームID + “:” + 要素のIDとなります。下記ののinputHidden要素(id=”radioval”)の場合は、”form:radioval”というIDになります。
次のjQuery(セレクタ)にて、ID指定で要素を選択する場合は$("#elementid")としますが、”:”や”.”は”\\”でエスケープする必要があるので、上記のID例の場合は”#form\\:radioval”となります。

<h:form id="form">
...
	<!-- ラジオボタンのサンプル -->
	<h:inputHidden id="radioval" value="#{bean.radioval}" />
	<div class="form-check">
		<input type="radio" class="form-check-input" name="radioname" value="1" />
		<label class="form-check-label">値1</label>
	</div>
	<div class="form-check">
		<input type="radio" class="form-check-input" name="radioname" value="2" />
		<label class="form-check-label">値2</label>
	</div>

	<!-- チェックボックスのサンプル -->
	<h:inputHidden id="checkval" value="#{bean.checkval}" />
	<div class="form-check">
		<input type="checkbox" name="checkname" value="A" class="form-check-input" />
		<label class="form-check-label">値A</label>
	</div>
	<div class="form-check">
		<input type="checkbox" name="checkname" value="B" class="form-check-input" />
		<label class="form-check-label">値B</label>
	</div>
...
	<h:commandButton action="#{bean.submit()}" value="送信" ... onclick="doPrePost();" >
...
</h:form>


<script>
//<![CDATA[
...
	$(function(){
		// アルゴリズム欄、出力オプション欄の初期値の反映(hidden->checkbox)
		mapHiddenToChecked("#form\\:radioval", "radioname");
		mapHiddenToChecked("#form\\:checkval", "checkname");
	})

	// ハッシュアルゴリズム、出力オプションをhidden項目にマップする
	function doPrePost(){
		mapCheckedToHidden("radioname", "#form\\:radioval");
		mapCheckedToHidden("checkname", "#form\\:checkval");
	}
	

...
	// hidden項目等の項目を複数チェックボックスの値にマップ
	function mapHiddenToChecked(hiddenId, checkedName){
		var vals = $(hiddenId).val();
		var checks = vals != null ? vals.split(','): [];
		for(i=0; i<checks.length; i++){
			$("input[name=" + checkedName + "][value=" + checks[i] + "]").prop("checked", true);
		}
	}

	// 複数チェックボックスの値をhidden項目等の項目にマップ
	function mapCheckedToHidden(checkName, hiddenId){
		var vals = "";
		$("input[name=" + checkName + "]").each(function(){
			if( $(this).prop("checked") ){
				if( vals.length > 0){
					vals += ",";
				}
				vals += $(this).val();
			}
		});
		$(hiddenId).val(vals);
	}
...


(adsbygoogle = window.adsbygoogle || []).push({});


(adsbygoogle = window.adsbygoogle || []).push({});

-1. システムエンジニアリング, JavaEE7, 実装技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

テキストファイルマスクツール

本番環境での性能検証でNGになってしまった。 どの処理でどれほどの処理時間がかかっているかを把握するためにログレベルを変更して、ログを取得した。 対応方法を自社の担当者と検討するために、本番環境からこ …

Javaでのパスワード付きzipファイルの圧縮/解凍方法(ZipCrypto/AES)

先日、JavaでのZIP暗号化の考察という記事を書きましたが、zip4jのメンテナンスが再開されており、バージョン2系が公開されていましたので、これを使って通常のzip圧縮/解凍、パスワード付きzip …

wildflyへのwarデプロイの自動化

更新したWebアプリをWildflyにデプロイするのが面倒なのでスクリプトを作成してみました。 前提 実行環境はCentOS Linux 7です。 JavaEEのWebアプリの配布形式であるwarファ …

JBoss EAP7でDEBUG/TRACEログを出力

JBoss EAP7でアプリのDEBUGやTRACEのログを出力する方法を記載します。 開発の序盤でアプリのDEBUGログがeclipseのコンソールやログファイルに出力されず、困る場合があるので、メ …

jQueryによるデフォルトボタンの実装

デフォルトボタンについて Webページ上でエンターキーを押した場合、そのページ上であらかじめ決められたボタンをクリックしたかのように処理を実行する仕組みがある。何らかのデータの検索を行うようなページは …

プロフィール ゆっきーです。
都内でシステムエンジニアをやっています。
もっと詳細を見る