【记录四】AEM自定义组件
涉及相关
目的
了解如何构建完全自定义的组件。
学习使用Sling模型封装业务逻辑。
了解如何在HTL脚本中使用Sling模型。
效果
开始创造
这个新组件的实现包括一个对话框，该对话框收集副标题内容，并且自定义Sling模型动态检索副标题的
名称
图片
职业
创建Byline组件
首先，创建Byline组件节点结构并定义一个对话框。这表示AEM中的组件，并通过其在JCR中的位置隐式定义了组件的资源类型。
该对话框显示内容作者可以提供的界面。对于此实现，将利用AEM WCM核心组件的 Image 组件来处理Byline图像的创作和渲染，因此将其设置为组件的 sling:resourceSuperType
创建组件节点
1、在 UI .apps 模块下方 /apps/wknd/components/content 创建名为byline 类型的 cq:Component 的新节点 。
.content.xml 节点属性文件内容如下：
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:description="Displays a contributor's byline."
jcr:primaryType="cq:Component"
jcr:title="Byline"
sling:resourceSuperType="core/wcm/components/image/v2/image"
componentGroup="WKND.Content"/>
创建HTL脚本
1、下面的 byline 节点，添加的文件名为 byline.html 负责组件的HTML呈现。将文件命名为与 cq:Component节点相同很重要，因为这使它成为Sling用来呈现此资源类型的默认脚本。
2、将以下代码添加到 byline.html中
<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html">
div>
<sly data-sly-call="${placeholderTemplate.placeholder @ isEmpty=true}">sly>
一旦创建了Sling模型，便会再次访问byline.html 。HTL文件的当前状态允许组件在拖放到页面上时在AEM站点的页面编辑器中显示。
创建对话框定义
接下来，使用以下字段为Byline组件定义一个对话框：
Name ：名字
Image ：头像
Occupations ：职业列表。应按字母升序（a到z）对职业进行排序。
1、在 byline 组件节点下，创建一个名为cq:dialog 的新节点 ，类型为 nt:unstructured ;
2、使用以下XML 更新 cq:dialog 。打开.content.xml 并将以下XML复制/粘贴到其中
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Byline"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="{Boolean}false">
<items jcr:primaryType="nt:unstructured">
<asset
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}false"/>
<metadata
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"/>
<properties
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<name
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Name"
fieldDescription="The contributor's name to display."
emptyText="Enter the contributor's name to display." name="./name"
required="{Boolean}true"/>
<occupations
jcr:primaryType="nt:unstructured"
fieldLabel="Occupations"
fieldDescription="A list of the contributor's occupations."
required="{Boolean}false"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield">
<field
jcr:primaryType="nt:unstructured"
name="./occupations"
emptyText="Enter an occupation"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
occupations>
items>
column>
items>
columns>
items>
properties>
items>
tabs>
items>
content>
jcr:root>
创建策略对话框
遵循与创建对话框相同的方法，创建“策略”对话框（以前称为“设计对话框”），以隐藏从核心组件的图像组件继承的策略配置中不需要的字段。
1、在 byline cq:Component 节点下，创建一个名为cq:design_dialog的新节点 ，类型为nt:unstructured
2、使用以下XML 更新 cq:design_dialog 。打开.content.xml 并将下面的XML复制/粘贴到其中是最容易的
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Byline"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<properties
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<content
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<decorative
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"/>
<altValueFromDAM
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"/>
<titleValueFromDAM
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"/>
<displayCaptionPopup
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"/>
<disableUuidTracking
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"/>
items>
content>
items>
properties>
<features
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<content
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<accordion
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<orientation
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"/>
<crop
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"/>
items>
accordion>
items>
content>
items>
features>
items>
tabs>
items>
content>
jcr:root>
创建Byline Sling模型
Sling模型以充当数据模型并容纳Byline组件的业务逻辑。
Sling模型是注释驱动的Java“ POJO”（普通的旧Java对象），它有助于将数据从JCR映射到Java变量
更新pom.xml 文件
1、打开父POM： aem -guides-wknd / pom.xml
2、确保 uber-jar 依赖性为 6.3.2 或更高。
<dependency>
<groupId>com.adobe.aemgroupId>
<artifactId>uber-jarartifactId>
<version>6.4.5version>
<classifier>apisclassifier>
<scope>providedscope>
dependency>
3、在父POM中，为Core Components 添加依赖项 。这是与核心组件关联的Sling模型的依赖项。core.wcm.components.all 、core.wcm.components.core
4、完整的父 POM.XML
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0modelVersion>
<groupId>com.adobe.aem.guidesgroupId>
<artifactId>aem-guides-wkndartifactId>
<packaging>pompackaging>
<version>0.0.1-SNAPSHOTversion>
<description>WKND Sites Projectdescription>
<modules>
<module>coremodule>
<module>ui.appsmodule>
<module>ui.contentmodule>
<module>it.testsmodule>
<module>it.launchermodule>
modules>
<properties>
<aem.host>localhostaem.host>
<aem.port>4502aem.port>
<aem.publish.host>localhostaem.publish.host>
<aem.publish.port>4503aem.publish.port>
<sling.user>adminsling.user>
<sling.password>adminsling.password>
<vault.user>adminvault.user>
<vault.password>adminvault.password>
<project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding>
properties>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-release-pluginartifactId>
<version>2.5.3version>
<configuration>
<scmCommentPrefix>[maven-scm] :scmCommentPrefix>
<preparationGoals>clean installpreparationGoals>
<goals>installgoals>
<releaseProfiles>releasereleaseProfiles>
configuration>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-source-pluginartifactId>
<version>3.0.1version>
<inherited>trueinherited>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-jar-pluginartifactId>
<version>3.0.2version>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-enforcer-pluginartifactId>
<executions>
<execution>
<id>enforce-mavenid>
<goals>
<goal>enforcegoal>
goals>
<configuration>
<rules>
<requireMavenVersion>
<version>[3.3.9,)version>
requireMavenVersion>
<requireJavaVersion>
<message>Project must be compiled
with Java 8 or highermessage>
<version>1.8.0version>
requireJavaVersion>
rules>
configuration>
execution>
executions>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-compiler-pluginartifactId>
<configuration>
<source>1.8source>
<target>1.8target>
configuration>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-idea-pluginartifactId>
<version>2.2.1version>
<configuration>
<jdkLevel>1.8jdkLevel>
<linkModules>truelinkModules>
<downloadSources>truedownloadSources>
configuration>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-eclipse-pluginartifactId>
<version>2.10version>
<configuration>
<downloadSources>truedownloadSources>
configuration>
plugin>
plugins>
<pluginManagement>
<plugins>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-clean-pluginartifactId>
<version>3.0.0version>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-resources-pluginartifactId>
<version>3.0.2version>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-compiler-pluginartifactId>
<version>3.6.1version>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-install-pluginartifactId>
<version>2.5.2version>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-surefire-pluginartifactId>
<version>2.22.1version>
<configuration>
<useSystemClassLoader>falseuseSystemClassLoader>
configuration>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-failsafe-pluginartifactId>
<version>2.22.1version>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-deploy-pluginartifactId>
<version>2.8.2version>
plugin>
<plugin>
<groupId>org.apache.slinggroupId>
<artifactId>maven-sling-pluginartifactId>
<version>2.2.0version>
<configuration>
<slingUrl>http://${aem.host}:${aem.port}/system/consoleslingUrl>
<deploymentMethod>WebConsoledeploymentMethod>
configuration>
plugin>
<plugin>
<groupId>org.apache.slinggroupId>
<artifactId>htl-maven-pluginartifactId>
<version>1.0.6version>
<configuration>
<failOnWarnings>truefailOnWarnings>
configuration>
<executions>
<execution>
<goals>
<goal>validategoal>
goals>
execution>
executions>
plugin>
<plugin>
<groupId>org.apache.jackrabbitgroupId>
<artifactId>filevault-package-maven-pluginartifactId>
<version>1.0.3version>
<configuration>
<filterSource>src/main/content/META-INF/vault/filter.xmlfilterSource>
configuration>
plugin>
<plugin>
<groupId>com.day.jcr.vaultgroupId>
<artifactId>content-package-maven-pluginartifactId>
<version>1.0.2version>
<configuration>
<targetURL>http://${aem.host}:${aem.port}/crx/packmgr/service.jsptargetURL>
<failOnError>truefailOnError>
<userId>${vault.user}userId>
<password>${vault.password}password>
configuration>
plugin>
<plugin>
<groupId>org.apache.felixgroupId>
<artifactId>maven-bundle-pluginartifactId>
<version>4.2.1version>
<inherited>trueinherited>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-enforcer-pluginartifactId>
<version>1.4.1version>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-dependency-pluginartifactId>
<version>3.0.0version>
plugin>
<plugin>
<groupId>org.codehaus.mojogroupId>
<artifactId>build-helper-maven-pluginartifactId>
<version>3.0.0version>
plugin>
<plugin>
<groupId>org.eclipse.m2egroupId>
<artifactId>lifecycle-mappingartifactId>
<version>1.0.0version>
<configuration>
<lifecycleMappingMetadata>
<pluginExecutions>
<pluginExecution>
<pluginExecutionFilter>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-enforcer-pluginartifactId>
<versionRange>[1.0.0,)versionRange>
<goals>
<goal>enforcegoal>
goals>
pluginExecutionFilter>
<action>
<ignore />
action>
pluginExecution>
<pluginExecution>
<pluginExecutionFilter>
<groupId>
org.apache.maven.plugins
groupId>
<artifactId>
maven-dependency-plugin
artifactId>
<versionRange>
[2.2,)
versionRange>
<goals>
<goal>copy-dependenciesgoal>
<goal>unpackgoal>
goals>
pluginExecutionFilter>
<action>
<ignore />
action>
pluginExecution>
<pluginExecution>
<pluginExecutionFilter>
<groupId>
org.codehaus.mojo
groupId>
<artifactId>
build-helper-maven-plugin
artifactId>
<versionRange>
[1.5,)
versionRange>
<goals>
<goal>
reserve-network-port
goal>
goals>
pluginExecutionFilter>
<action>
<ignore />
action>
pluginExecution>
pluginExecutions>
lifecycleMappingMetadata>
configuration>
plugin>
plugins>
pluginManagement>
build>
<profiles>
<profile>
<id>adobe-publicid>
<activation>
<activeByDefault>trueactiveByDefault>
activation>
<properties>
<releaseRepository-Id>adobe-public-releasesreleaseRepository-Id>
<releaseRepository-Name>Adobe Public ReleasesreleaseRepository-Name>
<releaseRepository-URL>https://repo.adobe.com/nexus/content/groups/publicreleaseRepository-URL>
properties>
<repositories>
<repository>
<id>adobe-public-releasesid>
<name>Adobe Public Repositoryname>
<url>https://repo.adobe.com/nexus/content/groups/publicurl>
<releases>
<enabled>trueenabled>
<updatePolicy>neverupdatePolicy>
releases>
<snapshots>
<enabled>falseenabled>
snapshots>
repository>
repositories>
<pluginRepositories>
<pluginRepository>
<id>adobe-public-releasesid>
<name>Adobe Public Repositoryname>
<url>https://repo.adobe.com/nexus/content/groups/publicurl>
<releases>
<enabled>trueenabled>
<updatePolicy>neverupdatePolicy>
releases>
<snapshots>
<enabled>falseenabled>
snapshots>
pluginRepository>
pluginRepositories>
profile>
<profile>
<id>autoInstallBundleid>
<activation>
<activeByDefault>falseactiveByDefault>
activation>
<build>
<pluginManagement>
<plugins>
<plugin>
<groupId>org.apache.slinggroupId>
<artifactId>maven-sling-pluginartifactId>
<executions>
<execution>
<id>install-bundleid>
<goals>
<goal>installgoal>
goals>
execution>
executions>
plugin>
plugins>
pluginManagement>
build>
profile>
<profile>
<id>autoInstallPackageid>
<activation>
<activeByDefault>falseactiveByDefault>
activation>
<build>
<pluginManagement>
<plugins>
<plugin>
<groupId>org.apache.jackrabbitgroupId>
<artifactId>filevault-package-maven-pluginartifactId>
<executions>
<execution>
<id>create-packageid>
<goals>
<goal>packagegoal>