新しい Granite UI フィールドコンポーネントの作成

Granite UI には、フォームで使用するようにデザインされた幅広いコンポーネントが用意されています。これらを Granite の UI 用語では「フィールド」と呼びます​。​標準の Granite フォームコンポーネントは、次の場所で使用できます。

/libs/granite/ui/components/foundation/form/*

Granite UI Foundation フレームワークを使用して、Granite コンポーネントを開発または拡張します。 これには次の 2 つの要素があります。

• サーバー側：

  • 基盤コンポーネントのコレクション

    • 基盤 — モジュラー型、合成可能、レイヤブル、再利用可能
    • コンポーネント - Sling コンポーネント

  • アプリケーション開発を支援するヘルパー

• クライアント側：

  • ハイパーメディア駆動型のユーザーインターフェイスを通じて一般的なインタラクションパターンを実現するための語彙 (HTML言語の拡張 ) を提供する clientlibs のコレクション。

一般的な Granite UI コンポーネントである field は、以下の 2 つのファイルで構成されています。

• init.jsp：ラベル付けや説明などの汎用処理を処理し、フィールドのレンダリング時に必要なフォーム値を提供します。
• render.jsp：フィールドの実際のレンダリングが実行される場所です。カスタムフィールドに対して上書きする必要があります。は、に含まれます。 init.jsp.

詳しくは、 Granite UI ドキュメント — フィールド 」を参照してください。

詳しくは、例えば、以下を参照してください。

• cqgems/customizingfield/components/colorpicker

  • コードサンプルで提供

• granite/ui/components/foundation/form

コンポーネント用のサーバーサイドスクリプトの作成

カスタマイズしたフィールドは、render.jsp スクリプトのみを上書きする必要があります。このスクリプトは、コンポーネントのマークアップを提供します。JSP （つまり、レンダリングスクリプト）はマークアップのラッパーと見なすことができます。

1. を使用するコンポーネントを作成する sling:resourceSuperType 継承元のプロパティ：

   /libs/granite/ui/components/foundation/form/field

2. 以下のスクリプトを上書きします。

   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 では、あるコンポーネントから別のコンポーネントに情報を渡すことは（フォームやフィールドのコンテキストで頻繁に行われます）容易には実現できません。

コンポーネントのクライアントライブラリの作成

特定のクライアント側の動作をコンポーネントに追加するには：

1. カテゴリ cq.authoring.dialog のクライアントライブラリを作成します。

2. カテゴリ cq.authoring.dialog のクライアントライブラリを作成し、その内部に JS／CSS を定義します。

   クライアントライブラリの内部に JS／CSS を定義します。

   メモ

   現時点では、Granite UI には、JS 動作を直接追加するために使用できる、標準のリスナーやフックは用意されていません。 そのため、コンポーネントに JS 動作を追加するには、JS フックをカスタムクラスに実装し、マークアップの生成中にコンポーネントに割り当てる必要があります。