建立新的Granite UI欄位元件

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

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

使用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

為元件建立伺服器端指令碼

您的自訂欄位只應覆寫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掛接實作至自訂類別，然後在標籤產生期間指派給元件。