Granite UI提供一系列设计用于表单的组件;在Granite UI词汇中,这些词称为字段。 标准的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挂接,然后在标记生成过程中将其分配给组件。