文件AEM 6.4Developing 指南

建立新的Granite UI欄位元件 creating-a-new-granite-ui-field-component

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 開發人員
CAUTION
AEM 6.4已結束延伸支援，本檔案不再更新。 如需詳細資訊，請參閱 技術支援期. 尋找支援的版本 此處.

Granite UI提供多種元件，設計用於表單中；這些稱為 欄位 在Granite UI辭匯中。 標準Granite表單元件可從以下位置取得：

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

NOTE
這些Granite UI表單欄位的用途，因此特別受關注 元件對話方塊.
NOTE
如需欄位的完整詳細資訊，請參閱 Granite UI檔案.

使用Granite UI Foundation架構來開發及/或擴充Granite元件。 這有兩個元素：

  • 伺服器端：

    • 基礎元件的集合

      • 基礎 — 模組化，可組合，可分層，可重複使用
      • 元件 — Sling元件

    • 幫助應用程式開發人員

  • 用戶端：

    • clientlib的集合，提供一些辭匯(即HTML語言的延伸)，以透過超媒體導向的UI來達成一般互動模式

一般Granite UI元件 field 是由兩個感興趣的檔案組成：

  • init.jsp:處理通用處理；標籤、說明和提供呈現欄位時所需的表單值。
  • render.jsp:這是執行欄位實際呈現的地方，且需要為自訂欄位覆寫；包含於 init.jsp.

請參閱 Granite UI檔案 — 欄位 如果您想要更多詳細資訊。

如需範例，請參閱：

  • cqgems/customizingfield/components/colorpicker

  • granite/ui/components/foundation/form

NOTE
由於此機制使用JSP，因此i18n和XSS不會立即提供。 這表示您需要將字串國際化並脫離。 以下目錄包含標準實例中的通用欄位，您可以將這些欄位用作參考：
/libs/granite/ui/components/foundation/form 目錄

為元件建立伺服器端指令碼 creating-the-server-side-script-for-the-component

您的自訂欄位應僅會覆寫 render.jsp 指令碼，您可在此提供元件的標籤。 您可以將JSP（即呈現指令碼）視為標籤的包裝函式。

  1. 建立使用 sling:resourceSuperType 要繼承的屬性：

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

  2. 覆蓋指令碼：

    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

若要將特定用戶端行為新增至元件：

  1. 建立類別的clientlib cq.authoring.dialog.

  2. 建立類別的clientlib cq.authoring.dialog 定義 JS/ CSS 裡面。

    定義 JS/ CSS 在clientlib內。

    note note
    NOTE
    目前，Granite UI未提供任何可用來直接新增JS行為的現成監聽器或鈎點。 因此，若要新增其他JS行為至元件，您必須將JS連結實作至自訂類別，然後在標籤產生期間指派給元件。
recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e