文档AEM 6.5用户指南

设置自适应表单的样式 do-not-publish-style-your-adaptive-form

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 管理员
  • 用户
  • 开发人员

了解如何创建自定义主题、设置单个组件的样式以及在主题中使用Web Fonts。

主页图像

本教程是创建您的第一个自适应表单系列中的步骤。 Adobe建议您按照时间顺序跟踪系列，以了解、执行和演示完整的教程用例。

关于教程 about-the-tutorial

您可以使用主题为自适应表单提供独特的外观和样式。 您可以应用自适应表单编辑器提供的现成主题，或创建自己的自定义主题。 AEM Forms提供主题编辑器以创建自定义主题。 单个主题可以为在移动设备、平板电脑或桌面上打开的相同自适应表单提供不同的外观。 使用主题编辑器不需要预先了解CSS或LESS，但需要使用。

在本教程结束时，您应该能够执行以下操作：

  • 将现成的主题应用于自适应表单
  • 使用主题编辑器为自适应表单创建主题
  • 为单个组件设置样式
  • 附加部分：在自定义主题中使用Web Fonts

完成本教程后，您的表单应类似于以下内容：

带有自定义主题的表单

开始之前 before-you-start

在本地计算机上下载下面给定的标题样式和徽标图像。 shipping-address-add-update-form自适应表单的页眉使用页眉样式和徽标图像。 标题样式图像显示在标题的右侧。

获取文件

获取文件

步骤1：将主题应用于自适应表单 step-apply-a-theme-to-your-adaptive-form

自适应表单编辑器提供了多个现成的主题。 如果您计划不使用自适应表单的自定义样式，则还可以使用现成的主题发布自适应表单。 主题与自适应表单无关。 您可以将同一主题应用于多个自适应表单。

要将主题应用于自适应表单：

  1. 打开自适应表单进行编辑。

    http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. 打开​ 自适应表单容器 ​的属性。 在属性浏览器中，导航到​ 基本 > 自适应表单主题。 自适应表单主题 ​字段列出了所有现成的主题和自定义主题。 默认情况下，将应用画布主题。

  3. 从​ 自适应表单主题 ​字段中选择主题。 例如，调查主题。 选择 aem_6_3_forms_save ，以便应用所选主题。

    带有默认主题的自适应表单

    图： 带有默认主题的自适应表单

    带有调查主题的 自适应表单

    图： 带有调查主题的自适应表单

第2步：更新您的自适应表单 step-update-your-adaptive-form

以上显示的设计要求更改现有自适应表单的占位符文本和徽标。

要更新您的自适应表单：

  1. 更改标题的现有徽标和文本。 要删除徽标，请执行以下操作：

    1. 在表单编辑器中打开表单。

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

    2. 选择标头组件中的徽标图像，然后选择 cmppr 属性。 在image属性中，选择X以删除现有的徽标图像。

    3. 选择​ 上传，选择logo.png，然后选择 aem_6_3_forms_save 以保存更改。 图像下载到开始之前。

    4. 选择标题文本We.Retail，然后选择 aem_6_3_edit edit。 将标题文本更改为we retail。 仅对we retail中的we应用粗体格式。

      we-retail-logo-text

  2. 移除标题并添加占位符文本：

    1. 选择“客户ID”字段，然后选择 cmppr 属性。

    2. 将​ 标题 ​字段的内容复制到​ 占位符文本 ​字段。

    3. 删除​ Title ​字段的内容，然后选择 aem_6_3_forms_save 。

    4. 对表单中的所有文本框、数字框和电子邮件字段重复前三个步骤。

      已更新自适应表单

步骤3：为自适应表单创建自定义主题 step-create-a-custom-theme-for-your-adaptive-form

您可以使用主题编辑器创建自定义主题。 主题编辑器是一个功能强大的WYSIWYG编辑器。 它是一种将CSS应用于自适应表单的各种组件的可视化方法。 它提供更细化的控件，用于设置自适应表单的组件和面板的样式。

主题是一个单独的实体，如自适应表单。 它包含自适应表单的组件和面板的样式(CSS)。 样式包括CSS属性，例如背景颜色、状态颜色、透明度、对齐方式和大小。 应用主题时，指定的样式将应用于自适应表单的相应组件。

在本教程中，您将设置页眉和页脚、文本和数字组件、附件组件和按钮的样式。 让我们从创建主题开始：

