Index / JavaFX / Introducción a Scene Builder y MVC (Parte II)

Introducción a Scene Builder y MVC (Parte II)

Autor jc mouse miércoles, enero 20, 2016

Segunda parte del tutorial [Introducción a Scene Builder y MVC (Parte I)]. En esta segunda parte, completaremos el diseño de la vista DetailsView e implementaremos código java en los controladores.

Paso 7: Vista Detalle

Para terminar la segunda vista «Vista Detalle«, nos basaremos en la siguiente plantilla:

Dimensión igual que la vista «LoginView«, de 480 de ancho y 320 de alto.

Clic derecho sobre «DetailsView.fxml» → Open para abrir la vista en el Scene Builder, añade la hoja de estilos a la vista, agrega también los controles y al TextField y Button agrega los estilos CSS «text_app» y «button_app» como ya vimos en el primer tutorial.

Si bien podemos hacer uso de hojas de estilo en los controles, también podemos agregar algunas propiedades directamente e incluso algunos efectos.

Debemos tener algo como esto:

Guarda los cambios y cierra el Scene Builder.

Paso 8: Autenticación de Usuarios

Para que el controlador *.java identifique cada uno de los controles de la vista *.fxml, se ayuda del atributo «fx:id» donde se coloca un valor único para cada control, en el controlador en cambio para identificar esos controles, se emplea @FXML, por ejemplo:

En una vista cualquiera tenemos un control Label cuyo fx:id es «saludo»

<Label fx:id="saludo" text="Hola Mundo" />

Entonces para que ese control Label sea reconocido desde el controlador *.java, se emplea la siguiente sintaxis:

@FXML Label saludo;

Donde @FXML le indica que ese Label sea visible desde el controlador.

Para asignar un identificador a un control desde Scene Builder, se debe seleccionar el control y en el menu del lado derecho desplegamos el panel «Code» buscamos el atributo fx:id , escribimos el identificador y presionamos ENTER.

Dicho todo esto, continuemos con el proyecto.

Abre la vista «LoginView.fxml» en Scene Builder y coloca los identificadores para los siguientes controles:

Cuando presionamos el botón de Iniciar sesión «btnOk«se producirá una acción el cual es verificar los datos del usuario, pero para que eso pase, debemos definir un nombre para ese método, entonces en el mismo panel donde escribimos el fx:id del botón, más abajo encontraremos On Action, en el campo de texto escribimos «verifyUserData» y presionamos enter.

Guarde los cambios y cierre.

Ahora abre la vista «DetailsView.fxml» e igual que la anterior vista, agrega los fx:id como se muestra en la imagen de abajo.

Guarde los cambios y cierre.

Controladores

Comenzaremos a escribir el código en los controladores, pero antes, debemos modificar el archivo «FXMain.java«, ábrelo y reemplaza su contenido con el siguiente código:

package app;
import app.login.LoginController;
import java.io.InputStream;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.fxml.JavaFXBuilderFactory;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
/**
 * @web https://www.jc-mouse.net/
 * @author jc mouse
 */
public class FXMain extends Application {
    
    private Stage stage;    
    
    @Override
    public void start(Stage stage) throws Exception {
         try {
            this.stage = stage;
            stage.setTitle("Sample Login - [https://www.jc-mouse.net/]");                     
            LoginController login = (LoginController) replaceSceneContent("login/LoginView.fxml");
            login.setStage(stage);            
            stage.show();
        } catch (Exception ex) {
            System.err.println(ex.getMessage());
        }     
    }

    private Initializable replaceSceneContent(String fxml) throws Exception {
        FXMLLoader loader = new FXMLLoader();
        InputStream in = FXMain.class.getResourceAsStream(fxml);
        loader.setBuilderFactory(new JavaFXBuilderFactory());
        loader.setLocation(FXMain.class.getResource(fxml));
        AnchorPane page;
        try {
            page = (AnchorPane) loader.load(in);
        } finally {
            in.close();
        } 
        Scene scene = new Scene(page, 480,320);
        stage.setScene(scene);
        stage.sizeToScene();
        return (Initializable) loader.getController();
    }
    
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}

El funcionamiento de este pequeño sistema sera el siguiente

Cuando se escriba el usuario y contraseña y se presione el botón «Iniciar Sesión«, el sistema validara que los datos sean correctos, si no lo son, mostrara un mensaje de error, si son correctos, mostrara una segunda pantalla donde se desplegara el nombre completo del usuario logueado, pero aquí lo importante, no abrirá otra ventana sino que reemplazara la existe por la vista DeatilsView y hará lo mismo cuando se presione el botón «Volver» reemplazara el contenido de la ventana actual por LoginView.

Esto que parece no ser tan importante, se vera su utilidad cuando implementemos este sistema para la web.

