Interfaces Gráficas y Bases de Datos
Interfaces Gráficas y Bases de Datos
Interfaces Gráficas y Bases de Datos
Las interfaces gráficas (GUI, del inglés Graphical User Interface) ofrecen al usuario botones, menú, barra de herramientas, ventas,
cuadros de diálogo y similares, que conocemos en nuestra interacción como usuarios. Un ejemplo de interfaz gráfica o GUI, podría
ser un procesador de texto como lo es Microsoft Word o el bloc de notas.
Estos elementos que componen la GUI, son manejados por eventos y se desarrollan usando bibliotecas o librerías. Estas librerías
proporcionan al desarrollador un conjunto de herramientas para el desarrollo de las interfaces gráficas que son compatibles para
todos los sistemas operativos de escritorio.
Swing es una biblioteca de clases que nos ofrece la capacidad de construir interfaces gráficas para aplicaciones en escritorio
en Java.
Swing nos provee de dos elementos principales para la construcción de interfaces gráficas:
Componentes: Elementos gráficos como botones, cuadros de texto que se pueden organizar en contenedores.
Ya que estos son de alto nivel, cualquier otro contenedor o componente debe construirse en su interior.
import javax.swing.*;
El componente más elemental que se necesita para construir una interfaz gráfica con Swing es la clase JFrame. Esta clase encapsula
una ventana del sistema operativo de escritorio donde se ejecuta el programa (Linux, Microsoft Windows, Mac OS).
Un ejemplo de una ventana simple con Swing se puede hacer con el siguiente código
import javax.swing.*; // Se importa todas las clases necesarias para realizar interfaces gráficas
public class Datos extends JFrame{ // Creamos una clase que hereda de la clase JFrame
public Datos() { //Constructor de la clase Datos
}
public static void main(String[] ar) {
Datos formulario1=new Datos();
formulario1.setBounds(5,10,200,150); // Este método nos permite definir la posición y
tamaño de la ventana
formulario1.setVisible(true); // Este método nos permite definir la visibilidad de la
ventana
formulario1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // Este método nos permite
definir la operación a realizar una vez se cierre la ventana. En este caso salir de la aplicación.
}
}
Lo cual nos creará una ventana de este estilo:
label1=new JLabel("Digite los datos del usuario."); // Se crea un objeto con el texto que
tendrá la etiqueta
label1.setBounds(5,50,150,15); // De manera similar a la ventana ubicamos la posición y
tamaño de la etiqueta
add(label1); // Con este método agrega la etiqueta a la ventana o JFrame
Si mantenemos el código anterior y añadimos algunas etiquetas sería de la siguiente manera
import javax.swing.*;
public class Datos extends JFrame{
private JLabel label1,label2; // inicializamos los atributos donde se va almacenar el objeto tipo
JLabel
public Datos() {
label1=new JLabel("Digite los datos del usuario.");
label1.setBounds(5,50,300,15);
add(label1);
label2=new JLabel("Version 0.0.1");
label2.setBounds(5,150,150,15);
add(label2);
}
public static void main(String[] ar) {
Datos formulario1=new Datos();
formulario1.setBounds(5,10,200,150);
formulario1.setVisible(true);
formulario1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
Lo cual nos creará una ventana de este estilo:
(Nota explicativa: En la imagen se observa una ventana del sistema operativo Windows con fondo gris, dos
etiquetas que muestran el texto programado y controles de minimizar, maximizar y cerrar)
Los paneles son contenedores donde es posible ubicar elementos dentro de él para facilitar la movilización de varios elementos
con mover solamente el panel. La clase JPanel nos proveerá de esta utilidad. Un ejemplo para crear un panel y agregar algunas
etiquetas podría ser el siguiente:
JPanel panel1 = new JPanel(); //Se crea una instancia de la clase JPanel
label1=new JLabel("Digite los datos del usuario."); // Etiqueta creada para agregar al
panel
panel1.add(label1); //Se agrega la etiqueta al panel
label2=new JLabel("Version 0.0.1"); // Segunda etiqueta creada para agregar al panel
panel1.add(label2); // Se agrega la segunda etiqueta al panel
add(panel1); // Agregar el panel al JFrame o ventana principal
Si mantenemos el código anterior y añadimos el panel, sería de la siguiente manera
import javax.swing.*;
public class Datos extends JFrame{
public Datos() {
JPanel panel1 = new JPanel();
label1=new JLabel("Digite los datos del usuario.");
panel1.add(label1);
label2=new JLabel("Version 0.0.1");
panel1.add(label2);
add(panel1);
}
public static void main(String[] ar) {
Datos formulario1=new Datos();
formulario1.setBounds(5,10,200,150);
formulario1.setVisible(true);
formulario1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
Lo cual nos creará una ventana de este estilo:
(Nota explicativa: En la imagen se observa una ventana del sistema operativo Windows con fondo gris, dos etiquetas que
muestran el texto programado con un diferente orden que el anterior ejemplo y controles de minimizar, maximizar y cerrar)
La clase JTextField permite al usuario ingresar datos en un campo de texto. Un JFrame con una entrada de texto se podría
codificar de la siguiente manera:
import javax.swing.*;
public class Datos extends JFrame{
JButton boton1;
public Datos() {
setLayout(null); // Define el diseño de la ventana. En este caso ninguno para mostrar el botón.
boton1=new JButton("Cerrar aplicación"); // Se crea la instancia de la clase JButton
boton1.setBounds(100,150,200,30); //Se define la posición del botón en la ventana
add(boton1); // Se agrega el botón a la ventana o JFrame
}
public static void main(String[] ar) {
Datos formulario1=new Datos();
formulario1.setBounds(5,10,200,150);
formulario1.setVisible(true);
formulario1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
Lo cual nos creará una ventana de este estilo:
(Nota explicativa: En la imagen se observa una ventana del sistema operativo Windows con fondo
gris, un botón con el texto “cerrar aplicación” y controles de minimizar, maximizar y cerrar)
En Swing, en el momento en que un usuario realiza una interacción con la aplicación, se ejecuta un evento. Para que un
determinado componente pueda realizar una acción de respuesta a esta interacción, se debe definir un “escuchador” o
listener con al menos un método específico que se ejecutará al activarse un evento determinado
Las siguientes instrucciones crean un botón que una vez el usuario oprime, se imprime un mensaje en la consola:
•En una ventana de una altura de 150 pixeles y un ancho de 200 pixeles crear una etiqueta llamada “Nuevo Título”.
•En frente de la etiqueta hay un campo de entrada de datos para recibir datos del usuario.
•Debajo de la etiqueta y el campo de entrada de datos un botón con el texto “Cambiar título de la ventana”. Asegúrese que el
texto pueda leerse en el botón
•Cuando el botón se pulse el nombre de la ventana debe cambiar al ingresado por el usuario en el campo de entrada de datos.
Se debe ver de la siguiente manera:
(Nota explicativa: En la imagen se observa una ventana del sistema operativo Windows con fondo gris, un botón con
el texto “cambiar título de la ventana”, un cuadro de texto y una etiqueta.)
Finalmente, podemos utilizar todos los componentes para crear esa interfaz gráfica simple:
import javax.swing.*;
import java.awt.event.*;
Modelo Vista
Controlador
De allí que su nombre sea
M(Modelo)V(Vista)C(Controlador).
El modelo es la representación de la lógica de toda la aplicación.
Modelo Validaciones, consultas y gestión del acceso a la base de datos, son
ejecutados por el modelo. Se conoce como la lógica del negocio
Base de datos relacional: Los tipos de bases relacionales se caracterizan por almacenar datos que están relacionados entre sí y
proporcionan puntos de acceso para su consulta. Además su diseño está basado en la representación en tablas, que mediante un
modelo relacional, muestra de forma intuitiva y directa la representación de sus datos.
(Nota explicativa: se muestra en la figura, un ejemplo de la representación de una base de datos
con tablas relacionadas )
En una base de datos relacional sus registros o tuplas son identificados por una o varias claves
de acceso para encontrar un registro específico para modificarlo, consultarlo o eliminarlo.
(Nota explicativa: se muestra en la figura, un ejemplo de 3 tablas relacionadas con los datos de un
empleado y su relación con los datos de nóminas y vacaciones )
Existen diferentes tipos de datos para almacenar en las bases de datos, pero centraremos la atención en los siguientes
permitidos para Sqlite, que será nuestro sistema de gestión de base de datos:
CHARACTER(20)
VARCHAR(255)
VARYING CHARACTER(255)
NCHAR(55)
NATIVE CHARACTER(70)
NVARCHAR(100)
TEXT
CLOB
REAL
DOUBLE
DOUBLE PRECISION
FLOAT
NUMERIC
DECIMAL(10,5)
BOOLEAN
DATE
DATETIME
tomado de https://www.sqlite.org/datatype3.html
Los motores de base de datos y los sistemas gestores, están estrechamente relacionados, esto debido a que el motor de base de
datos es el componente de software principal para que un sistema de gestión logre realizar operaciones de creación , lectura,
actualización y eliminación de datos; lo que se conoce como un CRUD, proveniente de las iniciales de las palabras Create, Read,
Update y Delete
(Nota explicativa ; Se muestran en la imágen algunos de los principales sistemas de
gestión de bases de datos, Oracle,SQL Server, MySQL, Cassandra y postgreSQL)
(Nota explicativa: En la imagen se muestran algunos de los software para administración de
bases de datos , DBeaver, DB Browser,MySQL Workbench, con phpMyAdmin)
Para el desarrollo de este ciclo, utilizaremos SQLite que es un sistema de gestión de bases de datos liviano y que no demanda
mayor dificultad para utilizar debido a que es compatible con las características ACID (Atomicidad, Consistencia, Aislamiento,
Durabilidad), y que basa su funcionamiento en acceso a una base de datos tipo archivo portable, ideal para aplicaciones que no
requieran un proceso independiente para comunicarse con el programa principal .
Para este ciclo, la única herramienta que debemos instalar es DB Browser for SQLite, la cual puede ser descargada en el siguiente
enlace:
https://sqlitebrowser.org/
Este lenguaje proporcionado por el sistema de gestión de datos facilita comandos SQL, que principalmente son utilizados por los
administradores de bases de datos para gestionar operaciones como:
url = "jdbc:sqlite:demo1.db";
try {
// Realizar la conexion
con = DriverManager.getConnection(url);
if (con != null) {
DatabaseMetaData meta = con.getMetaData();
System.out.println("Base de datos conectada " + meta.getDriverName());
}
} catch (SQLException ex) {
System.out.println(ex.getMessage());
}
}
//Retornar la conexin
public Connection getConnection() {
return con;
}
//Cerrar la conexin
public void closeConnection(Connection con) {
if (con != null) {
try {
con.close();
} catch (SQLException ex) {
Logger.getLogger(ConexionBD.class.getName()).log(Level.SEVERE, null, ex);
}
}
}
<dependencies>
<dependency>
<groupId>org.xerial</groupId>
<artifactId>sqlite-jdbc</artifactId>
<version>3.8.7</version>
</dependency>
</dependencies>
Una prueba unitaria, es una forma de comprobar el funcionamiento específico de una unidad de código. y para nuestro ejercicio práctico
en este ciclo, apoyaremos esta tarea mediante la herramienta coderunner dispuesta en el aula virtual de aprendizaje.
https://www.sqlite.org/datatype3.html
https://www.oracle.com/co/database/what-is-a-relational-database/
https://www.w3schools.com/sql/default.asp