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

Стилизация

Опубликованно: 01.09.2017, 14:18
Последняя редакция, Andry: 20.09.2017 16:55
  • Стилизация
    • Концепции
      • 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 и применяет любые указанные атрибуты после загрузки. Встроенными параметрами являются «name» и «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));

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

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

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

Внутри библиотеки стилей можно легко загрузить и расширить стиль, используя файла класса resource. Приложения могут легко вставлять свои файлы стилей непосредственно в свой jar или в их папку assets, а затем загружать их с помощью класса 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. Все права сохранены.