AEM中的 Libraries(js、css)

最新推荐文章于 2020-04-13 10:11:01 发布

原创最新推荐文章于 2020-04-13 10:11:01 发布 · 1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

63-ADOBE-AEM技术

本文介绍如何在Adobe Experience Manager(AEM)中配置客户端库(clientlib)，包括创建clientlib节点、设置categories属性以及组织JS和CSS资源。同时，详细讲解了如何创建一个带有验证功能的新组件，通过编写JS代码实现对组件中altText字段的条件性验证。

创建clientlibs节点

转到CRXDE中的项目文件夹(/apps/wknd/clientlibs/)，创建一个名为wknd-common的节点，类型为cq:ClientLibraryFolder
现在我们需要为clientlib添加类别。Categories是一个标识符，用于从内容页面直接包含这个clientlib或将其嵌入到其他clientlib中。我们可以使用这个属性来轻松地对clientlib进行分类，并只加载我们需要的文件。categories属性是多值的，它允许一个库文件夹属于多个类别。将categories属性添加到wknd-common节点。
在wknd-common文件夹中创建以下结构
如你所见，我们已经创建了js和css文件夹(所有js文件将在js文件夹下，所有css文件将在css文件夹下)，以及两个文本文件js.txt和css.txt.

创建一个新组件

在项目文件夹中创建一个新组件，如下所示
在组件下创建类型为nt:unstructured 名称为 cq:dialog 的一个新节点。现在按照下面的配置创建它的子节点。

<?xml version="1.0" encoding="UTF-8"?>
<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"
          jcr:primaryType="nt:unstructured"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/container">
        <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/tabs"
                type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <tab1
                    jcr:primaryType="nt:unstructured"
                    jcr:title="Properties"
                    sling:resourceType="granite/ui/components/foundation/container">
                <layout
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <columns
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <imageSrc
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                    autoStart="{Boolean}false"
                                    class="cq-droptarget field-bgvalue"
                                    fieldDescription="请上传图像"
                                    fieldLabel="Image"
                                    fileNameParameter="./imageName"
                                    fileReferenceParameter="./imageRef"
                                    id="file-upload-special"
                                    mimeTypes="[image]"
                                    multiple="{Boolean}false"
                                    name="./image"
                                    title="Image"
                                    uploadUrl="${suffix.path}"
                                    useHTML5="{Boolean}true"/>
                            <altText
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                    class="field-prereq"
                                    fieldDescription="请描述图像信息."
                                    fieldLabel="Alt text"
                                    id="alt-special"
                                    name="./altText"
                                    validation-error-msg="This field is required when the Image is set."
                                    validation-prereq=".field-bgvalue img"
                                    validation-prereq-attr="src"/>
                        </items>
                    </columns>
                </items>
            </tab1>
        </items>
    </content>
</jcr:root>

该组件有一个fileupload小部件和一个textfield。我们的目的是对altText文本字段进行控制。我们希望仅当我们在fileupload小部件中生成图像时，才需要altText文本字段。
需要验证，我们必须编写一些JS代码。因此，在js文件夹中创建一个名为validation.js的新文件，并在文件中粘贴以下代码。

$(window).adaptTo("foundation-registry").register(
    "foundation.validation.validator", {
        selector : "#alt-special", // 验证特定的alt字段
        validate : function(el) {
            debugger;
            var $el = $(el);
            var $form = $el.closest('form'); // 获得表单
            var $upload = $form.find("coral-fileupload[name$=image]"); // 找到文件上传小部件
            if ($upload.hasClass('is-filled') && !$el.val()) { // 如果类存在，则返回验证消息
                return "Enter Alt text";
            } else {
                return;
            }
        }
    });