JavaFX Button: как сделать кнопку, нажатие, цвет и стиль

Элемент управления JavaFX Button позволяет приложению выполнять некоторые действия, когда пользователь приложения нажимает кнопку. Элемент представлен классом javafx.scene.control.Button. Кнопка может иметь текст и значок, которые указывают пользователю, что будет делать нажатие кнопки.

Содержание

Создание
Добавление в граф Scene
Текст
Размер текста
Обтекание текстом кнопки
Изображение
Размер
События
Мнемоника
CSS-стили
Отключение

Создание

Вы создаете элемент управления Button, создавая экземпляр класса Button:

Button button = new Button("My Label");

Текст, отображаемый на кнопке, передается в качестве параметров конструктору Button.

Добавление в граф Scene

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

Вот пример, который присоединяет кнопку к графу сцены:

package com.jenkov.javafx.controls;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.stage.Stage;


public class ButtonExperiments extends Application  {

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("HBox Experiment 1");

        Button button = new Button("My Button");

        Scene scene = new Scene(button, 200, 100);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

Обратите внимание, что кнопка добавляется непосредственно в объект Scene. Обычно вы вкладываете Button в какой-либо компонент макета.

Результатом выполнения приведенного выше примера кнопки является приложение, которое выглядит следующим образом:

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

Текст

Есть два способа установить текст кнопки:

передать текст конструктору Button;
вызвать метод setText() для экземпляра Button. Это можно сделать после создания экземпляра Button. Таким образом, его можно использовать для изменения текста кнопки, которая уже видна. Вот пример:

button.setText("Click me if you dare!");

Размер текста

Вы можете установить размер текста кнопки с помощью свойства CSS -fx-text-size.

Обтекание текстом кнопки

Элемент управления Button поддерживает перенос текста текста кнопки. Под переносом текста подразумевается, что если текст слишком длинный для отображения в одной строке внутри кнопки, текст разбивается на несколько строк.

Вы включаете перенос текста в экземпляре Button с помощью метода setWrapText(). Он принимает один логический параметр. Если вы передаете значение true в setWrapText(), тогда вы включаете перенос текста. Если false, отключаете. Вот пример:

button.setWrapText(true);

Вот снимок экрана с двумя кнопками JavaFX, для одной из которых включена функция переноса текста:

Изображение

Можно отобразить изображение внутри кнопки рядом с текстом. Класс Button содержит конструктор, который может принимать Node в качестве дополнительного параметра. Вот пример метки, который добавляет изображение с помощью компонента ImageView:

package com.jenkov.javafx.controls;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;

import java.io.FileInputStream;


public class ButtonExperiments extends Application  {


    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("HBox Experiment 1");

        FileInputStream input = new FileInputStream("resources/images/iconmonstr-home-6-48.png");
        Image image = new Image(input);
        ImageView imageView = new ImageView(image);

        Button button = new Button("Home", imageView);

