Why are instantiated controls not displayed in the UI?

Question

I have this login app. It is not starting the components correctly. I would like to know how to start them.

The code is the same as in the Javafx book of the code house, in the login example.

package loginapp;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
import javax.swing.JOptionPane;

/**
 *
 * @author sergi
 */
public class LoginApp extends Application {

    private AnchorPane pane;
    private TextField txtLogin;
    private PasswordField txtSenha;
    private Button btEntrar;
    private Button btSair;
    private static Stage stage;

    public static Stage getStage() {
        return stage;
    }

    private void initComponents() {
        pane = new AnchorPane();

        txtLogin = new TextField();

        txtSenha = new PasswordField();

        btEntrar = new Button("Entrar");

        btSair = new Button("Sair");

    }

    private void initLayout() {
        pane.setPrefSize(600, 200);
        pane.setStyle("-fx-background-color: blue;");

        txtLogin.setPromptText("Digite aqui o seu Login: ");
        txtLogin.setLayoutX((pane.getPrefWidth() - txtLogin.getLayoutX()) / 2);
        txtLogin.setLayoutY(50);

        txtSenha.setPromptText("Dgite aqui a sua senha");
        txtSenha.setLayoutX((pane.getPrefWidth() - txtSenha.getLayoutX()) / 2);
        txtSenha.setLayoutY(100);

        btEntrar.setLayoutX((pane.getPrefWidth() - btEntrar.getLayoutX()) / 2);
        btEntrar.setLayoutY(150);

        btSair.setLayoutX((pane.getPrefWidth() - btSair.getLayoutX()) / 2);
        btSair.setLayoutY(200);

    }

    private void initListeners() {
        btSair.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {

                fecharAplicacao();
            }
        });

        btEntrar.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {

                if (txtLogin.getText().equals("admin") && txtSenha.getText().equals("casadocodigo")) {
                    //TODO Abrir tela vitrine
                } else {
                    JOptionPane.showMessageDialog(null, "Login e//ou senha invalidos", "Erro", JOptionPane.ERROR_MESSAGE); 
                }
            }
        });
    }

    private void fecharAplicacao() {

        System.exit(0);
    }

    @Override
    public void start(Stage stage) throws Exception {
        initComponents();
        initListeners();
        Scene scene = new Scene(pane);
        stage.setScene(scene);
        //Remove a opçao de maximizar a tela
        stage.setResizable(false);

        //Dá um titulo para a tela
        stage.setTitle("Login - GolFX");
        stage.show();
        initLayout();
        LoginApp.stage = stage;
    }

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

Code shows no build errors, but does not execute components (txtLogin, txtSenha among others). However the style is loaded.

Answer 1

Loaded they are. I believe your doubt is related to the elements not appearing in AnchorPane. If so, the reason is that you are only initiating the objects, but at no time add them to the panel.

You can change the method initLayout to, in addition to setting the properties, also insert them in the panel. For example:

private void initLayout(){

    /* ... código que você tem até o momento aqui... */

    // Inserindo os elementos após definir as propriedades.
    pane.getChildren().add(txtLogin);
    pane.getChildren().add(txtSenha);
    pane.getChildren().add(btEntrar);
    pane.getChildren().add(btSair);
}

Upshot: