JavaFX: Entering text using TextField

This entry is part 27 of 55 in the series JavaFX

TextField is probably the most common control among all the UI input Elements.  TextField is for user to input a single line of text.

By now, it should be rather easy for us to display the TextField in the scene.

To get the input string into a string variable, it is equally easy.  As in the example below, we use the getText() method as below.

package enteringtext;

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.geometry.*;

public class EnteringText extends Application {

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

    Label lbl = new Label("Entered Text Will Show Here");

    TextField txtField;

    @Override
    public void start(Stage stage) {

        lbl.setMinWidth(100);
        lbl.setAlignment(Pos.BOTTOM_LEFT);

        Label lblEnter = new Label("Enter Text:");
        lblEnter.setMinWidth(100);
        lblEnter.setAlignment(Pos.BOTTOM_RIGHT);

        txtField = new TextField();

        Button btnOK = new Button("OK");
        btnOK.setMinWidth(75);
        btnOK.setOnAction(e -> buttonOK());

        HBox paneLabel = new HBox(20, lbl);

        paneLabel.setPadding(new Insets(50));

        HBox paneField = new HBox(20, lblEnter, txtField);
        paneField.setPadding(new Insets(10));

        HBox paneButton = new HBox(20, btnOK);
        paneButton.setPadding(new Insets(10));
        paneButton.setAlignment(Pos.BOTTOM_RIGHT);

        VBox pane = new VBox(10, paneLabel, paneField, paneButton);

        Scene scene = new Scene(pane);
        stage.setScene(scene);
        stage.setTitle("Enter A Text");
        stage.show();
    }

    public void buttonOK() {

        String message;

        message = txtField.getText();

        lbl.setText(message);

    }
}

textField

 

 

JavaFX: Hbox with priority always

This entry is part 26 of 55 in the series JavaFX

As the name implies, if you layout the elements in a HBox, the elements will be put horizontally.

To cater to user resizing the window, Javafx provides us a setting for us to always expand an element to take up extra space.

The best way to see this is to compare the output with or without priority.Always setting.

For Hbox, the priority always setting is set by method setHgrow().  For Vbox, it will be setVgrow().

For this example, the Hbox is the only pane that we have and so we have hboxPane as the item in the scene in line 31.

package javafxapplication23;

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.scene.layout.Priority;

public class JavaFXApplication23 extends Application {

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        HBox hboxPane = new HBox(10); // spacing = 10       
        hboxPane.setPadding(new Insets(10, 10, 10, 10));

        Label lb = new Label("Click Submit To Send:");
        Button button = new Button("Submit");

        hboxPane.setHgrow(button, Priority.ALWAYS);
        button.setMaxWidth(Double.MAX_VALUE);

        hboxPane.getChildren().addAll(lb, button);

        Scene scene = new Scene(hboxPane, 300, 250);
        stage.setScene(scene);

        stage.show();
    }

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

The screenshot below has the submit button set with priority always.

palways

If we comment out line 26, this is what we have:

p_always1

JavaFX: Using a Click Event Handler

This entry is part 25 of 55 in the series JavaFX

For our previous example, we can pass a click button event handler into the function and from the event handler, we will be able to get all sort of information about the event.

Consider the example below.  Once we have the event handler in the handle function in line 52, we can use e.getSource() to test the instance of the button that triggered the event.

Here we have 2 instances of a button class and with an if else statement, we can find out which instance of the button has triggered the call.

Click Event Handler
package javafxapplication20;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;

public class JavaFXApplication20 extends Application {

    Button movButton = new Button("Movie");

    Button gameButton = new Button("Game");

    Label lb = new Label("Which Do You Prefer?");

    @Override
    public void start(Stage stage) {

        ClickHandler ch = new ClickHandler();

        BorderPane border = new BorderPane();

        border.setPrefSize(300, 250);
        
        movButton.setOnAction(ch); 
        gameButton.setOnAction(ch); 

        HBox hbox = addHorizontalBox();
        border.setTop(hbox);
        border.setLeft(addVBox());

        Scene scene = new Scene(border);
        stage.setScene(scene);
        stage.setTitle("Which Button");
        stage.show();
    }
    
