Выпущена JMetro версии 5

Версия 5 Java, тема JavaFX JMetro , только что была выпущена.

Вот что нового в этой версии:

• Новая текстовая область светлого и темного стиля;
• Горстка изменений в существующих стилях управления;
• Новая переменная CSS называется accent_color. Это, как следует из названия, позволяет вам определить цвет акцента, используемый в элементах управления JMetro;
• Был сделан большой рефакторинг, который упростил и удалил дублированный код CSS.

В этом посте я подробно расскажу об этой новой версии.

Обновление стиля для JMetro

TextArea JMetro стиль

После сообщения об ошибке в трекере проблем JMetro я добавил новый текстовый стиль светлый и темный стиль.

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

Вот как выглядит темный и светлый стиль TextArea:

Текстовая область — тема JavaFX JMetro dark

Изменения в существующих стилях

Выбор Box новый стиль

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

Коробка выбора — тема Javafx JMetro light

Выбор Box — тема Javafx JMetro темный

Spinner новый стиль

Темные цвета Spinner были изменены:

Spinner — тема Javafx JMetro dark

Вкладки и TabPane новый стиль

Цвет акцента, используемый в светлой теме Tabs и Tab Pane, был слегка изменен.

Стиль темной темы был полностью обновлен:

Вкладки и панель вкладок — тема JavaFX JMetro dark

Другие настройки стиля

Другие изменения включают в себя небольшие изменения в свете дерева и темную тему.

Стайлинг JMetro

Новые CSS-переменные

Добавлены новые переменные CSS, так что JMetro может быть легко стилизован в дальнейшем.

Новые переменные CSS, которые являются открытым API:

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

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

Тумблер с синим (# 0078d7) акцентным цветом

Тумблер с зеленым (# 10893e) акцентным цветом

Следующий код CSS был использован для первого захвата экрана:

И этот CSS для второго экрана:

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

Соглашения об именах, используемые в JMetro

Ниже приведены соглашения об именах, используемые в JMetro.

Свойства CSS

Имена свойств начинаются с «-». Примеры: -shrink-animate-on-press , -show-value-on-interaction .

Переменные CSS

Переменные начинаются со строчной буквы и заканчиваются « цветом». Слова отделяются « ». Примеры: accent_color , text_color .

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

В идеале я бы предпочел определить переменные, поставив перед ними префикс «‑». Это соглашение определено для переменных в веб-CSS. Однако запуск переменной с «‑‑» недопустим в JavaFX CSS (по крайней мере, в настоящее время).

Переменные оканчиваются на «_color» для предотвращения конфликтов. Например, определение переменной с text имени будет конфликтовать с -fx-cursor значения свойства -fx-cursor . Если где-то text значения определен для -fx-cursor , он будет заменен значением переменной, которое вы определили для text переменной. Это приведет к ошибкам в стилизации.

Другие соглашения

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

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

Большой Рефактор для JMetro

Большой рефактор был сделан в JMetro для удаления дублированного кода CSS. Это было не так уж и много, но, учитывая, что, насколько мне известно, нет хорошего инструмента для выполнения рефакторинга в коде JavaFX CSS, потребовалось больше, чем если бы это был код Java. Простые рефакторы в CSS, такие как изменение имен переменных, могут занимать много времени и быть подвержены ошибкам.

Весь код, общий для темной и светлой тем, был перемещен в один файл CSS: «JMetroBase.css». «JMetroDarkTheme.css» и «JMetroLightTheme.css» определяют значение цветовых переменных, которые определяют соответствующую тему. Они оба включают «JMetroBase.css».

Теперь, кроме табличного представления (которое я буду рефакторинг в более поздней версии), больше нет дублирования кода CSS.

Завершение

Версия 5 представляет еще одну итерацию JMetro. Все существующие стили были переработаны и добавлены новые стили управления.

Теперь вы также можете настроить свойства темы, такие как цвет акцента, просто переопределив переменную CSS.

В этой последней версии появился новый элемент управления: текстовая область, настройки некоторых существующих стилей, новые переменные CSS для легкой настройки JMetro под ваши нужды и, наконец, большой рефакторинг для удаления дублирующегося кода и упрощения JMetro.

Как всегда это страница документации для темы JavaFX JMetro . Я постараюсь обновить его в ближайшие дни.

Вот что я панорамировал дальше:

• Сделать JMetro доступным через Maven Central (он уже доступен через Bintray, JCenter и в виде загружаемого jar);
• Добавить новые стили просмотра таблицы дерева;
• Добавить новые стили аккордеона;
• И т.п.

Береги себя. Как всегда, мой твиттер- аккаунт будет там, где я буду публиковать все новости, касающиеся JMetro и других материалов с открытым исходным кодом.