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

30.11.14

Разработка - Работа с интерфейсом

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

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

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

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

Font Awesome 1C интерфейс

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61792    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54394    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16695    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10732    750    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

2 стартмани

10.04.2023    9606    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3663    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12077    1    5    

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

Есть неофициальный шрифт, который можно скачать здесь
4. MrAndersons 30.11.14 13:34 Сейчас в теме
(2)
Спасибо за ответ, буду пробовать.

И спасибо за хорошую статью. Однозначно плюс!
7. oleg.rizvanov 261 30.11.14 14:19 Сейчас в теме
(4) MrAndersons,
Всегда пожалуйста )))
3. qwinter 671 30.11.14 13:29 Сейчас в теме
В управляемых формах все с точностью до наоборот - у элемента формы "Таблица Формы" есть свойство "КартинкаСтрок", а у колонок такого свойства нет. В итоге, имеем всего одну пиктограмму на строку таблицы.
у колонки таблицы можно установить вид - картинка, и пихайте туда все что хотите, в этом отношении ничего не менялось, можно сколько угодно картинок в строках иметь, а вот в заголовках групп и форм это действительно интересно.
5. oleg.rizvanov 261 30.11.14 13:45 Сейчас в теме
(3) qwinter,
Да, вы абсолютно правы. Поправлю.

Зато, шрифтом можно 100500 иконок в одной колонке иметь, как видно на скрине. Хотя ценность этого сомнительная. :)
6. oleg.rizvanov 261 30.11.14 14:13 Сейчас в теме
(3) qwinter,
Поправил. Спасибо, что указали на ошибку.
8. efin1 30.11.14 15:18 Сейчас в теме
Подскажите, как можно эффективно распространять и устанавливать этот шрифт, если пользователи 1С - тонкие и веб-клиенты, компьютеры которых мне неподконтрольны?
Я использую ssl и наши сотрудники, вставив usb-токен в порт любого компа, могут работать с 1С.
9. cool.vlad4 2 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 261 30.11.14 16:00 Сейчас в теме
(8) efin,
Думаю, доставка самого файла шрифта не должна быть проблемой. Например, клиент может получить шрифт из временного хранилища

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

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

Если пользователь не доменный, тогда как описано здесь
adhocprog; teflon; +2 Ответить
11. efin1 30.11.14 16:42 Сейчас в теме
(10) Для простоты возьму свою ситуацию - у всех винды, тонкий клиент, ни у кого нет админских прав, домена нет, компы мне неподконтрольны (это реальность такая). Есть такие приложения, которые при установке спрашивают, для всех установить (требуются админские права) или только для меня (ставится в профиль пользователя) - кстати, на партнерском прошу 1С сделать такую возможность для тонкого клиента.
Вопрос - а нет ли такой же лазейки для шрифтов? Ну типа fonts для текущего пользователя?
13. oleg.rizvanov 261 30.11.14 17:05 Сейчас в теме
(11) efin,
В реестре Windows, шрифты живут в HKLM, а не в HKCU. То есть на уровне LocalMachine, а не CurrentUser. Если шрифт установлен на лок. компьютер, то он доступен всем пользователям этого компьютера.

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

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

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

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

P.S.
Хозяин - барин. Не нравится - не пользуйтесь
SeiOkami; +1 Ответить
20. zqzq 23 02.12.14 08:27 Сейчас в теме
(16) отвечали уже выше. Шрифты устанавливать надо, а если что-то может быть не установлено, оно обязательно будет не установлено. У клиентов может быть веб-клиент, линукс, отсутствие прав админа и т.д..
В общем, на любителя. С картинками проще. (Вспоминаю вечную проблему неустановленного шрифта двумерного штрихкода для деклараций, с которой на бывшей работе во франче постоянно сталкивался.)
21. oleg.rizvanov 261 02.12.14 12:49 Сейчас в теме
(20) zqzq,
Вы ставите вопрос так: ИЛИ картинки, ИЛИ шрифты. Почему ИЛИ, почему не И?
Где-то правильнее будет картинку вставить, где-то шрифт - одно другому не мешает.

