Как создать радио-кнопку в сенсорном диалоге aem 6

У меня есть компонент сенсорного интерфейса, для которого я создаю диалоговое окно в AEM 6. У меня есть требование создать 2 переключателя в сенсорном диалоговом окне, и если выбрана одна из них, соответствующее значение выбранного переключателя должно быть отображается. Однако я не понимаю, как создать параметры переключателя. Я реализовал то же самое в классическом диалоге, где используются xtype = selection и type = radiogroup, но я не понимаю, как создать его в сенсорном диалоге

Источник

3 ответа

Решение

Вы можете использовать форму ввода - радио. Чтобы создать группу переключателей, присвойте всем переключателям одинаковое имя. Тип ресурса для радиовхода: /libs/granite/ui/components/foundation/form/radio,

Образец Json из узлов:

"hideinnav": {
"jcr:primaryType": "nt:unstructured",
"name": "./hideInNav",
"text": "Hide in Navigation",
"value": "true",
"cq-msm-lockable": "hideInNav",
"sling:resourceType": "/libs/granite/ui/components/foundation/form/radio",
"renderReadOnly": true
},
"showinNav": {
"jcr:primaryType": "nt:unstructured",
"name": "./hideInNav",
"text": "Show in Navigation",
"value": "false",
"cq-msm-lockable": "hideInNav",
"sling:resourceType": "/libs/granite/ui/components/foundation/form/radio",
"renderReadOnly": true
}

В отличие от виджета "Выбор классического пользовательского интерфейса", в котором кнопки устанавливаются в узле параметров, переключатели являются независимыми и могут использоваться непосредственно в контейнерах.

Источник

Вот пример радиогруппы для CoralUI v1/v2. radiogroup необязательно, radio виджеты сами по себе все равно будут работать. Группа нужна только если вы хотите иметь метку для группы.

<radioGroup jcr:primaryType="nt:unstructured"
    name="./type"
    text="Fruit"
    required="{Boolean}true"
    sling:resourceType="granite/ui/components/foundation/form/radiogroup"
    renderReadOnly="{Boolean}true">

    <items jcr:primaryType="nt:unstructured">
        <radioApple jcr:primaryType="nt:unstructured"
            name="./fruit"
            text="Apple"
            value="apple"
            cq-msm-lockable="fruit"
            sling:resourceType="granite/ui/components/foundation/form/radio"
            renderReadOnly="{Boolean}true"/>
        <radioPear jcr:primaryType="nt:unstructured"
            name="./fruit"
            text="Pear"
            value="pear"
            cq-msm-lockable="fruit"
            sling:resourceType="granite/ui/components/foundation/form/radio"
            renderReadOnly="{Boolean}true"/>
        <radioDefaultValue jcr:primaryType="nt:unstructured"
            name="./fruit@DefaultValue"
            value="apple"
            sling:resourceType="granite/ui/components/foundation/form/hidden"/>
        <radioDefaultWhenMissing jcr:primaryType="nt:unstructured"
            name="./fruit@UseDefaultWhenMissing"
            value="true"
            sling:resourceType="granite/ui/components/foundation/form/hidden"/>
    </items>
</radioGroup>

ПРИМЕЧАНИЕ. Если вам нужно установить значение по умолчанию еще до того, как вы откроете диалоговое окно, вам нужно определить его в шаблоне (если это диалоговое окно страницы) или для компонента.

Для компонента установить значение по умолчанию apple Вы бы добавили это в .content.xml:

<?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"
          jcr:primaryType="cq:Component"
          jcr:title="Fruit Component"
          componentGroup="My App Group"
          sling:resourceSuperType="foundation/components/parbase">

    <cq:template jcr:primaryType="nt:unstructured" fruit="apple"/>
</jcr:root>

Смотрите также:

НОТА:

Если вы разрабатываете для AEM 6.3, то вам нужно CoralUI3 вкус всех компонентов, т.е. вместо granite/ui/components/foundation/form/radio ты должен использовать granite/ui/components/coral/foundation/form/radio, так далее.

Подробнее о миграции на CoralUI 3 см. https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/components/legacy/coral2/migration.html.

Источник

Coral UI3 больше не поддерживает индивидуальную форму / радио. Теперь это заменено формой / радио-группой https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/components/legacy/coral2/migration.html

В Coral UI3 для создания двух переключателей вы можете сделать что-то вроде следующего:

<radioGroup 
    jcr:primaryType="nt:unstructured"
    name=“./state“
    text=“Select an Option”
    sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup">
    <items jcr:primaryType="nt:unstructured">
        <radioExpanded jcr:primaryType="nt:unstructured"
            text="Expanded"
            value="expanded”/>  
        <radioCollapse
            jcr:primaryType="nt:unstructured"
            text=“Collapse”
            value=“collapse”/>
</radioGroup>
Источник

Группа переключателей не поддерживается в AEM 6 Touch UI. Вместо этого вы могли бы использовать раскрывающийся список? стропа: ResourceType="гранит / щ / компоненты / основа / форма / выпадающий"

Источник
Другие вопросы по тегам