Стиль окна для javafx

Руководство по JavaFX CSS Styling

JavaFX позволяет стилизовать компоненты с помощью CSS, также как вы можете стилизовать элементы HTML и SVG на веб-страницах с помощью CSS. Используется тот же синтаксис CSS, что и для Интернета, но свойства специфичны и поэтому имеют несколько отличающиеся имена, чем их веб-аналоги.

Стилизация приложений помогает отделить стили (внешний вид) от кода приложения. Это приводит к более чистому коду приложения и облегчает изменение стиля приложения. Вам не нужно заглядывать в код Java, чтобы изменить стиль. Вы также можете изменить стили для многих компонентов одновременно, используя общие таблицы стилей CSS.

Функции JavaFX CSS достаточно продвинуты, поэтому многое можно сделать с помощью только CSS.

Методы стилей CSS

Существует несколько различных способов применить стиль CSS:

• по умолчанию для JavaFX;
• для конкретной Scene;
• родительская;
• свойство стиля компонента.

Таблица стилей CSS по умолчанию

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

Таблица стилей по умолчанию для JavaFX 8 называется Modena и находится в файле JAR JavaFX.

Таблица стилей CSS для конкретной Scene

Вы можете установить таблицу стилей CSS для объекта Scene. Эта таблица затем применяется ко всем компонентам, добавленным в граф scene для этого объекта Scene. Таблица будет переопределять стили, указанные в таблице стилей по умолчанию, в случае, если обе таблицы устанавливают одинаковые свойства CSS.

Этот пример говорит JavaFX искать файл таблицы стилей с именем button-styles.css, который находится в каталоге с именем style1. JavaFX ищет этот файл в пути к классам, поэтому каталог style1 должен находиться в каталоге, который находится в корне одного из каталогов (или файлов JAR), которые включены в путь к классам для приложения.

Строка, указывающая на файл таблицы стилей CSS, интерпретируется как URL. Это означает, что вы также можете указать полные пути к файлу в файловой системе. Тем не менее, рекомендуется думать о CSS-файлах как о ресурсах и связывать их с кодом для вашего приложения. Пользователи, работающие с приложением, обычно не меняют стили, поэтому нет необходимости распространять файл за пределами кода (как это было бы с файлом конфигурации, который пользователи должны были изменить).

Родительские таблицы стилей CSS

Также возможно установить таблицу стилей CSS для всех подклассов родительского класса JavaFX. Родительский класс является базовым для всех компонентов, которые могут иметь дочерние элементы, то есть они могут содержать внутри себя другие компоненты. Свойства CSS, указанные в таблице стилей, установленной в родительском подклассе, обычно имеют приоритет перед правилами CSS, указанными в таблице стилей Scene, и в таблице стилей по умолчанию.

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

Установка таблицы стилей CSS для родительского подкласса выглядит аналогично установке ее для объекта Scene. Вот пример установки таблицы стилей CSS на VBox, который является родительским подклассом:

Этот код устанавливает таблицу стилей style1 / button-styles.css в VBox. Таким образом, таблица стилей будет применена к двум кнопкам внутри VBox.

Свойство стиля компонента

Вы можете установить стили CSS для конкретного компонента, задав свойства CSS непосредственно для компонента. Это делается путем установки строки, содержащей свойства CSS, в свойстве стиля компонента.

Свойства CSS, установленные с помощью свойства style, имеют приоритет над свойствами CSS, указанными в любых родительских подклассах, в которые вложен компонент, в таблицу стилей Scene и таблицу стилей по умолчанию.

Вот пример, который устанавливает свойство стиля для кнопки JavaFX:

В этом примере свойство CSS цвета фона в свойстве стиля устанавливается на синий цвет.

Вы можете установить несколько свойств CSS внутри одной строки стиля:

Свойства

Свойства CSS названы несколько иначе, чем свойства CSS, используемые в HTML. Однако команда держала имена свойств CSS JavaFX очень близкими к свойствам CSS, используемым в HTML.

Не все свойства CSS могут быть применены ко всем компонентам JavaFX, но многие могут быть применены к нескольким компонентам.

Источник

Учебник по JavaFX: CSS-стилизация

Это пост о том как стилизовать компоненты JavaFX, используя старый добрый CSS.

Все посты в серии о JavaFX:

Разделение визуальных элементов

В предыдущей статье о FXML мы узнали, как JavaFX обеспечивает четкое разделение задач путем разделения кода пользовательского интерфейса на две части. Компоненты и их свойства объявлены в файле FXML, а логика взаимодействия четко выделена в контроллер.

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

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

Вы, вероятно, знакомы с CSS (Cascading Style Sheets — Каскадные таблицы стилей), используемыми для стилизации HTML-страниц в Интернете. Похожий подход реализован в JavaFX, несмотря на то, что JavaFX использует набор своих собственных пользовательских свойств.

Давайте рассмотрим пример:

Здесь использованы две основные концепции. Первая — это селектор — .button. Он определяет, к каким компонентам должен применяться стиль. В этом примере стиль применяется для всех кнопок.

Вторая часть — это фактические свойства стиля, которые будут применены ко всем компонентам, которые соответствуют нашему селектору. Свойства — это все, что расположено внутри фигурных скобок.

Каждое свойство имеет определенное значение. В нашем примере есть свойство -fx-font-size, которое определяет, насколько большим будет текст. В примере указано значение 15px, но это значение может быть любым другим.

Подводя итог — мы создали правило, которое гласит — все кнопки везде должны иметь текст размером 15 пикселей.

Selectors (Селекторы)

Теперь давайте рассмотрим подробнее, как работают селекторы в JavaFX. Это происходит почти так же, как в обычном CSS.

Class (Класс)

Класс в CSS представляет несколько похожих элементов. Например, кнопки или флажки. Селектор, который должен применяться ко всем элементам одного класса, начинается с точки «.», сопровождаемый непосредственно именем класса. Соглашение об именовании классов состоит в том, чтобы разделять отдельные слова с помощью символа «-«. Следующий селектор применяется ко всем элементам с классом label.

Built-in classes (Встроенные классы)

Хорошая новость заключается в том, что все встроенные компоненты JavaFX (такие как Label или Button) уже имеют предопределенный класс. Если вы хотите настроить стиль всех меток в своем приложении, вам не нужно добавлять какие-либо пользовательские классы для каждой из ваших меток. Каждая метка по-умолчанию имеет класс label.

Легко определить имя класса из компонента:

• Возьмите имя Java класса компонента — например. Label
• Сделайте имя строчным
• Если он состоит из нескольких слов, разделите их с помощью символа «-«

Некоторые примеры:

• Метка → метка
• CheckBox → check-box

При использовании таких классов, как селекторы, не забудьте добавить «.». Это означает, что селектором для класса label является .label.

Custom classes (Пользовательские классы)

Если встроенных классов недостаточно, вы можете добавить свои собственные классы к своим компонентам. Вы можете использовать несколько классов, разделенных запятой:

Добавление классов таким способом не удаляет класс компонента по умолчанию (в данном случае label).

Существует один специальный класс, называемый root. Он является корневым компонентом вашей сцены. Вы можете использовать его, чтобы стилизовать все внутри вашей сцены (например, установить глобальный шрифт). Это похоже на использование селектора тегов body в HTML.

Другим способом выбора компонентов в CSS является использование идентификатора компонента (ID). Он является уникальным идентификатором компонента. В отличие от классов, которые могут быть назначены нескольким компонентам, идентификатор должен быть уникальным в сцене.

В то время как, для указания класса используют символ «.» перед именем в их селекторах, идентификаторы помечаются символом «#».

В FXML вы можете использовать fx:id для установки CSS-идентификатора компонента.

Однако есть одна оговорка. Этот же идентификатор используется для ссылки на объект компонента, объявленный в вашем контроллере с тем же именем. Так как идентификатор и имя поля в контроллере должны совпадать, fx:id должен учитывать ограничение именования Java для имен полей. Хотя соглашение об именах CSS определяет отдельные слова, разделенные символом «-«, это недопустимый символ для имен полей Java. Поэтому для fx:id с несколькими словами вам нужно использовать другое соглашение об именах, такое как CamelCase, или использовать подчеркивание.

В Java вы можете просто вызвать метод setId() вашего компонента.

Properties (Свойства)

Хотя CSS, используемый в JavaFX, очень похож на оригинальный веб-CSS, есть одно большое отличие. Имена свойств различны, и есть много новых свойств, специфичных для JavaFX. Они имеют префикс -fx-.

Вот некоторые примеры:

• -fx-background-color: Цвет фона
• -fx-text-fill: Цвет текста
• -fx-font-size: Размер текста

