建立新的Granite UI欄位元件

Granite UI提供多種元件,可用於表單;這些欄位在Granite UI辭彙中稱為​fields。 標準的Granite表單元件可從以下網址取得:

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

注意

這些Granite UI表單欄位特別受關注,因為它們用於元件對話方塊

注意

如需欄位的完整詳細資訊,請參閱Granite UI檔案

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

  • 伺服器端:

    • 基礎元件的集合

      • 基礎——模組化、可組合、可分層、可重複使用
      • 元件- Sling元件
    • 協助應用程式開發人員

  • 用戶端:

    • clientlibs的集合,提供一些辭彙(即HTML語言的擴充功能),以透過Hypermedia導向的UI來達成一般互動模式

通用Granite UI元件field由兩個感興趣的檔案組成:

  • init.jsp:處理通用處理;標示、說明,並提供您在轉譯欄位時所需的表單值。
  • render.jsp:這是執行欄位實際轉譯的地方,您需要針對自訂欄位覆寫;包含於 init.jsp

如需詳細資訊,請參閱Granite UI檔案- Field

如需範例,請參閱:

  • 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

    注意

    目前,JSP是偏好的指令碼方法,因為在HTL中,將資訊從一個元件傳遞到另一個元件(在表單/欄位中相當常見)並不容易。

為元件建立client-library

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

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

  2. 建立類別cq.authoring.dialog的clientlib ,並在其中定義JS/ CSS

    在clientlib中定義您的JS/ CSS

    注意

    目前,Granite UI不提供任何現成可用的監聽程式或勾點,您可直接用來新增JS行為。 因此,若要新增其他JS行為至元件,您必須將JS掛接實作至自訂類別,然後在標籤產生期間指派給元件。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now