Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf ·...

12
Consideración en el diseño de una GUI: Debe ser intuitiva Definir los modos de interacción: Flexibles y adecuados Dar opciones de interrumpir una acción, volver a ejecutar una acción Pasos repetidos: macros Mantener una interfaz consistente fuente, colores, distribución de los controles, terminología Navegabilidad entre interfaces, volver atrás o regresar al principal Facilidades de ayuda Categorización de las funciones Creemos una GUI para la siguiente tabla de la base de datos. Nino Documento Nombre Apellido Sexo Grado El documento, el nombre y el apellido deben pedirse con cajas de textos (jTextField) porque tienen posibilidades infinitas. Ejemplo: preguntémonos cuantos nombres existen o cuantos documentos o cuantos apellido, la respuestas seria que existen muchísimos. El sexo se siguiere pedirlo con botones de opción puesto que son solo dos opciones El grado se sugiere pedirlo con lista desplegable

Transcript of Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf ·...

Page 1: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

Consideración en el diseño de una GUI:

Debe ser intuitiva

Definir los modos de interacción: Flexibles y adecuados

Dar opciones de interrumpir una acción, volver a ejecutar una acción

Pasos repetidos: macros

Mantener una interfaz consistente fuente, colores, distribución de los

controles, terminología

Navegabilidad entre interfaces, volver atrás o regresar al principal

Facilidades de ayuda

Categorización de las funciones

Creemos una GUI para la siguiente tabla de la base de datos.

Nino

Documento

Nombre

Apellido

Sexo

Grado

El documento, el nombre y el apellido deben pedirse con cajas de textos

(jTextField) porque tienen posibilidades infinitas. Ejemplo: preguntémonos

cuantos nombres existen o cuantos documentos o cuantos apellido, la

respuestas seria que existen muchísimos.

El sexo se siguiere pedirlo con botones de opción puesto que son solo dos

opciones

El grado se sugiere pedirlo con lista desplegable

Page 2: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

Realicemos un análisis de los objetos que contiene nuestra primera GUI

7 etiquetas - jLabel

4 Cajas de Texto - jTextField

4 botones – jButton

2 botones de opción - jRadioButton

1 lista desplegable – jCheckBox

Grupo de botones - buttonGroup este no se visualiza, pero es el permite

que en los botones de opción se seleccione solo uno

Para ver funcionando nuestra primera GUI debemos programar en la clase del

proyecto (la que se creó cuando creamos el proyecto por primera vez) una

referencia un objeto de nuestra primera GUI así:

Page 3: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

Y procedemos hacer clic en para ver nuestra primer GUI funcionando.

Hasta hemos creado satisfactoriamente nuestra primer GUI pero ahora mismo

los botones no están funcionando puesto que no hemos programado ningún

evento para que se ejecute.

0.1.1 El método initComponents

El método initComponents es un método que crea “automáticamente” netbeans

y en él se encuentra todo lo creado referente por la interfaz grafica.

Para verlo nos vamos al código a través source

Aparecerá el código de nuestro clase en este caso el del la clase

MiPrimerFormulario

Y Hacemos clic en el en botón + cerca a y aparecerá la

codificación de los componentes gráficos donde podremos apreciar todo el

concepto y la importancia de POO.

Page 4: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas
Page 5: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

Podemos apreciar la creación de los 7 objetos de la clase jLabel, 4 objetos de

la clase jButton, los 3 objetos de la clase jTextField, los 2 objetos de

jRadioButton, un objeto de jComboBox y el de buttonGroup. Además podemos

ver todos los métodos que se utilizaron para crear la GUI. Todo es código

generado gracias a nuestro ide de desarrollo netbeans.

Eventos

Los eventos son todas las acciones con las cuales el usuario interactúa con la

GUI, dar clic sobre un botón, presionar las teclas del teclado, etc. Cada vez que

se produce un evento, se crea un objeto. La clase padre de los eventos es

"java.awt.event".

Cada lenguaje de programación tiene su propio modelo de eventos, en Java se

definen clases auxiliares llamadas escuchadores (listeners) que reciben

eventos específicos.

No es propósito de este modulo profundizar en este tema, se trabajará solo el

evento clic del botón.

Creación de clase de validación.

En este caso se trata de crear una clase que nos permita validar la información

de una GUI y poderla utilizar en todos los proyecto de aquí en adelante.

Existen muchas formas de validación de información en las GUI, en este

modulo las clasificaremos y seguiremos un orden.

Clasificación de validación

Validación de blancos o vacio:

Es cuando el componente no ha recibido ninguna información del

usuario.

El error ocurre cuando en una caja de texto, simplemente no ha escrito

nada, en un lista desplegables podemos dejar una primera opción que

diga seleccione y si el usuario no escoge otra, sabremos ocurrirá el error

y en un botón de opciones simplemente no ha escogido ninguna opción.

Validación numérica:

Page 6: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

Cuando en un campo se requiera una información numérica ya sea

entera o sea real ejemplo un valor, un saldo, una cantidad entre otras. El

error ocurre cuando en una caja de texto escriben algo diferente a

número, en una lista desplegable y en los botones de opciones no hay

necesidad de validar esta forma de validación.

Validación de rango

Cuando en un campo se requiere validar limites numéricos ejemplo que

el valor no sea negativo (>0). El error ocurre cuando en una caja de texto

números superando los límites propuestos, en una lista desplegable y en

los botones de opciones no hay necesidad de validar esta forma de

validación.

Page 7: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

Clase validación.

Page 8: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

Validación de los objetos gráficos de un formulario utilizando la clase de

validación creada en la sección anterior

Retomemos el ejemplo

Para la validación de cualquier GUI seguiremos los siguientes pasos

Crearemos un método que se llame Validación que reciba como

parámetros los campos a validar. en este caso 4 campos de tipo String

porque no se tiene en cuantos los botones de opción, para validarlos lo

haremos directamente dependiendo del número de ellos que este en el

grupo.

La intención de este método de “Validación” es indicar si hay error

retorna falso (false), si no hay error retornara verdadero (true), para

cuando se quiera guardar la información, en otras palabras, si hay error

no se guardará la información en la base de datos.

Creación del objeto validación.

Page 9: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

Empezar a validar campo por campo utilizando la clase validación que

ya creamos siguiendo el orden sugerido: primero validar blancos, luego

numéricos y por último rango utilizándola estructura de control si (if)

anidados. Para este ejemplo debemos validar 5 blancos, un numérico

(documento) y vamos a suponer que el documento debe ser mayor a

999.999 y menor a 1.000.000.000

Para validación de campos vacios utilizamos el método

ValidarCampoVacio de la clase validación:

Ejemplo validemos el campo documento

Para la validación de los demás campos toca utilizar IF anidados, es

decir IF dentro de IF así:

Page 10: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

Y así sucesivamente.

Para validar los botones de opciones se hará el siguiente IF:

Dentro del método validación quedaría asi;

Cuando vayamos a comparar las listas desplegables (jComboBox)

Page 11: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

El cual lo incluiremos dentro del ultimo if.

Para validación de campos numéricos utilizamos el método

ValidarNumeroEntero para numeros entero y ValidarNumeroReal

para números reales de la clase validación:

Ejemplo validemos que el campo documento sean numérico entero.

Este if se incluye dentro del último if.

Para validación de rango utilizamos el método ValidarRango de la

clase validación:

Ejemplo: validemos que el documento sea mayor a 999.999 y menor a

1.000.000.000

Este if se incluye dentro del último if.

Parte superior de Método Validación observe la estructura de los IF

Page 12: Consideración en el diseño de una GUIottsincelejo.com/blogwilson/pavanzada/validacion.pdf · generado gracias a nuestro ide de desarrollo netbeans. Eventos Los eventos son todas

Y listo hasta aquí hemos creado un método que nos valida toda la

información de la GUI de registro de niños

Probando el método de validación

Solo necesitamos llamarlo desde el evento de un botón guardar y

pasarle los parámetros necesarios que están en los componentes

gráficos así:

Y luego ejecutamos el proyecto.