Question

由于我是AEM开发的新手，我想知道如何在AEM中创建向导以及如何使用珊瑚UI设计这些向导。正如我创建了向导，它包含两个步骤视图：

               source  --->   select

我设计了这个两步向导，我必须在每一步显示不同的项目。这个步骤只是我的createfragment页面下的节点。

1）来源：我有两个单选按钮，让我们假设选择男性和女性等性别。我为源和源项创建了节点，创建了两个单选按钮。

功能：通过选中的单选按钮，我必须打开下一个容器，其中包含名称，地址等其他项目。我的向导下有不同的项目用于男性和女性选项，因此根据男性或女性的性别选择向用户显示特定值的容器。在源用户需要只选择1个单选按钮时，根据所选值，用户将显示选择节点项目中的项目，如maleform和femaleform。

2）选择：此节点应在项目下包含两个子节点，并且此表单根据用户选择具有不同的功能。我希望在选择男性单选按钮时显示项目（maleform）中的第一个节点，另一方面显示女性选择中的第二个节点项目（femaleform）。

我的节点结构如下：

 + wizard      
      - sling:resourceType = "granite/ui/components/coral/foundation/wizard"
    - items
      + source
       - sling:resourceType = "granite/ui/components/foundation/container"
          - items
             + male
              - sling:resourceType ="granite/ui/components/foundation/form/radio" 
              - name:gender
              - value:male
             + female
              - sling:resourceType ="granite/ui/components/foundation/form/radio" 
              - name:gender
              - value:female
      + select
        - sling:resourceType = "granite/ui/components/foundation/container"
          - items
             + maleform
               - sling:resourceType ="granite/ui/components/foundation/form/text" 
             + femaleform
               - sling:resourceType ="granite/ui/components/foundation/form/text"

在用户选择的基础上，我想渲染两个不同页面上的两个独立的表单组件。

例如：如果用户选择男性单选按钮，我想显示男性形式，类似于女性形状。

请帮助我，因为我必须在 AEM 中使用珊瑚或花岗岩用户界面渲染两个不同的页面。

Answer 1

如果您能够确定是否在服务器端显示面板，则可以使用granite/ui/components/foundation/renderconditions/simple小部件来检查条件。查询默认AEM安装以获取示例，条件在expression节点的granite:rendercondition属性中设置。此示例检查QueryString，但您可以使用表达式语言（EL）检查其他内容，例如后缀，例如：${requestPathInfo.suffix == "/my/suffix"}。

<wizard>
    <items jcr:primaryType="nt:unstructured">
        ...
        <male
            jcr:primaryType="nt:unstructured"
            jcr:title="Male"
            sling:resourceType="granite/ui/components/coral/foundation/wizard/lazycontainer"
            src="...">
            <parentConfig jcr:primaryType="nt:unstructured">
                <next
                    granite:class="foundation-wizard-control"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/button"
                    disabled="{Boolean}true"
                    text="Next"
                    variant="primary">
                    <granite:data
                        jcr:primaryType="nt:unstructured"
                        foundation-wizard-control-action="next"/>
                </next>
            </parentConfig>
            <granite:rendercondition
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/renderconditions/simple"
                expression="${querystring == &quot;gender=male&quot;}"/>
        </male>
        <female
            jcr:primaryType="nt:unstructured"
            jcr:title="Female"
            sling:resourceType="granite/ui/components/coral/foundation/wizard/lazycontainer"
            src="...">
            <parentConfig jcr:primaryType="nt:unstructured">
                <next
                    granite:class="foundation-wizard-control"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/button"
                    disabled="{Boolean}true"
                    text="Next"
                    variant="primary">
                    <granite:data
                        jcr:primaryType="nt:unstructured"
                        foundation-wizard-control-action="next"/>
                </next>
            </parentConfig>
            <granite:rendercondition
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/renderconditions/simple"
                expression="${querystring == &quot;gender=female&quot;}"/>
        </femail>
    </items>
</wizard>

否则，在客户端，您只需使用JavaScript显示和隐藏窗口小部件即可。这两个小部件在向导中不一定需要两个不同的步骤。事实上，如果他们不是更好，那么你的向导进度指示器只会显示一步，你可以改变该步骤中的显示。

CSS启动隐藏的字段：

.gender-male-fieldset, .gender-female-fieldset {
    display: none;
}

在对话框打开时运行的JavaScript，并在单击单选按钮时显示/隐藏字段集。这是一个简单的例子，你可以编写更多可重用的东西：

$(document).on("dialog-ready", function() {
    var $maleRadio = $('.gender-male-radio'),
        $femaleRadio = $('.gender-female-radio'),
        $maleFieldset = $('.gender-male-fieldset'),
        $femaleFieldset = $('.gender-female-fieldset');

    $maleRadio.click(function(){
      $maleFieldset.show();
      $femaleFieldset.hide();
    })

    $femaleRadio.click(function(){
      $maleFieldset.hide();
      $femaleFieldset.show();
    })
});

Touch UI对话框，带有用于男性和女性性别的单选按钮和字段集。每个小部件都有一个与jQuery选择器一起使用的自定义CSS类：

<gender
    jcr:primaryType="nt:unstructured"
    class="gender"
    sling:resourceType="granite/ui/components/foundation/form/radiogroup"
    fieldLabel="Gender">
    <items jcr:primaryType="nt:unstructured">
        <option1
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/radio"
            class="gender-male-radio"
            name="./gender"
            text="Male"
            value="male"/>
        <option2
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/radio"
            class="gender-female-radio"
            name="./gender"
            text="Female"
            value="female"/>
    </items>
</gender>
<male
    jcr:primaryType="nt:unstructured"
    jcr:title="Male"
    class="gender-male-fieldset"
    sling:resourceType="granite/ui/components/foundation/form/fieldset">
    <items jcr:primaryType="nt:unstructured">
        <headingText
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/textfield"
            fieldLabel="Male fields"
            name="./maleText"/>
    </items>
</male>
<female
    jcr:primaryType="nt:unstructured"
    jcr:title="Female"
    class="gender-female-fieldset"
    sling:resourceType="granite/ui/components/foundation/form/fieldset">
    <items jcr:primaryType="nt:unstructured">
        <headingText
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/textfield"
            fieldLabel="Female fields"
            name="./femaleText"/>
    </items>
</female>

如何在grante UI中创建向导并在AEM中使用珊瑚UI html进行设计

1 个答案: