Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / JavaFX / Introducción a Scene Builder y MVC (Parte I)

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

Autor jc mouse lunes, enero 18, 2016

En este tutorial realizaremos una introducción al diseño de interfaces gráficas en JavaFX y Scene Builder, así también veremos como podemos implementar el patrón MVC (Modelo, Vista y Controlador) en nuestros proyectos.

¿Qué necesitamos?

Herramientas:

  • Java 8
  • Netbeans 8
  • JavaFX Scene Builder (instalado y configurado en netbeans)

Conocimientos mínimos necesarios:

  • Lenguaje Java a un nivel básico-intermedio
  • Lenguaje CSS (Hojas de Estilo en Cascada) nivel básico
  • Lenguaje XML (Lenguaje de Marcas extensible) nivel básico o por lo menos conocer los conceptos básicos de este lenguaje.

Tiempo: 40 minutos

Nivel: Básico

PROYECTO

Paso 1: Crea un nuevo proyecto en Netbeans menú ArchivoProyecto nuevo… seleccionar categoría javaFX JavaFX FXML Application, presionar botón «Siguiente«.

En la ventana que aparece, escribir el nombre del proyecto «Sample-Login«, la opción «Create Application class«, debe estar desactivada. Presiona «Terminar» para crear el proyecto.

 proyecto javafx

Paso 2: Estructura del proyecto

El proyecto creado en el paso 1 se encuentra vacío, para crear los diferentes paquetes y archivos, debemos hacer lo siguiente:

Clic derecho sobre «Paquete de fuentes» → Nuevo Package, en Package Name escribe «app» y luego presiona «terminar«.

Clic derecho sobre el paquete «app» → Nuevo Otro → seleccionamos la categoría JavaFX JavaFX Main Class , a continuación escribimos un nombre para el archivo «FXMain» y presionamos terminar.

Este archivo Main es el que se debe ejecutar primero ya que contiene el método start() el principal punto de entrada para las aplicaciones JavaFX, para realizar esto, clic derecho sobre el proyecto Propiedades, a continuación seleccionamos la categoría RUN, buscamos la opción «Application class» y presionamos el botón browse, en la ventana que aparece seleccionamos «app.FXMain» y presionamos el boton «select class» y aceptar para terminar.

Hasta el momento tenemos los siguiente [ver imagen de abajo]. Si ejecutamos en este punto el proyecto solo veremos una ventana con el clásico «Hello World«, pero ese no es nuestro objetivo así que continuemos.

proyecto fx

Paso 3: Paquetes

Continuamos creando los paquetes necesarios para el proyecto.

Clic derecho sobre «app» → Nuevo →  Java Package, en Package Name escribe «resources» y luego presiona «terminar«.  En el paquete que acabas de crear, clic derecho → Nuevo → Otro … selecciona categoria Otros → Hoja de estilos en Cascada CSS y presionas siguiente, en nombre de archivos escribe «MyStyle» y luego terminar. En este archivo escribiremos los estilos CSS para la interfaz.

Clic derecho sobre «app.resources» → Nuevo →  Java Package, en Package Name escribe «images» y luego presiona «terminar«. En este nuevo paquete colocaremos las imágenes que utilizaremos.

Necesitamos otro paquete para colocar nuestras vistas y controladores, dependiendo de la complejidad de la aplicación pueden utilizarse 1 o más paquetes, en este ejemplo solo utilizaremos un paquete, Clic derecho sobre «app» → Nuevo →  Java Package, en Package Name escribe «login» y luego presiona «terminar«.

Finalmente, necesitamos un paquete más para el modelo. Clic derecho sobre «app» → Nuevo →  Java Package, en Package Name escribe «model» y luego presiona «terminar«.

project fx

 

Paso 4: Vistas, controladores y modelo

Primeramente crearemos las clases para el modelo, no usaremos base de datos así que emularemos la autenticación de usuarios con datos de un arrayList.

Clic derecho sobre «model» → Nuevo →  Java Class, en Class Name escribimos «User» y luego presiona «terminar«. Pega el siguiente código en la clase.

package app.model;
/**
 * @web https://www.jc-mouse.net/
 * @author jc mouse
 */
public class User {
    
    private String nick;
    private String pass;
    private String fullName;
    
    /** Constructor de clase */
    public User(){}

