Часть 4: Стилизация с помощью CSS

Screenshot AddressApp Part 4

Часть 4: Содержание

Стилизация с помощью каскадных таблиц стилей (CSS)
Добавление иконки приложения

Стилизация с помощью CSS

В JavaFX с помощью каскадных таблиц стилей (CSS) можно стилизировать интерфейс пользователя. Это просто здорово! Ещё никогда не было так легко настроить внешний вид приложения Java.

В этом учебнике мы создадим тему DarkTheme, вдохновленную Метро-дизайном из Windows 8. Принятые стили для кнопок заимствованы из статьи JMetro - Windows 8 Metro controls on Java, написанной Pedro Duque Vieira.

Знакомство с CSS

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

Для получения специфической информации об использовании CSS в JavaFX доступны следующие ресурсы:

Skinning JavaFX Applications with CSS - учебник от Oracle
JavaFX CSS Reference - официальный справочник

Стиль, используемый в JavaFX по умолчанию

Стиль, который используется в JavaFX по умолчанию хранится в файле modena.css. Его можно найти в файле jfxrt.jar, который, в свою очередь, располагается в директории Java /jdk1.8.x/jre/lib/ext/jfxrt.jar.

Разархивируйте его и вы найдете modena.css в папке com/sun/javafx/scene/control/skin/modena.

Этот стиль всегда применяется по умолчанию для всех приложений JavaFX. Добавляя пользовательские стили мы переопределяем стили из файла modena.css.

Подсказка: Для того, чтобы знать какие стили следует переопределить, просмотрите этот файл.

Подключение пользовательских CSS-стилей

Добавьте файл DarkTheme.css в пакет view.

DarkTheme.css

.background {
    -fx-background-color: #1d1d1d;
}

.label {
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
    -fx-opacity: 0.6;
}

.label-bright {
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
    -fx-opacity: 1;
}

.label-header {
    -fx-font-size: 32pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-opacity: 1;
}

.table-view {
    -fx-base: #1d1d1d;
    -fx-control-inner-background: #1d1d1d;
    -fx-background-color: #1d1d1d;
    -fx-table-cell-border-color: transparent;
    -fx-table-header-border-color: transparent;
    -fx-padding: 5;
}

.table-view .column-header-background {
    -fx-background-color: transparent;
}

.table-view .column-header, .table-view .filler {
    -fx-size: 35;
    -fx-border-width: 0 0 1 0;
    -fx-background-color: transparent;
    -fx-border-color: 
        transparent
        transparent
        derive(-fx-base, 80%) 
        transparent;
    -fx-border-insets: 0 10 1 0;
}

.table-view .column-header .label {
    -fx-font-size: 20pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-alignment: center-left;
    -fx-opacity: 1;
}

.table-view:focused .table-row-cell:filled:focused:selected {
    -fx-background-color: -fx-focus-color;
}

