3.4.3 Створення стилів

За допомогою стилів можна дуже швидко прикрасити додаток — змінити зовнішній вигляд елементів та їх колір. Дуже зручно використовувати базовий колір: можна зробити всі кольори додатку залежними від нього і змінивши значення цього кольору можна отримати зовсім інший вигляд додатку.

Створіть в директорії зі стилями новий файл style1.css і помістіть туди наступний код:

.root{

-fx-background-color: linear-gradient(to bottom, -fx-base, derive(-fx-base,30%));

-fx-base: rgb(50, 50, 50);

-fx-text-fill: white;

-fx-font-size: 14px;

-fx-font-weight: bold;

}

.label{

-fx-text-fill: white;

}

.button{

-fx-background-color: transparent;

-fx-border-color: white;

-fx-background-radius: 30;

-fx-border-radius: 30;

-fx-padding: 10 20 10 20;

}

.button:pressed{

-fx-background-color: white;

-fx-text-fill: black;

}

Отже, в цьому стилі використовується градієнт для фонового кольору і повністю змінюється вигляд кнопок. Тепер можна обрати новий стиль у елементі керування стилями і подивитись на результат (рис. 3.33):

Переглянувши зміни в усіх пунктах меню додатку можна побачити, що створені стилі не є досконалими, і іноді важко прочитати текст. Щоб при будь-яких значеннях -fx-base текст добре розрізнявся, потрібно використати в стилях функцію кольору — ladder. Ця функція інтерполює кольори при заданих умовах. Отже потрібно вдосконалити стилі наступним чином:

.root{

-fx-background-color: linear-gradient(to bottom, -fx-base, derive(-fx-base,30%));

-fx-base: rgb(50, 50, 50);

-fx-text-fill: ladder -fx-base stops (0.49, white) (0.5, black);

-fx-font-size: 14px;

-fx-font-weight: bold;

}

.label{

-fx-text-fill: ladder -fx-base stops (0.49, white) (0.5, black);

}

.button{

-fx-background-color: -fx-base;

-fx-border-color: white;

-fx-background-radius: 30;

-fx-border-radius: 30;

-fx-padding: 10 20 10 20;

}

.button:pressed{

-fx-background-color: white;

-fx-text-fill: black;

}

.axis {

-fx-tick-label-fill: ladder -fx-base stops (0.49, white) (0.5, black);

}

.chart-pie-label {

-fx-fill: ladder -fx-base stops (0.49, white) (0.5, black);

}

Якщо яскравість -fx-base буде більша за 0.5, то колір буде чорний, якщо менше, то білий. В цьому стилі також були внесені зміни до фону кнопки (змінений з прозорого на -fx-base) та було додано стилювання кольору написів графіків.

Рис. 3.33. Демонстрація створеного стилю додатку

Практичне завдання

1. Створити власний файл стилів і встановити його на вікно авторизації.

2. При повторному натисканні на кнопку в панелі інструментів очищувати робочу область.

3. Не обробляти перетягнутий за допомогою Drag-and-Drop файл, якщо він не є зображенням.

4. При створенні списку доступних зображень для заднього фону не обробляти файли, які не є зображенням.

Контрольні питання

1. Між якими середовищами може бути застосований Drag-and-Drop?

2. Які елементи можуть бути перенесені за допомогою Drag-and-Drop?

3. Які існують типи передачі даних у технології Drag-and-Drop?

4. Як називається файл зі стилями за замовченням? Де він знаходиться?

5. Які елементи підпорядковуються класу root?