Книга: Разработка интерфейса прикладных решений на платформе "1С:Предприятие 8"
Назад: Картинка товара в форме
Дальше: Глава 3.19. Поле ввода

Картинки, используемые для оформления

Кроме картинок, являющихся данными и существующих в виде файлов, в формах могут использоваться картинки, являющиеся элементами оформления. Такие картинки хранятся либо в конфигурации, либо в библиотеке картинок, либо как общие картинки.

Существует три способа использования таких картинок.

Рассмотрим перечисленные способы на примере.

Примечание

Пример можно посмотреть в демонстрационной базе «Файлы и картинки», обработка Формирование маршрутных листов.

В качестве «подопытного кролика» будем использовать форму гипотетической обработки ФормированиеМаршрутныхЛистов.

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

Чтобы выполнить эту задачу, создадим в конфигурации две общие картинки: Грузовик и Газель (рис. 3.170).

Рис. 3.170. Общие картинки

Затем создадим реквизит формы обработки ТипАвтомобилей типа Число и свяжем его с полем, имеющим вид Поле переключателя (рис. 3.171).

Рис. 3.171. Реквизит формы «ТипАвтомобилей»

Кроме этого создадим реквизит формы Картинка типа Картинка и свяжем его с полем, имеющим вид Поле картинки (рис. 3.172).

Рис. 3.172. Реквизит формы «Картинка»

Теперь для поля ТипАвтомобилей создадим обработчик события ПриИзменении(), в котором напишем следующий текст (листинг 3.147).

Листинг 3.147. Обработчик события «При изменении»

&НаКлиенте

Процедура ТипМашинПриИзменении(Элемент)

 

Если ТипАвтомобилей = 1 Тогда

Картинка = БиблиотекаКартинок.Газель;

 

ИначеЕсли ТипАвтомобилей = 2 Тогда

Картинка = БиблиотекаКартинок.Грузовик;

 

КонецЕсли;

 

КонецПроцедуры

В зависимости от выбранного значения переключателя мы подставляем в реквизит формы ту или иную картинку.

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

Листинг 3.148. Обработчик события «При создании на сервере»

&НаСервере

Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)

 

ТипАвтомобилей = 1;

Картинка = БиблиотекаКартинок.Газель;

 

КонецПроцедуры

В результате после открытия формы она будет иметь следующий вид (рис. 3.173).

Рис. 3.173. Вид формы после открытия

Если изменить значение переключателя, то изменится и отображаемая в форме картинка (рис. 3.174).

Рис. 3.174. Вид формы после переключения типа автомобилей

Теперь займемся списком автомобилей.

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

Сначала добавим в общие картинки картинку Внимание. Она является коллекцией, состоящей из двух картинок: восклицательного знака и пустой картинки (рис. 3.175).

Рис. 3.175. Картинка «Внимание» в режиме коллекции

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

Затем создадим реквизит формы СписокАвтомобилей (ТаблицаЗначений) и ее колонки: Автомобиль (Строка) и НуженЭкспедитор (Булево) – рис. 3.176.

Рис. 3.176. Реквизиты «Автомобиль» и «НуженЭкспедитор»

Реквизит НуженЭкспедитор свяжем сразу с двумя полями таблицы формы.

Во-первых, с полем СписокАвтомобилейНуженЭкспедитор, имеющим вид Поле флажка. В этом поле мы и будем устанавливать желаемое значение.

Во-вторых, с полем СписокАвтомобилейКартинка, имеющим вид Поле картинки. В этом поле будет отображаться одна из двух пиктограмм.

Чтобы поле СписокАвтомобилейКартинка «знало», где взять пиктограммы, в его свойстве КартинкаЗначений укажем созданную нами общую картинку Внимание (рис. 3.177).

Рис. 3.177. Свойство «Картинка значений»

В результате, если в реквизите НуженЭкспедитор будет значение Истина, отобразится первая картинка из коллекции. Если Ложь – вторая, пустая (рис. 3.178).

Рис. 3.178. Отображение картинки в форме

Теперь рассмотрим последний способ работы с картинками.

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

Для этого добавим в конфигурацию еще одну общую картинку Оповещения. Она также является коллекцией картинок (рис. 3.179).