    /** Constructor de clase
     * @param nick apodo
     * @param pass palabra secreta
     * @param fullName nombre completo
     */
    public User(String nick, String pass, String fullName){
        this.nick = nick;
        this.pass = pass;
        this.fullName = fullName;
    }
    
    public String getNick() {
        return nick;
    }

    public void setNick(String nick) {
        this.nick = nick;
    }

    public String getPass() {
        return pass;
    }

    public void setPass(String pass) {
        this.pass = pass;
    }

    public String getFullName() {
        return fullName;
    }

    public void setFullName(String fullName) {
        this.fullName = fullName;
    }    
    
}

Continuamos con la clase que nos permitirá emular la autenticación de usuarios. Clic derecho sobre «model» → Nuevo →  Java Class, en Class Name escribimos «Authentication» y luego presiona «terminar«.

Esta clase contara con un método userExists que retorna TRUE si el usuario existe y FALSE en caso contrario, el metodo getUser retorna una Usuario. El código es el siguiente:

package app.model;
import java.util.ArrayList;
import java.util.Optional;
/**
 * @web https://www.jc-mouse.net/
 * @author jc mouse
 */
public class Authentication {
   
    private final ArrayList<User> userList;
    
    /**
     * Constructor de clase
     */
    public Authentication(){
        this.userList = new ArrayList<>();
        userList.add(new User("demo","demo","Pierre Nodoyuna"));
        userList.add(new User("zacarias","123456","Zacarias Flores de la Plaza"));
        userList.add(new User("jc mouse","123456","JC Mouse Bolivia"));
    }
    
    /**
     * Autenticacion de usuario
     * @param user usuario
     * @param pass palabra secreta de usuario
     * @return boolean
     */
    public boolean userExists(String user, String pass){        
        return userList.stream().filter((p) -> (user.equals(p.getNick()))).anyMatch((p) -> (pass.equals(p.getPass())));
    }
    
    /**
     * Obtiene un Usuario segun parametros de entrada
     * @param user usuario
     * @param pass palabra secreta de usuario
     * @return User
     */
    public Optional<User> getUser(String user, String pass){            
       return userList.stream().filter(u -> u.getNick().equals(user) ).filter(u -> u.getPass().equals(pass)).findFirst();        
    }
}

Continuamos con las vistas y controladores,  Clic derecho sobre el paquete «app.login» → Nuevo →  Otro… seleccionamos categoría JavaFX → Empty FXML, y presionamos siguiente, en FXML Name escribimos «LoginView«, en la siguiente ventana activamos la opción «Use Java Controller«, con la opción «create new» seleccionada en Control Name escribimos «LoginController» y luego presiona «terminar«.

Haremos uso de una segunda vista más, Clic derecho sobre «app.login» → Nuevo →  Otro… seleccionamos categoría JavaFX → Empty FXML, y presionamos siguiente, en FXML Name escribimos «DetailsView«, en la siguiente ventana activamos la opción «Use Java Controller«, con la opción «create new» seleccionada en Control Name escribimos «DetailsController» y luego presiona «terminar«.

Nuestro proyecto debe tener la siguiente forma:

login project

 

Paso 5: Interfaz de usuario

Nuestro proyecto cuenta con dos interfaces, la primera corresponde al formulario de «Login de usuario«, el segundo mucho más sencillo, se reducirá a una ventana de confirmación donde se muestran los datos del usuario logueado.

Antes de crear interfaces de usuario con Scene Builder o en cualquier otro IDE,  es buena practica antes diseñar un borrador de la idea que tenemos en mente ya sea con lápiz y papel o un software de diseño. Esto nos permitirá estudiar el diseño de la interfaz y también comprobar su funcionalidad en el programa.

mockup java

 

Con ayuda de nuestro sencillo mockup podemos identificar que necesitamos los siguientes estilos CSS y archivos:

  • Una imagen para el logotipo de login
  • Estilo para el fondo
  • Estilos para las cajas de texto
  • Estilo para el boton de inicio de sesión
  • Estilo para el mensaje de error
  • Estilo para el label de «Iniciar sesión«
  • Estilo para el label «¿No puede acceder a su cuenta?»

Comenzaremos ahora a escribir los estilos CSS, en Netbeans abre el archivo «MyStyle.css«.

