创建新的Granite UI字段组件

Granite UI提供了一系列旨在用于表单的组件;在Granite UI词汇中,这些字段称为​字段。 标准Granite表单组件位于:

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

注意

这些Granite UI表单字段特别受关注,因为它们用于组件对话框

注意

有关字段的完整详细信息,请参阅Granite UI文档

使用Granite UI Foundation框架开发和/或扩展Granite组件。 其中包含两个元素:

  • 服务器端:

    • 基础组件的集合

      • 基础 — 模块化、可组合、可分层、可重用
      • 组件 — Sling组件
    • 帮助应用程序开发人员

  • 客户端:

    • clientlibs集合,提供一些词汇(即HTML语言的扩展),以通过超媒体驱动的UI实现通用交互模式

通用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(即渲染脚本)视为标记的包装器。

  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中很难实现将信息从一个组件传递到另一个组件(在表单/字段的上下文中非常频繁)。

为组件创建客户端库

要向组件添加特定的客户端行为,请执行以下操作:

  1. 创建类别cq.authoring.dialog的clientlib。

  2. 创建类别cq.authoring.dialog的clientlib,并在其中定义JS/ CSS

    在clientlib中定义JS/ CSS

    注意

    目前,Granite UI未提供任何可用于直接添加JS行为的现成监听器或挂钩。 因此,要向组件添加其他JS行为,您必须将JS挂接实施到自定义类,然后在标记生成期间将该类分配给组件。

在此页面上