创建主题 create-a-theme

  1. 登录到AEM创作实例并导航到​ Adobe Experience Manager > Forms > 主题。 默认URL为http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes。

  2. 选择​ 创建 ​并选择​ 主题。 此时将显示创建主题页面，其中包含创建主题所需的字段。 Title ​和​ Name ​字段是必填字段：

    • 标题： ​指定主题的标题。 例如，全局主题。 ​标题可帮助您从主题列表中识别主题。
    • 名称： ​指定主题的名称。 例如，Global-Theme。 ​在存储库中创建具有指定名称的节点。 当您开始键入标题时，将自动生成“名称”字段的值。 您可以更改建议的值。名称字段只能包含字母数字字符、连字符和下划线。所有无效的输入都将替换为连字符。

  3. 选择​ 创建。将创建一个主题，并出现一个对话框以打开表单进行编辑。 选择​ 打开 ​以在新选项卡中打开新创建的主题。 主题将在主题编辑器中打开。 对于样式，主题编辑器使用AEM Forms随附的现成自适应表单。

    有关使用主题编辑器UI的信息，请参阅关于主题编辑器。

  4. 选择​ 主题选项 主题选项 > 配置。 在​ 预览表单 ​字段中，选择​ shipping-address-add-update-form ​自适应表单，选择 aem_6_3_forms_save ，然后选择​ 保存。 现在，主题编辑器配置为使用您自己的自适应表单，而不是默认的自适应表单。 选择​ 取消 ​以返回主题编辑器。

    自定义主题

    图： 具有shipping-address-add-update-form自适应表单的主题编辑器

    create-a-theme

    图： 带有默认表单的自适应表单

页眉和页脚为自适应表单提供一致且独特的外观。 通常，页眉包含组织的徽标和名称，页脚包含版权信息，并且这些信息和信息在组织的多个表单中保持相同。 要设置shipping-address-add-update-form自适应表单的页眉和页脚的样式，请执行以下操作：

  1. 在“选择器”面板中导航​ Header > Text ​选项。 “选择器”面板位于主题编辑器的左侧。 如果该面板不可见，请选择 切换侧面板 切换侧面板。

  2. 在​ 文本 ​折叠面板中设置以下属性，然后选择 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    属性 价值
    字体系列 Arial®
    字体颜色 FFFFFF
    字体大小 54像素

  3. 选择标头构件并选择​ 标头。 用于设置标题小组件样式的选项显示在左侧。 展开​ Dimension和位置 ​折叠面板，将​ 高度 ​设置为120px，然后选择 aem_6_3_forms_save 。

  4. 展开标题小组件的​ 背景 ​折叠面板，将​ 背景颜色 ​设置为F6921E.

    将鼠标悬停在​ 图像和渐变 > +添加 ​上，选择​ 图像。 设置以下属性并选择 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    属性 价值
    图像 上传header-style.png。 图像下载到开始之前。
    位置 右下
    并排显示 不重复

  5. 在主题编辑器中，选择标题中的徽标，然后选择​ 标题徽标。 展开“Dimension和位置”折叠面板，设置以下属性并选择 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    边距 价值
    边距
    • 上：1.5雷姆
    • 底部：-35像素
    • 左： 1rem

    提示： 选择 链接图标为每个字段提供不同的值。

    高度 4.75雷姆

  6. 选择页脚小组件并选择​ 页脚。 展开​ 背景 ​折叠面板，将​ 背景颜色 ​设置为F6921E，然后选择 aem_6_3_forms_save 。

设置数据捕获组件的样式，并将背景应用于自适应表单 style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

您可以在自适应表单中使用多个组件来捕获数据。 例如，文本框和数字框。 您可以为所有数据捕获组件提供相同的样式，或者为每个组件提供单独的样式。 在本教程中，相同的样式将应用于数字框（客户ID、邮政编码）和文本框（客户ID、姓名、送货地址、州、电子邮件）。 设置数据捕获组件的样式：

  1. 选择​ 客户ID ​字段并选择​ 字段小组件 ​选项。 设置以下属性并选择 aem_6_3_forms_save 。

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header
    可折叠项 属性 价值
    边框 边框颜色 A7A9AC
    边框 边框半径
    • 顶部： 7像素
    • 右： 7像素
    • 底部： 7像素
    • 左： 7像素
    文本 字体系列 Arial®
    文本 字体颜色 939598
    文本 字体大小 18像素
    Dimension和位置 宽度 60%
    Dimension和位置 边距
    • 左：10雷姆

  2. 选择​ 客户ID ​字段上方的空白区域，然后选择​ 响应面板容器。 将​ Background > Background Color ​设置为F1F2F2。 选择 aem_6_3_forms_save 。

    响应面板容器

设置按钮的样式 style-the-buttons

