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

Question

Im a student studying java and javafx, how do I show the password in the passwordfield using a checkbox? I am using gluon scenebuilder as my fxml editor

Answer 1

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;
    }
}

Answer 2

You could use a custom Tooltip to show the password:

import javafx.application.Application;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.beans.value.ChangeListener;
import javafx.geometry.Insets;
import javafx.geometry.Point2D;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;

public class FxMain extends Application {

    private SimpleBooleanProperty showPassword ;
    private CheckBox checkBox;
    private Tooltip toolTip;
    private PasswordField pF;

    private Stage stage;
    @Override
    public void start(Stage stage) {
        this.stage = stage;
        showPassword = new SimpleBooleanProperty();
        showPassword.addListener((ChangeListener<Boolean>) (observable, oldValue, newValue) -> {
            if(newValue){
                showPassword();
            }else{
                hidePassword();
            }
        });

        final Label message = new Label("");
        Label label = new Label("Password");

        toolTip = new Tooltip();
        toolTip.setShowDelay(Duration.ZERO);
        toolTip.setAutoHide(false);
        toolTip.setMinWidth(50);

        pF = new PasswordField();
        pF.setOnKeyTyped(e -> {
            if ( showPassword.get() ) {
                showPassword();
            }
        });

        HBox hb = new HBox(10, label, pF);
        hb.setAlignment(Pos.CENTER_LEFT);


        checkBox = new CheckBox("Show password");
        showPassword.bind(checkBox.selectedProperty());

        VBox vb = new VBox(10, hb, checkBox, message);
        vb.setPadding(new Insets(10));

        stage.setScene(new Scene(vb,300,100));
        stage.show();
    }

    private void showPassword(){
        Point2D p = pF.localToScene(pF.getBoundsInLocal().getMaxX(), pF.getBoundsInLocal().getMaxY());
        toolTip.setText(pF.getText());
        toolTip.show(pF,
                p.getX() + stage.getScene().getX() + stage.getX(),
                p.getY() + stage.getScene().getY() + stage.getY());
    }

    private void hidePassword(){
        toolTip.setText("");
        toolTip.hide();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

---