Taller de programacin I

Taller de Programacin I
Semana VI

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

1

Taller de programacin I

Indice

Indice
I

Unidad 2: Diseo de interfaces grficas Utilizando Swing

03

II Aprendizajes esperados

03

III Controles de interfaz grfica en profundidad.

04

IV Resumen de la Semana

18

18

JTextField.
JcheckBox
JRadioButton:
Jlist y JComboBox:

Sinopsis de la prxima clase

04
10
11
14

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

2

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Unidad 2: Diseo de interfaces grficas Utilizando Swing

Aprendizajes esperados
2.1

Maneja Interfaces grficas con Swing para la creacin de formularios

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

03

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Controles de interfaz grfica en profundidad.

La clase pasada terminamos de ver la forma de trabajar con las caractersticas comunes para los controles y con algunos eventos para cada uno de
ellos. Ahora lo que vamos a hacer es ver en la prctica cmo se puede sacar ms partido a las interfaces.

JTextField.
Este control permite obtener informacin por parte del usuario, toda la informacin que el usuario ingrese se puede obtener invocando al mtodo
getText del control.

Este control posee muchas propiedades que podemos utilizar para crear una mejor experiencia de usuario, por ejemplo la propiedad text la podemos modificar des de el panel de propiedades de para hacer que el control aparezca sin texto al iniciar la aplicacin, como muestra la siguiente
imagen:

Con esta modificacin nuestro control aparecer sin contenido.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

04

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Otra propiedad que podemos modificar es la propiedad toolTipText , con esta propiedad podemos definir un texto informativo que aparecer
cuando el usuario pase el mouse sobre el control.

Modificando esta propiedad el control luego desplegar un cuadro informativo cuando posiciones el mouse encima de la siguiente forma:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

05

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Otra propiedad que debes tener en cuenta es la propiedad columns la cual permite definir la cantidad de caracteres que sern visibles en el
control, esto es muy importante pues bajo ciertas condiciones el control se puede hacer ms grande o ms pequeo modificando el layout del
formulario.

Ten en cuenta que esta propiedad no limita la cantidad de caracteres que admite el control slo el tamao del control cuando se dibuje.
Los controles JTextField soportan el ingreso de datos por parte del usuario por lo tanto es muy importante el entregarle la mayor cantidad de
informacin posible cuando este comete un error, para lograr esto se pueden desarrollar 2 mtodos, una forma es validar el contenido campo a
campo al momento de ingresar los datos y la otra es validar a nivel del formulario vale decir cuando el usuario presiona el botn para guardar. La
mayora de las veces se utiliza una combinacin de los dos. Veamos un ejemplo, supongamos que tenemos la siguiente interfaz grfica:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

06

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Ac podemos realizar algunas validaciones que tienen que ver con los tipos de dato o la extensin mxima de cada control, por ejemplo sabemos
que por una restriccin del modelo de negocios el nombre no puede tener una extensin mayor de 30 caracteres, entonces lo primero es saber
cuantos caracteres ha ingresado el cliente y luego restringir el mximo a 30. Para esto es necesario realizar los siguientes pasos, estos pasos no son
la nica forma de limitar la cantidad de caracteres, pero te pueden ayudar a solucionar un problema muy comn.
Primero crearemos un listener para el evento keyTyped en el control que queremos limitar, el evento keyTyped se gatilla cuando el usuario
tipea una tecla pero esta an no se dibuja en el control.

Luego de crear el listener, agregamos el siguiente cdigo:

Si te fijas en cdigo realiza las siguientes operaciones:

1. Rescata el contenido de la caja de texto usando el mtodo getText()
2. A continuacin pregunta por el largo del texto rescatado utilizando el mtodo length()
3. Luego lo compara con un valor, en este caso 5 es decir que si el texto ingresado es mayor a 5 entonces cancela el procesamiento del evento
utilizando la instruccin evt.consume()
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
07

Taller de programacin I

Semana VI - Diseo de interfaces grficas

De esta forma puedes limitar la cantidad de contenido a ingresar en la caja de texto.

Adicionalmente puedes realizar otro tipo de validaciones utilizando otros eventos y propiedades, como por ejemplo vamos a validar que los
campos de texto no queden sin contenido, para esto cuando el control pierda el foco, vamos a preguntar por la longitud del campo, si este es 0
vamos a cambiar el color del control y vamos a cambiar la propiedad toolTipText para de esta forma indicarle grficamente al usuario que hay
un problema. A veces te puedes encontrar con la posibilidad de utilizar una ventana emergente de mensaje, pero es preferible que tu validacin
sea lo menos intrusiva posible, vamos a ver como podemos realizar al validacin.
Primero crearemos un listener para el evento focusLost.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

08

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Este evento se gatilla cuando el control pierde el foco, de esta forma lo que haremos ser verificar si el control tiene algo escrito en su interior y de
no ser as cambiaremos su color de fondo y modificaremos el mensaje que aparece asociado a su propiedad toolTipText.

De esta forma cuando el control pierde el foco, el control cambia y ahora tiene la siguiente apariencia:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

09

Taller de programacin I

Semana VI - Diseo de interfaces grficas

JcheckBox
Permite al usuario poner o sacar un ticket, este control se utiliza cuando el usuario debe decidir entre verdadero o falso.

Para modificar el valor del texto que acompaa al control lo hacemos modificando la propiedad text desde el panel de propiedades.

Adicionalmente puedes dejar uno de los elementos como seleccionado por defecto utilizando la propiedad selected.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

10

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Para poder saber si un elemento fue seleccionado, podemos preguntar por su propiedad isSelected.

JRadioButton:
Permite al usuario seleccionar slo una opcin entre un grupo de ellas.

Este control posee algunas caractersticas que es necesario conocer.

Si quieres cambiar el texto que acompaa la jRadioButton es necesario modificar la propiedad text.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

11

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Ac tambin puedes hacer que una de las opciones del formulario aparezca marcada de forma predeterminada ocupando la propiedad selected.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

12

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Ahora bien la idea de trabajar con los controles jRadioButton es la de establecer opciones que sean mutuamente excluyentes es decir que al seleccionar una las otras se desmarquen, para lograr esto debemos agregar un control llamado ButtonGroup.

Una vez agregado el control podemos asociar a cada uno de los controles a este grupo y de esta forma se comportarn de forma mutuamente
excluyentes.
Cuando necesites procesar los datos ingresados por el usuario tienes varias opciones, la primera y ms simple es preguntar uno por uno por los
elementos y preguntar por su estado isSelected

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

13

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Jlist y JComboBox:
Muestran una lista de elementos los cuales pueden aparecer desplegados o como una lista desplegable.

Lo primero que vamos a hacer es llenar la lista de elementos, para esto debemos seleccionar el control y modificar la propiedad model.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

14

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Al hacer clic sobre el botn elipsis (el que tiene los 3 puntos) se abrir un editor que permite ingresar o eliminar elementos en el modelo en
tiempo de diseo.

Ahora, tambin es posible modificar el contenido mediante cdigo para esto se necesita modificar el modelo de construccin del JComboBox
utilizando un objeto que se llama DefaultComboBoxModel, para esto lo primero que hay que hacer es importar la clase de esta forma:

A continuacin hay que crear un objeto de este tipo

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

15

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Y finalmente hay que agregar elementos al objeto y asociarlo al JComboBox

De esta forma el control JComboBox desplegar los datos agregados por cdigo.

Para lograr obtener el valor del elemento seleccionado se puede hacer ocupando el mtodo getSelectedItem() el cual devuelve el elemento
seleccionado, y luego hay que transformarlo en un valor String para poder manipularlo como en el siguiente ejemplo:

De la misma forma se trabaja con los elementos para llenar un jListBox.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

16

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Si lo que necesitas es limpiar la lista de elementos lo puedes hacer utilizando el mtodo removeAllItems()

Si lo que necesitas es eliminar slo un elemento lo puedes hacer utilizando el mtodo removeItemAt el cual requiere como parmetro el ndice
del elemento a eliminar en al lista.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

17

Taller de programacin I

Semana VI - Diseo de interfaces grficas

Resumen de la Semana
Esta semana aprendiste a trabajar con nuevos controles para dotar a tus interfaces grficas de mayores funcionalidades.

Sinopsis de la prxima clase

Aprenders a crear el flujo de un programa mediante la utilizacin de mens y otros objetos.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

18