Расскажу о том, как разнообразить суровый текстовый интерфейс 1С и добавить в него немного красок жизни.

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

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

Конечно, никто не запрещает нам вставлять в интерфейс картинки, но при использовании картинок, мы имеем накладные расходы:

• хранение в библиотеке,
• загрузку картинки в форму,
• передачу на сторону клиента.

А накладных расходов нам не хочется, тормозов в 1С и без этого хватает.

Поэтому, мы в Simplit-е подумали… В то время, когда космические корабли бороздят  весь цивилизованный мир давно использует иконочные шрифты почему бы и в 1С их не использовать? В общем, подумали и реализовали.

Установка Font Awesome

Мы давно и успешно используем Bootstrap + Font Awesome, соответственно, начали мы именно с интеграции 1С + Font Awesome. Устанавливается Font Awesome просто:

• скачиваем архив в официального сайта,
• распаковываем архив,
• копируем файл fonts/fontawesome-webfont.ttf  в каталог  Windows/Fonts

С этого момента, мы уже можем использовать иконочный шрифт Font Awesome в 1С.

Работа со шрифтом

Мочь-то мы можем, но без сервисных функций работать с Font Awesome из 1С-а неудобно. Браузер знает о всех символах шрифта из CSS, поэтому использовать шрифт в браузере просто:

Чтобы из кода 1С было удобно работать с Font Awesome, мы сделали карту символов (character map) + другие сервисные функции и закинули все это в общий модуль «Шрифты»  Теперь, мы можем использовать в коде 1С следующие конструкции:

Три строчки кода и в результате, теперь наша кнопка выглядит так (Такси-интерфейс):

Обратите внимание на удобный способ, которым мы обращаемся к иконке: fa.play . То есть, теперь работать с иконками даже проще, чем в браузере.

Что мы с этого можем поиметь?

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

Печеньки для Таблицы Формы

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

В реальном приложении, столько пиктограмм конечно же не нужно. Например, в таблице внутренних номеров решения «v3.Панель телефонии» мы используем 2 колонки с иконками и выглядит это так:

Иконки кнопок

Пример использования иконок в кнопках. Дешево и сердито:

Группы

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

 

Декорации

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

Поле ввода

Сюда мы тоже можем вставлять иконки в бесчисленном количестве:

Конвертер на случай обновления Font Awesome

А обновление точно будет — проект развивается. На сайте проекта есть Character map, который они назвали CheatSheet, где указаны коды символов в формате HTML Hexadecimal. В обработке, которая приложена к статье, есть конвертер из Hexadecimal в Decimal.

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

Развитие

Font Awesome — вещь хорошая и очень популярная, но не единственная. Тем, кому 479 иконок недостаточно, может использовать и другие иконочные шрифты. Ниже, неполный список подобных проектов:

• Ionicons
• Entypo
• Meteocons — хороший набор, заточенный под метеорологию
• Typicons

Комбинировать шрифты можно с помощью «ножниц» — Fontello

Общий модуль «Шрифты» и примеры в виде внешних обработок мы в ближайшее время выложим в репозитарий Simplit на GitHub-е. Планируем добавить еще нескольких интересных шрифтов.