* Управление стилями окон

Этот документ описывает управление стилем (внешним видом) для окон стандартных интерфейсов Домино8 - главного окна (main window), табличного вида просмотра (browse) и табличного вида просмотра со встроенной формой фильтра (browse filter), формы ввода (form) и иерархического древовидного вида просмотра (tree)

Применимо начиная с версии ядра 11.7.4.1

Файлы конфигурации, определяющие стиль окон

Параметры, которые описывают стиль (дизайн) окон интерфейсов, задаются в xml-файлах конфигурации в схеме design. Система считывает эти файлы, используя порядок просмотра каталогов, заданный в корневом файле описания конфигурации bin\config.xml для схемы с id=2 (design). Стандартное описание схемы design

<scheme id="2" name="design" log_="design">
<path base="root" dir="config\design.new" save="1" />
<path base="root" dir="config\design" collection="1"/>
<path base="product" dir="config\design" collection="1"/>
<path base="bin" dir="config\design" collection="1"/>
<path base="root" dir="config\design" />
<path base="product" dir="config\design" />
<path base="module" dir="config\design" />
<path base="bin" dir="config\design" />
</scheme>

Стандартный стили находятся в каталоге bin\config\design, и могут переопределяться на уровне проектного модуля, проектного решения в целом (продукта) и подкаталога config\design каталога установки продукта.

Каждый интерфейс имеет свой строковый идентификатор стиля. Стандартные идентификаторы:

Interface - общие параметры для всех окон
MainWindow - главное окно приложения
StandardBrowse - табличный вид просмотра
StandardBrowseFilter - табличного вида просмотра со встроенной формой фильтра
StandardForm - форма ввода
StandardTree - иерархический древовидный вид просмотра
MessageBox - окно с сообщением
PrjEditTree - редактор проекта

Соответственно xml-файл конфигурации с параметрами стиля должен иметь имя, совпадающее с идентификатором. Корневой тег файла

<object name="ИдентификаторСтиля">

Параметры задаются тегом

Параметры стиля читаются из раздела с соответствующим стандартным идентификатором. Если параметр не описан, то в качестве значения по умолчанию берется значение из раздела (файла) c идентификатором Interface.

На уровне проекта можно задать собственный Идентификатор стиля для конкретного интерфейса (вида просмотра, формы). Для этого нужно указать этот идентификатор с помощью атрибута «Стиль». Если для интерфейса указан собственный стиль, то система будет брать параметры из соответствующего файла конфигурации, а параметры стандартного стиля будут использоваться в качестве значений «по умолчанию».

Описание шрифтов, цветов и размеров

Шрифт элемента описывается в файле конфигурации четверкой параметров гарнитура, размер, вес и стиль. Пример описания шрифта для элемента browse:

Вес (font-weight) может быть thin, extralight/ultralight, light, normal/regular, medium, semibold/demibold, bold, extrabold/ultrabold или heavy/black. Через знак / перечислены эквивалентные нотации, т.е. normal и regular - это одно и то же.

Стиль (font-style) может быть normal или italic.

Значение цвета задается в виде шестнадцатеричного RGB значения в css- нотации. Пример задания цвета border-color для элемента cell:

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

Размеры, отступы и границы задаются в числовом виде в абсолютных единицах (экранных пикселах), либо в поинтах (pt). Для задания размера в поинтах нужно сразу после значения добавить pt.

Отступы и границы задаются 4 значениями (rect) в css- нотации (сверху, справа, снизу, слева). Можно задать 3 значения (сверху, справа-слева, снизу), 2 значения (сверху-снизу, справа-слева), либо вообще одно значение (все 4 стороны одинаково). Пример задания отступов внутри элемента cell:

Структура окон и общие параметры

Все окна имеют настраиваемую рамку (frame), заголовок (caption) и панель инструментов (toolbar). Рамка является самым внешним элементом окна и позволяет менять его размеры. По внешней стороне рамки можно отрисовать контрастную границу (border). Заголовок находится внутри рамки в верхней части окна. Панель инструментов может находится внутри рамки с любой из четырех сторон. Если панель сверху, то она размещается под заголовком.

