AEM（Adobe Experience Manager）——组件components的开发

AEM核心的工作可能就要数组件（components）的开发了，对于aem来说界面的所有元素都可以组件化，那么具体一个组件要怎样开发呢，下面我详细介绍下：

组件components的开发

一般组件的位置都是在apps/components路径下，我们在代码中找到这个路径，可以看到改路径里面本身就有一些组件代码存在，

我们也在这个路径下创建一个空包，叫custom，当然包名可以自己随便起，然后在custom下如图创建对应的文件，

注意：

1.html文件名必须和你的组件包名一样，可以自由起名，其余都是固定名字，初学者不建议随意更改。

2.component1下的content.xml是这个组件必备的一些属性，需要留意的是componentGroup="custom"这个属性表示Components1组件属于custom这个组的，当然这个组你可以随意定义，主要为了将不同的组件进行一个分类，便于管理，文件内容为：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Components1"
    componentGroup="custom"/>

3._cq_dialog下的content.xml文件是用来完成组件在页面author时的一些自定义设置内容，文件内容为：

<?xml version="1.0" encoding="UTF-8"?>
<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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="./text"/>
                    <link
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
                            fieldLabel="Link"
                            name="./link"
                            rootPath="/content/wknd"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

4.component1.html这个文件则是组件在前端页面以什么样的html展示代码。文件内容为：

<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"></sly>
<sly data-sly-test="${properties.text}">
    <div>
        <div>${properties.text}</div>
        <div><a href="${properties.link}">我是链接</a></div>
    </div>
</sly>

<sly data-sly-call="${templates.placeholder @ isEmpty = !properties.text}"></sly>

此时组件代码就算编写完毕了，当然现在我提供的阳历代码只是一些最简单基本的功能，如果想要更多功能，完全可以根据需求添加相应代码即可。

接下来我们需要将新开发的组件添加到这个模板可以使用的组件行列来，具体的操作为：

打开AEM的template管理页面——选择一个模板，进行edit——选中Layout Cotainer并在展示出的工具栏中选择Policy按钮——然后在properties下面寻找你创建组件的分类名，比如这里我们需要寻找custom，勾选，然后保存即可

然后我们就可以去创建页面了，在创建好的页面添加组件，你就可以看到你新做的组件了。

选择好你开发好的组件，进行编辑，输入相应内容，点击确定，即可看到，开发的组件的页面效果。

以上则为aem开发一个新组建的全过程，如有错误的地方，请在评论区或者私信我，我会立即考察修改。