Eclipse＋JSF＋JPAで作るアプリ(15)―Primefaces データテーブルの設定　後半(2) コンテキストメニュー

Java JSF Primefaces

Primefacesのデータテーブルタグ(p:datatable)の設定を色々と変えて動作を確認を行うセッションの後半その２です。

のうち、コンテキストメニューの表示を行えるようにします。

コンテキストメニューはパネルメニューやメニューバー同様、とても簡単に作れます。
f:id:tshix:20150731222758p:plain
p:dialogを使った埋め込みダイアログ
f:id:tshix:20150731222809p:plain

コンテキストメニューの設定

表示したいデータテーブルのid（下記例では"userList"）に対して、p:contextMenuタグのforアトリビュートで指定するだけです。
下記例では<p:contextMenu for="userList">です。

userlist.xml

	<p:dataTable id="userList" 
	…
	</p:dataTable>

	<p:contextMenu for="userList">
		<p:menuitem value="パスワードの編集" 
			icon="ui-icon-pencil"
			update="dialog"
			oncomplete="PF('passwordDialog').show()">
			<f:setPropertyActionListener 
				value="#{editUserView.selectedUsers[0].password}" 
				target="#{editUserView.newPassword}"/>
		</p:menuitem>
	</p:contextMenu>
  • updateアトリビュートで、下記ダイアログを更新するように指定し、
  • oncompleteアトリビュートで、ダイアログをshowしています。
  • f:setPropertyActionListenerで、下記ダイアログのパスワードフィールドを初期化しています。

埋め込みダイアログの作成

パスワード表示メニューから、管理者にパスワードを入力させるためのダイアログを表示します。
PrimefacesのShowcaseに似たような例があります。

<h:form id="userListForm">
…
</h:form>

<p:dialog id="dialog" header="パスワードの編集" widgetVar="passwordDialog"
	modal="true" showEffect="fold" hideEffect="explode" resizable="false"
	dynamic="true">
	<h:form id="dialogForm">
		<p:outputPanel id="passwordEdit" style="text-align:center;">
			<p:panelGrid columns="2">
				<f:facet name="header">
					<p:outputLabel
						value="#{editUserView.selectedUsers[0].name.concat('のパスワード変更')}" />
				</f:facet>
				<p:outputLabel value="パスワード" />
				<p:password value="#{editUserView.newPassword}" redisplay="true" />
				<p:outputLabel value="見えるパスワード" />
				<p:inputText value="#{editUserView.newPassword}" />
			</p:panelGrid>
			<p:commandButton value="OK" icon="ui-icon-check"
				action="#{editUserView.updatePassword}"
				oncomplete="PF('passwordDialog').hide()" />
			<p:commandButton value="キャンセル" icon="ui-icon-close"
				oncomplete="PF('passwordDialog').hide()" />
		</p:outputPanel>
	</h:form>
</p:dialog>

p:dialogタグでは

  • widgetVar="passwordDialog"が、PF('xxx').show(), PF('xxx').hide()で渡すIDになります。
  • modal="true"でモーダルダイアログになります。
  • dynamic="true"でフォームがロードされた際に遅延ロードされるようになります。

後はほかのフォームと同じです。注目したい点は

  • p:outputLabelタグのvalue="#{editUserView.selectedUsers[0].name.concat('のパスワード変更')}"で、EL式の文字列を連結しています。
  • p:passwordタグの redisplay="true" でパスワードの初期値を設定しています。（後述）
  • p:commandButtonタグのoncomplete="PF('passwordDialog').hide()"を呼ばないと当然ながらダイアログが消えません。

EditUserView.javaの変更点
特に大きな変更点はありません。

	@Getter @Setter 
	private String newPassword;
	…
	public String updatePassword()
	{
		if( selectedUsers == null || selectedUsers.isEmpty() )
			return "success";
		User user = selectedUsers.get(0);
		if( newPassword.equals(user.getPassword()))
			return "success";//同じなら更新しない。
		user.setPassword(newPassword);
		UserManager.updateUser(user);
		ViewUtil.AddMessage("パスワードの変更", user.getName()+"のパスワードを変更しました。");
		return "success";
	}

ダイアログの値のアップデート

p:menuitemで、update="dialog"を指定しなければ、値は更新されません。
また、はまった点として、ダイアログのコントロールにパスワードを使用していたため、editUserView.newPasswordの値が空に見え、ManagedBeanが更新されていないかのように振る舞っていました。inputSecretには、redisplayを付けない限り、クリアされるのを忘れていました。

ダイアログで表示しているnewPasswordの値のアップデート方法は、いくつか方法があります。

  1. actionListenerでnewPasswordを設定する方法。
  2. 本例のように、setPropertyActionListenerを使う方法。
  3. actionで更新してしまう方法。

1番目はjavaのコーディングが発生します。3番目は画面遷移を伴わないですから使用すべきではないです。
結果として、2番のsetPropertyActionListenerを使用して更新しています。

右クリックで行が選択されるが、削除ボタンが有効にならない。

次のajaxでイベントを拾ってあげます。

	<p:dataTable id="userList" 
		…
		>
		<p:ajax event="contextMenu" 
			update=":userListForm:removeButton" />
		…
	</p:dataTable>

さて、次はグリッド編集（cellEditorとrowEditorの使用方法)です。

Eclipse＋JSF＋JPAで作るアプリ(14)―Primefaces データテーブルの設定　後半(1) イベントハンドル

Java JSF Primefaces

Primefacesのデータテーブルタグ(p:datatable)の設定を色々と変えて動作を確認を行うセッションの後半です。

  • 選択時のイベントハンドルを行う。
  • コンテキストメニューを表示する。
  • セルをグリッドで編集できるようにする。

を行えるようにします。

