Taller de programacin I

1

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Taller de Programacin I
Semana V
Taller de programacin I
2
Indice
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Indice
I Unidad 2: Diseo de interfaces grfcas Utilizando Swing 03
II Aprendizajes esperados 03
III Programacin con interfaces grfcas. 04
JTextField. 13
JtextArea. 13
JpasswordField. 14
JLabel. 14
JcheckBox 14
JRadioButton: 14
Jlist: 14
JComboBox: 15
JMenu: 15
IV Trabajando con eventos y propiedades comunes. 16
V Resumen de la Semana 20
VI Sinopsis de la prxima clase 20
Taller de programacin I
03
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Unidad 2: Diseo de interfaces grfcas Utilizando Swing
Aprendizajes esperados
2.1 Maneja Interfaces grfcas con Swing para la creacin de formularios
Taller de programacin I
04
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Programacin con interfaces grfcas.
En java existe una enorme cantidad de APIs (clases) que nos permiten trabajar con interfaces grfcas, este conjunto de clases se conoce como
swing, esta tecnologa es el remplazo de AWT. AWT tambin es un conjunto de clases que permite crear ventanas, botones, cajas de texto entre
otros controles que permiten crear interfaces grfcas, sin embargo la radical diferencia entre SWING y AWT est en que SWING agrega varios
comportamientos ms a sus clases, pudiendo as crear objetos muchos ms funcionales, adems internamente la forma en la que las clases se
crean son tambin distintas, en AWT cuando se instanciaba una clase que crease por ejemplo un botn, esta tena la instruccin de pedirle al
sistema operativo que la dibujase, creando una dependencia del sistema operativo sobre el cual trabaja el programa, la versin de SWING en
cambio realiza una mejora importante, logrando separar el sistema operativo de la interfaz, de esta forma el cdigo realizado con Swing funciona
sobre cualquier sistema operativo que exista. Cuando pensamos en aplicaciones con interfaces grafcas debemos conocer y entender muy bien el
concepto de evento, para que te hagas una idea de lo que un evento es, te puedo adelantar que se produce cada vez que un usuario presiona un
botn o cambia escribe en una caja de texto, aunque te cuento tambin que no slo los usuarios producen eventos, existen tambin eventos que
se producen debido a la ejecucin de comportamientos del cdigo.
Un evento est asociado al cambio de estado de un control, por ejemplo, en el teclado de tu computador, las teclas se encuentran por defecto en
un estado de reposo y seguirn as hasta que alguna fuerza se aplique sobre ellos, cuando presiones una tecla, notars que estado de la tecla
ha cambiado, dando paso a la generacin de varios eventos, el primer evento ser tecla bajando, despus tecla mantenida abajo y luego
tecla subiendo hasta llegar otra vez al estado de reposo, en programacin los eventos son tienen las caractersticas que pueden ser programa-
dos, por ejemplo, un botn que se presenta , los eventos son simulares a los de la tecla, siendo el ms famoso el evento que se ejecuta cuando el
usuario presiona el botn, en el que se suele programar alguna operacin en particular.
En java los eventos funcionan de la siguiente manera, cuando un control genera un evento, por ejemplo presionar un botn, hacer scroll sobre una
barra de desplazamiento o mover el mouse sobre una imagen provoca que el control empaquete toda la informacin que tenga relacin con el
evento y es enviada a un event Listener o conocido como manejador de eventos, con la notifcacin de que un evento ha ocurrido el mane-
jador ejecuta el comportamiento programado.
Cuando la informacin es empaquetada, lo que se pasa al manejador es un objeto, el cual contiene toda la informacin del evento ocurrido,
el listener asociado al evento siempre tendr su nombre referente al evento ocurrido, por ejemplo un evento que ha generado el mouse se
llamar mouseListener. La siguiente tabla muestra eventos y los controles que lo producen:
Taller de programacin I
05
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

Taller de programacin I
06
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Crear una ventana es mucho ms sencillo de lo que crees debido a que la mayora los controles y la forma en que se dibujan y se comportan ya
estn diseados en Java, todas estas clases se encuentran dentro del package javax.swing (javax viene de java extendido), por ejemplo, cuando
deseas crear una ventana Jframe desde ahora en adelante, basta con crear una clase cualquiera, la cual hereda de la clase Jframe, esto permitir
que la clase herede toda la funcionalidad necesaria para comportarse como tal.

Una vez la clase hereda de JFrame bastar con instanciar la clase desde main, para verifcar que esta se comporta como una ventana gracias a la
herencia realizada.

Taller de programacin I
07
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
En este caso, el objeto es creado y luego mediante su comportamiento setSize se asigna su ancho (800) y largo (600), una vez las dimensiones
han sido especifcada la ventana se pone visible entregando true a setVisible. Una imagen como esta aparecer en su pantalla.

Un Jframe es un objeto en el cual podemos agregar todos los controles que deseamos (botones, cajas de textos, scrolls, etc.) sin embargo la forma
en la que se redibuja en Jframe no es tan efciente como lo hace el objeto Jpanel, por ello lo ms frecuente es agregar un Jpanel sobre el Jframe y
sobre l agregar los controles que necesitemos:

Taller de programacin I
08
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
El cdigo anterior por ejemplo agrega un comportamiento llamado agregarPanel(), en l se crea un objeto de tipo Jpanel, el cual se agrega a
Miventana, luego se establece el tamao, el cual es en este caso el mismo que el de la ventana, por ltimo, se establece su color en rojo.
La siguiente imagen muestra el resultado de la ejecucin:

Existen un objeto el cual es el encargado de posicionar los elementos dentro de la ventana, este objeto recibe el nombre de layout, existen varios
tipos de layout, entre los cuales debes seleccionar el que ms se acomode a lo que deseas lograr.
1. Null: permite posicionar elementos sin ayuda de ningn tipo, es decir no hay alineamiento u otras ayudas, el programador decide la posicin
exacta que necesita para el control.
2. Flow: ordena los elementos en fla (uno al lado del otro) siempre y cuando quepan en la ventana actual.
3. Box: permita posicionar elementos de forma horizontal y vertical.
4. Border: los elementos son posicionados pegados a la derecha, izquierda arriba, abajo o al centro.
5. Grid: permite posicionar los elementos como si se tratase de una matriz.
6. Card: hace que el control ocupe el mayor espacio posible (slo una vez visible).
Taller de programacin I
09
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Antes de continuar es importante que aprendas a utilizar alguna IDE de desarrollo para la creacin de interfaces grfcas de usuario, estas
permiten hacer el proceso inverso, es decir primero se dibuja y a partir de lo que se desea lograr se genera el cdigo necesario, as como tambin
permite asociar y codifcar los eventos a cada uno de los controles, veamos cmo realizar lo que hemos hecho hasta ahora utilizando una IDE.

Taller de programacin I
10
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Nota que utilizando NetBeans puedes agregar un objeto de tipo Jframe, al hacerlo vers como la venta es de forma inmediata mostrada, de esta
forma ayuda al programador a extraerse del cdigo que genera esta interfaz, as hay ms tiempo para la productividad.
La siguiente imagen muestra como luce una ventana agregada con NetBeans

Taller de programacin I
11
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Cuando se est trabajando de esta forma se le suele llamar tiempo de diseo. Desde aqu puedes agregar de forma visual botones, cajas te
texto, etc. A la izquierda de la ventana aparecer una ventana que luce de la siguiente forma:

Desde esta ventana puedes seleccionar los controles que deseas agregar, para hacerlo basta con arrastrarlos hasta la ventana.

Taller de programacin I
12
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Incluso una vez estn los controles posicionados en la ventana puedes cambiar sus atributos, ya que los controles son en realidad instancias de
una clase y por ello tienen atributos, por ejemplo, el botn es un objeto que proviene de la clase Jbutton.
Es importante que comprendas que esto no es magia y que hay cdigo que se est generando, para que cuando comience el programa dibuje lo
mismo que has realizado en tiempo de diseo, el cdigo en cuestin puede verse cambiando la vista de diseo a cdigo.

La siguiente imagen muestra parte del cdigo que es auto generado por NetBeans:

Cada vez que agregas un control el objeto recibe un nombre por defecto, el cual se genera basndose en su tipo y un nmero, por ejemplo jBut-
ton1, si agregas otro ser jButton2, es recomendable cambiar los nombres ya que en determinado momento querrs referirte a ellos por cdigo y
no podrs recordar cual es cual, por suerte no necesitas ir al cdigo auto generado, basta con presionar el botn derecho sobre el control y selec-
cionar la opcin cambiar nombre de variable.

Es recomendable que para que puedas distinguir el tipo de los objetos luego utilices las tres primeras letras del tipo y un nombre descriptivo, por
ejemplo btnSalir, lo cual asume un botn que permite salir de la ventana actual.
Taller de programacin I
13
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
As como puedes cambiar el nombre de las variables, tambin es posible cambiar los atributos del objeto en tiempo de diseo, la ventana de
propiedades muestra una lista con todos los atributos que un objeto tiene, la siguiente imagen muestra las propiedades ms importante para un
objeto de tipo Jbutton.

Dnde:
Background: permite seleccionar el color de fondo.
Font: la fuente con la que se dibuja el texto.
Foreground: el color de la fuente
Icon: el cono que acompaar al texto.
Mnemonic: combinacin de teclas asociadas al control.
Text: permite establecer el texto que mostrar el control.
tooltipText: texto de ayuda que se mostrar al posicionar el mouse sobre el control.

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.

JtextArea.
Este control es muy similar al textField, la diferencia radica en que permite al usuario escribir texto en ms de una lnea.

Taller de programacin I
14
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
JpasswordField.
Permite al usuario escribir texto en una sola lnea, la diferencia est en que los caracteres escritos son remplazados por otro carcter con e l fn de
ocultar lo que escribe.

JLabel.
Es uno de los controles ms simples, este control presenta un texto, el que se suele utilizar para mostrar informacin al usuario.

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

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

Jlist:
Muestra seleccionar uno o varios elementos de lista de elementos.
Taller de programacin I
15
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
JComboBox:
Permite seleccionar slo un elemento desde una lista desplegable.

JMenu:
Permite agregar un men a nuestro Jframe, un men es una coleccin de controles agrupados de forma horizontal en la parte superior de la
venta, un men est compuesto de labels, checkBoxs y radiobuttn.
El elemento MenuItem corresponde al elemento que vemos a diario en todos los software el cual muestra una lista de acciones que podemos
realizar, siendo el ms popular el elemento que aparece de los primeros en el men como Archivo.


Taller de programacin I
16
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Trabajando con eventos y propiedades comunes.
Puedes dar vida a los controles agregando cierta funcionalidad, esto se puede lograr agregando rutinas de programacin a la respuesta de algn
evento, por ejemplo podemos hacer que algn texto cambie o se genere algn tipo de clculo cuando el usuario realiza alguna accin sobre un
control.
Comenzaremos a trabajar con el control botn, sin embargo muchos de los eventos que aqu aprenders son comunes para todos los controles, as
que parte de lo aprendido aqu te servir para el resto de ellos.
Agreguemos un botn con el texto y nombre como muestre la imagen.

Una vez realizado presione el botn derecho del mouse para ver una lista de eventos:

Taller de programacin I
17
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Los eventos se encuentran agrupados como muestra la imagen anterior, comenzaremos aprendiendo los comunes, dirjase a mouse, all encontra-
rs 5 eventos:

mouseClicked: ocurre cada vez que el usuario hace clic sobre el control del mouse.
nouseEntered: ocurre cuando el mouse entra al control.
mouseExited: ocurre cuando el mouse sale.
mousePressed:ocurre cuando el usuario presiona cualquier botn del mouse sobre el botn.
mouseReleased:ocurre cuando un botn se suelta estando sobre el control.
Vamos codifcar el evento mouse pressed, ntese que al seleccionarse de forma automtica se agrega el evento que responder cada vez que este
evento ocurra:

Taller de programacin I
18
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Una de las caractersticas ms signifcativas en los eventos, es que el comportamiento que se ejecutar no se codifca dentro del objeto que lo
produce, sino dentro del que lo contiene, esto tiene una ventaja signifcativa, dado que el evento al crea en la ventana y esta a su vez tiene una
colaboracin con el resto de los controles, de esta forma la ejecucin de un control es capaz de alterar los atributos y estados de otros controles,
vemoslo con un ejemplo:

En el cdigo que muestra la imagen anterior, la palabra this no hace referencia al botn sino a la clase MiVentana y mediante setTitle cambiare-
mos el ttulo.
La siguiente imagen ilustra lo que sucede al presionar el botn:

Vamos a repetir la accin, pero esta vez cambiaremos el texto de una etiqueta, para ello agregamos un jLabel a nuestra ventana, cambiamos su
texto y nombre de variable como muestra la imagen:

Luego cambiamos el cdigo de nuestro evento de la siguiente forma:

Taller de programacin I
19
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
De esta forma mediante setText cambiamos el texto al label, siendo este el resultado:

Es importante que conozcas que cada evento que generes contiene adems informacin con respecto al evento, al principio de este captulo se
mencion que al producir el evento de un control este empaqueta toda la informacin asociada, dicha informacin es recibida como un objeto
entre los parmetros que recibe el evento donde el tipo de objeto depender del tipo de evento.
Por ejemplo, MouseEvent tiene relacin con los eventos del mouse KeyEvent con los del teclado, FocusEvent cuando el objeto recibe o pierde el
foco.
El foco en informtica es cuando un control se encuentra seleccionado, por ejemplo cuando tienes dos ventanas slo una estar marcada como
activa y la otra en segundo plano, entonces la ventana activa es la que tiene el foco, cuando cambies a la otra ventana, la que estaba activa
ejecutar el evento de perdida de foco. Pasando el foco a la ventana antes inactiva, esta condicin se da entre ventanas o cualquier otro capaz de
tener foco.
Por ejemplo, nuestro mtodo recibe un objeto de tipo MouseEvent, en l se encuentra la informacin asociada al evento, dado que el evento que
programamos es MousePressed podemos obtener del objeto recibido datos como qu botn del mouse presion o en qu coordenada X o Y del
objeto presiono, en el siguiente ejemplo slo si presiona el botn derecho se muestra la coordenada en la que el mouse hizo clic sobre el botn.

Como puedes ver del objeto evt de tipo MouseEvent se puede obtener tanto el botn (en este caso el 3) como la coordenada X.
Taller de programacin I
20
Semana V - Diseo de interfaces grfcas
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
Esta semana aprendiste a desarrollar aplicaciones que permiten la interaccin con el usuario mediante una interfaz grfca.
Resumen de la Semana
Sinopsis de la prxima clase
Aprenders a trabajar con nuevos controles para dotar a tus interfaces grfcas de mayores funcionalidades.