创建新的Granite UI字段组件

Granite UI提供一系列设计用于表单的组件；在Granite UI词汇中，这些词称为​字段。 标准的Granite表单组件位于：

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

使用Granite UI Foundation框架开发和／或扩展Granite组件。 它包含两个元素：

• 服务器端：

  • 基础组件集合

    • 基础——模块化、可合成、可分类、可重用
    • 组件——吊具组件

  • 帮助应用程序开发的帮助者

• 客户端：

  • 一个客户端库集合，提供一些词汇（即HTML语言的扩展），通过超媒体驱动的UI实现通用交互模式

通用Granite UI组件field由两个感兴趣的文件组成：

• init.jsp:处理通用处理；标记、描述并提供呈现字段时需要的表单值。
• render.jsp:这是执行字段实际呈现的地方，并且需要覆盖自定义字段；包含 init.jsp。

如需更多详细信息，请参阅Granite UI文档——字段。

有关示例，请参阅：

• 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挂接，然后在标记生成过程中将其分配给组件。