前回までで、管理者がユーザの追加ができるようになったので、削除ができるようにします。
また、パスワードは非表示なので、コンテキストメニューから初期化できるようにします。
編集はグリッドで行えるよう実装することで、CRUD操作は一通り完成です。

さまざまなコントロールや実装方法を試したいため、敢えてこうしています。
後半その１は、選択時のイベントハンドルです。

続きを読む

Eclipse＋JSF＋JPAで作るアプリ(13)―Primefaces データテーブルの設定　前半 ナビゲータとチェックボックス

Java JSF Primefaces

今回は、Primefacesのデータテーブルタグ(p:datatable)の設定を色々と変えて動作を確認します。

やりたいことは、

  • ソートできるようにする。
  • フィルタできるようにする。
  • ページナビゲーターを付ける。
  • テーブルのヘッダーをウィンドウに固定する。（エクセルのウィンドウ枠固定に該当する機能です）
  • チェックボックスを付ける。
  • 選択時のイベントハンドルを行う。
  • コンテキストメニューを表示する。
  • グリッドで編集できるようにする。

です。

前半の範囲を実装すると、以下の画面のようになります。
f:id:tshix:20150728001053p:plain

「チェックボックスを付ける」は、tagのselectionとrowKeyだけを設定すると以下のエラーが発生します。

javax.faces.FacesException: DataModel must implement org.primefaces.model.SelectableDataModel when selection is enabled.

対応は、ListDataModelを継承して、SelectableDataModelをインプリメントします。
jsf - DataModel must implement org.primefaces.model.SelectableDataModel when selection is enabled - Stack Overflow
PrimeFacesのDataTableを探る ～ チェックボックスによる複数選択 ～ - Challenge Java EE !を参考にさせていただきました。
ここにあるよう、ListDataModel, ListDataModelと色々なエンティティに対して実装する必要があるのですが、
一工夫加えて、Genericとインターフェースを使って、Movie,User,LendHistoryの３つに適応するようにしています。

それでは早速見ていきましょう。

続きを読む

Eclipse＋JSF＋JPAで作るアプリ(12)―Primefaces テーマの変更

Java JSF Primefaces

今回は、Primefacesのテーマの変更です。
PrimefacesのThemeSwitcherというコンポーネントを使います。
PrimeFaces ShowCaseで紹介されています。
Advancedのサムネイルが表示されているほうを試しましたがうまく動作しませんでしたのでBasicで実装しています。

今回の実装を終えると、以下のようにテーマをユーザーごとに保存できるようになります。
f:id:tshix:20150726205617p:plain
f:id:tshix:20150726205629p:plain
f:id:tshix:20150726205638p:plain

今回のセッションでは、以下が分かると思います。

  • テーマを動的に変える方法
  • DBに保存したテーマをどうロードするか？

次回は、ユーザ一覧の複数行選択しての削除、グリッドでの編集を実装する予定です。

続きを読む

Eclipse＋JSF＋JPAで作るアプリ(11)―ManagedBeanと画面

Java JSF Primefaces

前回は、xhtmlで書かれたテンプレートとそのパーツ、テンプレートクライアントについて記述しました。

今回は、マネージドビーンについて記述します。

  • JSFでの画面要素は、Managed Beanと呼ばれるPOJOにマップされます。
  • また、画面上のアクション（コマンドボタンの実行やリンク）も、Managed BeanのStringを返すメソッドにマップされます。
  • このメソッドの戻り値である文字列を、画面遷移先として定義された文字列として返すことによりたページに遷移します。


Managed Beanは以前、バッキングビーン(Backing Bean)とも呼ばれています。
Managed Beanのクラス名ですが、Xxx, XxxManage, XxxBean, XxxManagedBean, XxxPage, XxxViewといくつも流派があるようです。
本ブログでは、PrimefacesのShowcaseに従ってXxxViewで統一します。

続きを読む

Eclipse＋JSF＋JPAで作るアプリ(10)―Faceletsテンプレート

Java JSF

今回はログイン画面、ユーザ一覧を表示する画面を作ります。
作ったものの画面は以下の通りです。

ユーザー一覧：
f:id:tshix:20150726014308p:plain

ログイン画面：
f:id:tshix:20150726014852p:plain

両方同じテンプレートを使用していて、テンプレートはトップペイン、レフトペイン、ボトムペイン、コンテンツペインからできています。

Primefacesのコンポーネントを使っているだけですが、リッチに見えると思います。

  • トップ、レフトのメニューにはPrimefacesのコンポーネントを使用しています。
  • 今回は敢えて、コンテンツペインのログイン画面、テーブル表示にPrimefacesを使いません。次回差し替えたものと比較するためです。
  • 今回は、テンプレートの作り方に終始し、ソースコードについては触れません。次回にまとめます。
続きを読む

Eclipse＋JSF＋JPAで作るアプリ(9)―JSF トピック

JSF Java

今回からJSFです。

JSFで取り上げたいトピックです。このページはやりたいトピックが増えると更新する予定です。

■EL式
■画面遷移、faces-config.xml
■スコープ
■Faceletsによるテンプレート
■バリデーションとコンバータ
　■XML記述
　■アノテーション記述
　□カスタムバリデーション
■Primefacesによるリッチコンポーネントの利用
　■パスワード強度の表示
　■データテーブル表示
　■アコーディオンメニュー（パネルメニュー）
　■さまざまなチャート（Pie,Barなど)
　■ドラッグ&ドロップ
　□テーマの動的変更
　□グリッドでの編集
　□コンテキストメニュー（右クリックメニュー）
■表示の国際化
□例外ハンドル
□ログインフィルタ
□クッキーでの処理
□ロギング

■は、サンプルアプリで経験あり、□は、経験なしです。

続きを読む