Diseño y validacion GUI con java usando Netbeans
-
Upload
emerson-emet -
Category
Technology
-
view
2.207 -
download
6
Transcript of 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.
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
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.
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
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
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
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
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
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
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
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
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
Componente swing Propiedades
Campo de Texto : JTextField
Nombre del control editable text
1 txtId true
2 txtNombre true
3 txtApellidos true
Componente swing Propiedades
Botón de Opción : JRadioButton
Nombre del
control selected text
1 opcF false Femenino
2 opcM false Masculino
1 ButtonGroup:
grupoGenero
Componente swing Propiedades
Lista desplegable: JComboBox
Nombre del
control model
1 cmbTipoId -Seleccione-
Registro Civil
Tarjeta de Identidad
Cedula de Ciudadanía
Cedula de Extranjería
Pasaporte
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
Componente swing
(Librería externa jCalendar) Propiedades
Seleccionador de Fecha : JDateChooser
Nombre del
control dateFormatString
1 jdcNacimiento d/MM/yyyy
Componente swing Propiedades
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
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
Código del método initComponents() generado por el IDE del NetBeans, clic en el símbolo + para ver
Generated Code
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
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
Método constructor del formulario, este código hay que adicionarlo.
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
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.
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
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
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
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:
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
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
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
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.
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
6. Ahora veamos el código completo:
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
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.