JSF2でbootstrapのdatetimepickerを使ってみる

 前回、画面の日付入力にdatepickerを使ってみましたが、
bootstrapのdatepickerを使ってみる
今度は時間の入力も必要な画面を追加する事になり、datetimepickerを使ってみる事にしました。
 使用したのは下記です。日本語も対応されています。
http://www.malot.fr/bootstrap-datetimepicker
 ダウンロードしたJSとCSSをdatepickerの時と同じようにコンテンツディレクトリ配下のresource内に配置。
resource

xhtmlは下記のようになりました。aInfoという管理BeanにdispFromDateとdispEndDateの2つの文字列日付プロパティがあり、ボタン押下でgetListを呼び出し結果をresultListにdataTableで表示するという内容です。

なお、日付フォーマットは今回の要件的に秒も対象にしていますが、datetimepickerのUI自体は分までが対応範囲なので秒については直入力という整理です。

createQueryとcreateNativeQueryは結構違う

 現在、JavaEEで作っているアプリケーションに画面を追加する事になり、それまではJPAのJPQLを使ってのcreateQueryで済んでいたのですが、今回はGROUP BYとかUNIONとかでSQLを作る必要があり、JPQLでは無理そうなのでcreateNativeQueryで実装する事にしました。
 で、最初はcreateQueryをcreateNativeQueryに置き換えてSQL文を噛ませばいいかなと思っていたのですが、どうやら結構違うらしい。。
 一つ目の違いは、createQueryならテーブル定義に沿って作ったEntityに直接入れる事が出来ますが、ちょっと複雑なSQLだと問い合わせ結果に一致したEntityを作る事自体が難しい。
 二つ目はバインド変数の違い。createQueryならバインド変数は[:PARAM]のように文字として指定して下記のように変数をセットして結果を取得できますが、

createNativeQueryでは[?]でないとダメという解りにくい相違点。。
結果的に下記のようになりました。

※上記のSummaryは上記クエリ結果をセットする為だけのクラスです。

なお、数値はBigDecimalで扱うようです。
バインド変数の仕様違いにはちょっとハマりました。。

PayaraをCENTOS7で動かしてみる

 せっかくJavaEE7の仕事しているので、他にも何か作ろうかなと思い、自宅のVMにCENTOSを入れてPayaraを動かすことにしました。weblogicは高いし、glassfishは将来性が。。Payaraもglassfishなんですけど、将来性があるかと思い、こちらからMulti-Language Web Profileをダウンロード
http://www.payara.fish/all_downloads

なお自宅のVMはGIGABYTEのBRIX。
http://www.gigabyte.jp/products/product-page.aspx?pid=4581#ov
1年半くらい前にSSD250Gとメモリ8G*2を突っ込み合計8万くらいで作ったもので、VMware ESXiを入れてます。先日、Windows Server 2016 Technical Preview 4も仮想に入れてみました。入れただけですが。。これは今年9月くらいには使えなくなるみたいです。

 久しぶりにCENTOSをググってみるとバージョンが7になっています。4GあるDVDISOをダウンロードし、仮想マシンを作成してDVDISOからインストール。インストールウィザードだけで殆ど設定は完了。
centos7
次にTeraTeamからCENTOSに入ってJavaインストール

 yum search jdk java でちょうどいいのを探して、
 yum install java-1.8.0-openjdk.x86_64

次はダウンロードしたPayaraを、/optに解凍します。

で早速、Payaraを解凍したディレクトリpayara41/glassfish/binにあるstartservを実行。

動いたらしいので、Payaraの管理コンソールを表示してみます。 http://サーバIP:4848
あれれ、繋がらない?TeraTeamからサーバに入って、

ps -ef | grep java
 ちゃんとプロセスは動いています。

次はyum nmapでインストール後、ポートチェック。
 nmap localhost → 4848/tcp open appserv-http
 OKだけど、なんでだろう??

ネットワーク系問題の匂いがぷんぷんする中、原因をググっていくと、下記を発見
https://blog-kazuhisya.rhcloud.com/2014/06/15/getting-started-with-rhel7/

 firewall-cmd –permanent –add-port=4848/tcp
 やっとコンソールを表示できました。。が、リモートからだとデフォルトではコンソールにログイン出来ない模様。。

TeraTeamに戻って上記のbinで、
./asadmin enable-secure-admin
./asadmin change-admin-password
であとは再起動
./stopserv
./startserv &
やっと入れました。。
payara
で、何作ろうか?

JSF2 Ajaxのエラーハンドリング

前回、画面エラー発生時のログ出力を整理しましたが、数秒毎に最新の状態にリフレッシュ表示する要件があり、Ajaxで実装してました。AjaxエラーのハンドリングはAjax側でハンドリングしなくてはなりません。
ネットで探してみたらOracleのサイトにjsf.ajax.addOnErrorというのが見つかりました。
https://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/js-api/symbols/jsf.ajax.html

JavaScriptのsetIntervalでフォームを5秒毎にリフレッシュさせているjsf.ajax.requestの箇所にエラーハンドリングを追加します。エラーが発生したらalertで問題発生をダイアログで表示させてますが、clearIntervalをしてもイベントが残っているみたいで、Alartのダイアログがしつこく出続けます。。仕方ないので1回だけ表示するように無理やり制御。

画面エラーのログ出力を整理

今作っているJavaEEアプリですが、画面エラー発生時のログ出力を検討しました。ま、アプリケーションサーバであるWebLogicが勝手にログを出してくれますが、エラー以外にも勝手に出るので量が多くて見るのが辛いし、アプリとしては別途log4j2でロギングする方向にしているので、画面エラー発生時もlog4j出力に統一するという要件になります。WebLogicでlog4jとログを連携させるとかFilter使うとかいろいろやり方はありそうでしたが、画面個々に手を入れずに最も簡単なやり方は無いかなと考えたところ、画面エラー発生時はエラーページに遷移するようにしておいて、そのエラーページでログ出力させるという形にしてみます。

web.xml抜粋(今の所・・・)

エラーページ用JSF管理Bean

最後にweb.xmlで指定した/errors/index.xhtmlで、エラー内容は見せないように下記を忍ばせておけば、管理Beanのメソッドが実行されるという形になります。

要件はちゃんと確認しないと・・・VFSで作り直し

ちょっと前に書いたログファイルをダウンロードする機能ですが、実機となるLINUX上にデプロイすると動きませんでした。。。サーバへ接続はできているようなのですが瞬時に切断されているようです。原因切り分けの為、作業中に使っているユーザーIDで試してみると特に問題無く動いてます。TeraTermから指定のIDでログインしてみると即切断されたようになり、WinSCPでSFTPログインすると問題無くアクセスできます。
 で、要件を思い出すと、「SFTPはOK」ではなく、「SFTPのみOK」であった事に気が付きました。与えられたユーザーIDでは、SSH接続ができないセキュリティ設定になっていたという事なんです。(sshd_configでSFTP専用にされてました)
 要件上はたった2文字の違いですが、実装上は明らかに別物であり、SSHで接続するような実装ではNGという事になります。
 となるとGamynedのようにSSHを前提にしたライブラリでなく、SFTPのみでサーバへアクセスできるライブラリを探し、ApacheCommonsのVFSに落ち着きました。なお、VSFにはJschが必要みたいです。
 login,logoutはなさそうなんで、ManagedBeanの呼び出しメソッド引数にID、パスワード、ホスト名を追加して、SFTP処理クラスが殆どの変更箇所となります。とりあえず、ファイル受信は出来ましたので別途整理します。

bootstrapのdatepickerを使ってみる

