如何在等级 UI 中创建向导并在 AEM 中的 corel UI html 中进行设计

Question

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

               source  --->   select

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

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

功能：通过 selected 单选按钮，我必须打开下一个容器，其中包含名称、地址等更多项目。我的向导下有不同的项目用于男性和女性选项，以便根据 select 性别（男性或女性）向用户显示特定值的容器。在源代码中，用户只需要 select 1 个单选按钮，并且根据 selected 值，用户将显示来自 select 节点的项目，例如男性和女性形式。

2) Select: 此节点应包含项目下的两个子节点，并且此表单根据用户 selection 具有不同的功能。我想在男性单选按钮的 selection 上显示项目 (maleform) 的第一个节点，另一方面在女性 selection.

上显示 (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"

基于用户selection，我想渲染两个独立的表单组件，分别在两个不同的页面上。

例如：如果用户 select 的男性单选按钮，我想显示男性形式，女性形式也类似。

请帮助我，因为我必须在 AEM 中使用 coral 或 granite UI 渲染两个不同的页面。

Answer 1

如果您能够确定是否在服务器端显示面板，您可以使用 granite/ui/components/foundation/renderconditions/simple 小部件来检查条件。查询您的默认 AEM 安装示例，条件设置在 granite:rendercondition 节点的 expression 属性中。此示例检查 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 在对话框打开时运行，在单击单选按钮时运行 shows/hides 字段集。这是一个简单的例子，你可以写一些更可重用的东西：

$(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();
    })
});

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

<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>

如何在等级 UI 中创建向导并在 AEM 中的 corel UI html 中进行设计

How to create wizards in grante UI and design it in coral UI html in AEM

adobe

jsp

aem