Имена параметров рамки окна начинаются с префикса «frame.».

Имя параметра	Что описывает
visible	Видимость рамки окна. Тип boolean, допустимые значения true/yes/1 и false/no/0
size	Ширина рамки окна (rect), отдельно по всем сторонам
border	Толщина контрастной границы (rect)
background-color	Цвет фона у рамки окна
border-color	Цвет контрастной границы

Окно может быть в двух состояниях - активное и неактивное (active и inactive). Цвета для состояния active задаются описанными в таблице параметрами -color. Для состояния inactive цвета задаются с суффиксом :inactive.

Заголовок окна - это прямоугольный элемент с текстом и стандартными кнопками управления. Для заголовка можно задать видимость (visible), отступ от рамки окна (spacing), рамку (border) и отступ для текста внутри заголовка (padding).

Высота заголовка рассчитывается автоматически с учетом отступов, толщины рамки, высоты текста и кнопок. Можно задать высоту явно параметром height.

Отступ вокруг рамки заголовка, заданный параметром spacing, закрашивается цветом фона рамки окна (frame.background-color). Можно указывать отрицательные значения отступа (втяжку) - в этом случае заголовок будет наезжать на рамку окна.

Имена параметров заголовка начинаются с префикса «caption.».

Имя параметра	Что описывает
visible	Видимость заголовка окна. Тип boolean, допустимые значения true/yes/1 и false/no/0
spacing	Отступы от рамки окна (rect), отдельно по всем сторонам
border	Толщина рамки (rect)
padding	Отступ внутри заголовка (rect)
height	Высота заголовка фиксированная
text-align	Выравнивание текста внутри заголовка ([left]/center/right)
font-…	Четыре стандартных параметра, шрифт заголовка
color	Цвет текста заголовка
background-color	Цвет фона заголовка
border-color	Цвет рамки

Заголовок вместе с окном может быть в двух состояниях - активное и неактивное (active и inactive). Цвета для состояния active задаются описанными в таблице параметрами -color. Для состояния inactive цвета задаются с суффиксом :inactive.

Внутри заголовка размещаются стандартные кнопки управления. Слева кнопка системного меню (menu), справа кнопки закрытия (close), разворачивания (maximize) и сворачивания окна (minimize). Кнопки сворачивания и разворачивания есть только у главного окна приложения.

Кнопка управления - это прямоугольный элемент, для которого можно задать отступ от рамки заголовка (spacing), рамку (border) и отступ для пиктограммы внутри кнопки (padding).

Система автоматически рассчитывает размер (ширину) кнопок с учетом отступов, толщины рамки, и ширины пиктограммы. Все кнопки при автоматическом расчете будут одинаковой ширины (по максимально широкой кнопке). Параметр width позволяет явно задать ширину для конкретной кнопки, причем система автоматически увеличит ширину, если пиктограмма с учетом отступов не помещается в указанный размер.

Пиктограмма кнопки может быть либо иконкой, либо символом. В первом случае указывается имя ico-файла и размер, во втором шрифт и код символа. Если задано относительное имя ico-файла, то полный путь считается относительно каталога файла конфигурации. Символ задается либо явно, либо как шестнадцатеричный код unicode в формате #XXXX.

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

Имена общих параметров для всех кнопок заголовка начинаются с префикса «caption.button.». Имена параметров, специфичных для конкретной кнопки, начинаются с префиксов «caption.button.menu.», «caption.button.minimize.», «caption.button.maximize.» и «caption.button.close.»

Имя параметра	Что описывает
spacing	Отступы от рамки заголовка (rect), отдельно по всем сторонам
border	Толщина рамки (rect)
padding	Отступ внутри кнопки (rect)
width	Ширина кнопки
icon	Имя файла иконки, символ или код символа для пиктограммы.
icon.size	Размер иконки в пикселях, от 16 до 96. Может быть [small]/medium/large/huge, эквивалентно 16/24/32/48. Иконки всегда квадратные, т.е. 16х16, 24х24…
font-…	Четыре стандартных параметра, шрифт пиктограмм. Только общий на все кнопки.
color	Цвет шрифтовой пиктограммы
background-color	Цвет фона кнопки
border-color	Цвет рамки

