gifts2017

1С + Font Awesome. Добавляем новые возможности интерфейса

Опубликовал Олег Ризванов (oleg.rizvanov) в раздел Программирование - Работа с интерфейсом

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

Хочу поделиться тем, как разнообразить зачастую суровый и очень текстовый интерфейс 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");

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

Кнопка 1С + Font Awesome

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

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

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

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

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

Иконки в таблице формы управляемой формы

Иконки в таблице формы управляемой формы

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

v3.Панель телефонии 1С

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

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

Font Awesome 1C в кнопках

1С + Font Awesome. Иконки кнопок

Группы

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

Font Awesone + 1C. Иконка заголовка группы

Декорации

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

Иконочные шрифты в поле Декорация 1С

Font Awesome 1С. Декорация Надпись

Поле ввода

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

Font Awesome 1С. Поле ввода

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

А обновление точно будет - проект развивается. На сайте проекта есть Character map, который они назвали CheatSheet (http://fontawesome.io/cheatsheet/), где указаны коды символов в формате HTML Hexadecimal. В обработке, которая приложена к статье, есть конвертер из Hexadecimal в Decimal. При выходе новой версии шрифта, нужно просто добавить код новых иконок в карту шрифта. Пример создания карты шрифта есть в обработке, и общем модуле архива статьи.

Развитие

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

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

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

Скачать файлы

Наименование Файл Версия Размер Кол. Скачив.
FontAwesome.zip
.zip 14,49Kb
30.11.14
47
.zip 14,49Kb 47 Скачать

См. также

Подписаться Добавить вознаграждение

Комментарии

1. Mr Anderson (MrAndersons) 30.11.14 13:03
А как насчет Material-Design-Icons от Google? Как можно их подключить?
2. Олег Ризванов (oleg.rizvanov) 30.11.14 13:27
(1) MrAndersons,
Спасибо за хороший вопрос. Мне тоже нравится гугловский Material UI, но официального шрифта у них еще нет. Говорят, мол "coming soon". Подробности можно почитать здесь

Есть неофициальный шрифт, который можно скачать здесь
3. Павел Алексеенко (qwinter) 30.11.14 13:29
В управляемых формах все с точностью до наоборот - у элемента формы "Таблица Формы" есть свойство "КартинкаСтрок", а у колонок такого свойства нет. В итоге, имеем всего одну пиктограмму на строку таблицы.
у колонки таблицы можно установить вид - картинка, и пихайте туда все что хотите, в этом отношении ничего не менялось, можно сколько угодно картинок в строках иметь, а вот в заголовках групп и форм это действительно интересно.
4. Mr Anderson (MrAndersons) 30.11.14 13:34
(2) oleg.rizvanov,
Спасибо за ответ, буду пробовать.

И спасибо за хорошую статью. Однозначно плюс!
5. Олег Ризванов (oleg.rizvanov) 30.11.14 13:45
(3) qwinter,
Да, вы абсолютно правы. Поправлю.

Зато, шрифтом можно 100500 иконок в одной колонке иметь, как видно на скрине. Хотя ценность этого сомнительная. :)
6. Олег Ризванов (oleg.rizvanov) 30.11.14 14:13
(3) qwinter,
Поправил. Спасибо, что указали на ошибку.
7. Олег Ризванов (oleg.rizvanov) 30.11.14 14:19
(4) MrAndersons,
Всегда пожалуйста )))
8. Алексей Шачнев (efin) 30.11.14 15:18
Подскажите, как можно эффективно распространять и устанавливать этот шрифт, если пользователи 1С - тонкие и веб-клиенты, компьютеры которых мне неподконтрольны?
Я использую ssl и наши сотрудники, вставив usb-токен в порт любого компа, могут работать с 1С.
9. Ийон Тихий (cool.vlad4) 30.11.14 15:36
(8) efin, насколько знаю, для толстых клиентов сделать можно через копирование в папку fonts и созданием специальных ключей реестров (см. http://stackoverflow.com/questions/21986744/how-to-install-a-font-programatically-c , помогало даже WSH.Run("RunDll32.exe gdi32.dll,AddFontResourceA " + ФайлШрифта.ИмяБезРасширения); но сейчас проверил, не работает у меня). А вот как сделать у тонких и веб-клиентов, не знаю. задача может еще и осложняться, если гостевая система не windows,да и с правами тоже проблемы. Странно, что 1С не использует веб-шрифты (а может использует, просто я не знаю)
10. Олег Ризванов (oleg.rizvanov) 30.11.14 16:00
(8) efin,
Думаю, доставка самого файла шрифта не должна быть проблемой. Например, клиент может получить шрифт из временного хранилища

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

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

Если пользователь не доменный, тогда как описано здесь
11. Алексей Шачнев (efin) 30.11.14 16:42
(10) oleg.rizvanov, Для простоты возьму свою ситуацию - у всех винды, тонкий клиент, ни у кого нет админских прав, домена нет, компы мне неподконтрольны (это реальность такая). Есть такие приложения, которые при установке спрашивают, для всех установить (требуются админские права) или только для меня (ставится в профиль пользователя) - кстати, на партнерском прошу 1С сделать такую возможность для тонкого клиента.
Вопрос - а нет ли такой же лазейки для шрифтов? Ну типа fonts для текущего пользователя?
12. Simplit (simplit) 30.11.14 16:54
Плюс.
Босс, так вы скоро выдадите наши фишки )))
13. Олег Ризванов (oleg.rizvanov) 30.11.14 17:05
(11) efin,
В реестре Windows, шрифты живут в HKLM, а не в HKCU. То есть на уровне LocalMachine, а не CurrentUser. Если шрифт установлен на лок. компьютер, то он доступен всем пользователям этого компьютера.