.split-pane:horizontal > .split-pane-divider {
    -fx-border-color: transparent #1d1d1d transparent #1d1d1d;
    -fx-background-color: transparent, derive(#1d1d1d,20%);
}

.split-pane {
    -fx-padding: 1 0 0 0;
}

.menu-bar {
    -fx-background-color: derive(#1d1d1d,20%);
}

.context-menu {
    -fx-background-color: derive(#1d1d1d,50%);
}

.menu-bar .label {
    -fx-font-size: 14pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-opacity: 0.9;
}

.menu .left-container {
    -fx-background-color: black;
}

.text-field {
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Semibold";
}

/* 
 * Push Button в стиле Metro 
 * Автор: Pedro Duque Vieira
 * http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/
 */
.button {
    -fx-padding: 5 22 5 22;   
    -fx-border-color: #e2e2e2;
    -fx-border-width: 2;
    -fx-background-radius: 0;
    -fx-background-color: #1d1d1d;
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: #d8d8d8;
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}

.button:hover {
    -fx-background-color: #3a3a3a;
}

.button:pressed, .button:default:hover:pressed {
  -fx-background-color: white;
  -fx-text-fill: #1d1d1d;
}

.button:focused {
    -fx-border-color: white, white;
    -fx-border-width: 1, 1;
    -fx-border-style: solid, segments(1, 1);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.button:disabled, .button:default:disabled {
    -fx-opacity: 0.4;
    -fx-background-color: #1d1d1d;
    -fx-text-fill: white;
}

.button:default {
    -fx-background-color: -fx-focus-color;
    -fx-text-fill: #ffffff;
}

.button:default:hover {
    -fx-background-color: derive(-fx-focus-color,30%);
}

Теперь надо подключить эти стили к нашей сцене. Мы можем сделать это программно, в коде Java, но в этом уроке, чтобы добавить стили в наши fxml-файлы, мы будем использовать Scene Builder:

Подключаем таблицы стилей к файлу RootLayout.fxml

В приложении Scene Builder откройте файл RootLayout.fxml.
Во вкладке Hierarchy выберите корневой контейнер BorderPane, перейдите на вкладку Properties и укажите файл DarkTheme.css в роли таблиц стилей.

Подключаем таблицы стилей к файлу PersonEditDialog.fxml

В приложении Scene Builder откройте файл PersonEditDialog.fxml. Во вкладке Hierarchy выберите корневой контейнер AnchorPane, перейдите на вкладку Properties и укажите файл DarkTheme.css в роли таблиц стилей.
Фон всё ещё белый, поэтому укажите для корневого компонента AnchorPane в классе стиля значение background.
Выберите кнопку OK и отметьте свойство Default Button в вкладке Properties. В результате изменится цвет кнопки и она будет использоваться по умолчанию когда пользователь, находясь в окне, будет нажимать клавишу Enter.

Подключаем таблицы стилей к файлу PersonOverview.fxml

В приложении Scene Builder откройте файл PersonOverview.fxml. Во вкладке Hierarchy выберите корневой контейнер AnchorPane, перейдите на вкладку Properties и укажите файл DarkTheme.css в роли таблиц стилей.
Вы сражу должны увидеть некоторые изменения: цвет таблицы и кнопок поменялся на чёрный. Все классы стилей .table-view и .button из файла modena.css были применены к таблице и кнопкам. С того момента, как мы переопределили некоторые из стилей в нашем css-файле, новые стили применяются автоматически.
Возможно, вам потребуется изменить размер кнопок для того, чтобы отображался весь текст.
Выберите правый компонент AnchorPane внутри компонента SplitPane.
Перейдите на вкладку Properties и укажите в классе стиля значение background. Теперь фон станет чёрного цвета.

Текстовые метки с другими стилями

Сейчас все текстовые метки с правой стороны имеют одинаковый размер. Для дальнейшей стилизации текстовых меток мы будем использовать уже определённые стили .label-header и label-bright.

Выберите метку Person Details и добавьте в качестве класса стиля значение label-header.
Для каждой метки в правой колонке (где отображаются фактические данные об адресатах) добавьте в качестве класса стиля значение label-bright.

Добавляем иконку приложения

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

С пользовательской иконкой наше приложение будет выглядеть симпатичнее:

Файл иконки

Одно из возможных мест, где можно свободно скачать иконки — это сайт Icon Finder. Я скачал маленькую иконку адресной книги.

Создайте внутри вашего проекта AddressApp обычную папку resources, а в ней папку images. Поместите выбранную вами иконку в папку изображений. Структура папок должна иметь такой вид:

Установка иконки для сцены

Для того, чтобы для нашей сцены установить новую иконку, в классе MainApp.java добавьте следующий код в метод start(...)

MainApp.java

this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png"));

Весь метод start(...) теперь будет выглядеть так:

public void start(Stage primaryStage) {
    this.primaryStage = primaryStage;
    this.primaryStage.setTitle("AddressApp");

    // Устанавливаем иконку приложения.
    this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png"));

    initRootLayout();

    showPersonOverview();
}

Вы также можете добавить иконку в окно редактирования адресатов.

Что дальше?

В 5-й части учебника мы добавим для наших данных XML-хранилище.

code.makery