Diseño y validacion GUI con java usando Netbeans

Programación Avanzada: Guía 1 - Diseño y validación de interfaz gráfica de usuario (IGU o GUI siglas del inglés)

www.slideshare.net/emergar

Las características básicas para el buen diseño de una interfaz gráfica de usuario (GUI):

1. Debe ser Intuitiva (Relativamente fáciles de aprender y utilizar)

2. Mantener una interfaz consistente en su: fuente, colores, distribución de los controles, terminología

3. Diseño ergonómico mediante el establecimiento de menús, barras de acciones e iconos de fácil acceso

4. Las operaciones serán rápidas y reversibles(que se puedan cancelar)

5. Existencia de herramientas de Ayuda y Consulta

6. Mantener informado al usuario de su estado, mensajes que le indiquen el resultado de sus acciones,

antes y después de confirmarlas.

7. Tratamiento de errores, permitiendo al usuario tomar acciones, según el manual de ayuda.



GUIA

Crear la GUI para almacenar la información de una tabla de bases de datos que va contener los registros

de asociados de una cooperativa de ahorros.

Tabla: TblAsociado Identificación: Entero Largo

TipoID: { R.C., T.I., C.C., Pasaporte, C. Extranjería } Nombre: Texto

Apellidos: Texto Género: { Femenino, Masculino }

Nacimiento: Fecha

De la tabla anterior se deduce que los campos Identificación, Nombre y Apellidos deben solicitarse con

una caja de texto (JTextField) que permita capturar las diferentes posibilidades, ya que existen muchas

identificaciones, nombres y apellidos diferentes que pueden digitarse.

El tipo de identificación se sugiere solicitarlo con una lista desplegable (JComboBox) para que el usuario

seleccione una.

El género solo tiene dos posibilidades, por lo cual dos botones de opción (JRadioButton) son adecuados.

Para la fecha de nacimiento se puede utilizar un control de fecha (JDateChooser) de la librería JCalendar.



Detallado de los elementos o controles que contiene la interfaz.

1. 6 etiquetas – JLabel

2. 3 Cajas de texto – JTexField

3. 2 botones de opción – JRadioButton

4. Un grupo de botones – ButtonGroup este no se muestra en el interfaz y es el encargado de que los

botones de opción que se le agreguen, solo sea posible seleccionar uno.

5. 5 Botones de acción – JButton

6. Una lista desplegable – JComboBox

7. Un seleccionador de fecha – JDateChooser

Ahora vamos a crear lo anterior utilizando el IDE NetBeans

1. Acceder a NetBeans,

al menú Archivo

clic en Proyecto Nuevo…

escoger en Categorías Java y en Proyectos la opción Java Aplicacion

clic en el botón Siguiente



2. Llenar los datos del proyecto:

Nombre del proyecto: PrjCooperativa

Ubicación del Proyecto: Por defecto o donde queramos colocar nuestros proyectos de NetBeans

Crear clase principal: pckcooperativa.Controlador

Clic en el botón Terminar



3. Agregar un JFrame al paquete pckcooperativa, para crear la GUI planteada:

Nombre de la clase: FrmAsociado

Paquete: pckcooperativa

Clic en el botón Terminar



Adicionamos los controles con los siguientes nombres y propiedades.

(JFrame)

Formulario Propiedades

Principal title resizable layout Código / Normas sobre el

tamaño de los formularios

Formulario donde

está la IGU

COOPERATIVA / REGISTRO

DE ASOCIADOS false

null Generar código para cambiar

el tamaño



Componente swing Propiedades

Campo de Texto : JTextField

Nombre del control editable text

1 txtId true

2 txtNombre true

3 txtApellidos true


Botón de Opción : JRadioButton

Nombre del

control selected text

1 opcF false Femenino

2 opcM false Masculino

1 ButtonGroup:

grupoGenero


Lista desplegable: JComboBox

Nombre del

control model

1 cmbTipoId -Seleccione-

Registro Civil

Tarjeta de Identidad

Cedula de Ciudadanía

Cedula de Extranjería

Pasaporte



Componente swing

(Librería externa jCalendar) Propiedades

Seleccionador de Fecha : JDateChooser

Nombre del

control dateFormatString

1 jdcNacimiento d/MM/yyyy


Botón de acción : JButton

Nombre del

control text

1 butBuscar “BUSCAR”

2 butGuardar “GUARDAR”

3 butActualizar “ACTUALIZAR”

4 butLimpiar “LIMPIAR”

5 butCerrar “CERRAR”

La construcción de la GUI es muy fácil con el IDE NetBeans, solo necesita ir seleccionado el control que quiere

