Стилювання додатку за допомогою css

Технологія JavaFX дозволяє стилювати додатки за допомогою каскадних таблиць стилів (Cascading Style Sheets або CSS). Визначенні в CSS стилі змінюють зовнішній вигляд інтерфейсу користувача. Використання CSS у JavaFX дуже схоже з використанням CSS у HTML. Каскадні таблиці стилів базуються на W3C CSS версії специфікації 2.1 (http://www.w3.org/TR/CSS21/) з деякими доповненнями з версії 3 та з розширеннями, які створюють підтримку JavaFX.

За замовченням всі елементи використовують файл стилів під назвою caspian.css. Він знаходиться у JavaFX runtime JAR файлі під назвою jfxrt.jar. Відкривши цей jar-файл за допомогою програми архіватора можна знайти caspian.css у com/sun/javafx/scene/control/skin/caspian/. Отже за замовчанням елементи мають наступний вигляд (рис. 3.29).

Рис. 3.29. Вигляд елементів, які використовують caspian.css

Змінити стандартні стилі на власні можна за допомою наступного коду:

Scene scene = new Scene(new Group(), 500, 400);

scene.getStylesheets().add("path/stylesheet.css");

Щоб той або інший елемент використовували конкретні стилі — використовуються селектори. Правила стилювання визначаються у фігурних дужках після селектору. Всі елементи за замовчанням належать до класів, які співпадають з їх назвою. Тобто елемент Button відповідає CSS-класу button. Якщо назва елементу створена з декількох слів, таких як ListView, то у css-файлі ці слова потрібно писати через дефіс: list-view. Селектор класу позначаються за допомогою крапки перед назвою:

.button

.check-box

.scroll-bar

Селектору по ідентифікатору (id) відповідає символ #:

#my-button

#shaded-hbox

Також можна вказувати стилі нащадкам елементів, тобто більш детально:

.check-box .label

.check-box .box

.radio-button .dot

Існують ще й псевдокласи, наприклад: натиснута кнопка, наведений вказівник та інші. Такі класи вказуються через двокрапку:

.radio-button:focused

.radio-button:hover

.scroll-bar:vertical

Всі властивості елементів починаються з префіксу -fx-. Властивість і її значення потрібно розділяти двокрапкою:

-fx-background-color: #333333;

-fx-text-fill: white;

-fx-alignment: CENTER;

Клас .root завжди відповідає кореневому елементу сцени. Окремі класи та ідентифікатори повинні призначатися у тегах FXML або встановлюватися через код.

Button buttonAccept = new Button("Accept");

buttonAccept.getStyleClass().add("button1");

ПРАКТИЧНА ЧАСТИНА

3.4.1 Drag-and-Drop

Щоб навчитися використовувати технологію Drag-and-Drop, з файлової системи буде перетягуватися у вікно додатка файл з будь-яким зображенням і воно буде встановлюватися як фонове зображення за замовченням для активного користувача.

Зазвичай при початку процесу Drag-and-Drop генерується подія DRAG_DETECTED, яку обробляють за допомогою source.setOnDragDetected(…), але через те, що в даному випадку процес починається поза межами додатка — нічого писати не потрібно, розробники технології JavaFX про це потурбувалися. Отже потрібно запрограмувати процес прийому елементу, який перетягується. Для цього буде створений метод setupGestureTarget, в якому буде міститися код обробки події DragEvent.

private void setupGestureTarget(final Scene target){

target.setOnDragOver(new EventHandler <DragEvent>() {

@Override

public void handle(DragEvent event) {

Dragboard db = event.getDragboard();

if(db.hasFiles()){

event.acceptTransferModes(TransferMode.COPY);

}

event.consume();

}

});

target.setOnDragDropped(new EventHandler <DragEvent>() {

@Override

public void handle(DragEvent event) {

Dragboard db = event.getDragboard();

if(db.hasFiles()){

File file = db.getFiles().get(0);

if (file.isFile()){

try{

File localCopy = new File(getClass().getResource("media/images/backgrounds/").getPath() + UUID.randomUUID() + '.' +FileUtils.extension(file.getName()));

FileUtils.copyFile(file, localCopy);

setBackgroundImg(stage.getScene().getRoot(), localCopy.toURI());

loggedUser.setBackground(localCopy.toURI().toString());

GenericDAO<UserFx> userManager = new GenericDAO(UserFx.class);

userManager.update(loggedUser);

} catch (IOException ex){

Logger.getLogger(JavafxApp.class.getName()).log(Level.SEVERE, null, ex);

}

}

event.setDropCompleted(true);

}else{

event.setDropCompleted(false);

}

event.consume();

}

});

}

При обробці події DRAG_OVER викликається acceptTransferModes, через який встановлюється режим копіювання. В коді обробці події DRAG_DROPPED реалізується вся необхідна логіка: спочатку виконуються перевірки валідності файлу і якщо він відповідає всім вимогам — створюється файл з унікальним ім’ям, у який копіюється перетягнуте зображення, потім воно встановлюється як фонове для додатка і записується в базу даних, щоб при наступному вході цього користувача воно було одразу встановлене. В оброблювачі подій вставлені тільки виклики функцій, які реалізують логіку, отже тепер по порядку потрібно написати їх реалізацію.

В пакеті utils потрібно створити новий клас FileUtils з двома статичними методами:

public class FileUtils {

public static void copyFile(File in, File out)

throws IOException {

FileChannel inChannel = new FileInputStream(in).getChannel();

FileChannel outChannel = new FileOutputStream(out).getChannel();

try {

inChannel.transferTo(0, inChannel.size(),outChannel);

}

catch (IOException ex) {

throw ex;

}

finally {

if (inChannel != null) inChannel.close();

if (outChannel != null) outChannel.close();

}

}

public static String extension(String filename) {

int dot = filename.lastIndexOf('.');

return filename.substring(dot + 1);

}

}

Далі потрібно в класі JavafxApp створити метод, який встановлює файл, вказаний за допомогою уніфікованого ідентифікатору ресурсів (Uniform Resource Identifier, URI), фоновим зображенням додатку.

private void setBackgroundImg(Node node, URI url){

node.setStyle("-fx-background-image: url('" + url + "');-fx-background-position: center center; -fx-background-repeat: stretch;-fx-background-size: contain;");

}

Позиція зображення відцентровується і зображення робиться змінним по розміру із збереженням пропорцій. Також можна поставити -fx-background-size: auto, при цьому широкі або високі зображення відрізаються, проте немає заднього фону, якщо розміри вікна та зображення непропорційні.

Останнім кроком є редагування моделі користувача. Потрібно додати поле для збереження URI файлу.

public class UserFx implements Serializable {

…

private String background;

public String getBackground() {

return background;

}

public void setBackground(String background) {

this.background = background;

}

…

}

Перестворивши базу даних можна запустити додаток і випробувати впроваджену можливість (рис. 3.30).