自定义AEM表单工作区简介

最近更新： 2024年7月15日

适用对象：
Experience Manager 6.5

主题：

创建对象：

管理员
用户
开发人员

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元素	用户界面组件已修改
#header	AEM Forms工作区的标题
.categoryList	类别列表
.categoryList .header	类别列表标题
.类别， .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相关的自定义设置，请使用Ship包。有关CSS相关自定义的特定示例，请参阅本文末尾的相关帮助主题。

图像

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

自定义图像的顶级步骤如下：

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

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

HTML模板

HTML模板有助于定义workspace用户界面的外观和布局。通过更新默认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文件的许可证，以及用于在相应源文件中添加这些许可证前缀的代码。
    - minifier — 用于组合、缩小和升级customizedJavaScript代码。
    - resourcejs_optimizer — 用于JavaScript源的组合、缩小和升级。
    - resource_generator — 用于生成register.js和modelcontroller.js。
    - 运行时：
      - 初始值设定项 — 包含用于初始化AEM Forms工作区中使用的骨干视图和模型的initializer.js。
      - 模型 — 包含AEM Forms工作区中存在的所有组件的主干模型。
      - 路由 — 包含JavaScript文件和HTML文件，这些文件加载AEM Forms工作区中的启动进程、待办事项、跟踪和首选项。
      - 服务 — 包含在AEM Forms工作区中使用的service.js。所有服务器调用均通过service.js进行。
      - 模板 — 包含所有模板，即AEM Forms workspace中所有视图的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上可用。

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

配置文件	描述	使用
装运模板	此配置文件使用缩小功能创建尽可能小的CRX包。此包效率最高。所有JavaScript™文件将合并并缩小为一个JS文件。	当JS文件中不需要进一步语义更改时，使用此配置文件。
调试配置文件	此配置文件创建一个效率适度的CRX包。包的大小略大于使用Ship profile创建的包。此包将大多数JavaScript文件合并为一个JS文件。	使用此配置文件进行调试。
开发配置文件	此配置文件将创建一个尽可能大的CRX包。所有JavaScript文件都可单独使用，因为它们位于SDK包中。	在合并语义更改时使用此配置文件。

发货配置文件

命令

mvn clean -P在发送到客户端的Source包的client-pkg文件夹上发送安装。
ship profile命令仅在64位JVM上执行。

WS内容

css — 包含style.css、ie.css和jquery-ui.css。
图像 — 包含所有图像。
js：
- 库：
  - require — 包含require.js。
  - jqueryui — 包含jquery.ui.datepicker.ja.js。
- 运行时：
  - 模板 — 包含所有模板，即AEM Forms workspace中所有组件的HTML文件。
- main.js（合并、缩小和放大）。
- registry.js
库：
- 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和jqueri-ui.css。
图像 — 包含所有图像。
js：
- 库：
  - require — 包含require.js。
  - jqueryui — 包含jquery.ui.datepicker.ja.js。
- 运行时：
  - 模板 — 包含所有模板，即AEM Forms workspace中所有组件的HTML文件。
- main.js（已组合）。
- registry.js
库：
- 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在客户端上安装开发 — pkg

WS内容

css — 包含style.css、ie.css和jqueri-ui.css。
图像 — 包含所有图像。
js：
- 库 — 包含在AEM Forms工作区中使用的所有库。
- require - Contains require.js
- jqueryui — 包含jquery.ui.datepicker.ja.js
- 运行时：
  - 初始值设定项 — 包含initializer.js和modelcontrollerpath.js。
  - 模型 — 包含AEM Forms工作区中所有组件的模型。
  - 路由 — 包含JavaScript文件和HTML文件，这些文件加载AEM Forms工作区中的启动进程、待办事项、跟踪和首选项。
  - 服务 — 包含在AEM Forms工作区中使用的service.js。
  - 模板 — 包含所有模板，即AEM Forms workspace中所有组件的HTML文件。
  - util — 包含在AEM Forms工作区中使用的所有实用工具文件(JavaScript)。
  - 视图 — 包含AEM Forms工作区中所有组件的视图。
- main.js
- registry.js
- router.js
库：
- 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

recommendation-more-help