        Scene scene = new Scene(button, 200, 100);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

Размер

Класс Button содержит набор методов, которые вы можете использовать для установки размера кнопки:

button.setMinWidth()
button.setMaxWidth()
button.setPrefWidth()

button.setMinHeight()
button.setMaxHeight()
button.setPrefHeight()

button.setMinSize()
button.setMaxSize()
button.setPrefSize()

Методы setMinWidth() и setMaxWidth() устанавливают минимальную и максимальную ширину, которую должна иметь кнопка.
Метод setPrefWidth() устанавливает предпочтительную ширину кнопки. Когда есть достаточно места для отображения кнопки в ее предпочтительной ширине, JavaFX сделает это. Если нет, уменьшит размер кнопки, пока она не достигнет минимальной ширины.
Методы setMinHeight() и setMaxHeight() устанавливают минимальную и максимальную высоту, которую должна иметь кнопка.
Метод setPrefHeight() устанавливает предпочтительную высоту кнопки. Когда есть достаточно места для отображения кнопки в ее предпочтительной высоте, JavaFX сделает это. Если нет, уменьшит размер, пока она не достигнет минимальной высоты.
Методы setMinSize(), setMaxSize() и setPrefSize() устанавливают ширину и высоту кнопки за один вызов. Таким образом, эти методы принимают параметры ширины и высоты:

button.setMaxSize(100, 200);

эквивалентно:

button.setMaxWidth(100);
button.setMaxHeight(200);

Вот скриншот двух кнопок. Первая имеет размер по умолчанию, рассчитанный по ее тексту кнопки и компоненту макета, внутри которого она вложена. Вторая имеет предпочтительную ширину 200 и высоту 48, установленную на ней:

События

Чтобы реагировать на нажатие кнопки, необходимо прикрепить прослушиватель событий к объекту Button:

button.setOnAction(new EventHandler() {
    @Override
    public void handle(ActionEvent actionEvent) {
        //... do something in here.
    }
});

Вот как выглядит присоединение слушателя события щелчка с помощью лямбда-выражения Java:

button.setOnAction(actionEvent ->  {
    //... do something in here.    
});

Наконец, давайте посмотрим на полный пример, который изменяет текст метки при нажатии кнопки:

package com.jenkov.javafx.controls;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class ButtonExperiments extends Application  {


    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("HBox Experiment 1");

        Label label = new Label("Not clicked");
        Button button = new Button("Click");

        button.setOnAction(value ->  {
           label.setText("Clicked!");
        });

        HBox hbox = new HBox(button, label);

        Scene scene = new Scene(hbox, 200, 100);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

Мнемоника

Вы можете установить мнемонику для экземпляра Button — это клавиша клавиатуры, которая активирует кнопку при нажатии вместе с клавишей ALT. Таким образом, мнемоника — это сочетание клавиш для активации кнопки.

Мнемоника для кнопки указывается внутри текста кнопки. Вы отмечаете, какая клавиша будет использоваться как мнемоника, помещая символ подчеркивания (_) перед символом в тексте кнопки. Символ подчеркивания не будет отображаться в тексте кнопки. Вот пример:

button.setMnemonicParsing(true);

button.setText("_Click");

Обратите внимание, что необходимо сначала вызвать setMnemonicParsing() для кнопки со значением true. Это дает команду кнопке анализировать мнемонику в ее тексте. Если вы вызываете этот метод со значением false, символ подчеркивания в тексте кнопки будет просто отображаться как текст и не будет интерпретироваться как мнемоника.

Вторая строка устанавливает текст _Click . Это говорит кнопке использовать ключ с как мнемонику. Мнемоника нечувствительна к регистру, поэтому она не должна быть прописной буквой C, которая активирует кнопку.

Чтобы активировать кнопку, теперь вы можете нажать ALT-C (одновременно). Это активирует кнопку, как если бы вы щелкнули по ней мышью.

Вы также можете сначала нажать клавишу ALT один раз. Это покажет мнемонику кнопки в тексте кнопки. Затем вы можете нажать клавишу c. Если вы нажмете ALT, а затем снова ALT, мнемоника сначала будет показана, а затем снова скрыта. Когда мнемоника видна, вы можете активировать кнопку только с помощью мнемонической клавиши, не нажимая при этом ALT. Когда мнемоника не видна, вы должны одновременно нажать ALT и клавишу мнемоники, чтобы активировать кнопку.

Вот два скриншота, показывающих, как это выглядит, когда мнемоника невидима и видима:

CSS-стили

Вы можете стилизовать кнопку, используя стили CSS. Элемент управления Button поддерживает следующие стили CSS:

-fx-border-width
-fx-border-color
-fx-background-color
-fx-font-size
-fx-text-fill

Вот пример установки цвета фона кнопки на красный:

Button button = new Button("My Button");

button.setStyle("-fx-background-color: #ff0000; ");

Этот пример устанавливает стиль непосредственно для кнопки с помощью метода setStyle(), но вы также можете стилизовать кнопку с помощью таблиц стилей.

Вот пример, который создает 4 разных кнопки. На каждой установлен стиль CSS.

package com.jenkov.javafx.controls;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

import java.io.FileInputStream;
import java.io.FileNotFoundException;


public class ButtonExperiments extends Application  {


    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("Button Experiment 1");

        Button button1 = new Button("Button 1");
        Button button2 = new Button("Button 2");
        Button button3 = new Button("Button 3");
        Button button4 = new Button("Button 4");

        button1.setStyle("-fx-border-color: #ff0000; -fx-border-width: 5px;");
        button2.setStyle("-fx-background-color: #00ff00");
        button3.setStyle("-fx-font-size: 2em; ");
        button4.setStyle("-fx-text-fill: #0000ff");


        HBox hbox = new HBox(button1, button2, button3, button4);


        Scene scene = new Scene(hbox, 400, 100);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

Вот скриншот 4 кнопок JavaFX с их стилем CSS:

Первая кнопка имеет свойства CSS -fx-border-width и -fx-border-color. Это приводит к появлению красной рамки шириной 5 пикселей.

Вторая имеет свойство CSS -fx-background-color. Это приводит к зеленому цвету фона.

Третья имеет свойство CSS -fx-font-size. В результате получается кнопка с текстом, который в 2 раза больше обычного.

Четвертая имеет набор CSS-свойств -fx-text-fill. Это приводит к кнопке с синим цветом текста.

Вы можете объединить стили CSS для кнопки, просто установив для нее несколько свойств CSS, как это сделала первая кнопка в приведенном выше примере.

Отключение

Вы можете отключить кнопку с помощью метода setDisable(). Он принимает логический параметр, который указывает, должна ли кнопка быть отключена или нет. Значение true означает, что кнопка будет отключена, а значение false означает, что она не будет отключена, что означает, что она включена. Вот пример отключения:

Button button = new Button();
button.setText("Click me!");

// here the app is running, and something happens so
// the button should now be disabled.

button.setDisable(true);


// again the app runs, and something happens so
// the button should now be enabled again.

button.setDisable(false);

JavaFX Button руководство по работе с кнопками