Докуметация Cтарт Статьи Форум Лента Вход
Не официальное русскоязычное сообщество
Главная
    Документация jMonkeyEngine
        jMonkeyEngine Уроки и Документация
            Вклады
                Лемур GUI
                    Стилизация

Стилизация

Опубликованно: 01.09.2017, 14:18
Последняя редакция, Andry: 19.09.2017 21:52
  • Стилизация
    • Концепции
      • ID Элементы
      • Селектор
      • Атрибуты
      • Приоритет
    • Настройка Стилей в Коде
    • Использование Языка Стиля
      • Встроенные функции
      • Применение
    • Ресурсы Стиля

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

Для пользовательского элемента GUI для поддержки стилизации просто нужно аннотировать соответствующие наборы методов с помощью аннотаций StyleAttribute, а затем убедиться, что вы вызываете styles.applyStyles() во время построения.

Концепции

Стиль элемента определяется как его «ID элементом», так и его «название стиля». Название стиля по умолчанию может быть настроено так, что все новые элементы GUI будут его использоваться, если не указан другой стиль. «ID элемент» определяет, какой набор атрибутов стиля применяется в «каскадном» или «унаследованном» способе.

CSS-подобные, но разные. Каскадные таблицы стилей имеют аналогичную концепцию наследования или содержания, но в случае CSS это основано на компоновке страницы. Стиль может применяться ко всем абзацам или абзацам только под определенным классом «div» и так далее. В Lemur стиль применяется до того, как элемент даже добавлен в GUI, и поэтому каскадирование основано непосредственно на ID элемента и его пунктирных под-частях.

В Lemur элементы GUI по умолчанию используют концепцию Swing «insets» и «margins», а не концепцию CSS «padding» и «margin». Для тех, кто знаком с CSS, margins и insets будут казаться обратными. «Insets» определяют, сколько пространства имеет элемент GUI относительно его родительской компоновки. «Margins» определяет, какое пространство имеет элемент GUI внутри своих границ/фонового слоя.

ID Элементы

ID элемент определяет место элементов GUI в иерархии стилей. Является ли это просто «button» или «slider.thumb.button» или «megaSlider.thumb.button» или просто «menu.button», каждая из этих вещей может требовать разные атрибуты стиля при наследовании некоторых общих атрибутов из обычного «button» стиля.

В общем, лучше всего определить ID элементов, как container.contained.contained, где обычно первая часть определяется чем-то создающим элемент. На самом деле класс ElementId делает это легко, предоставляя удобный метод child(childId).

Фактические атрибуты, которые применяются для данного ElementID, будут определяться настройками «селекторов».

Селекторы

Селектор определяет шаблон, к которому применим набор атрибутов стиля. Простые селекторы будут основываться только на «названии стиля» или на простом ID типа «button». Более сложные стили на основе содержания также поддерживаются.

Для краткости этот документ будет использовать язык стиля для указания селекторов при представлении примеров. Версия Java кода на самом деле не отличается, но немного более подробна.

selector(styleName) Самый простой селектор — это селектор названия стиля. Это применит определенный набор атрибутов стиля к любому элементу указанного стиля. null стиль указывает, что атрибуты будут применяться по умолчанию для всех стилей.

selector(elementId, styleName) Следующий простейший селектор применяется к любому элементу с указанными elementId и styleName. Опять же, styleName равный null устанавливается по умолчанию для всех элементов с elementId, независимо от стиля. elementId в этом случае является «хвостом» сопоставления. Другими словами, selector(«button», «glass») будет соответствовать любым «button», «slider.thumb.button«, «menu.button» и.т.д., Если они имеют стиль «glass».

selector(parentId, elementId, styleName) Этот самый продвинутый и позволяет стилю применяться только к определенному elementId и styleName, если он «содержится» в определенном parentId. «Содержится» в этом случае означает, что полный elementId имеет parentId где-то раньше в своем значении. Другими словами, вы можете думать об этом как parentId.*.elementId. Например, selector(«slider», «button», «glass») будет соответствовать всем кнопкам элемента Slider(Ползунок), включая: «slider.thumb.button«, «slider.up.button«, «slider.down.button«,»slider.left.button«и.т.д.

Атрибуты

При настройке стилей атрибуты могут иметь любое название, которое желает вызывающий, но когда применяются стили, этому будут соответствовать только свойствам элемента, которые были должным образом аннотированы. Конкретное название стилизованного атрибута соответствует названию сеттера по соглашению, но это необязательно. Всегда лучше проверять аннотации в javadoc для свойств конкретного элемента, когда вы сомневаетесь.

Пример javadoc: [Panel.setBackground()](http://jmonkeyengine-contributions.github.io/Lemur/javadoc/Lemur/com/simsilica/lemur/Panel.html#setBackground(com.simsilica.lemur.core.GuiComponent)

setBackground

@StyleAttribute(value="background", lookupDefault=false)
public void setBackground(GuiComponent bg)|

Приоритет

Это сложная часть, которую иногда предсказывают, но в целом библиотека стилей пытается использовать «наиболее конкретный» стиль для более общего стиля. Это означает, что селектор для «button» более общий, чем селектор для «thumb.button», который является более общим, чем селектор для «slider.thumb.button». Это усложняется для селекторов содержания, но общая идея имеет смысл. Более длинные совпадающие сегменты означают «более конкретные», особенно если они находятся в хвосте. Для действительно сложных требований к стилю может потребоваться включить ведение журнала трассировки для стиля, чтобы увидеть, как они применяются. Иначе, просто продвигайтесь вперед и будьте более конкретными в определении стиля и полагайтесь на меньшее каскадирование в каком-то двусмысленном взгляде.

Внутренний атрибут, заданный для конкретного полного elementId, собирается путем упорядочения селекторов соответствия от наиболее онкретного к наименее конкретному, а затем для создания набора значений атрибутов только в том случае, если эти значения еще не установлены.

Пример:

selector("glass") {
    fontSize=20
}
selector("button", "glass") {
    color = color(0.5, 0.75, 0.75, 0.85)     
}
selector("slider", "button", "glass") {
    fontSize=10
}

Должны появиться следующие тестовые примеры:

ElementId(«label»)

  • fontSize=20

ElementId(«button»)

  • fontSize=20
  • color=color(0.5, 0.75, 0.75, 0.85)

ElementId(«slider.thumb.button»)

  • fontSize=10
  • color=color(0.5, 0.75, 0.75, 0.85)

.. и, надеюсь, вы сможете начать проявлять гибкость.

Настройка Стилей в Коде

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

Чтобы настроить стили в коде, сначала получите объект Attributes для определенного шаблона селектора. Как только объект Attributes будет получен, просто установите любые значения атрибутов. Клонируемые значения будут автоматически клонированы при применении к определенной цели. Это позволяет устанавливать более сложные объекты, такие как GuiComponents, как атрибуты стиля, не беспокоясь о совместном использовании состояния.

Следующий пример отражает упрощенный пример в разделе «Приоритет» с несколькими усовершенствованиями для отображения более продвинутых объектов, таких как шрифты и компоненты:

Styles styles = GuiGlobals.getInstance().getStyles();
Attributes attrs;
attrs = styles.getSelector("glass");
attrs.set("fontSize", 14);

QuadBackgroundComponent bg = new QuadBackgroundComponent(new ColorRGBA(0, 1, 0, 1));
attrs = styles.getSelector("button", "glass");
attrs.set("color", new ColorRGBA(0.5f, 0.75f, 0.75f, 0.85f));
attrs.set("background", bg);

BitmapFont font = assetManager.loadFont("myFont.fnt");
attrs = styles.getSelector("slider", "button", "glass");
attrs.set("fontSize", 10);
attrs.set("font", font);

Использование языка стиля

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

Ниже приведен пример стилизации, который отражает тот, что находится в разделе «Настройка стилей в коде»:

import com.simsilica.component.*;

selector('glass') {
    fontSize = 20
}
selector('button', 'glass') {
    background = new QuadBackgroundComponent(color(0, 1, 0, 1))
    color = color(0.5, 0.75, 0.75, 0.85)
}
selector('slider', 'button', 'glass') {
    fontSize = 10
    font = font('myFont.fnt')
}

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

Встроенные функции

Этот список постоянно расширяется, но вот текущий набор встроенных функций:

  • Font (name): загружает файл шрифта из AssetManager.
  • Color (r, g, b, a): создает новый ColorRGBA с использованием указанных значений.
  • Texture (name): загружает текстуру из AssetManager.
  • Texture (args): загружает текстуру из AssetManager и применяет любые указанные атрибуты после загрузки. Встроенными параметрами являются «имя» и «generateMips», которые используются для фактической загрузки текстуры. После этого через эти аргументы можно установить любое стандартное свойство текстуры JME. Например:
    Texture ([name: «textures / myTexture.png», generateMips: false, wrap: WrapMode.Repeat])
  • Vec3 (x, y, z): создает объект Vector3f из заданных значений x, y, z.
  • Vec2 (x, y): создает объект Vector2f из заданных значений x, y.

Применение

Чтобы напрямую загрузить свой собственный стиль, используйте один из методов loadStyle () в StyleLoader.

new StyleLoader().loadStyle(styleFile.toString(), new FileReader(styleFile));

… или установите свой стиль как ресурс класса (или ресурс) и используйте класс BaseStyles для его загрузки.

BaseStyles.loadStyleResources("styles/myCoolStyle.groovy");

Ресурсы стиля

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

Встроенные стили используют этот же механизм, поэтому легко расширить даже встроенные стили.

Например:

BaseStyles.loadGlassStyle();

… на самом деле просто сокращается:

BaseStyles.loadStyleResources("com/simsilica/lemur/style/base/glass-styles.groovy");

Если приложение создает собственный файл com / simsilica / lemur / style / base / glass-styles.groovy (обратите внимание: путь должен соответствовать точно), то этот файл также будет загружен и добавится или заменит что-либо в стиле Lemur по умолчанию. (Фактически, это то, что библиотека LemurProto делает для добавления дополнительного стиля для элементов прототипа GUI.)

Это, как правило, лучший / простой способ определить стиль и загрузить его.


Переведено для jmonkeyengine.ru, оригинал
Автор перевода: Andry

Добавить комментарий

jMonkeyEngine.ru © 2017. Все права сохранены.