Как создать волшебников в пользовательском интерфейсе grante и спроектировать его в коралловом UI html в AEM

Question

Поскольку я новичок в разработке AEM, я хочу знать, как создавать мастера в AEM и как создавать те, которые используют интерфейс Coral. Как я создал мастер и содержит два шаг: вида

   source ---> select 

Я разработал эти два мастер шага, и я должен показать различные элементы на каждом step.This шагов не ничего, кроме узлов под моей страницей createfragment.

1) Источник: У меня есть два переключателя, позволяющих выбрать пол, такой как мужчина и женщина. Я создал узел для источника и под исходными элементами, создал два переключателя.

Функциональность: через выбранную радиокнопку мне нужно открыть следующий контейнер, у которого есть дополнительные элементы, такие как имя, адрес. У меня есть разные предметы под моим мастером для мужских и женских опций, так что контейнер для конкретного значения отображается пользователю в зависимости от выбора пола либо мужчины, либо женщины. В исходном пользователе пользователю нужно выбрать только 1 радиокнопку, и в зависимости от выбранного значения пользователь покажет элементы из выбранных узлов, таких как maleform и femaleform.

2) Выберите: Этот узел должен содержать два подэлемента под элементами, и эти формы имеют разную функциональность по выбору пользователя. Я хочу показать первый узел из элемента (матовая форма) при выборе мужского переключателя, с другой стороны, показать (женскую форму) элементы второго узла по выбору женщины.

My Node структура, как:

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

На основе выбора пользователя, я хочу сделать два отдельных компонента формы, которые находятся на двух разных страницах.

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

Пожалуйста, помогите мне, как я должен вынести две разные страницы коралла или гранит UI в 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, который работает, когда откроется диалоговое окно и показывает/скрывает fieldsets когда радио кнопки щелкают.Это простой пример, вы можете написать что-то гораздо более многоразовым:

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

Сенсорный интерфейс Dialog с радиокнопками и fieldsets для мужского и женского пола. Каждый виджет имеет собственный класс CSS, который будет использоваться с вашими селекторами 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>