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

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Unidad 2: Diseo de interfaces grficas Utilizando Swing

Aprendizajes esperados
2.2

Utiliza objetos de interfaz grfica avanzados para crear aplicaciones de escritorio

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

03

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Uso de ventanas.
La mayora de las ocasiones cuando se trabaja con interfaces grficas se requiere crear ms de una ventana, ya que, poner toda las funcionalidades de una aplicacin en una sola ventana provocar una confusin en los usuarios que la utilicen, es por esto que las aplicaciones suelen
utilizar ms de un formulario y mediante un men proveen al usuario la capacidad de hacerlas aparecer y desaparecer segn las acciones que
deseen realizar, en Java existen varias formas de resolver esta situacin, se pueden por ejemplo crear varias ventanas distintas, la cuales son
invocadas desde un men, una nica gran ventana cuyo contenido va cambiando segn lo que el usuario desee realizar o una tercera alternativa
que consiste en un conjunto de ventanas independientes que se muestra dentro de una ventana ms grande que acta como contenedora.
Comenzaremos por el uso ms comn de todas, en la que distintas ventanas son presentadas a usuario segn las acciones que deseen llevar, para
hacerlo en java existe un componente llamado Jframe, el cual es un agrupador de controles, por tanto es este componente el que contiene a otros
elementos como los botones, cajas de texto, controles de seleccin etc.
Para crear Jframe en java es fcil si utilizas alguna IDE que ayude con esta tarea, por ejemplo en Netbeans bastar con hacer click derecho sobre un
proyecto y seleccionar nuevo-> Jframe

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

04

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Sin la ayuda de una IDE como esta el cdigo que genera una ventana y los controles que esta contiene debe ser programado, sin embargo hoy
es posible hacer el trabajo de ingeniera inversa, proceso en la que nuestra IDE permite dibujar la ventana de forma grfica, esto es posible dado
que nuestra IDE presenta una ventana inicial a la cual le puedes agregar controles desde una lista de controles y redimensionarlos con el mouse,
durante el proceso la IDE es la encargada de generar el cdigo para que una vez compilado y ejecutado se muestre como lo deseas, a este proceso
se le conoce como diseo y en NetBens se presenta as:

Sin embargo no todo ocurrir en tiempo de diseo, ya que la programacin de la lgica y las validaciones irn en el cdigo que genera cada uno
de los eventos, para cambiar entre el modo de diseo y cdigo debes seleccionar la opcin de la parte superior izquierda.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

05

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Dentro del cdigo generado vers que un JFrame contiene en su interior un mtodo esttico llamado main, de esta forma es posible utilizar una
ventana de este tipo como inicio de un proyecto, si deseas hacerlo bastar con seguir los siguientes pasos:
Primero debes ir a las propiedades de tu proyecto, para ello presione el botn derecho sobre el nombre de su proyecto:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

06

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Al hacerlo debe de la ventana de propiedades ejecutar del tem de la izquierda run (ejecutar).

Una vez realizado, de la seccin izquierda utilice el botn examinar de la opcin main class para desplegar una ventana con todos los elementos
de su aplicacin que contienen un mtodo de inicio main, de all seleccione la ventana y presione aceptar.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

07

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Si ejecuta el proyecto ver que una ventana se abre de forma automtica al hacerlo.

Para que podamos presentar un ejemplo de como organizar varias ventanas en un mismo proyecto vamos a seguir los mismos pasos vistos anteriormente para agregar una segunda ventana la cual llamaremos secundaria, de esta forma quedamos con dos Jframe, el principal y la secundaria.
La idea es que la ventana principal este siempre visible y que a partir de un men contenido en ella podamos ir abriendo las otras ventanas, es
importante destacar que el cierre de la ventana principal es tambin el cierre de nuestra aplicacin, si bien este comportamiento se puede cambiar est definido por la siguiente propiedad perteneciente a la ventana.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

08

Taller de programacin I

Semana VII - Diseo de interfaces grficas

El segundo paso ser agregar un men a nuestra ventana principal, para ello slo arrastre desde la paleta de controles el control llamado menu
a su ventana principal.

Al hacerlo su ventana mostrar un men con los elementos File y Edit por defecto, si gusta puede cambiar o agregar ms haciendo click derecho
sobre l y seleccionar la opcin editar texto.

Si desea agregar un nuevo men presione botn derecho sobre el men bar que no sea ni sobre archivo o edit y seleccione agregar men, luego
puede cambiar el nombre al que guste:

