自定义AEM表单工作区简介

最近更新： 2023年5月4日

创建对象：

  • 用户
注意
AEM 6.4已结束扩展支持，本文档将不再更新。 有关更多详细信息，请参阅 技术支助期. 查找支持的版本 此处.

AEM表单工作区提供了修改其界面的表示语义和功能的功能。 更改样式、布局、格式、品牌和核心功能的自定义类型如下所述。

cu_customized_workspace_example

自定义类型

AEM Forms工作区支持各种自定义，以更新用户界面的布局、外观、功能等。 这些自定义涉及更新以下一项或多项：

  • 用户界面的外观
  • 使用语义自定义的功能
  • 在其他应用程序中重用HTML组件

用户界面更改

您可以更改AEM Forms工作区的外观、布局和其他表示语义。 通过自定义CSS、HTML模板和JavaScript™文件来更改工作区。 所有默认文件都在默认安装中提供。

中介绍了最常用的步骤 AEM Forms工作区自定义的一般步骤. 有关此类自定义的特定示例（包括详细步骤），请参阅本文末尾的相关文章。

了解样式表

在自定义工作区之前，请熟悉AEM Forms提供的默认样式表，网址为/libs/ws/css/style.css。

要自定义工作区，建议您熟悉位于/libs/ws/css文件夹中的现有样式表style.css。 下面介绍了一些主要组件。

CSS元素修改了用户界面组件
#标题AEM Forms工作区标题
.categoryList类别列表
.categoryList .header类别列表标题
.categories， .filters类别列表下方的空格
.category， .filter类别
.category:hover， .category.selected， .filter:hover， .filter.selected选定类别和将鼠标悬停在类别样式上
categoryListBar .tool， categoryListBar .content开始流程页（已关闭的类别列表）
filterListBar .tool、filterListBar .content要执行的页面（已关闭的过滤器列表）
processNameListBar .tool、processNameListBar .content跟踪页面（已关闭的进程名称列表）
.startPointList， .tasklist起始点列表或任务列表
.startPointList .header， .tasklist .header起始点列表或任务列表的标头
.startpoint.selected， .task.selected所选起点或任务
.startpoint.selected .description， .task.selected .description所选起点或任务的描述
#taskarea任务区
#header .dropdown标题中的用户下拉列表
.sortDrop dd ul排序任务下拉列表

CSS

AEM Forms工作区的外观借用了CSS的外观。 通过自定义CSS，您可以更改工作区的表示语义，如字体、颜色、品牌和布局。

CSS自定义的顶级步骤包括：

  • 创建CSS文件。
  • 向此CSS添加样式项。 请参阅了解CSS样式以了解更多信息。
  • 更新其在 html.jsp.

有关执行这些自定义的确切步骤，请参阅 AEM Forms工作区自定义的一般步骤. AEM Forms工作区附带的CSS文件位于/libs/ws/css/。 对于与CSS相关的自定义设置，请使用 装运包. 有关与CSS相关的自定义的特定示例，请参阅本文末尾的相关帮助主题。

图像

您可以自定义AEM Forms工作区，以添加用户的变形或添加组织的徽标。 对于这些自定义设置，请使用 装运包.

对图像进行自定义的顶级步骤包括：

  • 安装和配置WebDAV。
  • 添加新图像。
  • 添加与添加的图像对应的新样式。
  • 链接到 html.jsp 文件。

要开始在AEM Forms工作区中自定义图像，请按照 AEM Forms工作区自定义的一般步骤. 有关与图像相关的自定义的特定示例，请参阅本文末尾的相关帮助主题。

HTML模板

HTML模板有助于定义工作区用户界面的外观和布局。 通过更新默认HTML模板，您可以自定义布局默认用户界面。

对HTML模板进行自定义的顶级步骤包括：

  • 在用户创建的文件夹中，复制所需的默认文件。
  • 在用户定义的文件夹中添加新模板。
  • 对复制的文件（如新模板的路径）进行相关更新。

有关此类自定义的特定示例，请参阅本文末尾提供的帮助主题。 在 装运包 或 开发包，具体取决于要自定义的模板。

语义变化

要修改AEM Forms工作区功能，请更改JavaScript源代码。 核心功能的修改将标记为语义更改。 您可以修改作为AEM Forms工作区源代码一部分提供的模型、视图和模板。

要进行语义更改以修改AEM Forms工作区的功能，请执行以下顶级步骤：

  • 在用户创建的文件夹中，复制相应的默认文件。
  • 在用户定义的文件夹中添加新模型和视图。
  • 进行相关更新，如更新默认JavaScript文件中新添加模型和视图的路径。
  • 缩小资源包以优化性能。

有关源代码中组件的更多概念信息，请参阅 可重用组件描述. 对于这些自定义设置，请使用开发包。

可重用组件

由于AEM Forms工作区是一款基于组件的软件，因此可以轻松自定义和重复使用。 您可以轻松地将工作区组件与Web应用程序相集成。

有关更多概念信息，请参阅 可重用组件描述 和有关使用组件的说明，请参阅 在Web应用程序中集成AEM Forms工作区组件.

构建AEM Forms工作区代码

SDK包

该包包含AEM Forms工作区的源代码。 该包位于 [*LC root*]\sdk\html-workspace\adobe-lc-workspace-src.zip.

它主要用于自定义，因为它提供了生成以下内容的功能：

  • 发运、调试和开发配置文件的CRX包(在 CRX包)。
  • 自定义代码的缩小版本（用于语义更改）。

WS内容

  • client-pkg:

    • src — 包含创建CRX节点所需的工件。
    • pom.xml — 为各种配置文件构建部署包的脚本WS-Deploy包

  • client-html:

    • 程序集 — 包含脚本用于创建AEM Forms工作区SDK的zip.xml。

    • src/main/webapp -

      • css — 包含AEM Forms工作区的样式表。

      • 图像 — 包含在AEM Forms工作区中使用的图像。

      • js:

        • libs — 包含在AEM Forms工作区中使用的所有第三方库。

        • 许可证 — 包含HTML和JS文件的许可证以及用于为这些许可证添加前缀的代码，以指定相应的源文件。

        • 缩小器 — 用于组合、缩小和升级自定义Javascript代码。

        • resourcejs_optimizer — 用于javascript源的组合、缩小和升级。

        • resource_generator — 用于生成register.js和modelcontrollerpath.js。

        • 运行时：

          • 初始值设定项 — 包含初始值设定项.js ，用于初始化AEM Forms工作区中使用的骨干视图和模型。
          • 模型 — 包含AEM Forms工作区中所有组件的骨干模型。
          • 路由 — 包含javascript文件和HTML文件，这些文件在AEM Forms工作区中加载开始进程、任务、跟踪和首选项。
          • 服务 — 包含在AEM Forms工作区中使用的service.js。 所有服务器调用均通过service.js进行。
          • 模板 — 包含所有模板，即在AEM Forms工作区中HTML所有视图的文件。
          • util — 包含在AEM Forms工作区中使用的所有实用工具文件(javascript)。
          • 视图 — 包含AEM Forms工作区中所有组件的主干视图。

        • main.js

        • router.js

      • libs/ws:pdf.html和pluginPing.pdf用于在AEM Forms工作区中加载PDF forms，而WSNextAdapter.swf用于在AEM Forms工作区中加载SWF表单和指南。

      • 区域设置：

        • de-DE — 包含德语的translation.json。
        • en-US — 包含英语的translation.json。
        • fr-FR — 包含法语的translation.json。
        • ja-JP — 包含日语的translation.json。
        • html.jsp — 包含用于找出当前浏览器区域设置的代码。

      • html.jsp

      • GET.jsp