Создание форм в JavaFx

13-02-09 JavaFX Java, JavaFX 1

Здравствуйте, уважаемые читатели Easy-Code.ru. Сегодня мы продолжим изучение платформы JavaFx и научимся создавать простые формы в JavaFx. При создании веб-приложения не обойтись без форм, например, для логина или для обратной связи, регистрации и т.д. В этом уроке мы создадим простую форму для логина и научимся базовой разметке формы, добавим элементы формы и обработаем события, происходящие при работе с ней. В этом уроке мы будем использовать среду NetBeans, перед тем как начать, убедитесь, что ваша версия поддерживает работу с JavaFX 2.

Создание проекта

Для начала нам надо создать JavaFX проект в NetBeans, назовем его Login:

  1. В меню файл выберите «Создать проект».
  2. В категории JavaFX выберите «Приложение JavaFX», нажмите «Далее»
  3. Назовите проект Login. Когда NetBeans создаст JavaFX проект, вы увидите Hello World приложение, как в предыдущем уроке.
  4. Удалите метод start(), который создал NetBeans, и замените его следующим:
@Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("JavaFX Welcome");

        primaryStage.show();
    }

Подсказка: после добавления кода в проект NetBeans, нажмите Ctrl (или Cmd) + Shift + I для импорта необходимых пакетов. После появления окна со списком, выберите тот, который начинается с javafx.

JavaFX форма
JavaFX форма

Создание сетки GridPane

Для формы логина удобно использовать GridPane, потому что этот объект позволяет создать гибкую сетку из столбцов и строк, в которые удобно поместить поля для ввода и кнопки. Вы можете поместить элементы управления в любую ячейку в сетке.

Код для создания GridPane, добавьте его перед строкой primaryStage.show():

GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));

Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);

Данный код создает объект GridPane, хранящийся в переменной grid. Свойство alignment меняет стандартное положение сетки с «вверху-слева» на центральное положение в окне. Свойства gap отвечают за пробелы между строками и столбцами, а свойство padding отвечает за пространство вокруг сетки. Порядок перечисления в insets: вверху, справа, снизу и слева. В нашем примере отступ вокруг сетки — 25 пикселей с каждой стороны.

Сцена создана с GridPane в качестве корневого узла, это обычная практика при верстке контейнеров. Таким образом при изменении размеров окна, элементы формы будут соответственно реагировать. В нашем примере форма будет оставаться по-середине при увеличении или уменьшении окна. Свойство padding гарантирует, что вокруг формы останется отступ при уменьшении размеров окна.

Данный код создает сцену шириной 300 и высотой 275. Если вы не зададите эти параметры, то сцена будет минимального размера, который необходим для отображения её содержимого.

Добавляем текст, метки и поля формы

Как видно на картинке выше, наша форма имеет заголовок «Welcome», текстовое поле и поле для ввода пароля пользователя. Рассмотрим код, создающий эти поля. Добавьте данный код после задания свойства padding GridPane:

Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);

Label userName = new Label("User Name:");
grid.add(userName, 0, 1);

TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);

Label pw = new Label("Password:");
grid.add(pw, 0, 2);

PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);

Первая строка создает объект типа Text со значением Welcome, который нельзя изменить. Следующая строка использует метод setFont() для задания шрифта, размера и стиля переменной scenetitle. В данном примере мы используем встроенный стиль, но лучше использовать таблицы CSS, работу с ними мы рассмотрим в следующем уроке.

Метод grid.add() добавляет объект scenetitle к слою нашей формы. Нумерация столбцов и строк начинается с 0, т.о. заголовок формы будет добавлен в столбец 0 и строку 0. Последние два аргумента метода grid.add() устанавливают промежутки между столбцами — 2, между строками — 1.

Следующая строка создает объект Label с текстом User Name в столбце 0, строке 1 и Текстовое поле, которое можно редактировать. Текстовое поле добавлено в столбец 1, строку 1. Поле для ввода пароля и метка для него создаются аналогично.

При работе с GridPane можно отобразить границы, это бывает полезно при отладке. Чтобы отобразить границы разметки необходимо установить свойство gridLinesVisible равным true. Запустив после этого программу, вы увидите линии — границы столбцов и строк сетки:

Границы GridPane
Границы GridPane

Добавление кнопки и текста

Для полноценной работы форме не хватает еще два элемента: Button — кнопка, для отправки формы и Text — объект, который будет отображать информацию при нажатии на кнопку.

Сначала создадим кнопку и  поместим её снизу справа — стандартное расположение кнопки в формах. Добавьте этот код перед кодом создания сцены:

Button btn = new Button("Sign in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);

Данный код создает кнопку с текстом Sign in и помещает её в вспомогательный объект HBox с отступами 10 пикселей, который служит выравнивания кнопки. Свойство alignment объекта hbBtn установлено равным Pos.BOTTOM_RIGHT, это означает, что кнопка будет выровнена по правому нижнему краю. Сам объект HBox поместим в нашу сетку в ячейку 1, 4.

Теперь добавим элемент Text, для отображения информации. Добавьте этот код до кода создания сцены:

final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);

Сейчас мы не увидим сообщения, которое должно появляться при нажатии кнопки, чтобы отобразить его, нам надо обработать событие нажатия на кнопку.

Обработка событий

Заставим кнопку показывать сообщение, когда на нее нажмут. Добавим следующий код в программу:

btn.setOnAction(new EventHandler<ActionEvent>() {

    @Override
    public void handle(ActionEvent e) {
        actiontarget.setFill(Color.FIREBRICK);
        actiontarget.setText("Sign in button pressed");
    }
});

Метод setOnAction() используется для регистрации обработчика события нажатия на кнопку. Когда происходит нажатие на кнопку мы меняем цвет текста сообщения на красный:

Обработка событий JavaFX
Обработка событий JavaFX

Теперь запустите приложение, нажмите на кнопку и увидите результат. На этом всё, не пропустите новые уроки!

Хочешь получать статьи на почту?

Подпишись на обновления!
* Ваш email не будет разглашен/продан. Вы сможете отписаться в любое время.

1 Комментарий

  1. Walter Raily:

    Спасибо , очень хорошо изложено.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *