5.6. Внешний вид пользовательского интерфейса. Стили оформления.

5.6.1. Стили оформления

5.6.2. Темы интерфейса

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

5.6.2.1. Создание и применение собственной темы интерфейса

 Для создания темы интерфейса необходимо воспользоваться утилитой dxSkinEditor.  Тему интерфейса можно либо включить в исполняемый файл, либо загрузить динамически. Динамически загружаться может только одна тему интерфейса. Для динамической загрузки, необходимо файл с темой интерфейса разместить рядом с исполняемым файлом Global с тем же самым именем, но расширением *.skinres (Например global.skinres). Чтобы применить динамически подгружаемую тему интерфейса, необходимо в паскаль скрипте выполнить:

<pascal>
  Application.SkinName := 'UserSkin';
</pascal>

5.6.2.2. Пользовательские свойства загружаемые из тем интерфейса

При использовании не стандартных цветовых и шрифтовых настроек в отображении атрибутов и элементов выборки необходимо использовать внутренние стили Global из справочника стилей. Если вам необходим атрибут с красным фоном, то вместо прямого задания цвета в свойстве атрибута "Стиль раскраски", лучше указать название стиля из справочника стилей.

В файл темы интерфейса выносятся все свойства влияющие на стиль отображения интерфейса глобальные для всего приложения.

Типы свойств используемые в темах:

  • Boolean;
  • TColor;
  • Integer;
  • TRect;
  • TSize;
  • String.

На данный момент все свойства темы интерфейса типа TColor попадают в репозиторий стилей. К этим свойствам можно обращаться напрямую (средствами DevExpress), или через репозиторий стилей.

Attention

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

5.6.2.2.1. Общие свойства

  • Grid.FilteredHeaderStyle - стиль заголовка фильтра
  • Editors.BackgroundColor- задний фон редакторов
  • TextReadOnlyColor - цвет текста атрибутов только на чтение
  • Editors.BackgroundReadOnlyColor - задний фон атрибутов только на чтение
  • SelectionColor - цвет выделений
  • SelectionTextColor - цвет текста выделения

5.6.2.2.2. Свойства Диаграммы Гантта

  • Common.Gantt.VerticalLineMainLevelColor - цвет вертикальных линий главного уровня шкалы.
  • Common.Gantt.VerticalLineDetailLevelColor - цвет вертикальных линий детального уровня шкалы.
  • Common.TimeLine.VerticalLineMainLevelColor - цвет вертикальных линий главного уровня шкалы таймлайна.
  • Common.TimeLine.VerticalLineMainLevelTextColor - цвет подписей вертикальных линий главного уровня шкалы таймлайна.
  • Common.TimeLine.VerticalLineDetailLevelColor - цвет вертикальных линий детального уровня шкалы таймлайна.
  • Common.TimeLine.VerticalLineDetailLevelTextColor - цвет подписей вертикальных линий детального уровня таймлайна.
  • Common.TimeLineScaleGraph.BordersColor - цвет границ шкалы масштабирования таймлайна.
  • Common.TimeLineScaleGraph.SliderColor - цвет ползунка шкалы масштабирования таймлайна.
  • Common.TimeLineButtonLeft.Glyph - изображение отображающееся на кнопке "Влево" таймлайна.
  • Common.TimeLineButtonLeft.Glyph - изображение отображающееся на кнопке "Вправо" таймлайна.

5.6.2.2.3. Добавление новых свойств

Как правило добавление новых свойств осуществляется только в наши стили (GlobalWhiteBlue2015, GlobalWhiteYellow2015 и GlobalClassic). При этом необходимо обеспечивать корректный внешний вид и в других темах, в том числе в темах которые пользователь может создать и добавить самостоятельно. Чтобы обеспечивать корректный вид в "чужих" темах, при отсутствии нужных свойств используются альтернативные, присутствующие во всех темах по умолчанию, также используются цвета "по умолчанию", которые просто хардкодятся.

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

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

Attention

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

5.6.2.3. Предустановленные темы интерфейса в Global

Предустановленные темы можно выбрать в меню "Вид -> Тема интерфейса..."(Перед этим, необходимо переключить "Вид -> Стиль интерфейса->" в любой стиль кроме, "Стиль ОС"). Также тему и стиль можно задать используя соответствующий параметр коммандной строки (/lookandfeel либо /skin).

Список предустановленных тем:
  • GlobalClassic
  • GlobalWhiteBlue2015
  • GlobalWhiteYellow2015

5.6.3. Скриптовые возможности

Для управления внешним видом пользовательского интерфейса используется TbtkScriptSkinControllerObject. Доступ к нему можно получить через Application.SkinController.