自适应表单模板是专用的AEM页面模板,具有用于创建自适应表单的某些属性和内容结构。 模板具有预配置的布局、样式和基本的初始内容结构。
创建表单后,对原始模板内容结构所做的任何更改都不会反映在表单中。
AEM快速入门提供了以下自适应表单模板:
这些模板具有 sling:resourceType
属性设置为相应的页面组件。 页面组件会呈现CQ页面,其中包含自适应表单容器,而自适应表单容器又会呈现自适应表单。
下表枚举了模板与页面组件之间的关联:
模板 |
页面组件 |
/libs/fd/af/templates/surveyTemplate |
/libs/fd/af/components/page/survey |
/libs/fd/af/templates/simpleEnrollmentTemplate |
/libs/fd/af/components/page/base |
/libs/fd/af/templates/tabbedEnrollmentTemplate |
/libs/fd/af/components/page/tabbedenrollment |
/libs/fd/afaddon/templates/advancedEnrommentTemplate |
/libs/fd/afaddon/components/page/advancedenrollment |
您可以使用模板编辑器指定自适应表单的结构和初始内容。 例如,您希望所有表单作者在注册表单中都有几个文本框、导航按钮和提交按钮。 您可以创建一个模板,作者可以使用该模板创建与其他注册表单一致的表单。 AEM模板编辑器允许您:
有关更多信息,请参阅 模板编辑器.
您可以创建模板并使用它来创建自适应表单,而不是使用可用的模板。 自定义模板基于引用自适应表单容器和页面元素(如页眉和页脚)的各种页面组件。
您可以使用网站的基本页面组件创建这些组件。 或者,您也可以扩展现成的模板所使用的自适应表单的页面组件。
执行以下步骤以创建自定义模板,如simpleEnrollmentTemplate。
导航到创作实例上的CRXDE Lite。
在/apps目录下,为应用程序创建文件夹结构。 例如,如果应用程序名为mycompany,则使用此名称创建一个文件夹。 通常,应用程序文件夹包含组件、配置、模板、src和安装目录。 在本例中,创建组件、配置和模板文件夹。
导航到文件夹/libs/fd/af/templates。
复制 simpleEnrollmentTemplate
节点。
导航到文件夹/apps/mycompany/templates。 右键单击它并选择 粘贴.
如有必要,请重命名复制的模板节点。 例如,将其重命名为enrollment-template。
导航到/apps/mycompany/templates/enrollment-template的位置。
修改 jcr:title
和 jcr:description
属性 jcr:content
节点来区分模板和复制的模板。
的 jcr:content
修改模板的节点包含 guideContainer
和 guideformtitle
组件。 guideContainer
是包含自适应表单的容器。 的 guideformtitle
组件显示应用程序名称、描述等。
而不是 guideformtitle
,则可以包含自定义组件或 parsys
组件。 例如,删除 guideformtitle
,并添加自定义组件或 parsys
组件节点。 确保 sling:resourceType
组件的属性引用组件,且该属性在页面中定义 component.jsp
文件。
导航到位置/apps/mycompany/templates/enrollment-template/jcr:content。
打开 属性 选项卡,并更改 cq:designPath
属性。
现在,为 cq:Page
类型。
自定义模板的样式与默认模板的样式相同,因为模板引用页面组件/libs/fd/af/components/page/base。 您可以找到组件引用作为属性 sling:resourceType
在节点/apps/mycompany/templates/enrollment-template/jcr:content中定义。 由于基础是核心产品组件,因此请勿修改此组件。
导航到节点/apps/mycompany/templates/enrollment-template/jcr:content并修改属性的值 sling:resourceType
到/apps/mycompany/components/page/enrmitionpage
将节点/libs/fd/af/components/page/base复制到文件夹/apps/mycompany/components/page中。
将复制的组件重命名为 enrollmentpage
.
(仅当您已经拥有内容页面时) 如果您现有 contentpage
组件。 如果您没有 contentpage
组件,您可以将 resourceSuperType
属性指向OOTB基页。
对于 enrollmentpage
节点,设置属性的值 sling:resourceSuperType
到mycompany/components/page/contentpage。 的 contentpage
组件是网站的基本页面组件。 其他页面组件可以扩展该组件。 删除下的脚本文件 enrollmentpage
,除 head.jsp
, content.jsp
和 library.jsp
. 的 sling:resourceSuperType
组件, contentpage
在这种情况下,将包含所有此类脚本。 页眉(包括导航栏和页脚)继承自 contentpage
组件。
打开文件 head.jsp
.
JSP文件包含行 <cq.include script="library.jsp"/>
.
的 library.jsp
文件包含 guide.theme.simpleEnrollment
客户端库,其中包含自适应表单的样式。
页面组件 enrollmentpage
拥有独家 head.jsp
覆盖文件 head.jsp
文件 contentpage
组件。
在 head.jsp
文件 contentpage
组件 head.jsp
文件 enrollmentpage
组件。
在 content.jsp
脚本中,您可以添加其他页面内容或对呈现页面时包含的其他组件的引用。 例如,如果您添加了自定义组件 applicationformheader
,请确保在JSP文件中为组件添加以下引用:
<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
同样,如果您在 parsys
组件在模板节点结构中,还包括自定义组件。
的 head.jsp
文件 enrollmentpage
用于新模板的组件包括客户端库 guide.theme.simpleEnrollment
. 默认模板也使用此客户端库。 使用以下方法中的更改新模板的样式:
guide.theme.simpleEnrollment
和自定义主题。主题是指包含在用于渲染自适应表单的页面组件中的客户端库。 客户端库主要控制自适应表单的外观。