创建自定义自适应表单主题 creating-custom-adaptive-form-themes

CAUTION
Adobe Experience Manager (AEM) Forms提供了主题编辑器功能来创建和修改自适应表单主题。 仅当从没有主题编辑器的版本升级,并且您对使用Less/CSS文件(预主题编辑器方法)创建的主题已有投资时,才执行本文中列出的步骤。

先决条件 prerequisites

  • 了解LESS (Leaner CSS)框架
  • 如何在Adobe Experience Manager中创建客户端库
  • 创建自适应表单模板,以便使用您创建的主题

自适应表单主题 adaptive-form-theme

自适应表单主题 ​是用于定义自适应表单样式(外观)的AEM客户端库。

创建​ 自适应模板 ​并将主题应用于该模板。 然后,您可以使用此自定义模板创建​ 自适应表单

自适应表单和客户端库

创建自适应表单主题 to-create-an-adaptive-form-theme

NOTE
以下过程使用AEM对象(如节点、属性和文件夹)的示例名称进行描述。
如果使用名称执行这些步骤,则生成的模板应类似于以下快照:

林主题的自适应表单快照
图: 林主题示例

  1. /apps节点下创建类型为cq:ClientLibraryFolder的节点。

    例如,创建以下节点:

    /apps/myAfThemes/forestTheme

  2. 向节点添加多值字符串属性categories并相应地设置其值。

    例如,将属性设置为: af.theme.forest

    CRX存储库快照

  3. 将两个文件夹lesscss以及文件css.txt添加到步骤1中创建的节点:

    • less文件夹:包含用于定义less变量和用于管理.css样式的less mixins变量文件的less变量文件。

      此文件夹包含less个变量文件、less个mixin文件、less个使用mixin定义样式的文件以及变量。 然后以样式导入所有less文件.less.

    • css文件夹:包含.css文件,您可以在其中定义要在主题中使用的静态样式。

    较少变量文件:这些是您定义或覆盖用于定义CSS样式的变量的文件。

    自适应表单提供以下.less文件中定义的现成变量:

    • /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less
    • /apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

    自适应表单还提供中定义的第三方变量:

    /apps/clientlibs/fd/af/third-party/less/variables.less

    您可以使用随自适应表单一起提供的less变量,可以覆盖这些变量,也可以创建新的less变量。

    note note
    NOTE
    在导入较少预处理器的文件时,在import语句中指定文件的相对路径。

    覆盖变量的示例:

    code language-css
    @button-background-color: rgb(19, 102, 44);
    @button-border-color: rgb(19, 102, 44);
    @button-border-size: 0px;
    @button-padding: 10px 15px;
    @button-font-color: #ffffff;
    

    要覆盖less变量:

    1. 导入默认自适应表单变量:

      /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

    2. 然后导入包含被覆盖变量的较少文件。

    新变量定义示例:

    code language-css
    @button-focus-bg-color: rgb(40, 208, 90);
    @button-hover-bg-color: rgb(30, 156, 67);
    

    更少的mixin文件: ​您可以定义接受变量作为参数的函数。 这些函数的输出是生成的样式。 请在不同的样式中使用这些mixin,以避免重复CSS样式。

    自适应表单提供中定义的现成mixin:

    • /apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less

    自适应表单还提供中定义的第三方mixin:

    • /apps/clientlibs/fd/af/third-party/less/mixins.less

    示例mixin定义:

    code language-css
    .rounded-corners (@radius) {
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      -ms-border-radius: @radius;
      -o-border-radius: @radius;
      border-radius: @radius;
    }
    
    .border(@color, @type, @size) {
       border: @color @size @type;
    }
    

    Styles.less文件: ​使用此文件包括必须在客户端库中使用的所有less文件(变量、mixin、样式)。

    在以下示例styles.less文件中,导入语句可以按任意顺序放置。

    用于导入以下.less文件的语句是必需的:

    • globalvariables.less
    • layoutvariables.less
    • components.less
    • layouts.less
    code language-css
    @import "../../../clientlibs/fd/af/guidetheme/common/less/globalvariables.less";
    @import "../../../clientlibs/fd/af/guidetheme/common/less/layoutvariables.less";
    @import "forestTheme-variables";
    @import "../../../clientlibs/fd/af/guidetheme/common/less/components.less";
    @import "../../../clientlibs/fd/af/guidetheme/common/less/layouts.less";
    
    /* custom styles */
    
    .guidetoolbar {
      input[type="button"], button, .button {
        .rounded-corners (@button-radius);
        &:hover {
          background-color: @button-hover-bg-color;
        }
        &:focus {
          background-color: @button-focus-bg-color;
        }
      }
    }
    
    form {
        background-image: url(../images/forest.png);
     background-repeat: no-repeat;
     background-size: 100%;
    }
    

    css.txt包含要为库下载的.css文件的路径。

    例如:

    code language-javascript
    #base=/apps/clientlibs/fd/af/third-party/css
    bootstrap.css
    
    #base=less
    styles.less
    
    #base=/apps/clientlibs/fd/xfaforms/xfalib/css
    datepicker.css
    listboxwidget.css
    scribble.css
    dialog.css
    
    note note
    NOTE
    styles.less文件不是强制性的。 这意味着如果您尚未定义任何自定义样式、变量或mixin,则无需创建此文件。
    但是,如果不创建style.less文件,则必须在css.txt文件中取消注释以下行:
    #base=less
    并注释以下行:
    styles.less

在自适应表单中使用主题 to-use-a-theme-in-an-adaptive-form

创建自适应表单主题后,执行以下步骤以在自适应表单中使用此主题:

  1. 要包含在中创建的主题以创建自适应表单主题部分,请创建类型为cq:Component的自定义页面。

    例如,/apps/myAfCustomizations/myAfPages/forestPage

    1. 添加sling:resourceSuperType属性并将其值设置为fd/af/components/page/base

      CRX存储库快照

    2. 要在页面中使用主题,必须将覆盖文件library.jsp添加到节点。

      然后,您可以导入在本文的创建自适应表单主题部分中创建的主题。

      以下示例代码片段导入af.theme.forest主题。

      code language-jsp
      <%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
      <cq:includeClientLib categories="af.theme.forest"/>
      
    3. 可选:在自定义页面中,根据需要覆盖header.jsp、footer.jsp和body.jsp。

  2. 创建一个自定义模板(例如: /apps/myAfCustomizations/myAfTemplates/forestTemplate),其jcr:content指向在上一步中创建的自定义页面(例如: myAfCustomizations/myAfPages/forestPage))。

    CRX存储库快照

  3. 使用上一步中创建的模板创建自适应表单。 自适应表单的外观由本文创建自适应表单主题部分中创建的主题定义。

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