JavaFX CSS esta basado en las Hojas de Estilo CSS pero no es 100% igual. Etiquetas más etiquetas menos, javaFX CSS esta pensado para que el que sepa trabajar con CSS y HTML pueda usar esos conocimientos para desarrollar interfaces en JavaFX CSS de una manera natural.

Otra dato importante acerca de JavaFX CSS es que se debe usar antes de cada propiedad el prefijo «-fx-«, es decir si tenemos «background-color: #fff;» en javafx css sera «-fx-background-color: #fff;«. Eso todo lo que necesitamos saber por el momento, continuemos.

Los estilos que usaremos en el proyecto, son los siguientes:

/*color de fondo*/
.background_app{
    -fx-background-color: #00aff0;
}

/* cajas de texto */
.text_app{
    -fx-background-color: #cceffc;
    -fx-text-fill: #000;
    -fx-prompt-text-fill: #5aaff0;
    -fx-text-box-border: transparent;        
    -fx-background-radius: 0;
    -fx-padding: 8;
    -fx-font-size:14px;
}

.text_app:focused {
    -fx-text-fill: #000;
    -fx-background-color: #fff;     
}

/*boton de inicio de sesion*/
.button_app{
    -fx-background-color: #0c7daf;
    -fx-border-radius: 46;
    -fx-background-radius: 46;
    -fx-text-fill: #fff;    
    -fx-alignment: CENTER;
}

/**etiqueta de inicio de sesion*/
.textb_app{
    -fx-text-fill: #fff;
    -fx-font-size:16px;
    -fx-font-weight: bold;
    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.5) , 0,0,0,1 );
}

/**etiqueta ¿no puede...*/
.textnp_app{
    -fx-text-fill: #fff;
    -fx-font-size:12px;
    -fx-font-weight: normal;    
}

/*etiqueta de error*/
.texterr_app{
    -fx-text-fill: #a53b3f;
    -fx-font-size:12px;
    -fx-font-style:italic;    
}

Las Vistas

Ahora que tenemos listo nuestra hoja de estilos, en netbeans clic derecho en «LoginView.fxml» → Open. Se nos abrirá el Scene Builder y por el momento nos mostrara un contenedor (AnchorPane) vacio.

Agregar Hojas de Estilo al archivo FXML

Selecciona el contenedor → en el apartado de «propiedades» busca «StylesSheets» y presiona el signo [+]  que esta debajo, entonces busca el archivo CSS que para este ejemplo, esta en «app.resources.MyStyle.css». No olvides guardar los cambios File Save después de cada modificación.

javafx css

 

Agregar imagen

En este proyecto hacemos uso de una imagen para mostrar el logo de nuestra aplicación, la imagen es un archivo *.PNG de 123×60 pixeles. Debes colocarlo en el paquete «app.resources.images«.

logo

En Scene Builder en la sección de Library → Controls, busca el control ImageView y arrastra hacia el contenedor. Con el control aún seleccionado, en Propiedades busca Image y presiona el boton […] para buscar la imagen en el proyecto. No notaras nada por el momento porque la imagen es de color blanco y el contenedor también, despliega el contenedor «Layout» y busca fit widthfit height, coloca los valores 123 y 60 respectivamente.

Agregar CSS a un control 

Selecciona el contenedor y en sus Propiedades busca Style Class, despliega y selecciona el estilo «background_app«, ahora nuestro contenedor toma un color azul y ya podemos ver la imagen que añadimos en el paso anterior.

style class

Tamaño del contenedor

Es importe especificar el tamaño que tendrá el contenedor, para esto, selecciona el contenedor «AnchorPane» y en el panel de «Layout«, busca Pref Width y Pref Height, escribe 480 y 320 respectivamente.

altoancho

Agregar el resto de los controles

Desde la librería de controles Library → Controls, arrastra y suelta en el contenedor los siguientes controles:

scene login

 

Para agregar texto a un control se utiliza la propiedad Text, ademas los controles TextField y PasswordField cuentan con la propiedad Promp Text, esta propiedad muestra un texto cuando el control esta vació, como el placeholder en HTML5

Completa los textos para cada control según la plantilla de nuestra vista:

style fx

 

