自适应表单主题是AEM客户端库,用于定义自适应表单的样式(外观)。
创建自适应模板并将主题应用到模板。 然后,使用此自定义模板创建自适应表单。
使用AEM对象(如节点、属性和文件夹)的示例名称介绍了以下过程。
如果使用名称执行这些步骤,则生成的模板应类似于以下快照:
单快照图 :森林主题范例
在/apps
节点下创建类型为cq:ClientLibraryFolder
的节点。
例如,创建以下节点:
/apps/myAfThemes/forestTheme
将多值字符串属性categories
添加到节点并适当设置其值。
例如,将属性设置为:af.theme.forest
。
将两个文件夹less
和css
以及一个文件css.txt
添加到在步骤1中创建的节点:
less
文件夹:包含 less
用于定义变量和 less
用 less mixins
于管理。css样式的变量文件。
此文件夹由less
变量文件、less
mixin文件和less
文件组成,这些文件使用mixin和变量定义样式。 然后,所有这些较少的文件都以样式。less导入。
css
文件夹:包含。css文件,您可在其中定义要在主题中使用的静态样式。
变量文件更少:这些是文件,您可在其中定义或覆盖用于定义CSS样式的变量。
自适应表单提供在以下。less文件中定义的OOTB变量:
/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
您可以使用随自适应表单提供的较少变量,可以覆盖这些变量,也可以创建新的较少变量。
导入较少预处理器的文件时,在import语句中指定文件的相对路径。
覆盖变量示例:
@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
变量:
导入默认自适应表单变量:
/apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less
然后导入包含被覆盖变量的较少文件。
新变量定义示例:
@button-focus-bg-color: rgb(40, 208, 90);
@button-hover-bg-color: rgb(30, 156, 67);
少混音文件: 您可以定义接受变量作为参数的函数。这些函数的输出是生成的样式。 在不同的样式中使用这些混音,以避免重复CSS样式。
自适应表单提供在以下位置定义的OOTB混合:
/apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less
自适应表单还提供以下定义的第三方混合:
/apps/clientlibs/fd/af/third-party/less/mixins.less
混音定义示例:
.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 File:使 用此文件包含客户端库中需要使用的所有较少文件(变量、混合、样式)。
在以下示例styles.less
文件中,可以按任意顺序放置import语句。
导入以下。less文件的语句是必填的:
globalvariables.less
layoutvariables.less
components.less
layouts.less
@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文件的路径。
例如:
#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
styles.less文件不是必需的。 这意味着,如果您尚未定义任何自定义样式、变量或混合,则无需创建此文件。
但是,如果不在css.txt文件中创建style.less文件,则需要取消以下行的注释:
#base=less
并注释以下行:
styles.less
创建自适应表单主题后,请执行以下步骤以在自适应表单中使用此主题:
要包含在中创建的主题以创建自适应表单主题部分,请创建类型为cq:Component
的自定义页面。
例如,/apps/myAfCustomizations/myAfPages/forestPage
添加sling:resourceSuperType
属性,将其值设置为fd/af/components/page/base
。
要使用页面中的主题,您需要向节点添加一个覆盖文件library.jsp。
然后,导入在本文的“要创建自适应表单主题”部分中创建的主题。
以下示例代码片段导入af.theme.forest
主题。
<%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
<cq:includeClientLib categories="af.theme.forest"/>
可选:在自定义页面中,根据需要覆盖header.jsp、footer.jsp和body.jsp。
创建自定义模板(例如:/apps/myAfCustomizations/myAfTemplates/forestTemplate
),其jcr:content指向在上一步中创建的自定义页面(例如:myAfCustomizations/myAfPages/forestPage)
。
使用在上一步中创建的模板创建自适应表单。 自适应表单的外观由本文“要创建自适应表单主题”部分中创建的主题定义。