建立新的Granite UI欄位元件 creating-a-new-granite-ui-field-component
Granite UI提供一系列設計用於表單的元件；這些在Granite UI辭彙中稱為 欄位。 標準Granite表單元件可在下列位置取得：
/libs/granite/ui/components/foundation/form/*
使用Granite UI Foundation架構來開發及/或擴充Granite元件。 此變數有兩個元素：
-
伺服器端：
-
基礎元件的集合
- 基礎 — 模組化、可組合、可分層、可重複使用
- 元件 — Sling元件
-
協助開發應用程式的協助程式
-
-
使用者端：
- clientlibs的集合，提供一些辭彙(即HTML語言的延伸)以透過Hypermedia驅動的使用者介面實現一般互動模式。
一般Granite UI元件field由兩個感興趣的檔案組成：
init.jsp：處理一般處理；標籤、說明，並提供呈現欄位時所需的表單值。render.jsp：這是實際執行欄位轉譯的位置，必須覆寫自訂欄位的內容；由init.jsp包含。
如需詳細資訊，請參閱Granite UI檔案 — 欄位。
如需範例，請參閱：
-
cqgems/customizingfield/components/colorpicker- 由程式碼範例提供
-
granite/ui/components/foundation/form
/libs/granite/ui/components/foundation/form目錄建立元件的伺服器端指令碼 creating-the-server-side-script-for-the-component
您的自訂欄位應該僅覆寫render.jsp指令碼，您可在其中提供元件的標籤。 您可以將JSP （即轉譯指令碼）視為標示的包裝函式。
-
建立使用
sling:resourceSuperType屬性繼承自下列專案的元件：/libs/granite/ui/components/foundation/form/field -
覆寫指令碼：
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
若要將特定使用者端行為新增至元件：
-
建立類別
cq.authoring.dialog的clientlib。 -
建立類別
cq.authoring.dialog的clientlib並在其中定義您的JS/CSS。在clientlib中定義您的
JS/CSS。note note NOTE 目前，Granite UI未提供任何您可以直接用來新增JS行為的現成接聽程式或鉤點。 因此，若要將其他JS行為新增至元件，您必須實作JS連結至自訂類別，然後在標籤產生期間將其指派至元件。