agregar al formulario, con un clic selecciona al elemento que está en la paleta de controles del NetBeans y se deja

en el formulario en la posición que se requiera.

Controles de la librería externa jCalendar



Código del método initComponents() generado por el IDE del NetBeans, clic en el símbolo + para ver

Generated Code





Método constructor del formulario, este código hay que adicionarlo.



EVENTOS

Los eventos permiten al programa interactuar con el usuario. En java los eventos están organizados con una

jerarquía de clases dentro del paquete java.awt.event, la clase padre de los eventos es java.awt.Event

Para este guía se trabajara el evento clic del botón.

VALIDACION

La validación de datos hace referencia a verificar, controlar o filtrar cada una de las entradas de datos que

provienen desde el exterior del sistema. Si el dato es correcto, es decir, si es el tipo de dato que espera el sistema, éste lo aceptará. Por el contrario si el dato es incorrecto, es decir, que no es el tipo de dato que se espera, entonces el sistema lo rechazará.

Para esta guía tendremos varios tipos de validación reunidos en una misma clase, para su posterior uso:

Validación de campo en blancos o vacío: Se da cuando el control no ha recibido ningún dato del usuario, es decir, cuando en una caja de texto no se ha digitado ningún carácter diferente a espacios en blanco.

Validación numérica: Se da cuando se pide un dato numérico (entero o real) y el dato ingresado contiene caracteres distintos a solo dígitos y signo en el caso de los enteros o en el caso de los reales solo dígitos signo y separador de decimales (,).

Validación de rango: Se da cuando un dato además de cumplir con las dos anteriores validaciones, se hace necesario que este cumpla con un rango. Ejemplos: Solo números positivos, valor Nota de un estudiante, valor en una escala de temperaturas (Celsius, Fahrenheit, Kelvin,…), edades de adultos, entre otros.

Validación por no selección: Cuando se tiene una Lista desplegable con la primera opción que diga Seleccione, o una lista normal con todas las opciones y el usuario no haya escogido una de las opciones. También con botones de opción.



Basado en las anteriores tipos de validaciones crearemos una clase general para utilizar en la GUI actual y en otros proyectos a lo largo del curso, que necesite validación.

Clase final Validar



Ahora utilizar la clase Validar para hacer la validación de los controles de un formulario, es decir, FrmAsociado

Crear un método común para mostrar mensajes gráficos sobre la ventana, esto con el fin de tener un código más corto y entendible. Para esto se debe importar la Clase JOptionPane.

Agregar el método para limpiar los controles.

Construir otro método para manejar la validación de los controles del JFrame FrmAsociado Teniendo en cuenta las siguientes consideraciones:



La estructura del método (función) que validara todos los campos de la GUI:

Se puede notar que este método retorna un valor lógico (boolean) y recibe 3 tres parámetros, que son los contenidos de las cajas de texto. Al final del método se retorna verdadero (true) porque llegado a ese punto se ha debido validar todos los campos y por ende han cumplido con la validación ya que retorna falso (false) en el momento que encuentre que un campo no cumple con la verificación. Ahora empecemos agregar los códigos necesarios para hacer la verificación de los campos. 1. Validar que los campos no estén vacíos o con solo espacios en blanco.

Hacer lo mismo con los campos Nombre y Apellidos



2. Verificar los datos numéricos, en este caso la identificación del asociado.

3. Luego de haber verificado que la identificación tienen un numero entero, se debe validar que ese valor este en el rango para las identificación actualmente en Colombia.

4. También se deben validar la lista desplegable con los tipos de identificación y los botones de opción con el género:

5. Por ultimo queda validar el ingreso de la fecha de nacimiento.



6. Ahora veamos el código completo:



7. Luego utilizar el evento de un botón de acción, para este caso será el Guardar, se hace

doble clic sobre el botón en el panel de diseño de GUI de NetBeans y aparecerá:

Dentro de este método que se ejecutara al dar clic sobre el botón guardar se escribirá el siguiente código para que valide la GUI, usando la función validación hecha anteriormente.

Como podemos notar, lo primero es obtener los datos almacenados en las cajas de texto de la GUI y después pasarlos como parámetros a la función validación para que en caso de obtener una repuesta verdadera(true) se muestre el mensaje indicando que los datos están correctamente validados.

Ahora solo queda indicar en la clase Controlador que se ejecute una instancia de la GUI FrmAsociado al iniciar el proyecto.

Observando el método main del formulario JFrame FrmAsocido

Se debe copiar el código que aparece encerrado y pegarlo al método main de la clase Controlador, para que ejecute al momento de iniciar el proyecto una instancia de la GUI FrmAsociado.

Technology

Diseño y validacion GUI con java usando Netbeans