Делаем JavaFX приложение красивым с помощью CSS

Этот урок расскажет о том, как сделать ваше JavaFX приложение привлекательным с помощью CSS.

В пердыдущем уроке мы создали форму для авторизации с помощью JavaFx, теперь придадим ей интересный вид с помощью CSS.

Мы создадим отдельный .css файл, разместим в нем необходимые стили и применим их в нашем приложении, созданном в пердыдущем уроке (Создание форм в JavaFx).

Напишем стили для кнопок, фона и шрифта.

В итоге форма будет выглядеть примерно так:

Для создания приложения вам понадобится IDE NetBeans. Также убедитесь, что версия NetBeans поддерживает JavaFX2. Создайте проект, как в предыдущем уроке или скачайте исходники.

Создание CSS файла

Сперва создадим CSS файл и сохраним его в той же папке, что и главный класс программы. После нам надо добавить файл в программу.

1. Откройте проект в NetBeans, найдите пакет исходных фалов login и добавьте CSS файл в проект. Назовите файл login.css и убедитесь, что он в папке src\login.
2. В файл Login.java вставьте следующий код для добавления CSS файла в сцену.

Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
scene.getStylesheets().add
 (Login.class.getResource("Login.css").toExternalForm());
primaryStage.show();

Этот код будет искать файл в папке src\login проекта.

Добавляем фоновое изображение

Загрузите картинку для фона и положите её в папку src\login вашего проекта.

Теперь добавим код для создания фона в CSS файл. Учтите, что путь к файлам задается относительно CSS файла. В коде ниже файл  background.jpg находится в той же папке, что и CSS файл.

.root {
     -fx-background-image: url("background.jpg");
}

Фоновое изображение назначено классу .root это означает, что стиль будет применен к корневому узлу объекта Scene. Определение стиля состоит из свойства  (-fx-background-image) и значения этого свойства (url(“background.jpg”)). Что должно получиться:

Стилизуем метки

Следующий шаг — написать стили для меток. Мы будем использовать CSS класс.label,а значит этот стиль будет применен на все метки в форме.

.label {
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

Этот код увеличит размер шрифта и с делает его жирным, а также создаст тень серого цвета (#333333). Тень нужна для создания контраста между темно-серым текстом и светло-серым фоном:

Стилизуем текст

Напишем стиль для двух текстовых объектов формы: scenetitle, который содержит текст Welcome, и actiontarget, который содержит текст возвращаемый после нажатия на кнопку.

1. В файле Login.java удалите строки, задающие стиль текста этих объектов: scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20)); actiontarget.setFill(Color.FIREBRICK); Таким образом мы отделим дизайн приложения от исходного кода, что позволит изменять стиль приложения без изменения кода.
2. Создайте ID для каждого объекта, используя метод setID(): scenetitle.setId("welcome-text"); actiontarget.setId("actiontarget");
3. В файле Login.css определите стили для созданных ID:  welcome-text и actiontarget:

#welcome-text {
   -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#actiontarget {
  -fx-fill: FIREBRICK;
  -fx-font-weight: bold;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

Размер текста Welcome увеличен до 32 пикселей и шрифт изменен на Arial Black. Цвет изменили на темно-серый (#818181), а также добавили внутреннюю тень.

Стиль объекта actiontarget такой же как у меток.

Стилизуем кнопку

И, наконец, напишем стиль для кнопки. Сделаем так, чтобы она менялась при наведении.

Сначала напишем начальный стиль кнопки. Этот код использует CSS селектор класса .button и этот стиль будет применен ко всем кнопкам формы.

.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

Теперь напишем стиль кнопки при наведении на неё курсора. Делается это с помощью псевдо-класса:

.button:hover {
 -fx-background-color: linear-gradient(#2A5058, #61a2b1);
 }

Готово!