Без прав установить шрифт не удастся. Однократно, кто-то должен его установить
14. Олег Ризванов (oleg.rizvanov) 30.11.14 17:14
(12) simplit,
Не будьте жадинами ))), с сообществом надо делиться.
Сами-то целыми днями на GitHub-е пасетесь. И фишек у вас слишком много )))
ojiojiowka; ger_kar; PowerBoy; +3 Ответить
15. ффф ыыы (zqzq) 01.12.14 08:40
Лучше не множить бажные сущности и использовать картинки, которые гарантированно будут отображаться у пользователей.
16. Олег Ризванов (oleg.rizvanov) 01.12.14 11:36
(15) zqzq,
Так это и есть картинки. По сути, иконочный шрифт есть большая БиблиотекаКартинок.

В чем принципиальная разница между:

Элементы.Кнопка.Картинка=БиблиотекаКартинок.Play;
и
Элементы.Кнопка.Заголовок=fa.Play;

Какой размер картинки? А кто его знает, может 5KB, а может 5MB. А символ Unicode - это всегда 2 байта.
Картинку надо рисовать, хранить, создавать коллекции для отображения в строках таблиц. А со шрифтом все это не нужно - вы просто вставляете в текстовое поле символ Unicode.

P.S.
Хозяин - барин. Не нравится - не пользуйтесь
17. Олег Ризванов (oleg.rizvanov) 01.12.14 11:49
К тому же, вы "на лету" можете манипулировать например цветом иконки

Если ЕстьСоединение Тогда
    Элементы.Кнопка.ЦветТекста=Зеленый;
Иначе
    Элементы.Кнопка.ЦветТекста=Красный;
...Показать Скрыть


или размером, или жирностью
18. Сергей Вн (EmpireSer) 01.12.14 15:42
Откопал вот это:
Установка шрифтов (на время) без прав администратора
Но проверку на работоспособность пока не делал

P.S. А тема очень и очень интересная... Попробую воспользоваться...
19. Олег Ризванов (oleg.rizvanov) 01.12.14 19:04
(18) EmpireSer,
Прикольно. Спасибо
20. ффф ыыы (zqzq) 02.12.14 08:27
(16) oleg.rizvanov, отвечали уже выше. Шрифты устанавливать надо, а если что-то может быть не установлено, оно обязательно будет не установлено. У клиентов может быть веб-клиент, линукс, отсутствие прав админа и т.д..
В общем, на любителя. С картинками проще. (Вспоминаю вечную проблему неустановленного шрифта двумерного штрихкода для деклараций, с которой на бывшей работе во франче постоянно сталкивался.)
21. Олег Ризванов (oleg.rizvanov) 02.12.14 12:49
(20) zqzq,
Вы ставите вопрос так: ИЛИ картинки, ИЛИ шрифты. Почему ИЛИ, почему не И?
Где-то правильнее будет картинку вставить, где-то шрифт - одно другому не мешает.

Цель статьи была - показать сообществу абсолютно легальный способ разнообразить интерфейс без ущерба для платформы. Это просто еще один инструмент для работы с интерфейсом
22. vitaliy pozdnyakov (vitaliy1911) 03.12.14 10:40
шрифты эт конечно хорошо, но где же сглаживание?
23. Misha ⁠ (Magister) 03.12.14 11:45
(18) (19) В Windows программа может добавить шрифт и без прав администратора. Насколько я помню, сохраняется эта регистрация до перезагрузки. Сам так делал когда-то.
В принципе, не проблема написать ВК, которая установит шрифт при необходимости.
Остается ещё, правда, Linux - но там тоже проблема вполне решаемая.
24. Герман Устюжанин (ger_kar) 03.12.14 21:06
Идея хорошая, однозначно плюс, но и есть еще над чем подумать. Я думаю нужно хранить шрифт прямо в конфигурации и средствами же конфигурации проверять наличие в системе и делать последующую установку при отсутствии, да так, чтобы гарантированно работало на любой платформе.
25. Олег Ризванов (oleg.rizvanov) 03.12.14 22:10
(24) ger_kar,
Функция проверки существования шрифта есть в Общем модуле.
Функцию установки не делали. Установка под админом - это просто копирование файла в каталог Windows/Fonts.

Пока мне до конца не понятно как из-под бесправного пользователя сделать установку.
MSDN говорит, что шрифт можно установить функцией AddFontResource и потом нужно оповестить об этом другие окна функцией SendMessage
Еще не пробовал
27. Герман Устюжанин (ger_kar) 04.12.14 16:23
(25) oleg.rizvanov,
Ну с Windows то все более менее понятно (кроме установки для бесправного юзера), но хорошо бы исхитриться и сделать универсальное решение, работающее на любой платформе. Линуксы, так это вообще темный лес :)
28. Олег Ризванов (oleg.rizvanov) 06.12.14 20:47
(26) rtnm,
Спасибо.
На GitHub-e есть целый раздел: Icon fonts
29. Виктор Назаров (androgin) 10.12.14 15:34
хочется уже взглянуть на модуль Шрифты ))
30. Олег Ризванов (oleg.rizvanov) 10.12.14 17:33
(29) androgin,
Общий модуль "Шрифты" лежит в ZIP-архиве статьи
31. Александр Хомяк (logarifm) 15.12.14 10:38
Я просто не понял, чем не устраивают обычные и стандартные шрифты? По иконкам смотрю, ИМХО, они какие-то растровые, растянутые...
32. Misha ⁠ (Magister) 24.12.14 11:16
(25) Именно так и работает. Я когда-то делал в программе на Delphi.
Для написания сообщения необходимо авторизоваться
Прикрепить файл
Дополнительные параметры ответа