Clase Swing

21
Semana X Taller de Programación I

description

Manual de Instrucciones y ejercicios para desarrollar, dentro de NetBeans.

Transcript of Clase Swing

Sem

ana

XTa

ller

de

Pro

gra

mac

ión

I

Res

um

en s

eman

a an

teri

or

Inicio 10 minutos:Resumen de la semana anterior

La semana anterior se trabajó con herencia.

Apr

endi

zaje

s es

pera

dos

10 minutos:Al término de la semana

Aprenderás a desarrollar aplicaciones que permitan lainteracción con el usuario mediante una interfaz gráfica.

Contenido:225 minutos.

Material de apoyo:2 PPT.1 Guía Práctica.1 Actividad Propuesta.1 Videotutorial.

Pro

gram

ació

n co

n In

terf

aces

Grá

ficas

Programación con interfaces gráficas.

En java existe una enorme cantidad de APIs (clases) que nos permiten trabajarcon interfaces gráficas, este conjunto de clases se conoce como swing, estatecnología es el reemplazo de de AWT. AWT también es un conjunto de clasesque permite crear ventanas, botones, cajas de texto entre otros controles quepermiten crear interfaces gráficas, sin embargo la radical diferencia entreSWING y AWT está en que SWING agrega varios comportamientos más asus clases, pudiendo así crear objetos muchos más funcionales, ademásinternamente la forma en la que las clases se crean son también distintas,en AWT cuando se instanciaba una clase que crease por ejemplo un botón,esta tenía la instrucción de pedirle al sistema operativo que la dibujase,creando una dependencia del sistema operativo sobre el cual trabaja elprograma, la versión de SWING en cambio realiza una mejora importante,logrando separar el sistema operativo de la interfaz, de esta forma el códigorealizado con Swing funciona sobre cualquier sistema operativo que exista.Cuando pensamos en aplicaciones con interfaces graficas debemos conocery entender muy bien el concepto de evento, para que te hagas una idea delo que un evento es, te puedo adelantar que se produce cada vez que unusuario presiona un botón o cambia escribe en una caja de texto, aunque tecuento también que no sólo los usuarios producen eventos, existen tambiéneventos que se producen debido a la ejecución de comportamientos delcódigo.Un evento está asociado al cambio de estado de un control, por ejemplo, enel teclado de tu computador, las teclas se encuentran por defecto en un estadode reposo y seguirán así hasta que alguna “fuerza” se aplique sobre ellos,cuando presiones una tecla, notarás que estado de la tecla ha cambiado,dando paso a la generación de varios eventos, el primer evento será “teclabajando”, después “tecla mantenida abajo” y luego “tecla subiendo” hastallegar otra vez al estado de reposo, en programación los eventos son tienenlas características que pueden ser programados, por ejemplo, un botón quese presenta , los eventos son simulares a los de la tecla, siendo el másfamoso el evento que se ejecuta cuando el usuario presiona el botón, en elque se suele programar alguna operación en particular.En java los eventos funcionan de la siguiente manera, cuando un controlgenera un evento, por ejemplo presionar un botón, hacer scroll sobre una barrade desplazamiento o mover el mouse sobre una imagen provoca que elcontrol empaquete toda la información que tenga relación con el evento y esenviada a un “event Listener” o conocido como manejador de eventos, conla notificación de que un evento ha ocurrido el manejador ejecuta elcomportamiento programado.Cuando la información es empaquetada, lo que se pasa al manejador es unobjeto, el cual contiene toda la información 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:

Pro

gram

ació

n co

n In

terf

aces

Grá

ficas

Ejercicio 01 : PropiedadesDuración: 15 minutos

1._ Confecciona un diseño que represente una calculadorabásica .2._ Distingue en tu diseño la funcionalidad que deben tener cada.

Niv

eles

de

pens

amie

nto:

CO

MP

RE

NS

IÓN

: C

onfe

ccio

nar

D

istin

guir

Act

ivid

ades

elemento de la interfaz diseñada.