Цель статьи была - показать сообществу абсолютно легальный способ разнообразить интерфейс без ущерба для платформы. Это просто еще один инструмент для работы с интерфейсом
adhocprog; SeiOkami; +2 Ответить
17. oleg.rizvanov 261 01.12.14 11:49 Сейчас в теме
К тому же, вы "на лету" можете манипулировать например цветом иконки

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


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

P.S. А тема очень и очень интересная... Попробую воспользоваться...
19. oleg.rizvanov 261 01.12.14 19:04 Сейчас в теме
(18) EmpireSer,
Прикольно. Спасибо
23. Magister 134 03.12.14 11:45 Сейчас в теме
(18) (19) В Windows программа может добавить шрифт и без прав администратора. Насколько я помню, сохраняется эта регистрация до перезагрузки. Сам так делал когда-то.
В принципе, не проблема написать ВК, которая установит шрифт при необходимости.
Остается ещё, правда, Linux - но там тоже проблема вполне решаемая.
22. vitaliy1911 38 03.12.14 10:40 Сейчас в теме
шрифты эт конечно хорошо, но где же сглаживание?
24. ger_kar 03.12.14 21:06 Сейчас в теме
Идея хорошая, однозначно плюс, но и есть еще над чем подумать. Я думаю нужно хранить шрифт прямо в конфигурации и средствами же конфигурации проверять наличие в системе и делать последующую установку при отсутствии, да так, чтобы гарантированно работало на любой платформе.
25. oleg.rizvanov 261 03.12.14 22:10 Сейчас в теме
(24) ger_kar,
Функция проверки существования шрифта есть в Общем модуле.
Функцию установки не делали. Установка под админом - это просто копирование файла в каталог Windows/Fonts.

Пока мне до конца не понятно как из-под бесправного пользователя сделать установку.
MSDN говорит, что шрифт можно установить функцией AddFontResource и потом нужно оповестить об этом другие окна функцией SendMessage
Еще не пробовал
27. ger_kar 04.12.14 16:23 Сейчас в теме
(25)
Ну с Windows то все более менее понятно (кроме установки для бесправного юзера), но хорошо бы исхитриться и сделать универсальное решение, работающее на любой платформе. Линуксы, так это вообще темный лес :)
32. Magister 134 24.12.14 11:16 Сейчас в теме
(25) Именно так и работает. Я когда-то делал в программе на Delphi.
26. rtnm 614 04.12.14 13:40 Сейчас в теме
28. oleg.rizvanov 261 06.12.14 20:47 Сейчас в теме
(26) rtnm,
Спасибо.
На GitHub-e есть целый раздел: Icon fonts
29. androgin 10.12.14 15:34 Сейчас в теме
хочется уже взглянуть на модуль Шрифты ))
30. oleg.rizvanov 261 10.12.14 17:33 Сейчас в теме
(29) androgin,
Общий модуль "Шрифты" лежит в ZIP-архиве статьи
31. logarifm 1117 15.12.14 10:38 Сейчас в теме
Я просто не понял, чем не устраивают обычные и стандартные шрифты? По иконкам смотрю, ИМХО, они какие-то растровые, растянутые...
33. user676027_svikator 124 22.06.22 14:44 Сейчас в теме
Однозначно лайк за идею. Тоже как то делал связку 1С и Font Awesome, только немного в другом формате, а именно использование в ПолеHTMLДокумента, при написании мобильного приложения.
34. user625107_barabambler1s 06.09.22 16:48 Сейчас в теме
Когда вы выложите в репозитарий? А то стартмани у меня нет, а посмотреть хочется...
А как шрифт Typicons установить? Достаточно файл ttf скопировать?
35. пользователь 07.09.22 08:16
Сообщение было скрыто модератором.
...
36. tango 506 19.06.23 20:57 Сейчас в теме
simplit doesn’t have any public repositories yet.
Оставьте свое сообщение