現在表示中:

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

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

注意:

これらの Granite UI フォームフィールドが特に注目されるのは、これらがコンポーネントダイアログ(タッチ操作向け UI)で使用されるからです。

注意:

フィールドについて詳しくは、Granite UI に関するドキュメントを参照してください。

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

  • サーバー側:
    • 基盤コンポーネントのコレクション
      • 基盤 - モジュール式、組み立て可能、階層化可能、再利用可能
      • コンポーネント - Sling コンポーネント
    • アプリケーション開発を支援するためのヘルパー
  • クライアント側:
    • ハイパーメディア駆動型 UI を使用して一般的なインタラクションパターンを実現するための語彙(HTML 言語の拡張)を提供するクライアントライブラリのコレクション

一般的な Granite UI コンポーネントであるフィールドは、興味深い次の 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(レンダリングスクリプト)は、マークアップのラッパーと見なすことができます。

  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)を参照してください。

    注意:

    現時点では、HTL ではコンポーネント間の情報の受け渡し(フォーム/フィールドのコンテキストでは非常に頻繁におこなわれます)を簡単には実現できないので、スクリプティングメソッドとして JSP が推奨されます。

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

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

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

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

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

    注意:

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー