Частина 4: Стилізація за допомогою CSS

Screenshot AddressApp Part 4

Частина 4: Зміст

Стилізація за допомогою каскадних таблиць стилів (CSS)
Додавання іконки програми

Стилізація за допомогою CSS

У JavaFX ви можете стилізувати ваш інтерфейс користувача за допомогою каскадних таблиць стилів (CSS). Це дуже добре! Ще ніколи не було так легко налаштувати зовнішній вигляд Java додатку.

У цьому підручнику ми створимо тему DarkTheme, натхненну Метро-дизайном з Windows 8. Використовувані стилі для кнопок базуються на статті, написаній Pedro Duque Vieira.

Знайомство з CSS

Якщо ви хочете стилізувати ваш JavaFX додаток, ви повинні мати початкове уявлення про CSS в цілому. Гарне місце для старту - цей підручник CSS.

Для отримання специфічної інформації про використання CSS в JavaFX читайте це:

Стилі, що використовуються в JavaFX за замовчуванням

Стиль, який використовується в JavaFX за замовчуванням, зберігається у файлі modena.css. Цей css файл можна знайти у файлі jfxrt.jar, розташованому у вашій Java-директорії/jdk1.8.x/jre/lib/ext/jfxrt.jar.

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

Цей стиль завжди застосовується для JavaFX додатків за замовчуванням. Додаючи стилі користувача, ви замінюєте оригінальні стилі з файлу modena.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";
}

/* 
 * Metro style Push Button
 * Author: 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, але ми будемо використовувати додаток Scene Builder для того, щоб додати стилі в наші fxml файли:

Приєднуємо таблиці стилів до файлу RootLayout.fxml

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

Приєднуємо таблиці стилів до файлу PersonEditDialog.fxml

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

Приєднуємо таблиці стилів до файлу PersonOverview.fxml

Відкрийте файл PersonOverview.fxml в додатку Scene Builder. Виберіть кореневий контейнер AnchorPane у вкладці Hierarchy, перейдіть на вкладку 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. Я завантажив маленьку іконку адресної книги.

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

Встановлення іконки в додаток

Для установки обраної іконки в наш додаток, додайте наступний код в метод start(...) в класі MainApp.java:

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");

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

    initRootLayout();

    showPersonOverview();
}

Ви також можете додати іконку в вікно редагування адресного запису.

Що далі?

В 5 частині підручника ми додамо XML сховище для наших даних.

code.makery