1С:Предприятие.Элемент – создаем свой первый компонент

28 февраля 2024 года была выпущена в публичный доступ технология «1С:Предпрятие.Элемент», ключевыми особенностями которой являются новый язык, новая среда разработки, которая находится в облаке, и новый подход к работе с компонентами. Более подробно о выходе технологии рассказано в этой статье.

Основной частью данной статьи будет разбор функциональности по работе с компонентами и возможностями их модульного проектирования. Сфера применения продуктов на элементе, как заявляют в «1С» - это приложения, ориентированные на конечного пользователя. Поэтому потребность во внедрении такого модульного подхода к разработке для своей новой технологии назревала давно.Это действительно удобно: у разработчика появляется возможность переопределять, усложнять компоненты интерфейса, добавляя им какую-либо дополнительную логику, делая тем самым продукты на элементе более комплексными и структурно сложными, удешевляя при этом затраты на разработку.

Формы в «1С:Предпрятие.Элемент» описываются в текстовом виде с помощью файлов с расширением .yaml, также технология имеет встроенный конструктор для визуального редактирования форм, но также остается возможность редактировать формы напрямую в сериализованном виде, это упростит жизнь, если будет необходимо сочетать несколько версий одной и той же формы от нескольких разработчиков. Изменения в их формах можно будет легко совместить в итоговую форму.

Визуальный редактор форм

Эта же форма в формате YAML

Разработчиками были определены системные компоненты интерфейса, например:

• Всевозможные группы, логика которых знакома нам из механизма управляемых форм «1С:Предприятие 8.3»;

• Кнопка;

• Переключатель;

• Страница;

• Карточка;

• Изображение;

• И так далее.

Стандартная библиотека компонентов интерфейса достаточно обширная. Но ни одна библиотека не сможет покрывать все потребности. Поэтому определим в качестве цели - разработать новый компонент интерфейса, который можно использовать на формах в дальнейшем.

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

Карусель - это изображение, которое сменяется с течением времени и даёт возможность перейти по ссылке, соответствующей текущему изображению. Логику работы подобного компонента часто можно встретить на веб-сайтах, например, на сайте «ИнфоСофт».

Определимся с компонентами, которые будем использовать, чтобы создать собственный. Есть два варианта реализации:

Наследовать только «нативные» компоненты - то есть родные для платформы, либо можем использовать в качестве базового типа такой компонент, как html-контейнер, и в его содержимом прописать необходимую  логику и представление. Поскольку это всё-таки статья - знакомство, используем только «родные» компоненты.

Меню создания объектов

Создадим дочерний компонент к «Фиксированная группа» и определим свойства у компонента. «Свойства» — это те поля, которые будут доступны «снаружи» компонента, например, с его помощью будем настраивать содержимое «Карусели».

Свойства компонента и поля структуры

Блок - это структура, которая содержит в себе изображение и произвольный текст.

Определим структуру компонента следующим образом:

В «1С:Элемент» есть возможность использовать выражения сразу в качестве значения поля на форме без необходимости писать для этого отдельный код в модуле. Таким образом, определим, что изображение на компоненте всегда будет равно изображению из n-ого элемента нашей структуры с «рекламными» блоками. Также в этом файле устанавливается привязка событий формы к будущим методам (строка 24, 29, 41).

В файле «КарусельКомпонент.xbsl» определим методы, описанные ранее:

С помощью аннотации «@Глобально» определим функции, которые будут выступать в качестве программного интерфейса взаимодействия с компонентом – «клик» по баннеру произойдет в любом случае, этого не отнять. А вот возможность программно управлять «каруселью» пригодится. Если не указать аннотацию области видимости, тогда метод нельзя будет вызвать у экземпляра «из вне».

Первый собственный компонент готов. Чтобы начать его использовать, добавим компонент на начальную форму (создается автоматически при выборе шаблона «Приложение с разделами»).

Остается настроить свойства у компонента, которые мы определили, «НомерТекущегоБлока» оставляем как есть, чтобы начать показ изображений с начала. Заполняем «СписокБлоков» произвольными картинками и текстом:

Запускаем приложение и видим, что «Карусель» можно перелистывать. При нажатии на изображение будет выводится соответствующий ему рекламный слоган:

Также частое поведение «Карусели» - автоматическое переключение изображений со временем. Чтобы это реализовать, прикрепим на компонент обработчик таймера сразу при создании  главной формы:

Таким образом, мы решили задачу совсем небольшим количеством кода и завернули всё в один компонент. Если потребуется, можем использовать «Карусель» в своем проекте в любом другом месте приложения.