Taller de programacin I

Taller de Programacin I
Semana V Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
1

Taller de programacin I

Indice

Indice
I II Unidad 2: Diseo de interfaces grficas Utilizando Swing Aprendizajes esperados
JTextField. JtextArea. JpasswordField. JLabel. JcheckBox JRadioButton: Jlist: JComboBox: JMenu:

03 03 04
13 13 14 14 14 14 14 15 15

III Programacin con interfaces grficas.

IV Trabajando con eventos y propiedades comunes. V Resumen de la Semana

16 20 20

VI Sinopsis de la prxima clase

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

2

Taller de programacin I

Semana V - 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 V - Diseo de interfaces grficas

Programacin con interfaces grficas.

En java existe una enorme cantidad de APIs (clases) que nos permiten trabajar con interfaces grficas, 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 grficas, 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 graficas 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 programados, 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 notificacin de que un evento ha ocurrido el manejador 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:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

04

Taller de programacin I

Semana V - Diseo de interfaces grficas

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

05

Taller de programacin I

Semana V - Diseo de interfaces grficas

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 verificar que esta se comporta como una ventana gracias a la herencia realizada.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

06

Taller de programacin I

Semana V - Diseo de interfaces grficas

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 especificada 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 eficiente 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:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

07

Taller de programacin I

Semana V - Diseo de interfaces grficas

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 fila (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).

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

08

Taller de programacin I

Semana V - Diseo de interfaces grficas

Antes de continuar es importante que aprendas a utilizar alguna IDE de desarrollo para la creacin de interfaces grficas 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 codificar los eventos a cada uno de los controles, veamos cmo realizar lo que hemos hecho hasta ahora utilizando una IDE.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

09

Taller de programacin I

Semana V - Diseo de interfaces grficas

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

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

10

Taller de programacin I

Semana V - Diseo de interfaces grficas

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.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

11

Taller de programacin I

Semana V - Diseo de interfaces grficas

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 jButton1, 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 seleccionar 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.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

12

Taller de programacin I

Semana V - Diseo de interfaces grficas

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.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

13

Taller de programacin I

Semana V - Diseo de interfaces grficas

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 fin 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.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

14

Taller de programacin I

Semana V - Diseo de interfaces grficas

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.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

15

Taller de programacin I

Semana V - Diseo de interfaces grficas

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:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

16

Taller de programacin I

Semana V - Diseo de interfaces grficas

Los eventos se encuentran agrupados como muestra la imagen anterior, comenzaremos aprendiendo los comunes, dirjase a mouse, all encontrars 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 codificar el evento mouse pressed, ntese que al seleccionarse de forma automtica se agrega el evento que responder cada vez que este evento ocurra:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

17

Taller de programacin I

Semana V - Diseo de interfaces grficas

Una de las caractersticas ms significativas en los eventos, es que el comportamiento que se ejecutar no se codifica dentro del objeto que lo produce, sino dentro del que lo contiene, esto tiene una ventaja significativa, 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 cambiaremos 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:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

18

Taller de programacin I

Semana V - Diseo de interfaces grficas

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.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

19

Taller de programacin I

Semana V - Diseo de interfaces grficas

Resumen de la Semana
Esta semana aprendiste a desarrollar aplicaciones que permiten la interaccin con el usuario mediante una interfaz grfica.

Sinopsis de la prxima clase

Aprenders a trabajar con nuevos controles para dotar a tus interfaces grficas de mayores funcionalidades.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

20