您可以使用自定义主题将相同的样式应用于自适应表单的所有按钮，并使用内联样式将样式应用于特定按钮。 设置按钮样式：

  1. 选择​ 提交 ​按钮并选择​ 按钮 ​选项。 设置以下属性并选择 aem_6_3_forms_save 。

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header
    可折叠项 属性 价值
    背景 背景颜色 F6921E
    边框 边框颜色 F6921E
    边框 边框半径
    • 顶部： 7像素
    • 右： 7像素
    • 底部： 7像素
    • 左：7像素
    文本 字体系列 Arial®
    文本 字体颜色 FFFFFF
    文本 字体大小 18像素

  2. 将自定义主题全局主题应用于您的自适应表单。 如果样式未反映在自适应表单上，请清理浏览器缓存并重试。

    style-data-capture-components

步骤4：设置单个组件的样式 step-style-individual-components

某些样式仅适用于特定组件。 此类组件在自适应表单编辑器中设置样式。

  1. 打开自适应表单进行编辑。 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. 在顶部栏上，选择​ 样式 ​选项。

    style-option

  3. 选择​ 附加 ​按钮并选择 aem_6_3_edit 图标。 在​ Dimension和位置 ​折叠面板中设置以下属性：

    table 0-row-2 1-row-2 2-row-2
    属性 价值
    浮点数 左
    宽度 10%

  4. 选择​ 政府批准的地址验证 ​选项，然后选择 aem_6_3_edit 图标。 设置以下属性：

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header
    可折叠项 属性 价值
    尺寸及位置 浮点数 左
    尺寸及位置 宽度 73%
    尺寸及位置 边距
    • 左：10像素
    尺寸及位置 高度 40像素
    Dimension和位置 边距
    • 右：2分米
    • 左：10雷姆
    背景 背景颜色 FFFFFF
    边框 边框宽度 1像素
    边框 边框样式 实线
    边框 边框颜色 A7A9AC
    边框 边框半径 7像素
    文本 字体系列 Arial®
    文本 字体颜色 BCBEC0
    文本 字体大小 18像素
    文本 行高 2

  5. 选择​ 提交 ​按钮并选择 aem_6_3_edit 图标。 设置以下属性：

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    可折叠项 属性 价值
    Dimension和位置 浮点数 右
    Dimension和位置 边距
    • 上：5分
    • 右：14雷姆
    • 底部：20像素
    • 左： 20像素
    背景 背景颜色 F6921E
    边框 边框颜色 F6921E

    styled-adaptive-form-1

步骤5：附加部分：在自定义主题中使用Web Fonts step-bonus-section-using-web-fonts-in-a-custom-theme

您可以使用各种字体设计自适应表单。 在查看自适应表单的所有设备上可能没有用于设计自适应表单的字体。 您可以使用Web字体服务将所需的字体交付给目标设备。

Adobe Fonts是Web Fonts服务。 您可以在自适应表单中配置并使用服务。 要在自适应表单中使用Adobe Fonts，请执行以下操作：

  1. 浏览Adobe库并选择字体以设置表单的样式。
NOTE
可添加标记或筛选器以优化字体列表。

  1. 单击</>按钮将系列添加到Web项目中，以防您找到所需的字体。

    select-font-from-font-library

    出现“Add fonts to a web project（将字体添加到Web项目）”对话框。

    note note
    NOTE
    只有在Web项目中具有</>按钮时，才能添加字体。

  2. 命名您的Web项目。

  3. 选中复选框以选择要包括的字体粗细和样式。

    添加字体库

  4. 选择​ 单击 ​以创建项目。

  5. 从屏幕复制嵌入代码和URL。
    嵌入代码和URL

  6. 单击​ 完成 ​以关闭Web项目窗口。

  7. 登录AEM实例并转到URL http://server:port/crx/de/index.jsp#

  8. 在CRXDE中创建文件夹结构，例如/apps/[fontslibrary]/[customlibrary(clientlibrary)]。

  9. 转到新创建的clientlibs文件夹并添加allowProxy和categories属性。

  10. 导航到/apps/[fontslibrary]/[customlibrary(clientlibrary)]并创建css文件夹。

  11. 转到创建的CSS文件夹并创建一个文件。 例如，创建一个文件作为fonts.css，并粘贴嵌入代码以及URL。
    文件夹结构

  12. 保存更改。

NOTE
要在自适应表单中使用添加的自定义字体，请确保​ 客户端库类别 ​中的客户端库名称与clientlib文件夹的“类别”选项中指定的名称一致。

自适应表单现在可通过以下自定义字体客户端库访问包含的字体。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2