Как создать универсальную, многократно используемую систему источников данных для предоставления данных для раскрывающихся списков и других виджетов

При создании компонентов или изменении других частей TouchUI AEM иногда необходимо использовать отдельные виджеты, содержащие несколько опций. Итак, как мы можем это сделать и как лучше всего, особенно если у нас много больших списков?

Решения

Быстро и грязно

Это можно сделать самым простым способом, указав каждый элемент как узел в JCR, где каждый узел элемента содержит свойство text (метка, видимая в виджете выбора) и value (фактическое значение, сохраненное в JCR).

Это хорошо работает для небольших списков, но не является самым эффективным способом работы с более крупными списками, особенно если ожидается, что они изменятся в будущем!

Adobe-рекомендуется

Это подводит нас к источникам данных Granite, как описано здесь, которые позволяют нам программно создавать списки элементов, которые могут использоваться нашими виджетами. У Adobe есть (несколько устаревший) учебник, который по-прежнему опирается на JSP, но охватывает основы: вы заменяете узел items узлом datasource, который вызывает модель Java. Эта модель добавляет в запрос каждую запись как ValueMap.

Это уже намного лучше, если вам нужно добавить много элементов (образ, создающий 100 или 1000 узлов в JCR 😟). Однако есть еще несколько недостатков:

  • Вы должны создать модель источника данных Java для каждого источника данных.
  • Теперь вам нужно развертывать пакет Java каждый раз, когда вы хотите изменить содержимое источника данных.

Мое решение

Вместо этого представьте, если бы вы могли создать новый источник данных, просто добавив файл JSON под свой /apps/site узел?

  • У вас будут данные в стандартизированном формате, понятном каждому, а не в серии Map.put() строк во внутреннем классе Java.
  • Вам больше не нужно будет развертывать пакет, чтобы изменить значение в источнике данных.
  • У вас будет только один, легко тестируемый обработчик в задней части.

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

Теперь поле готово, давайте засучим рукава и приступим к работе! 😁

Реализация

Прежде всего, я хотел бы упомянуть несколько вещей:

  • Я использую Lombok для получения, установки и ведения журнала
  • Не забудьте добавить package-info.java файл в каждый создаваемый вами пакет!

Модель

Начнем с создания нашей модели слинга. Все, что он сделает, это примет запрос и передаст его в службу по подъему тяжелых грузов. Мне всегда нравится работать с интерфейсами, поэтому вот интерфейс:

И реализация:

Я решил назвать нашу модель «статической», потому что она извлекает данные из статического узла в JCR. Однако принципы этого руководства можно легко применить к динамическому источнику данных, который заполняет раскрывающийся список данными, полученными, например, из конечной точки REST или базы данных.

Пока достаточно просто, верно? А теперь давайте создадим сервис, который сделает самую тяжелую работу.

Обслуживание

Вот интерфейс:

И реализация:

Я был весьма щедр на комментарии и Javadoc здесь, чтобы сделать его максимально ясным, но давайте разберем его немного подробнее.

Что делает этот класс:

  1. Принимает запрос в качестве аргумента.
  2. Определяет, для какого ресурса этот запрос.
  3. В этом месте он находит data.json файл.
  4. Он читает файл JSON как поток.
  5. Он преобразует JSON в список ValueMaps.
  6. Преобразует карты значений в ресурсы
  7. Добавляет их в запрос в атрибуте запроса namedcom.adobe.granite.ui.components.ds.DataSource.

Вот где это решение действительно проявляется: поскольку наша служба определяет, какой файл JSON читать из на основе пути запроса, его можно использовать для любого количества источников! Разверните пакет в свой экземпляр AEM, и теперь давайте создадим фактический источник данных с использованием JSON в JCR.

Источник данных

Источник данных будет состоять из трех элементов:

  1. Скрипт HTL, который вызывает модель, которую мы создали выше.
  2. Файл data.json, содержащий фактические пары текст / значение.
  3. Папка с удобным названием, в которой находятся два файла.

Как вы, возможно, догадались из приведенных выше снимков экрана, мы составим список стран ISO-3166 и их коды стран альфа-2.

Создайте узел nt:folder где-нибудь под узлом вашего проекта (например: /apps/mysite/datasources) и назовите его "страны". Затем создайте countries.html файл в этой папке.

Теперь расслабьтесь и откройте холодный, потому что это, вероятно, самый простой HTL-скрипт, который вы когда-либо писали:

Вот и все! Теперь давайте, наконец, предоставим наши данные 😃 Согласно этому источнику, существует 249 ISO-3166. Слишком много данных для включения в учебное пособие, но вы можете найти файл JSON здесь. Как правило, любой data.json файл должен иметь следующий формат:

Создайте data.json файл в папке countries и вставьте в него JSON.

Выпадающий виджет выбора

Конечно, если мы хотим использовать наш источник данных, нам понадобится виджет. Я буду использовать очень простой демонстрационный компонент, который просто отображает тег <span>, содержащий значение, которое мы выбрали из раскрывающегося списка в диалоговом окне редактора компонентов:

Вот структура cq:dialog, важная часть, на которую следует обратить внимание в красном поле:

Вот эта часть в виде XML:

Ключевым элементом является узел datasource, который указывает на папку источника данных, которую мы создали в разделе выше (имя моего сайта - tipi) со свойством sling:resourceType.

Теперь давайте перейдем на страницу и протестируем ее!

И вот она, система, которая позволяет вам создавать столько новых источников данных, сколько вы хотите, и все, что вам нужно сделать, это скопировать и вставить немного JSON отсюда и дальше 😁

Если вы хотите увидеть другой виджет, который может использовать возможности этой системы источников данных, см. Это руководство.

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