Crear una ventana es mucho más sencillo de lo que crees debido a que lamayoría los controles y la forma en que se dibujan y se comportan ya estándiseñados en Java, todas estas clases se encuentran dentro del packagejavax.swing (javax viene de java extendido), por ejemplo, cuando deseascrear una ventana Jframe desde ahora en adelante, basta con crear una clasecualquiera, la cual hereda de la clase Jframe, esto permitirá que la claseherede toda la funcionalidad necesaria para comportarse como tal.

Una vez la clase hereda de JFrame bastará con instanciar la clase desdemain, para verificar que esta se comporta como una ventana gracias a laherencia realizada.

En este caso, el objeto es creado y luego mediante su comportamiento setSizese asigna su ancho (800) y largo (600), una vez las dimensiones han sidoespecificada la ventana se pone visible entregando true a setVisible. Unaimagen como esta aparecerá en su pantalla.

Pro

gram

ació

n co

n In

terf

aces

Grá

ficas

Un Jframe es un objeto en el cual podemos agregar todos los controles quedeseamos (botones, cajas de textos, scrolls, etc.) sin embargo la forma enla que se redibuja en Jframe no es tan eficiente como lo hace el objeto Jpanel,por ello lo más frecuente es agregar un Jpanel sobre el Jframe y sobre élagregar los controles que necesitemos:

El código anterior por ejemplo agrega un comportamiento llamadoagregarPanel(), en él se crea un objeto de tipo Jpanel, el cual se agrega aMiventana, luego se establece el tamaño, el cual es en este caso el mismoque el de la ventana, por último, se establece su color en rojo.La siguiente imagen muestra el resultado de la ejecución:

Existen un objeto el cual es el encargado de posicionar los elementos dentrode la ventana, este objeto recibe el nombre de layout, existen varios tipos delayout, entre los cuales debes seleccionar el que más se acomode a lo quedeseas lograr.1) Null: permite posicionar elementos sin ayuda de ningún tipo, es decirno hay alineamiento u otras ayudas, el programador decide la posición exactaque necesita para el control.2) Flow: ordena los elementos en fila (uno al lado del otro) siempre ycuando quepan en la ventana actual

Pro

gram

ació

n co

n In

terf

aces

Grá

ficas

3) Box: permita posicionar elementos de forma horizontal y vertical.4) Border: los elementos son posicionados pegados a la derecha, izquierdaarriba, 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 (sólo una vezvisible).

Antes de continuar es importante que aprendas a utilizar alguna IDE dedesarrollo para la creación de interfaces gráficas de usuario, estas permitenhacer el proceso inverso, es decir primero se dibuja y a partir de lo que sedesea lograr se genera el código necesario, así como también permite asociary codificar los eventos a cada uno de los controles, veamos cómo realizar loque hemos hecho hasta ahora utilizando una IDE.

Nota que utilizando NetBeans puedes agregar un objeto de tipo Jframe, alhacerlo verás como la venta es de forma inmediata mostrada, de esta formaayuda al programador a extraerse del código que genera esta interfaz, asíhay más tiempo para la productividad.

Pro

gram

ació

n co

n In

terf

aces

Grá

ficas

La siguiente imagen muestra como luce una ventana agregada con netbeans

Cuando se está trabajando de esta forma se le suele llamar “tiempo de diseño”.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 siguienteforma:

Pro

gram

ació

n co

n In

terf

aces

Grá

ficas

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

Incluso una vez están los controles posicionados en la ventana puedes cambiarsus atributos, ya que los controles son en realidad instancias de una clasey por ello tienen atributos, por ejemplo, el botón es un objeto que provienede la clase Jbutton.

Es importante que comprendas que esto no es magia y que hay código quese está generando, para que cuando comience el programa dibuje lo mismoque has realizado en tiempo de diseño, el código en cuestión puede versecambiando la vista de diseño a código.

La siguiente imagen muestra parte del código que es auto generado porNetBeans:

Cada vez que agregas un control el objeto recibe un nombre por defecto, el

Pro

gram

ació

n co

n In

terf

aces

Grá

ficas

