Хочу поделиться тем, как разнообразить зачастую суровый и очень текстовый интерфейс 1С и добавить в него немного красок жизни. Дальше, будет много скриншотов, ведь статья про интерфейс. А как можно рассказать про интерфейс без скриншотов?
Начало
Понятно, что при использовании управляемых форм платформа стремится к унификации, т.к. работает с целой кучей 1С-клиентов - тонкими, толстыми, веб-клиентами, мобильными. С другой стороны, не всем пользователям нравится «суровый челябинский интерфейс», порой на 99% состоящий из текста. Многим хочется чтобы было хотя бы не хуже, чем в браузере.
Конечно, никто не запрещает нам вставлять в интерфейс картинки, но при использовании картинок, мы имеем накладные расходы:
- хранение в библиотеке,
- загрузку картинки в форму,
- передачу на сторону клиента.
А накладных расходов нам не хочется, тормозов в 1С и без этого хватает. Поэтому, мы в Simplit-е подумали... В то время, когда космические корабли бороздят весь цивилизованный мир давно использует иконочные шрифты почему бы и в 1С их не использовать? В общем, подумали и решили реализовать.
Установка Font Awesome
Мы давно и успешно используем Bootstrap + Font Awesome, соответственно, начали мы именно с интеграции 1С + Font Awesome. Устанавливается Font Awesome просто:
- скачиваем архив c официального сайта,
- распаковываем архив,
- копируем файл fonts/fontawesome-webfont.ttf в каталог Windows/Fonts
С этого момента, мы уже можем использовать иконочный шрифт Font Awesome в 1С.
Работа со шрифтом
Мочь-то мы можем, но без сервисных функций работать с Font Awesome из 1С-а неудобно. Браузер знает о всех символах шрифта из CSS, поэтому использовать шрифт в браузере просто:
Чтобы из кода 1С было удобно работать с Font Awesome, мы сделали карту символов (character map) + другие сервисные функции и закинули все это в общий модуль "Шрифты" Теперь, мы можем использовать в коде 1С следующие конструкции:
// получаем структуру с символами шрифта
fa=Шрифты.ПолучитьСимволыШрифта();
// задаем заголовок кнопки на форме
Элементы.Play.Заголовок=fa.play;
// указываем шрифт
Элементы.Play.Шрифт=Новый Шрифт("FontAwesome");
Три строчки кода и в результате, теперь наша кнопка выглядит так (Такси-интерфейс):
Обратите внимание на удобный способ, которым мы обращаемся к иконке: fa.play. То есть, теперь работать с иконками даже проще, чем в браузере.
Что мы с этого можем поиметь?
- не надо "париться" с картинками - рисовать, хранить, и т.д.
- можно вставить иконки даже там, где обычную картинку никак не вставишь (поясню чуть ниже)
- накладные расходы платформы при использовании шрифтовых иконок стремятся к нулю, т.к. для платформы иконка - это просто текстовый символ
- можно "на лету" манипулировать цветом, подчеркиванием, зачеркиванием - т.е. всеми доступными для манипуляции параметрами шрифта
Печеньки для Таблицы Формы
Теперь, используя иконочный шрифт можно перестать создавать коллекции картинок для строк таблицы - по сути иконочный шрифт и есть коллекция картинок. Достаточно вставить символ из шрифта в строку таблицы. Даже в пределах одной колонки можно иметь столько иконок, сколько позволяет фантазия. Например, как-то так:
В реальном приложении, столько пиктограмм конечно же не нужно. Например, в таблице внутренних номеров решения "v3.Панель телефонии" мы используем только 2 колонки с иконками и выглядит это так:
Иконки кнопок
Пример использования иконок в кнопках. Дешево и сердито. Можно быстро создать кнопки плеера:
Группы
Теперь можно вставить иконку даже туда, куда ее вставить обычными средствами невозможно. Например, в заголовок группы. Кстати, у группы напрочь отсутствует свойство "Картинка", поэтому по-другому иконку туда никак не вставишь.
Декорации
Теперь, изменение иконки текстовой декорации сводится к простому изменению заголовка. Пример:
Поле ввода
Сюда мы тоже можем вставлять иконки в бесчисленном количестве:
Конвертер на случай обновления Font Awesome
А обновление точно будет - проект развивается. На сайте проекта есть Character map, который они назвали CheatSheet (http://fontawesome.io/cheatsheet/), где указаны коды символов в формате HTML Hexadecimal. В обработке, которая приложена к статье, есть конвертер из Hexadecimal в Decimal. При выходе новой версии шрифта, нужно просто добавить код новых иконок в карту шрифта. Пример создания карты шрифта есть в обработке, и общем модуле архива статьи.
Развитие
Font Awesome - вещь хорошая и очень популярная, но не единственная. Тем, кому 479 иконок недостаточно, может использовать и другие иконочные шрифты. Ниже, неполный список подобных проектов:
Комбинировать шрифты можно с помощью "ножниц" - Fontello
Общий модуль "Шрифты" и примеры в виде внешних обработок мы в ближайшее время выложим в репозитарий Simplit на GitHub-е. Планируем добавить еще несколько интересных шрифтов.