Графит. Правщик 1С морд от kuzkov.info. 9. Консольный запуск для сопряжения

02.04.21

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

Девятая часть очерков о разработке программы Графит, векторного правщика 1С морд от kuzkov.info. В этом очерке будет рассказано о добавлении новых свойств в элементы для работы со словами и режимом отображения элементов на поле рисования. Кратко опишем консольный режим запуска Графита. Рассмотрим добавленный режим прозрачности svg отображалок.

Приветствую, уважаемое сообщество !

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

Отступление

В сем очерке будет писание о следующем:
*) Свойство "Пословный перенос";
*) Свойство "Обычный порядок отображения";
*) Консольный режим запуска Графита;
*) Выделение элементов через буфер обмена;

История разработки в публикациях

Первая часть: //infostart.ru/public/1331373/
Вторая часть: //infostart.ru/public/1336820/
Третья часть: //infostart.ru/1c/articles/1341861/
Четвертая часть: //infostart.ru/public/1353926/
Пятая часть: //infostart.ru/1c/articles/1380741/
Шестая часть: //infostart.ru/1c/articles/1391443/
Седьмая часть: //infostart.ru/public/1411942/
Восьмая часть: //infostart.ru/1c/articles/1413366/

Итак, поехали описывать сделанное !

Свойство "ПословныйПеренос"

Довольно часто при отразмерке элемента поля рисования возникает нужность изменять оттачивание с посимвольного на пословный и обратно. Например, в однострочных текстах удобнее оттачивать посимвольно, а в многострочных текстах правильнее выполнять пословный перенос. Если везде применять только посимвольный (как самый универсальный), то в некоторых случаях это будет зрительно некрасиво. Для возможности работнику самостоятельно изменять режим переноса в элементы добавлено свойство "Пословный перенос".

 


[Экроснимок посимвольного и построчного переноса в текстовой метке.GIF1]

Для разделения слов применяются следующие символы:
*) Пробел;
*) Запятая;
*) Точка;
*) Вопрос;
*) Восклицание;
*) Плюс;
*) Умножение;
*) Равно;
*) Прямая и обратная косая;
*) Скобки;
*) Точка с запятой;
*) Тире;
*) Больше;
*) Меньше;
*) Палочка;

Свойство "ОбычныйПорядокОтображения"

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

Что такое сетка

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

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

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

Если вы сделаете прототип без сетки, ничего страшного не случится. Профессиональный дизайнер или веб-разработчик добавит сетку за вас. Но если вы научитесь работать с сетками, качество прототипов резко вырастет, а вы по-другому посмотрите на веб-страницы, наброски и прототипы форм.

Как построить сетку

Построить сетку – выбрать количество колонок, ширину колонок, щель между колонками и ширину отступов по краям страницы.

Вопрос: сколько колонок должно быть в колоночной сетке?  Короткий ответ: 12. Дело даже не в том, что большинство CSS-каркасов которые используют веб-разработчики, построены на сетках с 12 колонками. При нужности умолчательные настройки каркасов меняются. А в том, что число 12 делится на: 12, 6, 4, 3, 2, 1. Поэтому сетка получается гибкой и позволяет органично верстать блоки почти любого количества или ширины. Более того, отбрасывая по краям макета 1 или 2 колонки в качестве полей, вы получаете в центре блок, который делится ещё и на 10, 5 или 8.

Для создания прототипа в 99 случаев из 100 удобно работать с сеткой из 12 колонок.

 


[Картинка элементов на сетке.PNG2]


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

Вы получаете 12 колонок с приятной шириной ровно в 100 пикселей и постоянно оргазмируете от круглых чисел в процессе работы. И когда вам нужно поместить на макет плашку кнопки, вы не тянете границы прямоугольника туда-сюда, а мгновенно и не задумываясь вбиваете размер: 300 на 60 и щелкаете на макет.

К слову, полезно приучить себя выравнивать элементы не мышкой и стрелками, а вбиванием цифры отступов по иксу и игреку — макеты станут опрятнее.

Если содержимое не подразумевает верстку встык, бывает удобно сделать 24 колонки и работать с ними так же, как с щелями, просто отступая при необходимости полную колонку в 50px. Это создает вокруг содержимого достаточно воздуха и макет смотрится дорого. Если же требуется интервал помельче, берется ровно половина колонки, то есть 25px. Все расчеты на лету, числа удобные.

Элементы поля должны располагаться на целом количестве колонок. Вы можете распределить элементы поля по колонкам как хотите: 6 и 6, 3 на 4, 4 на 3 — как угодно. Но в сумме колонок должно получиться 12, а элемент может занимать только целое число колонок (разместить его, например, на полутора колонках нельзя). Традиционно в дизайн-системе ширина колонок для разных разрешений не меняется, но вот их количество — да: с 12 колонок для настольника меняется на 8 для планшета и на 4 для телефона. Так сделали, чтобы упростить верстку.

 


[Картинка колонок для устройства.PNG3]


Межколоночный интервал (щель) — это пространство между колонками, которое добавляет в дизайн «воздуха». Бывает, что щель увеличивается по мере увеличения ширины устройства, но можно сделать ее и фиксированной. В большинстве случаев, щель значительно меньше ширины колонки. Если вы делаете набросок, где много классических элементов управления, узкая щель служит удобным разделителем. Например, между поисковой строкой и кнопкой, или между флажком и меткой. Если рисуется страница с крупными элементами, организованными всего в 2—3 колонки, то щель имеет смысл сделать большой, чтобы дать содержимому больше воздуха.

 


[Картинка с щелями между колонками.PNG4]


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

 


[Картинка боковых полей. PNG5]