Al agregarlo lo renombraremos a ejemplo ventana y de all se desprender un conjunto de opciones para llamar a las distintas ventanas, para
agregar elementos que se desplieguen bajo el nuevo elemento debe situarse sobre l y presionar el botn derecho, luego seleccione la opcin
agregar desde la paleta y luego men tem.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

09

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Al hacerlo los nuevos elementos de men quedarn bajo el elemento principal:

Observe que la nueva opcin esta compuesta por tres partes, la primera de la izquierda; la cual permite agregar una imagen que ayude al usuario
a identificar de manera mas sencilla la opcin que est buscando, la parte central muestra el nombre del elemento y la parte derecha el atajo de
teclado que permite ejecutar esta accin de forma directa.
Para programar la accin de abrir otra ventana debe primero realizar doble clic sobre el texto secundaria esto generar el evento asociado a la
accin que se ejecutar cuando un usuario haga clic sobre l, de forma automtica la IDE lo llevar all.

Para mostrar una ventana hay que seguir dos pasos, el primero consiste en crear el objeto y luego volverla visible, para ello escribimos el siguiente
cdigo:

Volvamos ahora a la vista de diseo para volver a este punto.

Vamos a configurar el atajo de teclado, para ello haga doble clic sobre la seccin shortCut, al hacerlo aparecer la siguiente ventana:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

10

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Este proceso puede hacerse de dos formas, la primera es seleccionar la tecla desde la lista desplegable de la izquierda y algn modificador de la
derecha, sin embargo se puede hacer de forma mucho ms sencilla si te posicionas sobre la seccin de key stroke y luego presionas la combinacin
de teclas deseada, al hacerlo est se escribir de forma automtica.

Una vez realizado ejecute su aplicacin y seleccione la opcin secundaria del men o presione el atajo para ver como la ventana secundaria
aparece.
Es muy importante que en las propiedades de la ventana secundaria la opcin defaultCloseOperation se cambie a dispose, ya que si se mantiene en su opcin por defecto esta ventana secundara tambin provocar el cierre total de la aplicacin.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

11

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Ventanas modales
Existen situaciones en las que una ventana secundaria no permite volver a la ventana principal hasta que no se cierre, obligando al usuario a realizar la accin o bien cancelar el proceso, este tipo de ventana tiene la ventaja de que no permite que el usuario a partir de una ventana principal
abra varias ventanas secundarias, facilitando as el flujo de la aplicacin tanto para el usuario como para el desarrollador, este tipo de ventanas
reciben el nombre de modales y en java existe un tipo de contenedor llamado Jdialog, el que a diferencia de un JFrame si puede ser presentado
como modal, sin embargo este tipo de ventana no posee un mtodo main propio, por lo que no ser posible iniciar directamente desde ella.
En una aplicacin lo recomendable es que exista un solo JFrame y que de all todas las ventanas que sean invocadas sean de tipo Jdialog, para
agregar un nuevo dialogo agregue un nuevo elemento de tipo Jdialog a su proyecto, es posible que este no se encuentre en el men que muestra
los controles recientemente usados, as que del men de nuevos elementos seleccione otros

Del men de la izquierda seleccione la opcin Swing GUI forms y luego Jdialog a su derecha, tal y como muestra la imagen:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

12

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Establezca el siguiente nombre para el contenedor:

Al hacerlo, ver que al igual que en el caso anterior un nuevo elemento aparece y la vista de diseo se activa para que agregue sobre l todos los
controles que desee, la siguiente imagen muestra un dialogo con un label que nos ayudar a identificar la ventana

Volvamos a la vista de diseo de la ventana principal, all agreguemos un nuevo men con el texto dialogo

En el evento del nuevo men escriba el siguiente cdigo:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

13

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Al ejecutar el proyecto y presionar sobre dialogo una nueva ventana se abrir, esta ventana no permitir volver a la ventana principal hasta que
no se cierre:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

14

Taller de programacin I

Semana VII - Diseo de interfaces grficas

TabPanel
Otra forma de agrupar y presentar un grupo de controles de forma organizada al usuario es utilizando un tabPanel, este contenedor permite
mostrar u ocultar un conjunto de controles que se encuentran dentro de una misma ventana.
Para comenzar agregue un control de tipo tab panel a la ventana secundaria arrastrndola con el mouse.

Al hacerlo el panel lucir as:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

15

Taller de programacin I

Semana VII - Diseo de interfaces grficas

El primer paso es redimensionar el contenedor, usualmente este ocupa toda la ventana, as que ajstelo hasta que iguale el tamao de la ventana
que lo posee.
Una vez hecho con el botn derecho del mouse agregue un nuevo panel siguiendo las instrucciones de la siguiente imagen:

