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

В данном уроке приведено описание компонента 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//download/. Таким образом, чтобы загрузить изображение, необходимо передать путь до загруженного на сервер файла, в свойство Image URL блока Image Update Properties.

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