Inside PrimeFaces
2.8K Views
June 16, 23
スライド概要
2023/06/16 社内勉強会「Inside PrimeFaces」で使用したスライドです。
https://entrance.bis5.net
関連スライド
SPAセキュリティ超入門
徳丸 浩
684.7K
各ページのテキスト
Inside PrimeFaces 2023/06/16 Takayuki Maruyama This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 1
Agenda について PrimeFacesの主な機能 処理の追い方 よくあるトラブルとデバッグ方法 問題報告 PrimeFaces This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 2
PrimeFaces について について PrimeFaces This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 3
PrimeFaces について とは PrimeFaces Jakarta Faces ( 旧Java ServerFaces, JSF) で利用可能なUIコンポーネントライブ ラリ トルコ のPrimeTek Informatics社がコミュニティと協調して開発している (コミュニティからの貢献が大部分を占める。) PrimeTek社は、商用サポートやプレミアムテーマ、周辺ツールなどを提供する This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 4
PrimeFaces について ライセンス体系 PrimeFaces Community コミュニティが提供するバージョン。MIT Licenseで利用可能なOSS PrimeFaces Elite 社による商用サポートライセンス。プレミアムテーマの利用や、 版では提供されないパッチバージョン( 12.0.x )のダウンロードが可能 PrimeTek Community PrimeFaces PRO PrimeTek 社による商用サポートライセンス。Eliteに加えて、専用フォーラムを通 じたバグ報告や機能要望が可能 詳しくは: https://www.primefaces.org/showcase/support.xhtml This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 5
PrimeFaces について PrimeFaces React ファミリー (1/2) 向けのUIコンポーネントライブラリ Angular Vue.js 向けのUIコンポーネントライブラリ 向けのUIコンポーネントライブラリ This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 6
PrimeFaces について PrimeFaces ファミリー (2/2) を活用したCSSレイアウトライブラリ (OSS) Flexbox PrimeFaces, PrimeNG, PrimeReact, PrimeVue (OSS) ト で共通で利用されるアイコンフォン ありがちなレイアウトを実現できるコードスニペット (一部有償) Theme Designer テーマをカスタマイズするためのツール (要Eliteライセンス) This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 7
主な機能 の主な機能 PrimeFaces Dialog Framework Client Side Validation リッチUIコンポーネント This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 8
主な機能 Dialog Framework 独立した画面をダイアログとして開くことができる仕組み ダイアログを開く元画面とは独立したView Scope, コンポーネントツリーを持つ 通常のダイアログ( <p:dialog> )は同じ画面内の1コンポーネントとして振る 舞う Render Response Phase中に例外が発生すると、例外が発生したコンポーネント より上だけが表示される場合がある This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 9
主な機能 Client Side Validation (CSV) ボタンクリックなどのアクション実行時に、クライアント(ブラウザ)側で入力値の バリデーションを実行できる機能 サーバーサイドのバリデーションと同様に、Converterで入力値を変換 →Validatorで検証、をクライアント側で実行できる PrimeFacesには、Jakarta Faces標準のConverter/Validatorに対応するCSV実装が バンドルされている →有効化してやれば、特別な実装をせずともCSVを利用可能 This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 10
主な機能
Client Side Validation (CSV)
自前の Converter をCSVに対応させる方法
[Server Side] Converter 実装に ClientConverter インタフェースを実装する
[Client Side] JavaScript: PrimeFaces.converter['自前ConverterのID'] に
変換処理を実装する
PrimeFaces.converter['converter.Date'] = {
MESSAGE_ID: 'your.own.converter.MESSAGE',
regex: /^\d{4}-\d{2}-\d{2}$/,
convert: function(element, value) {
const vc = PrimeFaces.validation.ValidationContext;
if (!this.regex.test(value)) {
throw vc.getMessage(this.MESSAGE_ID, vc.getLabel(element));
}
return new Date(value);
},
};
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images
PrimeTek Informatics
11
主な機能
Client Side Validation (CSV)
自前の Validator をCSVに対応させる方法
[Server Side] Validator 実装に ClientValidator インタフェースを実装する
[Client Side] JavaScript: PrimeFaces.validator['自前ValidatorのID'] に
バリデーションの実装を追加する
PrimeFaces.validator['validator.PostalCode'] = {
MESSAGE_ID: 'your.own.validator.MESSAGE',
regex: /^\d{3}-\d{4}$/,
validate: function(element, value) {
const vc = PrimeFaces.validation.ValidationContext;
if (!this.regex.text(value)) {
throw vc.getMessage(this.MESSAGE_ID, vc.getLabel(element)):
}
},
};
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images
PrimeTek Informatics
12
コンポーネント コンポーネント UI UI コンポーネントは、主に以下の要素で構成されている。 FooBarBase (例: DatePickerBase ) コンポーネントの親クラス タグの属性に対応するプロパティが定義されている FooBar (例: DatePicker , class DatePicker extends DatePickerBase ) コンポーネント本体のクラス コンポーネントのサーバサイドの処理が実装されている FooBarRenderer (例: DatePickerRenderer ) コンポーネントのRenderer( javax.faces.renderer.Renderer のサブクラス) リクエストのデコードと、レスポンスのエンコード(HTML/JSの生成)を担う (JavaScript) PrimeFaces.widget.FooBar (例: PrimeFaces.widget.DatePicker ) コンポーネントのクライアントサイドの処理 UI This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 13
コンポーネント UI コンポーネントごとのドキュメント 1. Faceletsタグ属性と詳細な説明: User Guide (https://primefaces.github.io/primefaces/) 2. JavaScript API: https://primefaces.github.io/primefaces/jsdocs/ 3. サンプルコードと実行例: Showcase (https://primefaces.org/showcase) 各コンポーネントのページから[1.], [2.]のドキュメントに遷移可能 a. Server API -> User Guide b. Client API -> JSDoc This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 14
処理の追い方 処理の追い方 This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 15
処理の追い方 リクエストパラメータからコンポーネントへの値設定を確認する ※ Apply Request Values フェーズ Jakarta Faces 各コンポーネントの processDecode() が呼ばれる リクエストパラメータから値を取り出して、コンポーネントに保持される ( submittedValue ) Renderer が設定されている場合: Renderer#decode に処理が移譲される。 PrimeFaces 各コンポーネントに CoreRenderer を継承した Renderer が設定されている This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 16
レンダリングされるレスポンスの内容を確認する 処理の追い方 ※ Render Response フェーズ Jakarta Faces 各コンポーネントの encodeAll() から encodeBegin() , encodeEnd() が呼ばれる Renderer が設定されている場合: encodeBegin() , encodeEnd() の処理は Renderer に移譲される PrimeFaces 各コンポーネントに CoreRenderer を継承した Renderer が設定されている encodeBegin() は空、 encodeEnd() に必要な処理が実装されている encodeEnd() : encodeMarkup() , encodeScript() を呼ぶ encodeMarkup() : HTMLを生成する encodeScript() : JavaScriptを生成する This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 17
処理の追い方 クライアント側処理を確認したい に格納されているjsはminify(圧縮)されている →まずはminify前のソースを確認するのが手っ取り早い minify前はコンポーネントごとにファイルが別れているため読みやすい primefaces-${version}.jar 探し方 ( デモで実演) GitHubのリポジトリ (https://github.com/primefaces/primefaces)にアクセスし、使 用しているバージョンのタグに切り替える primefaces/src/main/resources/META-INF/resources/primefaces 以下を探す 例: DataTableのソースは datatable/datatable.js ブラウザの開発者ツール(F12)で components.js を開き、整形する( {} ボタン) PrimeFaces.widget.コンポーネント名 = を検索して読む This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 18
よくあるトラブルとデバッグ方法 よくあるトラブルとデバッグ方法 This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 19
よくあるトラブルとデバッグ方法 をクリックしても何も起こらない CommandButton 原因 <p:ajaxExceptionHandler> が無いと、Ajax操作時に例外が発生してもエラ ーは通知されない エラーメッセージの表示先( <p:message> , <p:messages> )が再描画の対象 ( update 属性で指定)でなければ、バリデーションエラーが表示されない 対応方法: Ajax通信のレスポンスボディを見る 例外発生: それっぽいメッセージが格納されている バリデーションエラー: レスポンスボディの末尾近くに validationFailed と いう文字列がある This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 20
よくあるトラブルとデバッグ方法 例外が発生してしまった Jakarta Faces る の処理で例外が発生すると、長いスタックトレースがログ出力され 式の処理中に例外が発生していれば、必ず原因箇所が出力されているため、そ れを探す デモで実演 EL This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 21
問題報告 問題報告 This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 22
問題報告 問題報告 はOSS 不具合と思われる動作があれば報告することでコミュニティに還元してほしい (一時的に回避する目的でパッチを書くなら、そのパッチを提供して将来的にパッチが 不要になるように) 手順としては、大まかに次の通り。 PrimeFaces This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 23
問題報告 問題の報告手順 素のPrimeFacesで不具合が発生することを確認できるコードを用意する PrimeFaces Showcaseで問題が発生するならその内容を示せば良い 最新のmasterからShowcaseをビルドし、再現するか確認できれば尚良し 公開されているShowcaseは常に最新ではなさそう もしくは、https://github.com/primefaces/primefaces-test をコピーするなどし て、これを元に再現するための最小限のプログラムを作成する。 2. GitHubにIssueを作成する (https://github.com/primefaces/primefaces/issues/new/choose) Defect report テンプレートを使用する 3. コミュニティメンバーからの質問や検証依頼があれば対応する 4. 可能であれば、修正パッチをPull Requestで提供する 1. This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 24
リリースサイクル リリースサイクル Community 半年に1回リリースする方針 PrimeFaces 12まではおおよそ1年毎にリリース PrimeFaces 13のRC(リリース候補)版が2023/05にリリースされている Elite/PRO のリリースをベースとし、パッチバージョンが随時リリースされる 社が管理するプライベートなリポジトリから行われる 一部の修正や改善が、Communityに先駆けてリリースされる どのIssueが対象となっているかは、ラベルで判別可能。 (例: 12.0.4に取り込まれているIssueには 12.0.4 ラベルが設定されている) Community PrimeTek This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 25
参考情報 参考情報 GitHub https://github.com/primefaces/primefaces Showcase https://www.primefaces.org/showcase ドキュメント https://primefaces.github.io/primefaces/ https://primefaces.github.io/primefaces/jsdocs/ Discord https://discord.gg/gzKFYnpmCY フォーラム https://forum.primefaces.org/ This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Logo images PrimeTek Informatics 26