Кнопка может быть в трех состояниях - нормальное, выбранное и нажатое (normal/selected/pressed). Цвета для состояния normal задаются описанными в таблице параметрами -color. Для остальных состояний цвета задаются с суффиксами :selected и :pressed. Если цвета состояний «выбранное» и «нажатое» не заданы, то они будут рассчитаны от основных цветов.

Параметры конфигурации панели инструментов

Панель инструментов (toolbar) присутствует в главном окне и во всех интерфейсах. Имена параметров панели инструментов начинаются с префикса «toolbar.».

Имя параметра	Что описывает
visible	Видимость панели инструментов. Тип boolean, допустимые значения true/yes/1 и false/no/0
style	Стиль отрисовки toolbar classic/[theme]/flat
place	Место размещения toolbar. Допустимые значения [float]/left/top/right/bottom. По умолчанию float - местоположение определяется проектом и может быть изменено пользователем. Остальные значения жестко фиксируют toolbar с указанной стороны окна.
font-…	Четыре стандартных параметра, задают стандартный шрифт для всех элементов toolbar
color	Стандартный цвет текста для всех элементов toolbar
background-color	Цвет фона, для style=classic или flat
border-color	Цвет рамки toolbar
padding	Отступы от границ до элементов toolbar (кнопок) (rect)
border	Толщина рамки toolbar (rect), для style=flat
button.margin	Отступы между кнопками (rect)
button.padding	Отступы внутри кнопки (rect)
button.border	Толщина рамки вокруг кнопки (rect), для style=flat
button.font…	Четыре стандартных параметра, задают шрифт кнопок, переопределяют toolbar.font…
button.color	Цвет текста на кнопках, переопределяет toolbar.color
button.background-color	Цвет фона кнопки, для style=classic или flat
button.border-color	Цвет рамки кнопки, для style=flat
button.icon-color	Цвет шрифтовой иконки, по умолчанию = button.color
button.max-text-width	Максимальная ширина текста. По умолчанию 14 символов.
button.icon.size	Размер иконки на кнопках в пикселях, от 16 до 96. Может быть [small]/medium/large/huge, эквивалентно 16/24/32/48. Иконки всегда квадратные, т.е. 16х16, 24х24…
button.icon.place	Местоположение иконки относительно текста [top]/left
button.icon.margin	Отступы между иконкой и текстом (rect)
tab.color	Цвет текста на закладках, переопределяет toolbar.color
tab.background-color	Цвет фона закладки, -1 = прозрачный
tab.border-color	Цвет рамки закладки

Кнопка на панели инструментов может находится в четырех состояниях - normal, disabled, selected и pressed. Цвета для состояния normal задаются описанными в таблице параметрами toolbar.button….-color. Для остальных состояний можно задавать отдельные наборы цветов, добавляя к имени параметра имя состояния через двоеточие

Закладка на панели инструментов (есть только в главном окне приложения) может находится в двух состояниях - normal и active. Цвета для состояния normal задаются описанными в таблице параметрами toolbar.tab….-color. Для состояния active можно задавать отдельный набор цветов, добавляя к имени параметра имя состояния через двоеточие, например toolbar.tab.color:active

Параметры конфигурации главного окна приложения

Идентификатор стиля для главного окна приложения - MainWindow. Файл bin\Config\Design\MainWindow.xml содержит стандартные настройки, применяемые по умолчанию.

Имена параметров главного окна приложения начинаются с префикса «window.».

Имя параметра	Что описывает
background-color	Цвет фона главного окна приложения. По умолчанию используется цвет, заданный в настройках ОС для фона главного окна MDI- приложения.
wallpaper	Имя файла с картинкой, которая будет использована для «мощения» фона главного окна приложения. Стандартное значение - "images\$Background.png"

Параметры конфигурации формы ввода

Параметры конфигурации иерархического вида просмотра

