* Управление стилями окон
Этот документ описывает управление стилем (внешним видом) для окон стандартных интерфейсов Домино8 - главного окна (main window), табличного вида просмотра (browse) и табличного вида просмотра со встроенной формой фильтра (browse filter), формы ввода (form) и иерархического древовидного вида просмотра (tree)
Применимо начиная с версии ядра 11.7.4.1
Файлы конфигурации, определяющие стиль окон
Параметры, которые описывают стиль (дизайн) окон интерфейсов, задаются в xml-файлах конфигурации в схеме design. Система считывает эти файлы, используя порядок просмотра каталогов, заданный в корневом файле описания конфигурации bin\config.xml для схемы с id=2 (design). Стандартное описание схемы design
Стандартный стили находятся в каталоге bin\config\design, и могут переопределяться на уровне проектного модуля, проектного решения в целом (продукта) и подкаталога config\design каталога установки продукта.
Каждый интерфейс имеет свой строковый идентификатор стиля. Стандартные идентификаторы:
Interface - общие параметры для всех окон
MainWindow - главное окно приложения
StandardBrowse - табличный вид просмотра
StandardBrowseFilter - табличного вида просмотра со встроенной формой фильтра
StandardForm - форма ввода
StandardTree - иерархический древовидный вид просмотра
MessageBox - окно с сообщением
PrjEditTree - редактор проекта
Соответственно xml-файл конфигурации с параметрами стиля должен иметь имя, совпадающее с идентификатором. Корневой тег файла
Параметры задаются тегом
Параметры стиля читаются из раздела с соответствующим стандартным идентификатором. Если параметр не описан, то в качестве значения по умолчанию берется значение из раздела (файла) 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), и для каждого состояния можно задать свой цвет фона и текста. Для этого к имени параметра добавляется имя состояния через двоеточие.
Состояние focus - это текущий элемент, на котором стоит указатель в виде просмотра. Система рисует плашку (прямоугольник) с цветом background-color:focus поверх основного фона. Для отображения текста элемента используется цвет color:focus
Состояние 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.
Состояние inactive - это текущий элемент, на котором стоит указатель в виде просмотра. При этом сам вид просмотра находится не в фокусе. В остальном поведение аналогично состоянию focus.
Так как элемент проекта может одновременно находится в нескольких состояниях, то для применения цветов действует правило вытеснения (каждый последующий цвет вытесняет предыдущий). Порядок вытеснения соответствует порядку, в котором состояния описаны выше.