Granite UI には、フォームで使用するようにデザインされた幅広いコンポーネントが用意されています。これらを Granite の UI 用語では「フィールド」と呼びます。標準の Granite フォームコンポーネントは、次の場所で使用できます。
/libs/granite/ui/components/foundation/form/*
これらの Granite UI フォームフィールドは、 コンポーネントダイアログ.
フィールドについて詳しくは、 Granite UI ドキュメント.
Granite UI Foundation フレームワークを使用して、Granite コンポーネントを開発または拡張します。 これには次の 2 つの要素があります。
サーバー側:
基盤コンポーネントのコレクション
アプリケーション開発を支援するヘルパー
クライアント側:
一般的な Granite UI コンポーネントである field
は、以下の 2 つのファイルで構成されています。
init.jsp
:ラベル付けや説明などの汎用処理を処理し、フィールドのレンダリング時に必要なフォーム値を提供します。render.jsp
:フィールドの実際のレンダリングが実行される場所です。カスタムフィールドに対して上書きする必要があります。は、に含まれます。 init.jsp
.詳しくは、 Granite UI ドキュメント — フィールド 」を参照してください。
詳しくは、例えば、以下を参照してください。
cqgems/customizingfield/components/colorpicker
granite/ui/components/foundation/form
このメカニズムは JSP を使用するので、i18n と XSS は標準では提供されません。 つまり、文字列を国際化してエスケープする必要があります。 次のディレクトリには、標準インスタンスの汎用フィールドが含まれています。これらを参照として使用できます。
/libs/granite/ui/components/foundation/form
ディレクトリ
カスタマイズしたフィールドは、render.jsp
スクリプトのみを上書きする必要があります。このスクリプトは、コンポーネントのマークアップを提供します。JSP (つまり、レンダリングスクリプト)はマークアップのラッパーと見なすことができます。
を使用するコンポーネントを作成する sling:resourceSuperType
継承元のプロパティ:
/libs/granite/ui/components/foundation/form/field
以下のスクリプトを上書きします。
render.jsp
このスクリプトでは、ハイパーメディアマークアップ(つまり、ハイパーメディアアフォーダンスを含む、エンリッチメントされたマークアップ)を生成し、生成された要素の操作方法をクライアントが把握できるようにします。 これは、Granite UI のサーバー側のコーディングスタイルに従う必要があります。
カスタマイズする際に守る必要のある唯一の決まりごとは、以下を使用して、リクエストからフォーム値(init.jsp
で初期化)を読み取ることです。
// Delivers the value of the field (read from the content)
ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());
vm.get("value, String.class");
詳しくは、標準の Granite UI フィールドの実装を参照してください。例: /libs/granite/ui/components/foundation/form/textfield
.
現時点では、JSP が推奨されるスクリプティングメソッドです。HTL では、あるコンポーネントから別のコンポーネントに情報を渡すことは(フォームやフィールドのコンテキストで頻繁に行われます)容易には実現できません。
特定のクライアント側の動作をコンポーネントに追加するには:
カテゴリ cq.authoring.dialog
のクライアントライブラリを作成します。
カテゴリ cq.authoring.dialog
のクライアントライブラリを作成し、その内部に JS
/CSS
を定義します。
クライアントライブラリの内部に JS
/CSS
を定義します。
現時点では、Granite UI には、JS 動作を直接追加するために使用できる、標準のリスナーやフックは用意されていません。 そのため、コンポーネントに JS 動作を追加するには、JS フックをカスタムクラスに実装し、マークアップの生成中にコンポーネントに割り当てる必要があります。