Так вот, возвращаемся к Графиту в контексте вышеописанного. Флажок "Обычный порядок отображения" предназначен для того, чтобы можно было делать полупрозрачную сетку на основе отображалки, которая будет лежать сверху всех элементов. Для отключения обработки щелчков у отображалки можно снять флажок "Выбор", тогда сетка будет статичным недоступным фоновым элементом и при рисовании мешать не будет.

 


[Экроснимок пример сетки. GIF6]


Консольный режим запуска для возможностей сопряжения

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

Возможные ключи:
*) -cp
*) -in
*) -outp
*) -outs

Данный режим запуска может в двух видах: с показом окна и без показа главного окна.

Показ окна

При запуске с указанием ключей происходит открытие главного окна с добавленными кнопками управления для сопряжения:
*) -in;
*) -outp;
*) -outs;

-in
Данный ключ должен указывать загружаемые данные (xml, png или svg) при открытии Графита.

-outp
Данный ключ должен указывать путь, куда должна быть сохранена картинка при нажатии на кнопку "Отправить" блока "Сопряжение с 1С" ленты.Графит должен запомнить этот путь при открытии.

-outs
Данный ключ должен указывать путь, куда должна быть сохранена схема при нажатии на кнопку "Отправить" блока "Сопряжение с 1С" ленты.Графит должен запомнить этот путь при открытии. При нажатии Ctrl+S при рисовании, в этот путь должно выполняться сохранение.

 


[Экроснимок добавочных кнопок сопряжения.PNG7]

Пример запуска Графита для правки svg картинки

Графит.exe -in  ВекторГрафита.svg  -outs    Результ3.svg

Без показа окна

При запуске с указанием ключа -cp (create picture) Графит может вызываться для целей создания картинки одного поддерживаемого формата на основании другого поддерживаемого формата. Напомню, что поддерживаемые форматы это "xml", "png", "svg". При создании картинки png формата создается чистый png без встроенной схемы.

Пример запуска Графита для создания svg на основании xml схемы:

Графит.exe -cp  -in     Схема.xml    -outp    Результ7.svg

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

Как я ранее упоминал, у нас на Графит планы гораздо большие, чем просто рисовалка набросков 1С морд. Например, мы хотим попробовать использовать Графит для зрительной верстки веб-страничек для обозревателя на базе шаблонов.

Если в двух словах, то идеальный сценарий выглядит примерно так:
*) Рисовать шаблонами в Графите и сохранять в svg формат (читай xml, который 1Ской разбирается);
*) Далее загружать нарисованное в свою 1С конфигурацию, легкий аналог конфигуратора на толстом клиенте(для этого и нужно вышеописанное сопряжение);
*) Далее в 1С писать js обвязку в привязке по номеру кода или именам к загруженным графическим элементам из Графита (пока в раздумьях какой брать правщик кода, codemirror через js или подключить scintilla через ActiveX);
*) Нажатием пары кнопок выдавать собранный фронтовой набор для обозревателя;

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

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

Работает он примерно следующим образом: в буфер обмена из 1С должна быть отправлена строка формата "pid|ИмяЭлемента|ИмяСвойства". Открытый Графит с таким pid (идентификатор процесса) должен внутри себя найти элемент с таким именем, активировать сам элемент и активировать управлятор с именем ИмяСвойства.

 


[Экроснимок выделения через команду из буфера обмена.GIF8]

Применение примерно следующее:

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

На этом пока все.

Я помню про свое обещание выпустить Графит в первом квартале 2021 года. В ближайшее время начну готовить документацию по Графиту в хранилище гитхаба. К следующей публикации постараюсь собрать Графит "как есть" и выложить сборку для скачивания в виде бета-версии.

Остаемся на связи !

Прототип набросок приказчик аналитик visio заказчик kuzkov.info Кузьков Графит svg шаблонщик

См. также

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

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

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

6000 руб.

16.01.2015    60859    41    57    

78

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

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

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

2400 руб.

29.06.2020    15763    19    4    

28

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

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

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

2 стартмани

10.04.2023    8391    149    acces969    31    

113

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

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

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

1 стартмани

05.07.2022    2680    kalyaka    2    

22

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

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

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

3600 руб.

29.04.2022    11292    1    5    

10

Условное оформление элементов форм в пользовательском режиме 1С (управление видимостью и доступностью элементов форм)

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

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

6000 руб.

18.01.2022    8326    1    2    

6

Программный интерфейс для доработки форм

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

Реализовал простой способ программного создания новых элементов, команд и реквизитов на форме.

25.11.2021    8662    AtamanovYS    19    

135
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. d.snissarenko 152 03.04.21 10:31 Сейчас в теме
Очень интересная тема. Прототипирование интерфейсов позволяет избежать многих проблем эксплуатации и на этапе создания тех. заданий понять как заказчику так и разработчику что же будет на выходе. Но вот коробит от слова "морда"...
2. Steelvan 300 03.04.21 20:48 Сейчас в теме
... понять как заказчику так и разработчику что же будет на выходе ...

Согласен, причем мы хотим морду сделать не только svg картинкой с гиперссылками для переходов между экранами, но и добавить встройку html управляторов, типа "Вводилка", "Выбиралка" и прочие, чтобы заказчик мог глубже погрузиться, повзаимодействовать с формой.
Например, вводить текст, выбирать варианты и прочее.

Глубже погружение = больше понимание конечного результата.

Но это я уже делаю открывашку следующих очерков :)
3. Steelvan 300 11.08.21 21:11 Сейчас в теме
В связи с тем, что delphi != мой основной язык программирования, возникли неразрешимые технические сложности.
Буду переносить проект на electron.

Прощай Графит на delphi.
Здравствуй Графит на электроне.

---

Все, что может быть написано на javascript, будет написано на javascript.
Оставьте свое сообщение