JavaFX: Создаем приложение с Scene Builder

Начинаем создание полноценного Java-приложения с графическим интерфейсом JavaFX и подключением к базе данных.

Настройка среды разработки и создание проекта

Рекомендуется использовать IDE IntelliJ IDEA (бесплатная, удобная, доступна для Windows). Ссылка на скачивание — в описании. Создание проекта:

1. Выбираем JavaFX.
2. Задаём имя приложению (например, «Nozuka Masters»).
3. Указываем путь к папке проекта.
4. Нажимаем «Finish».

После создания проекта его можно скомпилировать и запустить, нажав зеленую кнопку «Run». Результат — оконное приложение с графическим интерфейсом, который будем наполнять.

Проект содержит три файла:

• Контроллер: отвечает за функциональность приложения.
• Main файл: содержит основной метод запуска приложения.
• sample.fxml: XML-разметка, описывающая внешний вид приложения (элементы интерфейса, кнопки, надписи и т.д.). Разметку можно создавать вручную, но мы воспользуемся Scene Builder.

Изменим размер приложения: ширина — 700 пикселей, высота — 400 пикселей. Заголовок окна (title) изменим на «Maya».

Работа со Scene Builder

Для создания графического дизайна используем Scene Builder. Ссылка на скачивание — в описании.

Два способа открытия sample.fxml в Scene Builder:

1. Правая кнопка мыши на sample.fxml -> «Open in Scene Builder». Укажите путь к установленной программе.
2. Запустите Scene Builder и откройте sample.fxml через меню «File» -> «Open».

В Scene Builder удаляем GridPane и добавляем AnchorPane, который будет рабочим полотном. Установим ширину и высоту AnchorPane 700×400 пикселей. Изменим цвет фона AnchorPane на заданный (код цвета — в описании).

Добавим ещё один AnchorPane внутри первого, расположив его в углу и растянув на большую часть экрана. Изменим его цвет на белый. Для просмотра результата используем «Preview in Window» (или Cmd+Shift+F12 на macOS, Ctrl+Shift+F12 на Windows).

Добавление элементов интерфейса

Добавим заголовок приложения:

1. Перетаскиваем компонент Label на рабочее полотно.
2. Меняем текст на «Программа в честь моего сайта».
3. Устанавливаем шрифт «Lobster» (или другой), размер 56 пикселей, цвет белый.
4. Располагаем Label по центру.

Добавим кнопку:

1. Перетаскиваем компонент Button.
2. Устанавливаем текст «Зарегистрироваться», шрифт «Lobster», белый цвет текста.
3. Меняем цвет фона кнопки.

Добавим поля для ввода логина и пароля:

1. Добавляем два компонента TextField и PasswordField.
2. Устанавливаем подсказки «Логин» и «Пароль».
3. Устанавливаем размер шрифта 17 пикселей.
4. Устанавливаем цвет фона, совпадающий с цветом фона формы.
5. Добавляем стили: цвет обводки (silver), радиус скругления углов (5 пикселей).

Добавим надпись «Авторизация»:

1. Дублируем Label.
2. Меняем текст на «Авторизация».
3. Устанавливаем цвет и размер шрифта.

Добавим кнопку «Войти»:

1. Дублируем кнопку «Зарегистрироваться».
2. Меняем текст на «Войти».
3. Меняем размер шрифта и самой кнопки.

Результат — готовый макет приложения с привлекательным дизайном.

В этом уроке мы создали привлекательное приложение с помощью Scene Builder, освоив базовые элементы графического дизайна.