continuemos….

Abre el controlador «LoginController.java» y reemplaza por:

package app.login;
import app.model.Authentication;
import java.io.InputStream;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.fxml.JavaFXBuilderFactory;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
/**
 * FXML Controller class
 * @web https://www.jc-mouse.net/
 * @author jc mouse
 */
public class LoginController implements Initializable {

    @FXML Button btnOk;
    @FXML TextField txtUser;
    @FXML TextField txtPass;
    @FXML Label txtMsgError;
    
    private Stage stage;
     
    /**
     * Initializes the controller class.
     * @param url
     * @param rb
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        
        //oculta mensaje de error
        txtMsgError.setVisible(false);
        
         //cuando cualquier de los  textfield gane foco 
         //si existe mensaje de error visible -> se oculta
        txtUser.focusedProperty().addListener((ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) -> {
             if (newValue){
                txtMsgError.setVisible(false);
             }
        });
        txtPass.focusedProperty().addListener((ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) -> {
             if (newValue){
                txtMsgError.setVisible(false);
             }
        });
    }     
    
    public void setStage (Stage stage){
        this.stage = stage;
    }
    
    /**
     * Acción que se produce al presionar el boton "Iniciar Sesión"
     * @param event
     */
    @FXML       
    private void verifyUserData(ActionEvent event) throws Exception{
        Authentication authentication = new Authentication();
        //verifica que datos introducidos sean correctos
        boolean response = authentication.userExists(txtUser.getText(), txtPass.getText());
        if( response ){ // los datos son correctos      
            //reemplaza el stage actual por el de la vista "DetailsView"
            FXMLLoader loader = new FXMLLoader();
            InputStream in = LoginController.class.getResourceAsStream("DetailsView.fxml");
            loader.setBuilderFactory(new JavaFXBuilderFactory());
            loader.setLocation(LoginController.class.getResource("DetailsView.fxml"));
            AnchorPane page;
            try {
                page = (AnchorPane) loader.load(in);
            } finally {
                in.close();
            } 
            Scene scene = new Scene(page, 480,320);
            stage.setScene(scene);
            stage.sizeToScene();
            DetailsController login = (DetailsController)loader.getController();
            login.setStage(stage);
            login.setUser( authentication.getUser( txtUser.getText(), txtPass.getText()).get() );
            stage.show();
        }            
        else{
            txtMsgError.setVisible(true);
        }   
    }
    
}//LoginController:end

En la clase LoginController, podemos ver el método declarado en Scene Builder verififyUserData().

Finalmente abre «DetailsController.java» y reemplaza por:

package app.login;
import app.model.User;
import java.io.InputStream;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.fxml.JavaFXBuilderFactory;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
/**
 * @web https://www.jc-mouse.net/
 * @author jc mouse
 */
public class DetailsController implements Initializable {

    @FXML TextField txtUserName;
    @FXML Button btnReturn;
    
    private User user;
    private Stage stage;
    
    /**
     * Initializes the controller class.
     * @param url
     * @param rb
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {

        //evento cuando se presiona el boton "volver"
        btnReturn.setOnAction((ActionEvent t) -> {
         try{
            FXMLLoader loader = new FXMLLoader();
            InputStream in = LoginController.class.getResourceAsStream("LoginView.fxml");
            loader.setBuilderFactory(new JavaFXBuilderFactory());
            loader.setLocation(LoginController.class.getResource("LoginView.fxml"));
            AnchorPane page;
            try {
                page = (AnchorPane) loader.load(in);
            } finally {
                in.close();
            } 
            Scene scene = new Scene(page, 480,320);
            stage.setScene(scene);
            stage.sizeToScene();            
            LoginController login = (LoginController)  loader.getController();
            login.setStage(stage);            
            stage.show();
         }  catch(Exception ex) {
            System.err.println(ex.getMessage());
        }     
       });
    }    

    /**
     * @param stage
     */
    public void setStage (Stage stage){
        this.stage = stage;
    }
    
    /**
     * @param user
     */
    public void setUser(User user) {
        this.user = user;
        txtUserName.setText( user.getFullName() );        
    }
}

En el controlador DetailsView, también tenemos un botón «Volver» que realiza un evento, pero si recordamos el el Scene Builder no declaramos ningún método, pero existe otra manera de declarar un evento para un control, y es declarando el mismo en el initialize del controlador.

Si no tenemos marcado ningún error, ejecuta el proyecto y logueate con user: demo y pass: demo.

Hasta aquí hemos concluido con el tutorial, pero debemos resaltar que uno de los puntos fuertes de javaFX es Rich Internet Application, esto es aplicaciones web que cuentan con la mayorías de las características de una aplicación de escritorio tradicional. Pero dejamos a continuación un video que muestra claramente de lo que hablamos.