自定义AEM表单工作区简介

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

自定义类型

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工作区的外观借用了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

CRX包

CRX包可以部署在CRX™存储库上。 它位于 [*LC root*]\crx-repository\install\adobe-lc-workspace-pkg.zip.

可以使用下面描述的三个配置文件构建此包。

发运配置文件

命令

• mvn clean -P在发送到客户端的源包的client-pkg文件夹上发运安装。
• 仅在64位JVM上执行发运配置文件命令。

WS内容

• css — 包含style.css、ie.css和jquery-ui.css。

• 图像 — 包含所有图像。

• js:

  • libs:

    • require — 包含require.js。
    • jqueryui — 包含jquery.ui.datepicker.ja.js。

  • 运行时：

    • 模板 — 包含所有模板，即在AEM Forms工作区中HTML所有组件的文件。

  • main.js（合并、缩小和缩小）。

  • registry.js

• libs:

  • ws — 包含pluginPing.pdf、pdf.html和WSNextAdapter.swf。

• 区域设置 — 包含.content.xml。

• 区域设置：

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

• 索引 — 包含.content.xml

• 配置文件 — 包含offline.jsp。

• GET.jsp

• html.jsp

• content.xml

• _rep_policy.xml

调试配置文件

命令

• mvn clean -P在client-pkg上安装调试
• 调试配置文件命令执行仅在64位JVM上工作。

WS内容

• css — 包含style.css、ie.css和jquery-ui.css。

• 图像 — 包含所有图像。

• js:

  • libs:

    • require — 包含require.js。
    • jqueryui — 包含jquery.ui.datepicker.ja.js。

  • 运行时：

    • 模板 — 包含所有模板，即在AEM Forms工作区中HTML所有组件的文件。

  • main.js（合并）。

  • registry.js

• libs:

  • ws — 包含pluginPing.pdf、pdf.html和WSNextAdapter.swf。

• 区域设置 — 包含.content.xml。

• 区域设置：

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

• 索引 — 包含.content.xml

• 配置文件 — 包含offline.jsp。

• GET.jsp

• html.jsp

• content.xml

• _rep_policy.xml

开发配置文件

命令

mvn clean -P Dev在client-pkg上安装

WS内容

• css — 包含style.css、ie.css和jquery-ui.css。

• 图像 — 包含所有图像。

• js:

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

  • require — 包含require.js

  • jqueryui — 包含jquery.ui.datepicker.ja.js

  • 运行时：

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

  • main.js

  • registry.js

  • router.js

• libs:

  • ws — 包含pluginPing.pdf、pdf.html和WSNextAdapter.swf。

• 区域设置 — 包含.content.xml。

• 区域设置：

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

• 索引 — 包含.content.xml

• 配置文件 — 包含offline.jsp。

• GET.jsp

• html.jsp

• content.xml

• _rep_policy.xml

Business.Adobe.com 资源

Multichannel Communication Cms Cloud Customer Communications Mobile Forms Web Content Management Customer Experience Management