How do I show contents from the password field in javafx using checkbox [duplicate]

The duplicate is listed above for the correct but more complicated way of doing this. In this answer, I am showing two examples. One with a CheckBox and the other with the all-seeing eye. The eye is to use a StackPane to layer the node. For the CheckBox solution, put a TextField and then a PasswordField in the StackPane. Bring the TextField toFront when the CheckBox is checked and set its text using the PasswordField. Clear the TextField when the CheckBox is not checked and move the PasswordField toFront. For the All-seeing eye example, use the same ideas but add an ImageView and always keep the ImageView toFront.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class TestingGround extends Application
{
    Image image = new Image("https://previews.123rf.com/images/andrerosi/andrerosi1905/andrerosi190500216/123158287-eye-icon-vector-look-and-vision-icon-eye-vector-icon.jpg");

@Override
public void start(Stage primaryStage)
{
    HBox passwordControl1 = createPasswordFieldWithCheckBox();
    HBox passwordControl2 = createPasswordFieldWithCheckBox();
    StackPane passwordControl3 = createPasswordFieldWithEye();
    StackPane passwordControl4 = createPasswordFieldWithEye();

    VBox root = new VBox(passwordControl1, passwordControl2, passwordControl3, passwordControl4);

    Scene scene = new Scene(root, 300, 250);

    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

/**
 * @param args the command line arguments
 */
public static void main(String[] args)
{
    launch(args);
}

HBox createPasswordFieldWithCheckBox()
{
    PasswordField passwordField = new PasswordField();
    passwordField.setPrefHeight(50);
    TextField textField = new TextField();
    textField.setPrefHeight(50);
    passwordField.textProperty().bindBidirectional(textField.textProperty());

        StackPane stackPane = new StackPane(textField, passwordField);
        CheckBox checkBox = new CheckBox();
        checkBox.selectedProperty().addListener((observable, oldValue, newValue) -> {
            if (newValue) {
                textField.toFront();
            }
            else {
                passwordField.toFront();
            }
        });

        HBox root = new HBox(stackPane, checkBox);
        root.setSpacing(5);
        root.setAlignment(Pos.CENTER);

        return root;
    }

    StackPane createPasswordFieldWithEye()
    {
        PasswordField passwordField = new PasswordField();
        passwordField.setPrefHeight(50);
        TextField textField = new TextField();
        passwordField.textProperty().bindBidirectional(textField.textProperty());
        textField.setPrefHeight(50);
        ImageView imageView = new ImageView(image);
        imageView.setFitHeight(32);
        imageView.setFitWidth(32);
        StackPane.setMargin(imageView, new Insets(0, 10, 0, 0));
        StackPane.setAlignment(imageView, Pos.CENTER_RIGHT);
        imageView.setOnMousePressed((event) -> {
            textField.toFront();
            imageView.toFront();
        });

        imageView.setOnMouseReleased((event) -> {
            passwordField.toFront();
            imageView.toFront();
        });

        StackPane root = new StackPane(textField, passwordField, imageView);

        return root;
    }
}

Leave a Comment