Al hacerlo su tabPanel dibujara una pestaa, de esta forma indica que existe slo un panel en l sobre el cual se pueden agregar todos los controles que desee, por lo tanto si desean ms pestaas se deben agregar ms paneles a su tabPanel, he aqu un ejemplo de como luce un tabPanel
con dos paneles.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

16

Taller de programacin I

Semana VII - Diseo de interfaces grficas

Resumen de la Semana
Esta semana trabajaste con conceptos avanzados de ventanas y controles de formularios

Sinopsis de la prxima clase

La prxima semana continuars con el trabajo con controles avanzados, los conocers y aprenders su uso

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

17

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

Unidad 2: Diseo de interfaces grficas Utilizando Swing

Aprendizajes esperados
2.2

Utiliza objetos de interfaz grfica avanzados para crear aplicaciones de escritorio

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

03

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

Mens emergentes
Un buen diseo es importante para que una aplicacin tenga xito, es por ello que no es conveniente poblar en exceso las ventanas con controles,
sin embargo es posible que para una misma ventana exista una serie de comportamientos que se pueden ejecutar sobre ella pero que no son tan
relevantes y que llamarlas mediante botones presentadas al usuario slo harn que el objetivo de la ventana se vuelva confuso, para extender
la funcionalidad de las acciones que una misma ventana o control puede realizar se suele utilizar un men emergente que aparece al presionar
el botn derecho del mouse sobre el control o ventana del cual se desea obtener ms funcionalidad, en Java crear un men de este tipo no es
complicado y bastar con agregar a una ventana (Jframe o Jdialog) un elemento de tipo pop up men .

Note que al hacerlo ningn control visible aparece sobre su ventana en tiempo de diseo, por lo que para trabajar con el men emergente debe
dirigirse a la ventana inspector, si la ventana no esta visible en la parte inferior izquierda de la pantalla, dirjase al men ventanas y luego
marque el tem navigating

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

04

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

Esta ventana le mostrar el control se encuentra agregado:

El siguiente paso corresponder a agregar los elementos que deseamos que nuestro men tenga, para este ejemplo slo agregaremos una, la
cual cerrar la ventana activa, por lo que la aparicin de este men se llevar a cabo cuando el usuario haga un clic con el botn derecho sobre
cualquier parte de la ventana activa.
Para agregar un tem de men debe presionar botn derecho sobre el men y seleccionar add from palette y luego agregar un menu tem al
igual como lo realizamos antes con el men de la ventana principal:

Un elemento se despliega bajo el elemento jPopupMenu1

Para cada elemento que agreguemos debemos realizar dos pasos, el primero es cambiar el texto del elemento del men por uno que describa que
es lo que el men hacer y luego agregar al evento clic del mismo la accin que esperamos realice cuando el usuario haga clic sobre l.
Para cambiar el nombre utilice la ventana de la derecha y busque la propiedad text, all agregue un nombre descriptivo, por ejemplo, para este
caso lo cambiaremos a cerrar.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

05

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

El siguiente paso ser agregar el comportamiento esperado para este tem del men, para ello utilice la ventana de propiedades para navegar por
los eventos que posee el control.

De la lista desplegable seleccione el evento por defecto de ActionPerformed de esta forma la IDE crear el mtodo que se ejecutar cuando el
evento se ejecute:

Escriba el siguiente cdigo para programar que la ventana se cierre al seleccionar esta opcin del men.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

06

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

Ahora debemos agregar el cdigo necesario para hacer que este men aparezca, para ello utilizaremos el evento mouse release de la ventana, el
cual se ejecuta cuando se libera un botn presionado sobre el mouse, sin embargo tambin debemos controlar cul es el botn que se presiona ya
que este men debe slo aparecer cuando el botn derecho del mouse sea utilizado.
Para ello debemos hacer clic con el botn derecho sobre la ventana principal y del men popup que aparece navegar hasta el evento mouse
relase como muestra la siguiente imagen:

En el cdigo del evento debemos escribir lo siguiente:

El primer if permite conocer cul es el botn que est siendo presionado, note que esta informacin viene del objeto evt, este parmetro que
viene con la definicin del mtodo obtiene toda la informacin relacionada con el clic del mouse sobre la ventana, si bien en todos los mtodos
este objeto se llama evt, su tipo e informacin contenida cambiar segn el evento que programemos. El mtodo getButton obtiene un entero
con un numero que representa el botn que sea presionado, afortunadamente ese valor no debemos recordarlo ya que dentro del mismo objeto
evt existe una definicin para button1, button2 y button3, siendo este ltimo el botn de la derecha.
Si la condicin es verdadera debemos hacer aparecer el men, sin embargo este aparece por defecto en la parte superior derecha de la pantalla
incluso fuera de los lmites de la ventana que lo invoca, para ayudar al usuario a encontrar el men emergente utilizaremos setLocation, el cual
permite establecer la ubicacin del men, este mtodo recibe como parmetro un objeto de tipo punto el cual contiene las coordenadas x e y.
Como en la mayora de los casos el men aparece en la misma ubicacin en la que se encuentra el mouse aprovechamos el mtodo getLocation
Inacap rea Informtica y Telecomunicaciones todos los derechos reservados
07

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

