Якось у мене виникла ідея написати невеликий настільний додаток для своїх потреб – щось на кшталт невеликого словника для вивчення іноземних слів – і я почав ламати голову: а як би мені це зробити? Звичайно, перше, що мені спало на думку, – Swing. Усі напевно чули про Swing. Це бібліотека для створення інтерфейсів користувача. У зв'язку з тим, що наш улюблений Oracle ще не повністю відмовився від Swing, він не вважається застарілим, і програми на ньому, як і раніше, працюють. Однак Swing більше не модернізується, і хлопці з Oracle дали нам зрозуміти, що за JavaFX – майбутнє. Та й, по суті, JavaFX використовує компоненти Swing як постачальника послуг.
Що таке JavaFX?
JavaFX – це інструментарій GUI для Java. Тут буде невеликий відступ, і ми пригадаємо, що таке GUI: Graphical User Interface – графічний інтерфейс користувача – це різновид інтерфейсу користувача, у якому всі елементи (кнопки, меню, піктограми, списки) представлені користувачеві на дисплеї та виконані у вигляді зображень і графічних елементів. На відміну від інтерфейсу командного рядка, GUI має довільний доступ до видимих об'єктів за допомогою пристроїв введення. Найчастіше елементи інтерфейсу реалізовані у вигляді метафор і відображають їхні властивості та призначення для полегшення розуміння користувачем. JavaFX орієнтований на створення ігор і настільних додатків на Java. По суті, він замінить Swing через запропонований новий інструментарій GUI для Java. Також він дозволяє нам стилізувати файли компонування GUI (XML) і робити їх елегантнішими за допомогою CSS, подібно до того, як ми звикли це робити у вебдодатках. JavaFX додатково працює з інтегрованою 3D-графікою, а також аудіо, відео та вбудованими мережевими додатками в межах єдиного інструментарію GUI. Він простий в освоєнні та добре оптимізований. JavaFX підтримує багато операційних систем, а також Windows, UNIX-системи та Mac OS.
Особливості JavaFX:
JavaFX спочатку поставляється з великим набором частин графічного інтерфейсу, таких як будь-які кнопки, текстові поля, таблиці, дерева, меню, діаграми і т.д., що, своєю чергою, заощадить нам вагон часу.
JavaFX часто юзає стилі CSS, і ми зможемо використовувати спеціальний формат FXML для створення GUI, а не робити це в коді Java. Це полегшує швидке розміщення графічного інтерфейсу користувача або зміну зовнішнього вигляду чи композиції без необхідності довго гратися в коді Java.
JavaFX має готові для використання частини діаграми, тому нам не потрібно писати їх з нуля будь-коли, коли вам потрібна базова діаграма.
JavaFX додатково поставляється з підтримкою 3D-графіки, яка часто корисна, якщо ми розробляємо якусь гру або подібні програми.
Давайте трохи пройдемося по основних складових нашого вікна:
Stage – по суті, це навколишнє вікно, яке використовується як початкове полотно і містить інші компоненти. У додатку може бути кілька stage, але один такий компонент має бути в будь-якому випадку. По суті, Stage є основним контейнером і точкою входу.
Scene – відображає зміст stage (прямо матрьошка). Кожен stage може містити кілька компонентів – scene, які можна перемикати між собою. Усередині це реалізується графом об'єктів, який називається Scene Graph (де кожен елемент – вузол, ще званий Node).
Node – це елементи керування, наприклад, кнопки, мітки або навіть макети (layout), усередині яких може бути кілька вкладених компонентів. Кожна сцена (scene) може мати один вкладений вузол (node), але це може бути макет (layout) з кількома компонентами. Вкладеність може бути багаторівневою, коли макети містять інші макети та звичайні компоненти. Кожен такий вузол має свій ідентифікатор, стиль, ефекти, стан, обробники подій.
Отже, давайте рухатися трохи в бік коду. Так як у мене використовується Java 8, мені не потрібно підтягувати ніякі залежності, оскільки JavaFX за замовчуванням є в JDK (як і в Java 9, 10), але якщо у нас Java 11+, то потрібно піти в Maven Repository і стягнути звідти залежності:
JavaFX: приклади використання
Створюємо звичайний клас із методом main (точкою входу):
public class AppFX extends Application {
public static void main(String[] args) {
Application.launch();
}
@Override
public void start(Stage primaryStage) throws Exception {
pimarySatge.show();
}
}
Тут наш клас успадковується від javafx.application.Application (що у нас з коробки, бугага). У main викликаємо статичний метод Application.launch() для запуску нашого вікна. Також у нас IDEA буде лаятися на те, що ми не реалізували метод Application.start, що ми, зрештою, і робимо. Навіщо він потрібен? А щоб можна було керувати властивостями (функціоналом) нашого вікна. Для цього у нас використовується вхідний аргумент primaryStage, у якого ми викликаємо метод show(), щоб можна було побачити вікно, яке запускається з main. Давайте трохи заповнимо наш метод start:
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("Dogs application");
primaryStage.setWidth(500);
primaryStage.setHeight(400);
InputStream iconStream =
getClass().getResourceAsStream("/images/someImage.png");
Image image = new Image(iconStream);
primaryStage.getIcons().add(image);
Button button = new Button("WOF WOF ???'");
button.setOnAction(e -< {
Alert alert = new Alert(Alert.AlertType.INFORMATION, "WOF WOF WOF!!!");
alert.showAndWait();
});
Scene primaryScene = new Scene(button);
primaryStage.setScene(primaryScene);
primaryStage.show();
}
Отже, що ми тут бачимо? Пробіжимося рядково: 2 - задаємо назву самого вікна (stage) 3,4 - задаємо його розміри 6,7 - задаємо шлях потоку, що читає, до файлу (іконці)8 – створюємо файл як об'єкт Image, який пов'язаний із реальним файлом потоком, що передається в конструкторі.
9 – задаємо іконку у верхню панель вікна.
11 – створюємо об'єкт кнопки.
13–16 – задаємо реакцію при натисканні кнопки.
17 – створюємо сцену, куди поміщаємо нашу кнопку.
18 – сцену поміщаємо на наше загальне вікно.
20 – задаємо прапор видимості для вікна.
І як результат – віконце для вітання наших улюблених песелів:Все виглядає в рази простіше, ніж Swing, чи не так? Але це ще не кінець. Повністю писати весь код для відображення програми – не добре, потрібно його якось ділити, щоб зробити більш зрозумілим (графічні складові – в одні кошики, логіку – в інші). І тут на сцену виходить хмл… О боже мій, XML? Саме так. А саме – використовується його специфічна реалізація для JavaFX – FXML, у якій ми визначаємо графічні компоненти додатка та їхні властивості (там різні розміри та інше), а потім пов'язуємо з контролером, який і допомагає керувати логікою. Давайте розглянемо приклад такого XML:
2 – мова сценаріїв, якою ми користуємося.
4–6 – імпортовані дані.
8–9 – VBox – контейнер, який розміщує підкомпоненти в одному рядку.
11 – виводимо якийсь текст.
13 – кнопка, при натисканні якої ми юзаємо метод, описаний у скрипті на 15–18 рядку.
Тут повинен бути код виклику цього XML-файлу в методі start, але зараз це не так важливо, і ми це опустимо (нижче буде приклад підтягування цього файлу). Отже, XML – це, звичайно, добре (та не дуже), але вручну писати їх дуже заморочено, хіба це не минуле століття?
Знайомство з JavaFX SceneBuilder
Саме на цьому моменті на сцену виходить (барабанний дріб) – SceneBuilder. JavaFX Scene Builder – це інструмент, за допомогою якого ми можемо конструювати наші вікна у вигляді графічного інтерфейсу, а потім зберігати їх, і ця програма на основі результату буде конструювати XML-файли, які ми будемо підтягувати в нашому додатку. Якось так виглядає інтерфейс цього FXML-будівельника:
Невеликий відступ. JavaFX уроки
Деталі встановлення я опущу, і докладне вивчення цього інструменту теж. Це теми, які варто дослідити додатково. Тому все ж таки залишу пару цікавих посилань на JavaFX-уроки: раз (онлайн-підручник з JavaFX) і два (ще один непоганий туторіал). Давайте трохи пробіжимося невеликим прикладом, який я накидав. У результаті в мене вийшло щось на кшталт:
(таке собі віконце для обліку собак)
При виборі песеля та натисканні кнопки Delete собака видаляється з нашого списку. При виборі чотирилапого друга і зміні його полів, а після натискання кнопки Edit – інфа собачки оновлюється. Коли натискаємо кнопку New, вилазить віконце для створення запису нового собаки (для початку – його імені):Після цього тиснемо Save і заповнюємо в першому вікні інші її поля, а потім тиснемо кнопку Edit для збереження. Звучить нескладно, вірно? Давайте подивимося, як це буде виглядати у нас у програмі Java. Для початку я просто залишу тут XML-макети для цих двох вікон, згенерованих у SceneBuilder: Перше (базове):
Як виглядає структура папок:Як бачимо, нічого особливого: є контролери, які представляють певні віконця, є моделі, що представляють наші дані. Давайте поглянемо на клас, що запускає додаток (реалізація Application): @Data
Нічого особливого – main і реалізація start(), що запускає додаток:
public void showBaseWindow() {
try {
FXMLLoader loader = new FXMLLoader();
loader.setLocation(AppFX.class.getResource("/maket/rootWindow.fxml"));
rootLayout = loader.load();
Scene scene = new Scene(rootLayout);
primaryStage.setScene(scene);
InputStream iconStream = getClass().getResourceAsStream("/icons/someImage.png");
Image image = new Image(iconStream);
primaryStage.getIcons().add(image);
BaseController controller = loader.getController();
controller.setAppFX(this);
primaryStage.show();
} catch (IOException e) {
e.printStackTrace();
}
}
Отже, тут ми бачимо метод, який ми, власне, і запускаємо в start(), а саме – задає налаштування нашого базового вікна, такі як на XML-макеті в ресурсах: задає йому іконку, зв'язує його з конкретним контролером і задає контролеру посилання на клас this.
Тут ми бачимо метод, який відповідає за появу другого вікна – вікна створення нового запису (імені нового собаки). Також задаємо контролер, XML-макет, stage та інше… Наступним розглянутим класом у нас буде модель, яка представляє нашу собаку (інфу про неї): @Data
public class Dog {
private StringProperty name;
private StringProperty breed;
private IntegerProperty age;
private StringProperty city;
private IntegerProperty levelOfTraining;
public Dog(String name, String breed, int age, String city, int levelOfTraining) {
this.name = new SimpleStringProperty(name);
this.breed = new SimpleStringProperty(breed);
this.age = new SimpleIntegerProperty(age);
this.city = new SimpleStringProperty(city);
this.levelOfTraining = new SimpleIntegerProperty(levelOfTraining);
}
public Dog() {
name = new SimpleStringProperty();
breed = null;
age = null;
city = null;
levelOfTraining = null;
}
}
Тут ми бачимо два конструктори. Один – майже звичайний, з усіма аргументами (майже, тому що ми юзаємо спеціальні FX-оболонки простих типів), і конструктор без аргументів: його ми використовуємо при створенні нового собаки, який спочатку має тільки ім'я. Контролер для базового вікна: @Data
Тут бачимо наші поля об'єкта, але у форматі TextField. Це формат, який представляє поле для введення тексту. @FXML – анотація, призначена для зв'язування коду Java та відповідного об'єкта нашого макета (кнопки, поля або ще чогось).
У першому методі ми бачимо задання внутрішнього посилання на клас, що реалізує Application (щоб можна було смикнути його метод виклику другого вікна), і задання початкового списку для відображення. Другий перевіряє, чи є певні дані поточного собаки, і на підставі цього задає текстові поля:
@FXML
private void delete() {
int selectedIndex = dogs.getSelectionModel().getSelectedIndex();
dogs.getItems().remove(selectedIndex);
}
@FXML
private void edit() {
int selectedIndex = dogs.getSelectionModel().getSelectedIndex();
dogs.getItems().set(selectedIndex, new Dog(name.getText(), breed.getText(), Integer.valueOf(age.getText()), city.getText(), Integer.valueOf(levelOfTraining.getText())));
}
@FXML
private void create() {
Dog someDog = new Dog();
appFX.showCreateWindow(someDog);
if (someDog.getName() != null && !someDog.getName().getValue().isEmpty()) {
appFX.getListDog().add(someDog);
}
}
}
Тут ми бачимо три методи, базового вікна, пов'язані з кнопками:
delete – за індексом видаляємо вибраного собаку;
edit – створюємо нового собаку з переданими даними і задаємо його замість того, який був до цього;
create – створюємо нового собаку і смикаємо метод виклику вікна створення, передавши новий об'єкт, і після його закриття, якщо ім'я не null, зберігаємо нового вихованця.
Рухаємося далі, контролер вікна для створення собаки: @Data
public class CreateController {
private Stage dialogStage;
private Dog dog;
@FXML
private TextField nickName;
@FXML
private void ok() {
if (nickName != null && !nickName.getText().isEmpty()) {
dog.setName(new SimpleStringProperty(nickName.getText()));
dialogStage.close();
}
}
@FXML
private void cansel() {
dialogStage.close();
}
}
Тут ми бачимо зв'язок із текстовим полем у вікні, обробку кнопок Save та Cancel, які так чи інакше закривають вікно. Як ви бачите, для більшої зручності у своєму невеликому додатку я юзав Lombok, інакше код дуже сильно розрісся б, і в свій огляд я ніяк би його не вмістив.
На цьому сьогодні в мене, мабуть, усе. Сьогодні ми коротко ознайомилися з базовими поняттями та прикладом використання JavaFX і тепер можемо будувати невеликі настільні додатки (використовуючи додаткову інфу, якої, добре, в інтернеті повно). А з вас, у свою чергу, – лайк))
Отже, давайте рухатися трохи в бік коду. Так як у мене використовується Java 8, мені не потрібно підтягувати ніякі залежності, оскільки JavaFX за замовчуванням є в JDK (як і в Java 9, 10), але якщо у нас Java 11+, то потрібно піти в Maven Repository і стягнути звідти залежності:
8 – створюємо файл як об'єкт Image, який пов'язаний із реальним файлом потоком, що передається в конструкторі.
9 – задаємо іконку у верхню панель вікна.
11 – створюємо об'єкт кнопки.
13–16 – задаємо реакцію при натисканні кнопки.
17 – створюємо сцену, куди поміщаємо нашу кнопку.
18 – сцену поміщаємо на наше загальне вікно.
20 – задаємо прапор видимості для вікна.
І як результат – віконце для вітання наших улюблених песелів:
Все виглядає в рази простіше, ніж Swing, чи не так? Але це ще не кінець. Повністю писати весь код для відображення програми – не добре, потрібно його якось ділити, щоб зробити більш зрозумілим (графічні складові – в одні кошики, логіку – в інші). І тут на сцену виходить хмл… О боже мій, XML? Саме так. А саме – використовується його специфічна реалізація для JavaFX – FXML, у якій ми визначаємо графічні компоненти додатка та їхні властивості (там різні розміри та інше), а потім пов'язуємо з контролером, який і допомагає керувати логікою. Давайте розглянемо приклад такого XML:
Після цього тиснемо Save і заповнюємо в першому вікні інші її поля, а потім тиснемо кнопку Edit для збереження. Звучить нескладно, вірно? Давайте подивимося, як це буде виглядати у нас у програмі Java. Для початку я просто залишу тут XML-макети для цих двох вікон, згенерованих у 
Як бачимо, нічого особливого: є контролери, які представляють певні віконця, є моделі, що представляють наші дані. Давайте поглянемо на клас, що запускає додаток (реалізація Application): 
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