    private class ClickHandler
            implements EventHandler<ActionEvent> {

        @Override
        public void handle(ActionEvent e) {
            if (e.getSource() == movButton) {
                lb.setText("Movie Button Is Clicked");
            } else {
                if (e.getSource() == gameButton) {
                    lb.setText("Game is Chosen");
                }
            }
        }
    }


    private HBox addHorizontalBox() {

        HBox hbox = new HBox();
        hbox.setPadding(new Insets(15, 12, 15, 12));
        hbox.setSpacing(10);   // Gap between nodes

        hbox.getChildren().addAll(movButton, gameButton);

        return hbox;
    }

    private VBox addVBox() {

        VBox vbox = new VBox();
        vbox.setPadding(new Insets(50)); // Set all sides to 10

        lb.setFont(Font.font("Consolas", FontWeight.BOLD, 24));
        vbox.getChildren().add(lb);

        return vbox;
    }  

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

}

event

 

JavaFX: Which Button Is Clicked

This entry is part 24 of 55 in the series JavaFX

To test which button is clicked, I have made use of setOnAction() method of the button object and called the relevant function accordingly.

package javafxapplication20;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;

public class JavaFXApplication20 extends Application {

    Button movButton = new Button("Movie");

    Button gameButton = new Button("Game");

    Label lb = new Label("Which Do You Prefer?");

    @Override
    public void start(Stage stage) {

        BorderPane border = new BorderPane();

        border.setPrefSize(500, 400);

        movButton.setOnAction(e -> movieButton());
        
        gameButton.setOnAction(e -> gameButton());

        HBox hbox = addHorizontalBox();
        border.setTop(hbox);
        border.setLeft(addVBox());

        Scene scene = new Scene(border);
        stage.setScene(scene);
        stage.setTitle("Which Button");
        stage.show();
    }

    private void movieButton() {

        lb.setText("Movie Button Is Clicked");

    }
    
    private void gameButton() {

        lb.setText("Game is Chosen");

    }

    private HBox addHorizontalBox() {

        HBox hbox = new HBox();
        hbox.setPadding(new Insets(15, 12, 15, 12));
        hbox.setSpacing(10);   // Gap between nodes

        hbox.getChildren().addAll(movButton, gameButton);

        return hbox;
    }

    private VBox addVBox() {

        VBox vbox = new VBox();
        vbox.setPadding(new Insets(50)); // Set all sides to 10

        lb.setFont(Font.font("Consolas", FontWeight.BOLD, 24));
        vbox.getChildren().add(lb);

        return vbox;
    }

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

chosen

 

JavaFX: Removing CSS effects to a Button

This entry is part 23 of 55 in the series JavaFX

When a mouse is moved over a button, we can apply an effect such as changing the color of the button.

However, when the mouse is out of the button or out of any other nodes, we will want it to get back to its original state.

We can use remove() method if we have only one class or removeAll() method if we have more than one CSS class.

package javafxapplication19;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFXApplication19 extends Application {

    Button btn = new Button("Codecrawl");

    DropShadow ds = new DropShadow();

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 300, 250);
        scene.getStylesheets().add("javafxapplication19/style.css");
        stage.setScene(scene);

        btn.setOnMouseEntered(e -> mouseEntered());

        btn.setOnMouseExited(e -> mouseExited());

        stackpane.getChildren().add(btn);

        stage.show();
    }

    public void mouseEntered() {

        btn.getStyleClass().add("button1");
        btn.setText("Mouse In");

    }

    public void mouseExited() {

        btn.getStyleClass().remove("button1");
        btn.setText("Mouse Out");

    }

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

}

remove

Here is the simple style.css that we use to set the color of the button.

.button1 {
    
    -fx-base: blue;    
    
}