Вы можете найти список всех свойств в официальном руководстве по дизайну.

Псевдоклассы

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

Есть множество встроенных псевдоклассов. Давайте посмотрим на кнопку. Существует несколько псевдоклассов, которые вы можете использовать, например:

• hover: мышь над кнопкой
• focused: кнопка имеет фокус
• disabled: кнопка отключена
• pressed: кнопка нажата

Псевдоклассы начинаются с символа «:» (например, :hover) в селекторах CSS. Вам, конечно, нужно указать, к какому компоненту относится ваш псевдокласс — например, button:hover. В следующем примере показан селектор, который применяется ко всем кнопкам, имеющим фокус:

В отличие от CSS, который имеет только базовые псевдоклассы для состояний, таких как focus и hover, JavaFX имеет специфичные для компонента псевдоклассы, которые относятся к различным состояниям или свойствам компонентов.

• Полосы прокрутки (Scrollbars) имеют псевдоклассы horizontal и vertical
• Элементы (Cells) имеют псевдоклассы odd и even
• TitledPane имеет псевдоклассы expanded и collapsed

Пользовательские псевдоклассы

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

Давайте создадим нашу собственную метку (наследуя от класса Label). У него будет новое логическое свойство, называемое shiny. В таком случае, мы хотим, чтобы у нашей метки был псевдокласс shiny.

Поскольку у метки есть псевдокласс shiny, мы можем установить фон метки gold:

Теперь создадим сам класс.

Здесь есть несколько важных частей:

1. У нас есть логическое свойство BooleanProperty вместо обычного boolean. Это означает, что объект shiny является observable (наблюдаемым), и мы можем отслеживать (слушать) изменения в его значении.
2. Мы регистрируем listener (слушатель), который будет вызываться каждый раз, когда значение объекта shiny изменяется с использованием shiny.addListener().
3. Когда значение shiny изменяется, мы добавляем/удаляем псевдокласс shiny в зависимости от текущего значения pseudoClassStateChanged(PseudoClass.getPseudoClass(«shiny»), shiny.get()).
4. Мы добавляем пользовательский класс для всех меток shiny-label, вместо того чтобы иметь только класс label, унаследованный от родителя. Таким образом, мы можем выбирать только метки shiny.

Таблица стилей по умолчанию

Даже если вы сами не предоставляете никаких стилей, каждое приложение JavaFX уже имеет некоторые визуальные стили. Существует таблица стилей по умолчанию, которая применяется к каждому приложению. Она называется modena (начиная с JavaFX 8, ранее она называлась caspian).

Эту таблицу стилей можно найти в файле:

Или вы можете найти файл здесь. В том же каталоге есть множество изображений, используемых таблицей стилей.

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

Scene stylesheet (Таблица стилей сцены)

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

Или в вашем Java коде:

Обратите внимание на вызов toExternalForm(). Scene ожидает получить содержимое таблицы стилей в виде строки, а не файла, поэтому нам нужно предоставить содержимое нашей таблицы стилей в виде строки.

Parent stylesheet (Родительская таблица стилей)

В дополнение к таблице стилей для всей сцены, иногда бывает полезно иметь стили на уровне макета. То есть — для отдельного контейнера, такого как VBox, HBox или GridPane. Общим родителем всех макетов является родительский класс, который определяет методы для обработки таблиц стилей на уровне макета. Эти стили применяются только для компонентов в данном макете, а не для всей сцены. Стиль на уровне макета имеет приоритет над стилем на уровне сцены.

В Java вам нужно загрузить содержимое таблицы стилей самостоятельно, так же как и ранее для сцены:

Inline styles (Встроенные стили)

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

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

Вы можете указать несколько свойств, разделенных точкой с запятой:

В Java вы можете использовать метод setStyle():

Стили на уровне компонента имеют приоритет как над стилями сцены так и над родительскими стилями на уровне макета.

Почему нужно их избегать

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

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

Stylesheet priorities (Приоритеты таблиц стилей)

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

1. Inline styles (Встроенные стили)
2. Parent styles (Родительские стили)
3. Scene styles (Стили сцены)
4. Default styles (Стили по умолчанию)

Это означает, что если вы установите цвет фона определенной метки как на встроенном, так и на уровне сцены, JavaFX будет использовать значение, установленное во встроенных стилях, поскольку оно имеет более высокий приоритет.

Источник