Однажды у меня возникла идея, написать небольшое настольное приложение для своих нужд — что-то типа небольшого словаря для изучения иностранных слов — и я начал ломать голову, а как бы мне это сделать? Естественно, первое, что мне пришло в голову — 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… Он прост в освоении и хорошо оптимизирован. Он поддерживает множество операционных систем, а также 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 (который у нас из коробки Бугага).
В мейне вызываем статический метод 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…. О боже мой, xml? Именно. А конкретно — используется его специфичная реализация для JavaFX — FXML, в которой мы определяем графические компоненты приложения и их свойства (там всякие размеры и прочее), а после — связываем с контроллером, который и помогает управлять логикой.
Давайте рассмотрим пример такого xml:
2 — язык сценариев который мы юзаем
4-6 — импортируемые данные
8-9 Vbox — контейнер, который размещает подкомпоненты в одной строке.
11 — выводим некий текст
13 — кнопка при нажатии которой мы юзаем метод описанный в скрипте на 15-18 строке
Тут должен быть код вызова данного xml файла в методе start, но сейчас это не столь важно, и мы это опустим (ниже будет пример подтягивания данного файла).
Итак, xml — это, конечно, хорошо (да не очень), вручную писать их очень заморочено, разве это не прошлый век?
Знакомство с JavaFX SceneBuilder
Именно на этом моменте на сцену выходит (барабанная дробь) — SceneBuilder
В JavaFX Scene Builder — это инструмент, с помощью которого мы можем конструировать наши окна в виде графического интерфейса и после их сохранять, и эта программа на основании результата будет конструировать xml файлы, которые мы будем подтягивать в нашем приложении.
Как-то так выглядит интерфейс данного fmxl-строителя:
Небольшое отступление. 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, и можем строить небольшие настольные приложения (используя дополнительную инфу, которой, благо, в интернетах полно).
А с вас, в свою, очередь лайк))
Хотела подключить JavaFX через Maven (Java JDK 11). Просто облазила кучу сайтов, ничего не помогало, постоянно какая-нибудь ошибка то вылазила. Думала уже сдаться и писать с JDK 8, чтобы не мучиться, там то все прекрасно работает и без заморочек😄.
На следующий день искала годный туториал по JavaFX и случайно наткнулась на ссылку, которая мне и помогла в моей вышестоящей проблеме. Это просто чудо! Либо утро вечера все таки мудреннее😉 Кому интересно, вот ссылка с установкой JavaFX в Intellij IDEA (там и через Maven и Gradle есть)
https://openjfx.io/openjfx-docs/#IDE-Intellij
🙀😻🙀
Объясните кто нибудь:
InputStream iconStream =
getClass().getResourceAsStream("/images/someImage.png");
Image image = new Image(iconStream);
primaryStage.getIcons().add(image);
- каким макаром они закинули Image в окно, не имплементируя методы, ведь Image это интерфейс вроде как или нет?
Не первая ошибка синтаксиса в статье, но хотя бы примеры кода надо из IDE вставлять, чтобы потом копируя код, не сидеть и не ломать голову, где ошибка. Я долго грешил на импорты, хотя на деле, птичка не в ту сторону летела...
Подскажите, у меня Java 13 и я не могу экстендить класс application как в Java 8, в статье написано, что нужно стянуть настройки из мавен репозиторий, как это сделать ?
Спасибо, статья толковая.
Столкнулся с такой проблемой:
Если в Win7 пойти в разрешение экрана -> сделать текст и другие элементы больше или меньше -> поменять на "крупный 150%", тогда при запуске приложения JavaFX его окно тоже увеличавается.
Причем, это не зависит от моего кода.
Например, если запустить игру MinesweeperGame из раздела "игры" на JR, GUI которой, как мне показалось, тоже на JavaFX, то окно так же масштабируется, и не влезает в fullHD экран по высоте.
В то же время, если GUI программы пишу на Swing, то такой проблемы не возникает.
тут самое главное не растерять все данные по контроллерам. очень было бы полезно послушать про организацию хранения и использования общих объектов между несколькими окнами и нитями.
Итак, давайте двигаться немного в сторону кода. Так как у меня юзается Java 8, мне не нужно подтягивать никакие зависимости, так как JavaFx по дефолту есть в JDK(как и в Java 9,10), но если у нас Java 11+, то нужно пойти в maven repository и стянуть оттуда зависимости.
8 — создаем файл как объект Image, который связан с реальным файлом потоком передаваемым в конструкторе
9 — задаем иконку в верхнюю панель окна
11 — создаем объект кнопки
13-16 — задаем реакцию при нажатии кнопки
17 — создаем сцену, куда помещаем нашу кнопку
18 — сцену помещаем на наше общее окно
20 — задаем флаг видимости для окна
И как результат получаем небольшое окошко, для приветствия наших любимых песелей:
Всё выглядит в разы проще, чем Swing, неправда ли? Но ещё не конец.
Полностью писать весь код для отображения приложения, не есть хорошо, нужно его как-то делить, дабы сделать его более понятным (графические составляющие в одни корзинки, логику в — другие).
И тут на сцену выходит xml…. О боже мой, xml? Именно. А конкретно — используется его специфичная реализация для JavaFX — FXML, в которой мы определяем графические компоненты приложения и их свойства (там всякие размеры и прочее), а после — связываем с контроллером, который и помогает управлять логикой.
Давайте рассмотрим пример такого xml:
После жмем Save и заполняем в первом окне остальные её поля, а затем жмём кнопку Edit для сохранения.
Звучит несложно, верно? Давайте посмотрим, как это будем выглядеть у нас в приложении Java.
Для начала, я просто оставлю здесь xml макеты для двух этих окон сгенерированных в 
Как видим, ничего особенного, есть контроллеры, представляющие определенные окошки, есть модели представляющие наши данные.
Давайте взглянем на класс запускающий приложение (реализация Application):
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