Идентификатор стиля для иерархического вида просмотра - StandardTree. Файл bin\Config\Design\ StandardTree.xml содержит стандартные настройки, применяемые по умолчанию. Система позволяет изменить шрифт и набор цветов, которые используются в редакторе проекта. Имена параметров должны начинаться с префикса «row.» или «tree.», если иное не указано явно. При поиске значения система подставляет префиксы в указанном порядке.

Имя параметра	Что описывает
icon.size	Размер иконки в пикселях, от 16 до 96. Может быть [small]/medium/large/huge, эквивалентно 16/24/32/48.
font-…	Четыре стандартных параметра, задают шрифт
color	Цвет текста
background-color	Цвет фона
border-color	Цвет для отрисовки линий дерева Цвет для шрифтовых иконок свернуть/развернуть (альтернативный стиль отображения иерархии)
indent * префикс «row.»	Размер отступа, только для альтернативного стиля отображения иерархии
margin * префикс «tree.»	Отступы (rect) от границ окна
margin * префикс «row.»	Отступы (rect) между строками дерева по вертикали, и отступы по горизонтали между иконками- элементами строки
padding * префикс «row.»	Отступы (rect) по сторонам текста внутри строки

Элементы дерева могут находится в разных состояниях (focus, inactive), и для каждого состояния можно задать свой цвет фона и текста. Для этого к имени параметра добавляется имя состояния через двоеточие.

Состояние inactive - это текущий элемент, на котором стоит указатель в виде просмотра. При этом сам вид просмотра находится не в фокусе. В остальном поведение аналогично состоянию focus.

Параметры конфигурации табличного вида просмотра с формой фильтра

Параметры конфигурации редактора проекта

Редактор проекта основан на стандартном иерархическом виде просмотра. Идентификатор стиля для редактора проекта - PrjEditTree. Файл bin\Config\Design\PrjEditTree.xml содержит стандартные настройки для окна редактора проекта, применяемые по умолчанию. Система позволяет изменить шрифт и набор цветов, которые используются в редакторе проекта. Имена параметров должны начинаться с префикса «row.» или «tree.», если иное не указано явно. При поиске значения система подставляет префиксы в указанном порядке.

Имя параметра	Что описывает
icon.size	Размер иконки в пикселях, от 16 до 96. Может быть [small]/medium/large/huge, эквивалентно 16/24/32/48.
font-…	Четыре стандартных параметра, задают шрифт
color	Цвет текста
background-color	Цвет фона
border-color	Цвет для отрисовки линий (дерева)
padding	Отступы текста от границ строки (rect)
indent * префикс «row.»	Размер отступа, только для альтернативного стиля отображения иерархии
margin * префикс «tree.»	Отступы (rect) от границ окна
margin * префикс «row.»	Отступы (rect) между строками дерева по вертикали, и отступы по горизонтали между иконками- элементами строки

Элементы проекта могут находится в разных состояниях (disabled, comment, warning, error, marked, focus, inactive), и для каждого состояния можно задать свой цвет фона и текста. Для этого к имени параметра добавляется имя состояния через двоеточие.

Состояние disabled - это элементы, которые недоступны для редактирования. Стандартно выделяется серым цветом шрифта на обычном фоне.

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

Состояние warning - это родительские элементы для элементов в состоянии error. Стандартно выделяется оранжевым цветом шрифта на обычном фоне.

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

Состояние marked - это элементы, которые выделены (помечены) в результате поиска или пользователем явно. Стандартно выделяется синим цветом шрифта на обычном фоне.

Состояние focus - это текущий элемент, на котором стоит указатель в виде просмотра. Система рисует плашку (прямоугольник) с цветом background-color:focus поверх основного фона. Для отображения текста элемента используется цвет их состояния, или color:focus для обычных элементов. Стандартный цвет плашки для текущего элемента - серо-голубой #88C8FF.

Так как элемент проекта может одновременно находится в нескольких состояниях, то для применения цветов действует правило вытеснения (каждый последующий цвет вытесняет предыдущий). Порядок вытеснения соответствует порядку, в котором состояния описаны выше.