Introducción
En este tutorial, vamos a aprender a construir una interfaz gráfica de usuario en JavaFX que incluye campos para introducir un usuario y una contraseña, junto con dos botones: uno para borrar el formulario y otro para ejecutar una acción específica. Este tipo de interfaz es común en muchas aplicaciones que requieren autenticación de usuarios.
Configuración del Proyecto en Eclipse
Antes de comenzar, asegúrate de que tienes configurado tu entorno de desarrollo:
- Instalar JDK: JavaFX requiere JDK 11 o superior.
- Configurar Eclipse: Si aún no tienes Eclipse, descárgalo e instala la versión que soporta Java. Asegúrate de tener el plugin e(fx)clipse instalado para facilitar el desarrollo con JavaFX.
Creación del Proyecto JavaFX
- Crear un nuevo proyecto: En Eclipse, ve a
File > New > Project...
, seleccionaJavaFX Project
y sigue los pasos para configurar tu nuevo proyecto. - Estructura del Proyecto: Eclipse generará la estructura básica, incluyendo una clase principal que extiende de
Application
.
Diseño de la Interfaz de Usuario
Ahora, procederemos a diseñar la interfaz de usuario. Aquí está el código para la interfaz:
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
public class LoginApplication extends Application {
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Login Interface");
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));
Label usernameLabel = new Label("Usuario:");
TextField usernameTextField = new TextField();
Label passwordLabel = new Label("Contraseña:");
PasswordField passwordField = new PasswordField();
Button clearButton = new Button("Borrar");
Button submitButton = new Button("Enviar");
grid.add(usernameLabel, 0, 0);
grid.add(usernameTextField, 1, 0);
grid.add(passwordLabel, 0, 1);
grid.add(passwordField, 1, 1);
grid.add(clearButton, 0, 2);
grid.add(submitButton, 1, 2);
clearButton.setOnAction(e -> {
usernameTextField.clear();
passwordField.clear();
});
submitButton.setOnAction(e -> {
executeLogin(usernameTextField.getText(), passwordField.getText());
});
Scene scene = new Scene(grid, 300, 200);
primaryStage.setScene(scene);
primaryStage.show();
}
private void executeLogin(String username, String password) {
System.out.println("Usuario: " + username + ", Contraseña: " + password);
// Aquí puedes añadir la lógica para verificar el usuario y la contraseña
}
public static void main(String[] args) {
launch(args);
}
}
Explicación del Código
- GridPane: Usamos un
GridPane
para organizar los componentes de la UI. Es ideal para crear formularios debido a su flexibilidad en la colocación y alineación de elementos. - Campos de Texto y Etiquetas: Incluimos campos para ingresar el usuario y la contraseña.
- Botones: El botón
Borrar
limpia los campos de texto, mientras que el botónEnviar
activa la funciónexecuteLogin
, que actualmente imprime los datos ingresados en la consola.
Pruebas y Ejecución
Para probar tu interfaz, ejecuta la aplicación desde Eclipse utilizando Run As > Java Application
. Deberías ser capaz de ver la interfaz, ingresar datos y utilizar los botones para interactuar con el formulario.
Conclusión
Este tutorial te ha guiado a través del proceso de creación de una interfaz de usuario básica en JavaFX. Este tipo de funcionalidades es fundamental en muchas aplicaciones, y puedes expandir este ejemplo básico con funciones más complejas como la validación de credenciales y la conexión con bases de datos.
![gray and black laptop computer](https://infogonzalez.com/wp-content/uploads/2024/02/pexels-photo-265087-1024x682.jpeg)
Gracias por visitar mi blog de informática, mi nombre es Tomás y soy formador y desarrollador web. Si quiere usted dejarme alguna sugerencia, ayuda o quiere un servicio de formación estoy escuchando ofertas en tomas.gonzalez@infogonzalez.com, en Facebook a https://www.facebook.com/Infogonzalez estoy deseando escucharle. Su duda o sugerencia NO molesta.