前回、今作成中のWebLogicアプリにbootstrapを使う事にしたので、次は日付入力にdatepickerを使ってみることにしました。datepickerって、使う方も入力しやすいし、作る方も余計な日付チェック処理を作らなくて済むし、素晴らしいコンポーネントだと思います。昔はテキスト入力エリアを年/月/日と3個繋げて、日付妥当性やメンドクサイうるう年チェックとかしてたんですよ・・・
しかも、ダウンロードURLではオプション設定の書き方も教えてくれてます。
bootstrap-datepicker
JSF2画面xhtmlの該当箇所は下記ですが、そのままだとBean側が更新されないので、f:ajaxで通知してます。

画面メニューにbootstrapのnavbarを使ってみる

今作っているWebアプリですが、ログインユーザー権限によりメニューのリンク表示を切り替える要件の実装について、一緒に作ってるメンバーに聞いてみたら、bootstrapのnavbarがかっこいいとの事で使ってみました。
各画面で指定するテンプレートxhtmlにbootstrapのnavbarをセットする形です。なお、bootstrapのバージョンは少し古いですが2.3.2を使ってます。
bootstrapをダウンロードしたら、Webソース内のresourcesにダウンロードした各ディレクトリを入れ、メニューを表示する各画面xhtmlでは、下記のようにテンプレートを指定します。

テンプレートとして指定したmenu.xhtmlですが、その中の「SessionManager」はログイン情報を保持しているSessionScopedBeanで、ログイン時にログイン日時をlogintimeに、各権限の値をroleCdにセットし、xhtml側ではui:fragmentのrenderedで表示を切り替えます。

ログインした権限に従い下記のようにメニューを表示されます。
navbar

JSF2カスタムコンバータでデコードしつつdataTableの背景を変える

今作っているWEBアプリで、画面に一覧を表示して、一覧表示内の項目値によって背景色を変えたいという要件がありました。
で、JSF2のカスタムコンバータを使って、コード値を文言にデコードしつつ、裏でCSSクラスを変えることで背景色が動的に変わる形にしてみました。コンバータは一つで、どのコード体系でデコードするかは、attributeでコンバータに情報を渡す構成になってます、とりあえずは。。

CSS抜粋

xhtmlのdataTable部分抜粋
※wordsはwords.propertiesのファイル側に定義している項目タイトルの文言です

カスタムコンバータ

ManagedBean抜粋
※一覧表示対象のitemInfoの実装は割愛します。プロパティとゲッタ・セッタがあるだけです。。

こんな感じで表示できそうなので、別途整理して実装します。
上記例では色が変わるのは行でなくセル単位になります。なお、dataTableの場合、その中のoutputTextはdivに置き換えらえるようなので、コンバータではtdのスタイルを変えているのではなくdivが対象になってます。それをCSSでカバーしているのですが、CSSは得意でないので。。

ganymed ssh2を使ってダウンロード画面を作る

今作っているWebアプリケーションでサーバのログファイルをダウンロードしたいという要件があり、そこでganymedを使ってみることにしました。アプリケーションをデプロイしているサーバとは別に複数存在するサーバ上にあるログファイルを画面から選択してクリックでダウンロードという流れです。
 なお、サーバとログファイルが格納されているディレクトリ情報は別途DB等から取る形にして、下記はSFTPでファイルを取得する箇所の抜粋です。

POM.xml ganymed指定

画面に表示するログファイル情報

SFTP処理
※サーバは一般的なID・パスワード認証です。

画面処理
※HttpServletResponseのOutputStreamに直ファイルを突っ込むので、一時ファイルを置いたりしません。

xhtml
※ディレクトリリストの箇所は、上記ソース上割愛しています。
ディレクトリリストの左に置いたボタンクリックで、ファイル一覧を取得し、ファイル一覧のファイル名クリックでダウンロードします。

エラーハンドリングやサーバの切断、ファイルサイズの数値右寄せ等、細かい箇所がまだ出来ていませんが、とりあえず動きそうです。
最初、ログファイル情報のプロパティ名が先頭大文字とかだと、JSFでエラーになりちょっとハマりました。。