Java Material

Programación Avanzada: Guía 1 - Diseño y validación de interfaz gráfica de usuario (IGU o GUI siglas del inglés)
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.
www.slideshare.net/emergar
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)
Propiedades
Formulario
layout Código / Normas sobre el

Principal title resizable
tamaño de los formularios
Formulario donde COOPERATIVA / REGISTRO null Generar código para cambiar

false
está la IGU DE ASOCIADOS 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
selected text
control
1 opcF false Femenino
2 opcM false Masculino
1 ButtonGroup: grupoGenero
Lista desplegable: JComboBox

Nombre del
model
control
1 cmbTipoId -Seleccione-
Registro Civil
Tarjeta de Identidad
Cedula de Ciudadanía
Cedula de Extranjería
Pasaporte
Componente swing
Propiedades
(Librería externa jCalendar)
Seleccionador de Fecha : JDateChooser

Nombre del
dateFormatString
control
1 jdcNacimiento d/MM/yyyy
Botón de acción : JButton

Nombre del
text
control
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.

Java Material

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Java Material

Caricato da

Copyright:

Formati disponibili

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

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

Detallado de los elementos o controles que contiene la interfaz.

3. 2 botones de opción – JRadioButton

5. 5 Botones de acción – JButton

7. Un seleccionador de fecha – JDateChooser

Ahora vamos a crear lo anterior utilizando el IDE NetBeans

2. Llenar los datos del proyecto:

 Nombre del proyecto: PrjCooperativa

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

 Nombre de la clase: FrmAsociado

Adicionamos los controles con los siguientes nombres y propiedades.

layout Código / Normas sobre el

Formulario donde COOPERATIVA / REGISTRO null Generar código para cambiar

Componente swing Propiedades

Campo de Texto : JTextField

Componente swing Propiedades

Botón de Opción : JRadioButton

1 opcF false Femenino

2 opcM false Masculino

Componente swing Propiedades

Lista desplegable: JComboBox

Seleccionador de Fecha : JDateChooser

Componente swing Propiedades

Botón de acción : JButton

Controles de la librería externa jCalendar

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

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

 Validación de campo en blancos o vacío:

Clase final Validar

 Agregar el método para limpiar los controles.

Hacer lo mismo con los campos Nombre y Apellidos

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

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

6. Ahora veamos el código completo:

Observando el método main del formulario JFrame FrmAsocido

Potrebbero piacerti anche