En este artículo aprenderemos a crear interfaces modernas con JavaFX, que es un conjunto de paquetes gráficos. Una de las razones por las que es tan sencillo crear interfaces con JavaFX es por el uso de hojas de estilos CSS y también de scene builder, que permite crear las ventanas sin necesidad de tocar código, simplemente arrastrando los componentes a la posición que queramos.
En este artículo, al ser una introducción, veremos como crear una ventana que simule un login, le añadiremos estilo y algo de lógica:
Paquete controller: Contendrá la clase que estará asociada a nuestra vista, aquí definiremos la lógica de nuestra ventana, como por ejemplo, crear el método login y relacionarlo con el botón de iniciar sesión.
Paquete main: Contendrá la clase main que ejecutará nuestro programa y extendera de Application, para trabajar con javaFX. Esta clase debemos añadirla al pom para indicarle que clase es la principal.
Paquete view: En este paquete vamos tener el archivo fxml que crearemos mediante Scene Builder y también la imagen que utilizaremos en éste.
Comenzamos creando un proyecto maven en eclipse, una vez generado, añadiremos esto en el POM:
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.6.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<groupId>com.zenjava</groupId>
<artifactId>javafx-maven-plugin</artifactId>
<version>8.8.3</version>
<configuration>
<mainClass>ruta-archivo-main</mainClass><!--Modificar por la ruta del archivo main, en mi caso sería com.nigmacode.main-->
</configuration>
</plugin>
</plugins>
</build>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
</dependencies>y en la cmd nos dirigimos a la carpeta raíz de nuestro proyecto, ejecutamos mvn install, click derecho en nuestro proyecto maven>update proyect.
Ahora, que tenemos ya descargado javaFX en nuestro proyecto crearemos la clase main en el paquete com.nigmacode.main (o como lo hayas llamado) y será esta ruta la que añadiras en el pom, en la <mainClass>
package com.nigmacode.main;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("../view/login.fxml"));
//Ruta donde se encontrará la ventana del login
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String [] args) {
Application.launch(args);
}
}
Ahora, abrimos Scene builder, voy a importar una imagen y a partir de ella voy a explicar como vamos a hacer la interfaz del login:
Apartado container: En este apartado tendremos los diferentes contenedores, en nuestro caso, vamos a utilizar un anchorpane que nos permite poner los componentes dónde queramos, lo añadimos al medio y clicando en la esquina, lo hacemos tan amplio como queramos.
Apatardo controls: Aqui encontraremos los controles que se pueden añadir a nuestra aplicación, abrimos este apartado y arrastremos lo siguiente:
Debemos añadir estos componentes a nuestro anchorPane, arrastrándolos hacia el.
Para añadir un fondo de color, cambiar el tamaño y color de las letras, etc… tenemos una propiedad abajo que se llama style. Voy adjuntar el estilo del anchor y del botón:
Estilo del anchorPane:
Estilo del botón:
El estilo de los labels sería prácticamente igual que el del botón, quitando el background-color.
El archivo Fxml es el que generará scene builder con nuestros componentes, debemos darle arriba al menú, pestaña file y save as, dónde elegiremos la ruta del paquete view de nuetro proyecto.
Siempre que modifiquemos de alguna forma el archivo fxml debemos darle a save o cntrl+s en windows, para que se refresque en nuestro proyecto
Para identificar la componente y poder utilizarlo en el código, debemos añadirle un ID, que será el nombre de su variable.
Para añadirle un identificador, vamos a seleccionar el componente y en las pestañas de la derecha, elegiremos code.
Al botón le añadiremos en nombre btnLogin y más abajo, en On Action, añadiremos login, que será el método que ejecute cuando hagamos click sobre él.
De la misma forma, añadiremos un ID al textField, llamado txtEmail y al passwordField txtPassword.
Ahora, en el paquete controller de nuestro proyecto, crearemos una clase java llamada loginController y en scene builder, iremos a la pestaña de abajo a la izquierda y añadiremos su ruta de la siguiente forma:
Y ahora, iremos al menú de arriba, daremos en view>show example y nos aparecerá una ventana con el código que debemos copiar en eclipse, en la clase loginController que hemos creado anteriormente.
Por último, nos dirigimos a nuestro proyecto en eclipse, y en el controlador crearémos el método login, que es el que asociamos anteriormente con nuestro botón. Nuestro controlador quedaría de esta forma:
package com.nigmacode.controller;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
public class loginController {
@FXML
private Button btnLogin;
@FXML
private TextField txtEmail;
@FXML
private TextField txtPassword;
@FXML
void login(ActionEvent event) {
//Creamos la alerta que aparecerá para decirnos si hemos introducido bien las credenciales
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Información");
alert.setHeaderText(null);
//Variables ficticias para emular un inicio de sesión
String email = "prueba@gmail.com";
String password = "123456";
//Comprobamos si coinciden los datos del login
if(txtEmail.getText().equals(email) && txtPassword.getText().equals(password)) {
//Si coincide, nos muestra el siguiente mensaje
alert.setContentText("Ha iniciado sesión correctamente");
}else {
//Si no hemos escrito bien nuestra credenciales, nos muestra este otro
alert.setContentText("Email y/o contraseña incorrectos");
System.out.println(email +" "+password+" "+txtEmail.getText()+" "+txtPassword.getText()+" ");
}
alert.showAndWait();
}
}
¡Ya solo nos quedaría ejecutar la clase main y tendríamos creado nuestro login con javaFX!