Рис. 3.179. Картинка «Оповещения» в режиме коллекции

Первая картинка в коллекции – пустая, остальные символизируют определенный вид оповещения.

Также добавим в конфигурацию перечисление ВидыОповещений (рис. 3.180).

Рис. 3.180. Перечисление «ВидыОповещений»

После этого в таблицу значений в форме добавим два реквизита.

Первый реквизит – ОповеститьКлиента (с типом ссылки на перечисление ВидыОповещений). Свяжем его с полем таблицы СписокАвтомобилейОповеститьКлиента (рис. 3.181).

Рис. 3.181. Реквизиты «ОповеститьКлиента» и «НомерОповещения»

В этом поле мы будем устанавливать нужное значение перечисления.

Второй реквизит – НомерОповещения типа Число. Его свяжем с реквизитом таблицы СписокАвтомобилейКартинкаОповещения, имеющим вид Поле картинки. В этом поле будет отображаться одна из выбранных пиктограмм. В его свойстве КартинкаЗначений выберем нашу общую картинку Оповещения.

Для поля таблицы СписокАвтомобилейОповеститьКлиента создадим обработчик события ПриИзменении(), в котором, в зависимости от выбранного значения перечисления, будем заполнять реквизит НомерОповещения (листинг 3.149).

Листинг 3.149. Обработчик события «При изменении»

&НаКлиенте

Процедура СписокАвтомобилейОповеститьКлиентаПриИзменении(Элемент)

 

ДанныеСтроки = Элементы.СписокАвтомобилей.ТекущиеДанные;

Если ДанныеСтроки.ОповеститьКлиента = ПредопределенноеЗначение("Перечисление.ВидыОповещений.Почта") Тогда

ДанныеСтроки.НомерОповещения = 1;

 

ИначеЕсли ДанныеСтроки.ОповеститьКлиента = ПредопределенноеЗначение("Перечисление.ВидыОповещений.Телефон") Тогда

ДанныеСтроки.НомерОповещения = 2;

 

ИначеЕсли ДанныеСтроки.ОповеститьКлиента = ПредопределенноеЗначение("Перечисление.ВидыОповещений.ЭлектроннаяПочта") Тогда

ДанныеСтроки.НомерОповещения = 3;

 

ИначеЕсли ДанныеСтроки.ОповеститьКлиента = ПредопределенноеЗначение("Перечисление.ВидыОповещений.Интернет") Тогда

ДанныеСтроки.НомерОповещения = 4;

 

ИначеЕсли ДанныеСтроки.ОповеститьКлиента = ПредопределенноеЗначение("Перечисление.ВидыОповещений.НеОповещать") Тогда

ДанныеСтроки.НомерОповещения = 5;

 

ИначеЕсли ДанныеСтроки.ОповеститьКлиента.Пустая() Тогда

ДанныеСтроки.НомерОповещения = 0;

 

КонецЕсли;

 

КонецПроцедуры

В результате, если значение перечисления не выбрано, будет отображаться пустая пиктограмма. Если выбрано – пиктограмма, соответствующая этому способу оповещения (рис. 3.182).

Рис. 3.182. Отображение картинки в форме

Следует сделать небольшое замечание относительно пустых картинок (и картинок вообще), отображаемых в табличной части. Текущая строка списка подсвечивается желтым фоном. Кроме того, к таблице может применяться условное оформление. Поэтому, чтобы пиктограммы хорошо выглядели на любом (не только белом) фоне, нужно делать их фон прозрачным. Особенно это важно для пустых пиктограмм.

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

Рис. 3.183. Отображение картинки с непрозрачным фоном

Чтобы сделать пустую картинку прозрачной, нужно отредактировать ее цвет и установить для него свойство Прозрачность в значение 0 (рис. 3.184).

Рис. 3.184. Изменение прозрачности цвета

В результате сделанных изменений проблемы, показанные на рис. 3.183, исчезнут (рис. 3.185).

Рис. 3.185. Отображение картинки с прозрачным фоном

ПРИМЕЧАНИЕ

В информационной базе «Файлы и картинки» у всех картинок уже установлен прозрачный фон.

Назад: Картинка товара в форме
Дальше: Глава 3.19. Поле ввода