Granite UI提供多種元件,設計用於表單中;這些在Granite UI辭匯中稱為fields。 標準Granite表單元件可從以下位置取得:
/libs/granite/ui/components/foundation/form/*
這些Granite UI表單欄位用於元件對話方塊時,會特別受到關注。
如需欄位的完整詳細資訊,請參閱Granite UI檔案。
使用Granite UI Foundation架構來開發及/或擴充Granite元件。 這有兩個元素:
伺服器端:
基礎元件的集合
幫助應用程式開發人員
用戶端:
通用Granite UI元件field
由兩個感興趣的檔案組成:
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(即呈現指令碼)視為標籤的包裝函式。
建立使用sling:resourceSuperType
屬性繼承的新元件:
/libs/granite/ui/components/foundation/form/field
覆蓋指令碼:
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中很難將資訊從一個元件傳遞至另一個元件(在表單/欄位的環境中相當常見)。
若要將特定用戶端行為新增至元件:
建立類別cq.authoring.dialog
的clientlib。
建立類別cq.authoring.dialog
的clientlib,並在其中定義您的JS
/ CSS
。
在clientlib中定義您的JS
/ CSS
。
目前,Granite UI未提供任何可用來直接新增JS行為的現成監聽器或鈎點。 因此,若要新增其他JS行為至元件,您必須將JS連結實作至自訂類別,然後在標籤產生期間指派給元件。