В мобильных приложениях работа с компонентом Image построена несколько иначе, чем в веб-приложениях. В связи с этим, в повторяющихся элементах, таких, как элементы компонентов List и Grid, загрузка Image из модели данных не является однозначной и требует определенной процедуры для загрузки с помощью БП.
Использование изображений в элементах повторяющегося типа (List, Grid)
Рассмотрим пример, в котором у нас есть таблица рейсов flight и у каждого объекта модели flight имеется изображение, представленное imageFile [file] в модели данных.
Так же, представим, что все данные о рейсах у нас представлены в виде элементов компонента List. Каждый элемент - это Card, которая содержит в себе Image и некоторые другие компоненты, отражающие детали рейса. В дизайнере это выглядит следующим образом:
Для родительского компонента обычно указывается модель данных в Data Source, которая подгружается для использования, как это показано на изображении ниже.
При этом, для изображений, данный способ не сработает.
Чтобы загрузить данные для изображения из модели, необходимо выбрать изображение в List (или Grid) и создать новый БП для него.
Необходимый БП начинается с создания элемента изображения в приложении, а именно с триггера onCreate. Первым делом, необходимо получить соответствующий данному изображению объект модели данных. Для этого можно использовать данные, которые уже получены родительским элементом (List в данном случае). Для получения данных из List используется блок List Get Data.
Логика у БП, который мы строим, следующая: если один из элементов Data (объект модели flight) имеет идентификатор (ID) равный Record ID, то мы нашли нужный нам элемент таблицы flight, в данном случае. Тогда, из объекта модели flight берется идентификатор файла изображения и загружается в компонент Image с необходимым Widget ID.
Для перебора всех элементов массива Data используется блок БП For each loop и, в теле цикла, каждый элемент массива Data разворачивается c помощью блока Expand Flight. В случае, если Flight ID = Record ID, то берется идентификатор файла ImageFile и загружается объект файла с помощью блока Server request GET /_files/:id/download/.
Пример этой части БП приведен ниже.
Следующим шагом, объект файла изображения file разворачивается с помощью блока Expand file, чтобы передать bytes array на вход блока Image Update Properties в свойство Data. Так же необходимо указать Widget ID конкретного элемента изображения в листе, передав ему значение из блока onCreate в начале БП. Результат последней части БП приведен на примере ниже:
В конце, используется блок Break Loop, чтобы зря не перебирать оставшиеся элементы массива.
Загрузка изображения с файловой системы смартфона пользователя.
Рассмотрим пример загрузки аватара профиля пользователя. Веб-интерфейс состоит из изображения и кнопки, запускающей БП, и выглядит следующим образом:
Сам БП запускает процесс выбора файлов в файловой системы пользователя с помощью блока Select Files и, если был выбран хоть какой-то элемент, то берется 0-й элемент массива на выходе.
Полученный элемент file массива Files необходимо загрузить на сервер веб-приложения, для дальнейшего использования (Server request POST /_files/). В случае успешного выполнения запроса, объект file на выходе блока Server request POST /_files/ передается на вход блока Expand file, чтобы получить Bytes Array, который и передается на вход блока Image Update Properties в свойство Data.