cual se genera basándose en su tipo y un número, por ejemplo jButton1, siagregas otro será jButton2, es recomendable cambiar los nombres ya que endeterminado momento querrás referirte a ellos por código y no podrás recordarcual es cual, por suerte no necesitas ir al código auto generado, basta conpresionar el botón derecho sobre el control y seleccionar la opción “cambiarnombre de variable”.

Es recomendable que para que puedas distinguir el tipo de los objetos luegoutilices las tres primeras letras del tipo y un nombre descriptivo, por ejemplobtnSalir, lo cual asume un botón que permite salir de la ventana actual.

Así como puedes cambiar el nombre de las variables, también es posiblecambiar los atributos del objeto en tiempo de diseño, la ventana de propiedadesmuestra una lista con todos los atributos que un objeto tiene, la siguienteimagen muestra las propiedades más importante para un objeto de tipoJbutton.

Dónde:

• 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 acompañará al texto.• Mnemonic: combinación de teclas asociadas al control.• Text: permite establecer el texto que mostrar el control.• tooltipText: texto de ayuda que se mostrará al posicionar el mousesobre el control.

JTextField:

Este control permite obtener información por parte del usuario, toda la

Pro

gram

ació

n co

n In

terf

aces

Grá

ficas

información que el usuario provee quedará en la propiedad getText del control.

JtextArea:Este control es muy similar al textField, la diferencia radica en que permiteal usuario escribir texto en más de una línea.

JpasswordField:Permite al usuario escribir texto en una sola línea, la diferencia está en quelos caracteres escritos son reemplazados por otro carácter con el fin de ocultarlo que escribe.

JLabel:Es uno de los controles más simples, este control presenta un texto, el quese suele utilizar para mostrar información al usuario.

JcheckBoxPermite al usuario poner o sacar un ticket, este control se utiliza cuando elusuario debe decidir entre verdadero o falso.

JRadioButton:Permite al usuario seleccionar sólo una opción entre un grupo de ellas.

Pro

gram

ació

n co

n In

terf

aces

Grá

ficas

Jlist:Muestra seleccionar uno o varios elementos de lista de elementos.

JComboBox:Permite seleccionar sólo un elemento desde una lista desplegable.

JMenú:Permite agregar un menú a nuestro Jframe, un menú es una colección decontroles agrupados de forma horizontal en la parte superior de la venta, unmenú está compuesto de labels, checkBoxs y radiobuttón.El elemento MenuItem corresponde al elemento que vemos a diario en todoslos software el cual muestra una lista de acciones que podemos realizar,siendo el más popular el elemento que aparece de los primeros en el menúcomo “Archivo”.

Trabajando con eventos y propiedades comunes.

Puedes dar “vida” a los controles agregando cierta funcionalidad, esto sepuede lograr agregando rutinas de programación a la respuesta de algúnevento, por ejemplo podemos hacer que algún texto cambie o se genere algúntipo de cálculo cuando el usuario realiza alguna acción sobre un control.Comenzaremos a trabajar con el control botón, sin embargo muchos de loseventos que aquí aprenderás son comunes para todos los controles, así queparte de lo aprendido aquí te servirá para el resto de ellos.Agreguemos un botón con el texto y nombre como muestre la imagen.

Eve

ntos

y P

ropi

edad

es c

omun

es

Una vez realizado presione el botón derecho del mouse para ver una lista deeventos:

Los eventos se encuentran agrupados como muestra la imagen anterior,comenzaremos aprendiendo los comunes, diríjase a mouse, allí encontrarás5 eventos:

MouseClicked: ocurre cada vez que el usuario hace click sobre el controldel mouse.MouseEntered: ocurre cuando el mouse entra al control.

mouseExited: ocurre cuando el mouse sale.

Eve

ntos

y P

ropi

edad

es c

omun

es

MousePressed: ocurre cuando el usuario presiona cualquier botón delmouse sobre el botón.

MouseReleased: ocurre cuando un botón se suelta estando sobre el control.

Vamos codificar el evento mouse pressed, nótese que al seleccionarse deforma automática se agrega el evento que responderá cada vez que esteevento ocurra:

