TP1_V_v1 (1) (1).pdf

Taller de programación I

1

© Inacap Área Informática y Telecomunicaciones todos los derechos reservados

Taller de Programación ISemana V


2

Indice


Indice

I Unidad 2: Diseño de interfaces gráficas Utilizando Swing 03

II Aprendizajes esperados 03

III Programación con interfaces gráficas. 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 próxima clase 20


03

Semana V - Diseño de interfaces gráficas


Unidad 2: Diseño de interfaces gráficas Utilizando Swing

» Aprendizajes esperados

2.1 Maneja Interfaces gráficas con Swing para la creación de formularios


04



» Programación con interfaces gráficas.

En java existe una enorme cantidad de APIs (clases) que nos permiten trabajar con interfaces gráficas, este conjunto de clases se conoce como swing, esta tecnología es el remplazo de AWT. AWT también es un conjunto de clases que permite crear ventanas, botones, cajas de texto entre otros controles que permiten crear interfaces gráficas, sin embargo la radical diferencia entre SWING y AWT está en que SWING agrega varios comportamientos más a sus clases, pudiendo así crear objetos muchos más funcionales, además internamente 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 el programa, la versión de SWING en cambio realiza una mejora importante, logrando separar el sistema operativo de la interfaz, de esta forma el código 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 botón o cambia escribe en una caja de texto, aunque te cuento también que no sólo los usuarios producen eventos, existen también eventos que se producen debido a la ejecución de comportamientos del código.

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 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á “tecla bajando”, después “tecla mantenida abajo” y luego “tecla subiendo” hasta llegar otra vez al estado de reposo, en programación los eventos son tienen las características que pueden ser programa-dos, por ejemplo, un botón que se presenta , los eventos son simulares a los de la tecla, siendo el más famoso el evento que se ejecuta cuando el usuario presiona el botón, en el que se suele programar alguna operación en particular.

En java los eventos funcionan de la siguiente manera, cuando un control genera un evento, por ejemplo presionar un botón, hacer scroll sobre una barra de desplazamiento o mover el mouse sobre una imagen provoca que el control empaquete toda la información que tenga relación con el evento y es enviada a un “event Listener” o conocido como manejador de eventos, con la notificación de que un evento ha ocurrido el mane-jador ejecuta el comportamiento programado.

Cuando la información es empaquetada, lo que se pasa al manejador es un objeto, 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:


05




06



Crear una ventana es mucho más sencillo de lo que crees debido a que la mayoría los controles y la forma en que se dibujan y se comportan ya están diseñados 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.


07



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 más frecuente es agregar un Jpanel sobre el Jframe y sobre él agregar los controles que necesitemos:


08



El código 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 tamaño, 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 ejecución:

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 más se acomode a lo que deseas lograr.1. Null: permite posicionar elementos sin ayuda de ningún tipo, es decir no hay alineamiento u otras ayudas, el programador decide la posición

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 (sólo una vez visible).


09



Antes de continuar es importante que aprendas a utilizar alguna IDE de desarrollo para la creación de interfaces gráficas 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 código necesario, así como también permite asociar y codificar los eventos a cada uno de los controles, veamos cómo realizar lo que hemos hecho hasta ahora utilizando una IDE.


10



Nota que utilizando NetBeans puedes agregar un objeto de tipo Jframe, al hacerlo verás como la venta es de forma inmediata mostrada, de esta forma ayuda al programador a extraerse del código que genera esta interfaz, así hay más tiempo para la productividad.La siguiente imagen muestra como luce una ventana agregada con NetBeans


11



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 siguiente forma:

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


12



Incluso una vez están 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 botón es un objeto que proviene de la clase Jbutton.Es importante que comprendas que esto no es magia y que hay código que se está generando, para que cuando comience el programa dibuje lo mismo que has realizado en tiempo de diseño, el código en cuestión puede verse cambiando la vista de diseño a código.

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

Cada vez que agregas un control el objeto recibe un nombre por defecto, el cual se genera basándose en su tipo y un número, por ejemplo jBut-ton1, si agregas otro será jButton2, es recomendable cambiar los nombres ya que en determinado momento querrás referirte a ellos por código y no podrás recordar cual es cual, por suerte no necesitas ir al código auto generado, basta con presionar el botón derecho sobre el control y selec-cionar la opción “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 botón que permite salir de la ventana actual.


13



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

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 mouse sobre el control.

› JTextField.

Este control permite obtener información por parte del usuario, toda la información que el usuario ingrese se puede obtener invocando al método getText del control.

› JtextArea.

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


14



› JpasswordField.

Permite al usuario escribir texto en una sola línea, la diferencia está en que los caracteres escritos son remplazados por otro carácter con e l fin de ocultar lo que escribe.

› JLabel.

Es uno de los controles más simples, este control presenta un texto, el que se suele utilizar para mostrar información 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 sólo una opción entre un grupo de ellas.

› Jlist:

Muestra seleccionar uno o varios elementos de lista de elementos.


15



› JComboBox:

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

› JMenu:

Permite agregar un menú a nuestro Jframe, un menú es una colección de controles agrupados de forma horizontal en la parte superior de la venta, un menú está compuesto de labels, checkBoxs y radiobuttón.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 más popular el elemento que aparece de los primeros en el menú como “Archivo”.


16



» Trabajando con eventos y propiedades comunes.

Puedes dar “vida” a los controles agregando cierta funcionalidad, esto se puede lograr agregando rutinas de programación a la respuesta de algún evento, por ejemplo podemos hacer que algún texto cambie o se genere algún tipo 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 los eventos que aquí aprenderás son comunes para todos los controles, así que parte de lo aprendido aquí te servirá para el resto de ellos.

Agreguemos un botón con el texto y nombre como muestre la imagen.

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


17



Los eventos se encuentran agrupados como muestra la imagen anterior, comenzaremos aprendiendo los comunes, diríjase a mouse, allí encontra-rás 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 botón del mouse 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 de forma automática se agrega el evento que responderá cada vez que este evento ocurra:


18



Una de las características más 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 colaboración con el resto de los controles, de esta forma la ejecución de un control es capaz de alterar los atributos y estados de otros controles, veámoslo con un ejemplo:

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

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 y nombre de variable como muestra la imagen:

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


19



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

Es importante que conozcas que cada evento que generes contiene además informació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ón asociada, dicha información es recibida como un objeto entre los parámetros que recibe el evento donde el tipo de objeto dependerá del tipo de evento.Por ejemplo, MouseEvent tiene relación con los eventos del mouse KeyEvent con los del teclado, FocusEvent cuando el objeto recibe o pierde el foco.

El foco en informática es cuando un control se encuentra seleccionado, por ejemplo cuando tienes dos ventanas sólo 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 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 él se encuentra la información asociada al evento, dado que el evento que programamos es MousePressed podemos obtener del objeto recibido datos como qué botón del mouse presionó o en qué coordenada X o Y del objeto presiono, en el siguiente ejemplo sólo si presiona el botón derecho se muestra la coordenada en la que el mouse hizo clic sobre el botón.

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


20



Esta semana aprendiste a desarrollar aplicaciones que permiten la interacción con el usuario mediante una interfaz gráfica.

Resumen de la Semana

Sinopsis de la próxima clase

Aprenderás a trabajar con nuevos controles para dotar a tus interfaces gráficas de mayores funcionalidades.

TP1_V_v1 (1) (1).pdf

Documents

Transcript of TP1_V_v1 (1) (1).pdf