que contiene evt, el cual nos retorna un objeto punto que contiene las coordenadas x e y del mouse. Una vez la ubicacin ha sido establecida slo
nos basta con hacer aparecer el men utilizando el setVisible.
Observe que si la condicin no se cumple el men se hace invisible, de esta forma si el usuario presiona cualquier botn que no sea el derecho
sobre la ventana el men desaparece, estas lneas de cdigo son muy importantes ya que si no se agregan el men jams desaparecer. Otra
interesante opcin es hacer desaparecer el men utilizando el evento MouseExited de esta forma este se ocultar cuando el usuario quite el
puntero del men.
La siguiente imagen muestra como el men aparece en la ubicacin del mouse al presionar con el botn derecho del mouse sobre la ventana.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

08

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

JTable
El Control Jtable tiene un funcionamiento muy similar al JList, salvo por que un Jlist sera slo como una de las tantas columnas que un Jtable
puede tener, por ejemplo un Jlist contiene un mtodo llamado getSelectedIndex, el cual retorna un int con el ndice del elemento seleccionado,
esto es muy similar a cuando trabajas con arreglos, sin embargo el JTable necesita dos ndices, uno para las filas y otro para las columnas para
referirse a un elemento , siendo la forma en la que se agrupan como una matriz.
Al igual que el JList el Jtable necesita un modelo, el cual en esta ocasin es del tipo DefaultTableModel.
Para realizar un ejemplo sobre un Jframe nuevo agregue un control de tipo Jtable, dos JtextField y un botn.

Observe que la tabla por defecto tiene 4 columnas, esto puede cambiarse utilizando la siguiente propiedad model

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

09

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

Para comenzar debemos al igual que el caso anterior agregar el siguiente import:

Luego declararemos un objeto de tipo DefaultTableModel a nivel de clase, para generar un modelo de forma similar al ejemplo anterior, la
diferencia es que en esta ocasin debemos tambin especificar la cantidad de columnas que tendr nuestra tabla.

En el cdigo anterior se agregan dos columnas utilizando el mtodo addCoumn, el String enviado como parmetro ser el texto que mostrar
cada una en su encabezado.
Al ejecutar la tabla luce de la siguiente forma:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

10

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

Ahora utilizaremos el evento del botn para agregar una nueva fila a nuestra tabla, la cantidad de elementos que entregues a la fila depender de
la cantidad de columnas que esta tiene, una nueva fila es en realidad una representacin de un arreglo unidimensional, por lo que en este caso su
largo deber ser dos, donde el primer elemento corresponde a la columna y uno y el segundo a la columna 2.

El cdigo anterior primero define un arreglo de largo dos, una caracterstica interesante es que el arreglo es de tipo Object, pudiendo as agregar
elementos de distinto tipos sin necesidad de realizar sus respectivas conversiones. La segunda y tercera lnea de cdigo se encargan de agregar
a cada elemento del arreglo los valores escritos en cada una de las cajas de texto, al final el mtodo addRow es el que permite agregar la fila al
modelo, la siguiente imagen muestra un ejemplo de como luce una tabla luego de agregar una fila.

Si se desea obtener el valor de una fila se puede utilizar el siguiente cdigo:

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

11

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

Este cdigo est codificado en el evento clic del mouse del Jtable, en las dos primeras lneas se obtiene segn la ubicacin de donde se ha realizado click el ndice de la fila y columna de la celda correspondiente, luego mediante una sentencia if se comprueba que existe una fila y columna
seleccionada, al final se establece el ttulo de la ventana con el valor obtenido, dicho valor se obtiene gracias al mtodo getValueAt, el cual recibe
como parmetro el ndice de la fila y la columna obtenido.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

12

Taller de programacin I

Semana VIII - Diseo de interfaces grficas

Resumen de la Semana
Esta semana has aprendido como trabajar con controles avanzados como los mens mens emergentes y otros controles.

Sinopsis de la prxima clase

La prxima semana trabajaremos con acceso a base de datos.

Inacap rea Informtica y Telecomunicaciones todos los derechos reservados

13