Как использовать изображения в веб-приложениях

В данном уроке приведено описание компонента Image и его применение в веб-приложениях.

Look & Feel

• Upload - возможно выбрать изображение заранее, нажав на кнопку и выбрав изображение с файловой системы

• Image alt [string] - это атрибут для тега img, в котором устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке;
• Width [string] - ширина по умолчанию;
• Height [string] - высота по умолчанию;
• Visible [boolean] - атрибут изображения visible, определяет видимость изображения;
• Name [string] - имя компоненты;

Бизнес-процессы

Для HTML, изображение - это прежде всего ссылка на сам объект изображения. Поэтому Image работает именно со ссылками и, для использования данных изображения, необходимо получить ссылку на него.

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

• Image Get Properties - получает свойства выбранного изображения:
  • Component ID [string] - идентификатор компонента;
  • Width [string] - ширина изображения;
  • Height [string] - высота изображения;
  • Image URL [string] - URL-адрес изображения;
  • Tooltip [string] - текст подсказки, отображающийся при наведении на изображение;
  • Visible [boolean] - атрибут изображения visible, определяет видимость изображения;
  • Loading [boolean] - если true, то изображение находится в состоянии “загрузки”;

• Image Set Properties - “жестко” обновляет свойства выбранного изображения, при этом те свойства, который остались пустыми в данном блоке, будут сброшены до значений по умолчанию:
  • Component ID [string] - идентификатор компонента;
  • Width [string] - ширина изображения;
  • Height [string] - высота изображения;
  • Image URL [string] - URL-адрес изображения;
  • Tooltip [string] - текст подсказки, отображающийся при наведении на изображение;
  • Visible [boolean] - атрибут изображения visible, определяет видимость изображения;
  • Loading [boolean] - если true, то изображение находится в состоянии “загрузки”;

• Image Update Properties - обновляет выбранные свойства изображения:
  • Component ID [string] - идентификатор компонента;
  • Width [string] - ширина изображения;
  • Height [string] - высота изображения;
  • Image URL [string] - URL-адрес изображения;
  • Tooltip [string] - текст подсказки, отображающийся при наведении на изображение;
  • Visible [boolean] - атрибут изображения visible, определяет видимость изображения;
  • Loading [boolean] - если true, то изображение находится в состоянии “загрузки”;

Пример использования

Рассмотрим пример загрузки аватара профиля пользователя. Веб-интерфейс состоит из изображения и кнопки, запускающей БП, и выглядит следующим образом:

БП начинается с события onClick. Чтобы выбрать файлы с файловой системы компьютера пользователя, используется блок Select Files (Max files = 1, File types = Image) и, в случае успешного выбора файла пользователем, берется нулевой элемент массива Files (Array Element).

Полученный элемент file массива Files необходимо загрузить на сервер веб-приложения, для дальнейшего использования (Server request POST /_files/). В случае успешного выполнения запроса, объект file на выходе блока Server request POST /_files/ передается на вход блока Expand file, чтобы получить его идентификатор ID.

Чтобы получить URL-адрес, необходимо взять идентификатор файла и конвертировать его значение в строку (To String). Относительный путь до файла имеет вид /api/_files/<ID>/download/. Таким образом, чтобы загрузить изображение, необходимо передать путь до загруженного на сервер файла, в свойство Image URL блока Image Update Properties.

Результат скомпилированного приложения: