新しい Granite UI フィールドコンポーネントの作成 creating-a-new-granite-ui-field-component
Granite UI には、フォームで使用するようにデザインされた幅広いコンポーネントが用意されています。これらを Granite の UI 用語では「フィールド」と呼びます 。 標準の Granite フォームコンポーネントは、次の場所で使用できます。
/libs/granite/ui/components/foundation/form/*
Granite UI Foundation フレームワークを使用して、Granite コンポーネントを開発または拡張します。 これには次の 2 つの要素があります。
-
サーバー側:
-
基盤コンポーネントのコレクション
- 基盤 — モジュラー型、合成可能、レイヤブル、再利用可能
- コンポーネント - Sling コンポーネント
-
アプリケーション開発を支援するヘルパー
-
-
クライアント側:
- ハイパーメディア駆動型 UI を通じて一般的なインタラクションパターンを実現するための語彙 (HTML言語の拡張 ) を提供する clientlib のコレクション
一般的な Granite UI コンポーネントである field
は、以下の 2 つのファイルで構成されています。
init.jsp
:ラベル付けや説明などの一般的な処理を扱い、フィールドをレンダリングする際に必要になるフォーム値を提供します。render.jsp
:ここで、フィールドの実際のレンダリングが実行され、カスタムフィールドの場合は上書きされる必要があります。init.jsp
にインクルードされます。
詳しくは、 Granite UI ドキュメント — フィールド 詳細を表示する場合
例えば、以下を参照してください。
-
cqgems/customizingfield/components/colorpicker
- コードサンプルで提供
-
granite/ui/components/foundation/form
/libs/granite/ui/components/foundation/form
ディレクトリコンポーネント用のサーバーサイドスクリプトの作成 creating-the-server-side-script-for-the-component
カスタマイズしたフィールドは、render.jsp
スクリプトのみを上書きする必要があります。このスクリプトは、コンポーネントのマークアップを提供します。この JSP(レンダリングスクリプト)は、マークアップのラッパーと見なすことができます。
-
sling:resourceSuperType
プロパティを使用して、以下から継承する新しいコンポーネントを作成します。/libs/granite/ui/components/foundation/form/field
-
以下のスクリプトを上書きします。
render.jsp
このスクリプトでは、生成された要素の操作方法をクライアントが把握できるように、ハイパーメディアマークアップ(つまり、ハイパーメディアアフォーダンスを含むエンリッチメントされたマークアップ)を生成する必要があります。 これは、Granite UI のサーバー側のコーディングスタイルに従う必要があります。
カスタマイズする際に守る必要のある唯一の 決まりごと は、以下を使用して、リクエストからフォーム値(
init.jsp
で初期化)を読み取ることです。code language-none // 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
)を参照してください。note note NOTE 現時点では、JSP が推奨されるスクリプティングメソッドです。あるコンポーネントから別のコンポーネントに情報を渡す方法(フォームやフィールドのコンテキストでは非常に頻繁に使用されます)は、HTL では容易には使用できません。
コンポーネントのクライアントライブラリの作成 creating-the-client-library-for-the-component
特定のクライアント側の動作をコンポーネントに追加するには:
-
カテゴリ
cq.authoring.dialog
のクライアントライブラリを作成します。 -
カテゴリ
cq.authoring.dialog
のクライアントライブラリを作成し、その内部にJS
/CSS
を定義します。クライアントライブラリの内部に
JS
/CSS
を定義します。note note NOTE 現時点では、Granite UI には、JS 動作を直接追加するために使用できる、標準のリスナーやフックは用意されていません。 そのため、コンポーネントに JS 動作を追加するには、JS フックをカスタムクラスに実装し、マークアップの生成中にコンポーネントに割り当てる必要があります。