Inicio Blog Cursos Foro

Crear interfaz gráfica en java


author_post
José Luis Guisado

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.

Qué interface crearemos con JavaFX

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:

interface javafx login

Requerimientos para seguir el artículo

Estructura de proyecto JavaFX

Estructura javafx proyecto

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

Creando proyecto JavaFX

POM.XML

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>

Main.java

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

}

Creando vista con Scene Builder

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.

  • En la pestaña propiedad que nos aparece a la derecha, al seleccionar un componente, tendremos un campo que se llama Text, en éste, vamos a añadir el texto que queremos que se muestre. Como por ejemplo en el botón, que pondremos "Iniciar sesión" y en los labels, que pondremos "Correo Electrónico" y "Contraseña".
  • Los textField  y passWordField, son los campos de texto y se diferencia en que en PasswordField no muestra lo que escribimos, ya que sera el campo dónde escribiremos la contraseña.
  • ImageView es el componente que nos permitirá mostrar la foto, para ello, daremos click sobre el proyecto y en su propiedad image buscaremos la ruta de la imagen de nuestro proyecto, que añadimos en el paquete view.

Estilo

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.

Generando el archivo Fxml

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

Añadiendo ID a los componentes

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.

Creando controlador

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.

Creando el método login

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!

¡No te pierdas nuevas entradas! Sí­guenos en nuestras redes sociales

Preguntas relacionadas

No hay preguntas sobre este artículo.

¿Tienes alguna duda sobre el artículo? ¡Pregunta!