Una de las características más significativas en los eventos, es que elcomportamiento que se ejecutará no se codifica dentro del objeto que loproduce, 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 colaboracióncon el resto de los controles, de esta forma la ejecución de un control escapaz de alterar los atributos y estados de otros controles, veámoslo con unejemplo:

En el código que muestra la imagen anterior, la palabra this no hace referenciaal botón sino a la clase MiVentana y mediante setTitle cambiaremos el título. La siguiente imagen ilustra lo que sucede al presionar el botón:

Eve

ntos

y P

ropi

edad

es c

omun

es

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

Luego cambiamos el código de nuestro evento de la siguiente forma:

De esta forma mediante setText cambiamos el texto al label, siendo este elresultado:

Es importante que conozcas que cada evento que generes contiene ademásinformación con respecto al evento, al principio de este capítulo se mencionóque al producir el evento de un control este empaqueta toda la informaciónasociada, dicha información es recibida como un objeto entre los parámetrosque recibe el evento donde el tipo de objeto dependerá del tipo de evento.Por ejemplo, MouseEvent tiene relación con los eventos del mouse KeyEventcon los del teclado, FocusEvent cuando el objeto recibe o pierde el foco.

(Importante) el foco en informática es cuando un control se encuentraseleccionado, por ejemplo cuando tienes dos ventanas sólo una estará marcadacomo activa y la otra en segundo plano, entonces la ventana activa es la quetiene 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 condición se da entre ventanas o cualquier otro capaz de tener foco.

Por ejemplo, nuestro método recibe un objeto de tipo MouseEvent, en seencuentra la información asociada al evento, dado que el evento queprogramamos es MousePressed podemos obtener del objeto recibido datoscomo qué botón del mouse presionó o en qué coordenada X o Y del objeto

Eve

ntos

y P

ropi

edad

es c

omun

es

presiono, en el siguiente ejemplo sólo si presiona el botón derecho se muestrala coordenada en la que el mouse hizo click sobre el botón.

Como puedes ver del objeto evt de tipo MouseEvent se puede obtener tantoel botón (en este caso el 3) como la coordenada X.

La API de Swing es bastante numerosa, si deseas más información conrespecto a toda la información que se puede obtener de un evento según sutipo te recomiendo el siguiente enlace:

http://download.oracle.com/javase/tutorial/uiswing/events/index.html

Si deseas obtener una lista de todas las propiedades que puedes cambiar deun control debes consultar aquí:

http://download.oracle.com/javase/1.4.2/docs/api/javax/swing/package-summary.html.

Eve

ntos

y P

ropi

edad

es c

omun

es

Act

ivid

ades

Ejercicio 02Duración: 45 minutos

1._ REPITE los ejemplos dados en esta guía.

2._ TRANSFORMA estos ejemplos, en otros similares.

3._ Haz una DEMOSTRACIÓN de lo que son los eventos,en un mini programa creado por ti.

4._ INVESTIGA sobre los otros tipos de eventos.

5._ Haz un RESUMEN de lo aprendido en la semana.

Niv

eles

de

pens

amie

nto:

AP

LIC

AC

IÓN

: D

emos

trar

.N

ivel

es d

e pe

nsam

ient

o:A

LIS

IS:

Inve

stig

ar.

SIN

TE

SIS

: R

esum

ir.

Contenido:225 minutos.

Material de apoyo:2 PPT.1 Guía Práctica.1 Actividad Propuesta.

Niv

eles

de

pens

amie

nto:

CO

NO

CIM

IEN

TO

: R

epet

ir.C

OM

PR

EN

SIÓ

N:

Tra

nsfo

rmar

.

Cie

rre

Síntesis de la semana X: 10 minutos.

¡ Muy bien!... esta semana aprendiste a desarrollar aplicaciones

que permiten la interacción con el usuario mediante una interfaz

gráfica

Sinópsis de la próxima semana XI: 5 minutos

Aprenderás a crear el flujo de un programa mediante la utilización

de menús.

Contenido:225 minutos.

Material de apoyo:2 PPT.1 Guía Práctica.1 Actividad Propuesta.

Fin

Sem

ana

X