Granite UI には、フォームで使用するようにデザインされた幅広いコンポーネントが用意されています。これらを Granite の UI 用語では「フィールド」と呼びます。**標準の Granite フォームコンポーネントは、次の場所にあります。
/libs/granite/ui/components/foundation/form/*
これらの Granite UI フォームフィールドが特に注目されるのは、これらがコンポーネントダイアログで使用されるからです。
フィールドについて詳しくは、Granite UI に関するドキュメントを参照してください。
Granite コンポーネントを開発または拡張するには、Granite UI の基盤フレームワークを使用します。このフレームワークには次の 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
現時点では、HTL ではコンポーネント間の情報の受け渡し(フォーム/フィールドのコンテキストでは非常に頻繁におこなわれます)を簡単には実現できないので、スクリプティングメソッドとして JSP が推奨されます。
特定のクライアント側動作をコンポーネントに追加するには:
カテゴリ cq.authoring.dialog
のクライアントライブラリを作成します。
カテゴリcq.authoring.dialog
のclientlibを作成し、その中にJS
/ CSS
を定義します。
clientlib内にJS
/ CSS
を定義します。
現時点では、Granite UI には、JS 動作を追加するために直接使用できるデフォルトのリスナーやフックはありません。そのため、JS 動作をコンポーネントに追加するには、JS フックをカスタムクラスに実装して、マークアップの生成時にコンポーネントに割り当てる必要があります。