Debemos añadir los estilos CSS para cada control tal como hicimos para el contenedor, la imagen siguiente muestra los CSS para cada uno de ellos.

css java

 

Después de agrear los estilos y con unos ajustes de tamaño, colocamos cada control en su lugar y tenemos:

Hojas de estilo

 

Guarda los cambios y cierra el Scene Builder

Si abres el «LoginView.fxml» en modo edición, veras como Scene Builder a escrito todo el código FXML necesario para la interfaz. Este código puede editarse manualmente, pero eso lo veremos en otra ocasión.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<AnchorPane id="AnchorPane" prefHeight="320.0" prefWidth="480.0" styleClass="background_app" stylesheets="@../resources/MyStyle.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="app.login.LoginController">
   <children>
      <ImageView fitHeight="60.0" fitWidth="123.0" layoutX="182.0" layoutY="33.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@../resources/images/logo_app.png" />
         </image>
      </ImageView>
      <Label layoutX="191.0" layoutY="101.0" styleClass="textb_app" text="Iniciar Sesión" />
      <TextField layoutX="114.0" layoutY="133.0" prefHeight="36.0" prefWidth="260.0" promptText="Nombre de usuario" styleClass="text_app" />
      <PasswordField layoutX="114.0" layoutY="176.0" prefHeight="36.0" prefWidth="260.0" promptText="Palabra secreta" styleClass="text_app" />
      <Button layoutX="168.0" layoutY="222.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="153.0" styleClass="button_app" text="Iniciar sesión" />
      <Label layoutX="179.0" layoutY="258.0" styleClass="texterr_app" text="Los datos son incorrectos" />
      <Label layoutX="304.0" layoutY="297.0" styleClass="textnp_app" text="¿No puede acceder a su cuenta?" />
   </children>
</AnchorPane>

Paso 6: 

Ya para terminar esta primera parte, abre la clase FXMain.java y reemplaza el método «start» por:

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("login/LoginView.fxml"));        
        Scene scene = new Scene(root);        
        stage.setTitle("Sample Login - [https://www.jc-mouse.net/]");
        stage.setScene(scene);
        stage.show();
    }

Lo que hacemos con este código es indicarle al programa que inicie con la vista «LoginView.fxml«. Finalmente ejecuta el proyecto (F6) y si no tenemos ningún error podremos ver algo similar a esto en pantalla.

login javafx

Nuestra vista para autenticar usuarios esta lista, aunque carece de funcionalidad, eso lo veremos en la segunda parte 🙂

Enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Client REST usando GSON y Volley

Client REST usando GSON y Volley

En este post crearemos un cliente android para consumir un recurso de un REST API utilizando las librerías GSON y Volley...

Personlizar JTable: Header Table con iconos

Personlizar JTable: Header Table con iconos

En este post mostramos como personalizar el Header (encabezado) de un componente JTable en Java colocando iconos, centra...

Extraer texto e imagen, exportar como PNG y encriptar un archivo PDF

Extraer texto e imagen, exportar como PNG y encriptar un archivo PDF

En este post hablaremos sobre la biblioteca de Apache PDFBox el cual es una herramienta para java de código abierto que...

Cliente/Servidor en java y c#

Cliente/Servidor en java y c#

Como habíamos mencionado en un anterior post Ejemplo socket java Cliente/Servidor , el lenguaje de programación entre el...

Introducción al Diseño Web Adaptable (Responsivo)

Introducción al Diseño Web Adaptable (Responsivo)

El diseño web adaptable (Responsive Web Design) va evolucionando como una filosofía de diseño y desarrollo de paginas we...

Truco para Instagram

Truco para Instagram

Instagram es una red social y aplicación para subir fotos y videos. Sus usuarios también pueden aplicar efectos fotográf...

2 comentarios en “Introducción a Scene Builder y MVC (Parte I)”

  1. diegodesdecolombia@gmail.com dice:

    ¿Crees que java fx tiene futuro en la creación de aplicaciones?

    1. Mouse dice:

      Honestamente 🙂 no encontrado muchas aplicaciones en español, sin embargo javaFX tiene mucho potencial no solo por trabajar tanto en desktop como en la web, sino porque puede ser un buen reemplazo para flash, yo le veo mucho futuro con el cloud Computing que por lo que pude investigar, en España ya se viene trabajando con ello desde hace rato

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp