xml - 如何在 cq 对话框中动态使用下拉元素更改选项？

Question

我想编写一个 AEM 组件，我想在其中添加一些元素。在一个组件中，我想添加三个不同的选项，并且我想动态更改此选项。

实际上，我尝试将部分代码添加到我的 cq_dilog.xml，但问题是我有三个下拉选项可供选择，但我无法更改触发元素。

<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          jcr:primaryType="nt:unstructured" jcr:title="Text"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured"
             sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <column jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title jcr:primaryType="nt:unstructured"
                           fieldLabel="Trigger"
                           sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                           filedDescription="URL to the page you will linked to."
                            name="./title"/>
                    <type
                            sling:resourceType="granite/ui/components/foundation/form/select"
                            fieldLabel="Type" name="./type"
                            jcr:primaryType="nt:unstructured">
                        <items jcr:primaryType="nt:unstructured">
                            <option1 jcr:primaryType="nt:unstructured" text="Download" />
                            <option2 jcr:primaryType="nt:unstructured" text="Link" />
                            <option3 jcr:primaryType="nt:unstructured" text="Add" />
                        </items>
                    </type>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

Answer 1

我在您的示例中看到您将较旧的 Coral2 小部件(granite/ui/components/foundation/..)与较新的 Coral3 小部件(granite/ui/components/coral /foundation/..)混合在一起。

如果您使用的是 Coral2，但考虑完全迁移到 Coral3 (more info here)，Oliver 提供的文章很有用，在这种情况下，会有一个不同但在我看来更好、更清晰的系统。概念是相同的，但实现已经改变。

下面是 XML 中的实现:

<?xml version="1.0" encoding="UTF-8"?>
<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="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"/>
                    <dropdown
                        granite:class="cq-dialog-dropdown-showhide"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                        fieldLabel="Dropdown"
                        name="./dropdown">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            cq-dialog-dropdown-showhide-target=".option-showhide-target"/>
                        <items jcr:primaryType="nt:unstructured">
                            <no-option
                                jcr:primaryType="nt:unstructured"
                                text="No option"
                                value="no-option"/>
                            <option
                                jcr:primaryType="nt:unstructured"
                                text="Option"
                                value="option"/>
                        </items>
                    </dropdown>
                    <dynamic-option
                        granite:class="hide option-showhide-target"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                        text="Dynamic option">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            showhidetargetvalue="option"/>
                    </dynamic-option>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

以下是重要部分:

下拉节点的花岗岩:类属性启用动态显示/隐藏功能

cq-dialog-dropdown-showhide-target granite:data 的属性(property)dropdown 下的节点node 定义了负责切换动态字段的自定义类(这里我使用了 .option-showhide-target ，但你可以随意调用它)

granite:class目标节点(在我们的例子中为 dynamic-option)告诉我们的字段将其显示/隐藏行为绑定(bind)到哪个类(步骤 2 中的自定义类)。

showhidetargetvalue granite:data 的属性(property)目标节点下的节点定义下拉列表中的哪个项目(基于 value 属性)将切换显示/隐藏行为。

下面是 CRXDE 中结构的截图:



这是结果的 GIF: