Aprenda a Programar con Java y NetBeans

CAPTULO 2 CREACIN DE INTERFACES GRFICAS DE USUARIOS

2.1. Objetivos
Conocer los formularios. conceptos esenciales relacionados con la construccin de

Adquirir destreza en la elaboracin de aplicaciones en las que los usuarios puedan ingresar datos, ejecutar acciones y ver informacin de salida. Abordar temas fundamentales relacionados con la utilizacin de las herramientas bsicas provistas por NetBeans, para la generacin automtica de interfaces de usuario.

2.2. Conceptos
Todas las partes que le permiten a usted como usuario de una aplicacin interactuar con ella, son en realidad un conjunto de componentes u objetos grficos debidamente asociados para cumplir con el fin propuesto. En Java existe el paquete grfico swing que forma parte de las Java Foundation Classes (JFC) y el cual incluye componentes para ser usados en el diseo de interfaces grficas de usuario tales como etiquetas, cajas de texto, botones, listas desplegables y tablas. El primer componente swing con el que debe familiarizarse es la clase JFrame, que crea un marco o formulario en el que se pueden colocar otros componentes. La figura 2.1 indica que para crear un formulario slo se requiere un instruccin para crear una clase derivada (extends) de la clase JFrame. La clase en este caso se llam JFrmDemo y el cdigo a partir de la lnea cinco slo es necesario para mostrar el formulario creado. La lnea uno del cdigo tambin indica que JFrame es una clase contenida en el paquete swing de Java.
Cdigo utilizado 1 import javax.swing.JFrame; 2 3 public class JFrmDemo extends JFrame { 4 5 public static void main(...) { 6 new JFrmEjemplo().setVisible(true); 7 } 8 } Muestra del formulario

Figura 2.1. Cdigo para la creacin de un formulario y muestra del mismo.

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

El formulario mostrado en la figura 2.1, sirve para muy poco: slo para abrirlo, minimizarlo, restaurarlo y cerrarlo. Sin embargo todas estas operaciones estn implementadas en la clase JFrame del que l es una derivacin. Es por esta razn que el cdigo utilizado no requiere implementar dichas operaciones, lo que hara la aplicacin mucho ms extensa. Para que el formulario cumpla con otros propsitos ser necesario agregar otros componentes de tipo swing que se vern enseguida. En la figura 2.2, se muestra uno de estos formularios con sus partes esenciales para entrada de datos y salida de informacin, el cual fue construido utilizando componentes que se encuentran en el paquete javax.swing.

Figura 2.2. La primera interfaz de usuario

Inicialmente el formulario mostrado en la figura 2.2, era una simple ventana sin ningn componente como el de la figura 2.1, pero luego se agregaron cuatro etiquetas, cuatro campos de texto y dos botones de comando. En Java una etiqueta se conoce como JLabel y se utiliza bsicamente para desplegar texto o grficos. La figura 2.2 muestra que el formulario incluye cuatro etiquetas, las tres primeras utilizadas para mostrar los mensajes de peticin de las notas parciales y una cuarta etiqueta para indicar que el texto del frente, corresponde a la nota definitiva resultante de promediar los tres parciales. Los campos de texto que aparecen al frente de las etiquetes en Java se denominan JTextField y estn diseados para recibir cualquier tipo de texto. Los dos botones de comando que se incluyen en la parte inferior de la figura 2.2, corresponden a componentes de tipo JButton. Como cualquier botn de comando, aqu se utilizan para responder haciendo algo cuando el usuario pulse clic sobre ellos. En la prctica 2.3 se indicar cmo tomar estos componentes desde una paleta y llevarlos hasta el formulario para obtener el aspecto mostrado en la figura 2.2. Genricamente los componentes de tipo JButton, JTextField y JLabel se denominan en programacin objetos. Estos objetos tienen unos atributos o propiedades que los caracterizan y en la mayora de los casos tienen un comportamiento definido, como si se tratara de seres vivos. Como ejemplo observe que las etiquetas muestran los textos

Aprenda a Programar con Java y NetBeans

Parcial 1:, Parcial 2:, Parcial 3: y Definitiva:. Esto es posible gracias a que en la propiedad text de dichos objetos se colocaron estos textos, como se indicar ms adelante. Una propiedad muy importante de los objetos es nombre de variable, conocida de forma resumida como name. Esta propiedad identifica de manera nica los objetos. Aunque no vea los nombres de los objetos, estos siempre tienen nombres irrepetibles dentro de un mismo formulario. En la prctica 2.3 aprender a darle nombre a stos.

2.2.1. Ms all de las etiquetas y los campos de texto

Muchas veces el diseo de un formulario requiere la agrupacin de componentes que faciliten la organizacin de los mismos. La figura 2.3 es una muestra de ello, al agrupar en cuatro componentes de tipo JPanel la totalidad de componentes de entrada de datos.

Figura 2.3. Paneles, cajas de chequeo y listas

Tambin puede requerirse la posibilidad de activar o desactivar un estado (producto con IVA, por ejemplo), para lo cual estn hechas las casillas de seleccin que en Java se crean mediante el tipo JCheckBox. Un ltimo y frecuente caso es el de las listas de elementos. La figura 2.3 muestra como ejemplo las lneas de venta, pero podra ser un listado de estudiantes, de empleados o cualquier otra lista creada en Java mediante un objeto de tipo JList. Enseguida se presenta la documentacin bsica de estos componentes:

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

JPanel: Los objeto de este tipo son contenedores swing de otros objetos y permiten varios tipos de presentaciones. En la figura 2.3 por ejemplo, los paneles muestran un borde (propiedad border) que no necesariamente tiene que ser visible y un ttulo (propiedad Titled Border). JCheckBox: Este tipo de componente swing permite elegir un estado de seleccionado o no seleccionado. En el formulario de la figura 2.3 slo cuando dicha casilla aparezca seleccionada, a la lnea de venta se le agregar el IVA. Los objetos creados a partir de la clase JCheckBox del paquete swing cuentan con el mtodo isSelected que devuelve true cuando la casilla est seleccionada y false cuando no lo est. Cuando requiera dar la oportunidad al usuario de elegir varias opciones, una buena alternativa son las listas de chequeo. Ejemplo:

Figura 2.4. Uso del objeto JCheckBox

Vector: Esta clase forma parte del paquete java.util no tiene una interfaz visible pero no por ello deja de ser interesante. Su razn de ser es permitir el manejo de colecciones de cualquier tipo de objeto. Los objetos creados a partir de esta clase se redimensionan automticamente, por lo que se puede colocar en ellos cualquier nmero de objetos sin necesidad de tener que ir controlando continuamente en el programa la longitud de la coleccin. Como ejemplo suponga que requiere mantener una coleccin de pelculas como la que se muestra en la figura 2.5:

Figura 2.5. Ejemplo de un vector de pelculas.

Una coleccin manejada con un vector adems de permitir agregar elementos, entre muchas otras tareas, tambin permite buscarlos, eliminarlos uno a uno o todos de una vez y cambiarlos. A su debido tiempo se profundizar debidamente sobre el manejo de vectores, por lo que no debe preocuparle en este momento entender el funcionamiento de los mismos. JList: Este s es un componente visible para manejar listas que son presentadas al usuario como un grupo de tems para elegir. Para continuar con el ejemplo de las pelculas, se podra asociar el vector listaPeliculas con un objeto de tipo JList para que en este ltimo se muestre el listado de pelculas y se permita elegir una. De manera similar y esta vez volviendo a la explicacin de la figura 2.5, se puede crear un

Aprenda a Programar con Java y NetBeans

vector con la coleccin de lneas de venta y pasrselas a un objeto JList para que las muestre. Un objeto de tipo JList puede tener muchos tems, o podra crecer tanto como crezca su vector asociado, por lo que se requiere un objeto adicional para que le proporcione al JList barras de desplazamiento que permitan moverse por los elementos. JScrollPane: Este tipo de objeto es muy similar a un JPanel, solo que como se muestra en la figura 2.6, proporciona barras de desplazamiento por lo que es ideal para colocar en l los objetos de tipo JList. Como cualquier panel tiene tambin las propiedades border y TitledBorder.

Figura 2.6. Representacin visual de cmo un Vector proporciona los elementos que administra un JList, el cual es colocado dentro de un JScrollPane.

En el captulo 4 se documentar la manera de asociar un objeto de tipo Vector a uno de tipo JList para luego mostrar este ltimo dentro de un JScrollPane y dar la funcionalidad requerida. JRadioButton: Este tipo de componente se usa normalmente para elegir opciones mutuamente excluyentes, aunque se pudiera usar para hacer varias selecciones, lo cual no es recomendable, ya que para este caso existen los objetos de tipo JCheckBox. Para que un conjunto de componentes JRadioButton permita que slo uno de ellos permanezca seleccionado, los JRadioButton deben agruparse dentro de un control invisible de tipo JButtonGroup. La figura 2.7 muestra un ejemplo del uso de dichos componentes:

Figura 2.7. Uso de componentes tipo JRadioButton

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

JComboBox: Este componente es til en aquellos casos en que el usuario debe proporcionar datos que provienen de un conjunto finito de posibles respuestas, como el ejemplo mostrado en la figura 2.8, para seleccionar la ciudad de un cliente.

Figura 2.8. Uso de componentes tipo JComboBox.

2.3. Prctica
En los pasos siguientes, experimentar de diversas maneras sobre los paquetes de un proyecto creado en NetBeans y disear la interfaz de usuario que se muestra en la figura 2.2. Dicha interfaz corresponde a la primera aplicacin que se desarrollar como ejemplo.

2.3.1. Construccin de un formulario bsico En esta prctica se explican los pasos bsicos para crear un formulario que permita ingresar dados al usuario. Sin embargo su funcionalidad no ser implementada hasta el captulo 3. Caso de estudio: Se requiere disear un formulario para una aplicacin que permita introducir tres notas parciales de una asignatura indeterminada, cursada por un estudiante cualquiera. Dadas las tres notas, se puede pulsar un botn para ver la definitiva correspondiente al promedio obtenido. En la tabla siguiente se incluyen detalles a tener en cuenta para el desarrollo de la aplicacin:
Datos de entrada Clculos Tres valores que pueden tener decimales y que corresponden a las tres notas parciales. La definitiva se calcular mediante la frmula: definitiva = (nota1 + nota2 + nota3) / 3 Informacin de salida Restricciones Un valor con posibles decimales que corresponde a la definitiva lograda. Las notas son valores que pueden tener parte decimal. El usuario es responsable de introducir valores correctos en un rango entre cero y 5.0. La aplicacin no validar que los datos sean correctos o del tipo esperado. Slo disee el formulario, no realice entrada de datos, clculos, ni se preocupe por dar informacin de salida ya que estas tareas se llevarn a cabo en el siguiente captulo.

Aprenda a Programar con Java y NetBeans

Se sugiere tener mucho cuidado con el uso de las maysculas, minsculas y espacios porque Java es sensible a estos aspectos. Por consiguiente, antes de dar un nombre a un componente verifique que s est utilizando el que se indica en estos pasos. 1. 2. Cree un nuevo proyecto con el nombre Practica_2_3_1. Cambie el nombre del paquete por defecto por el de vista. Para esto pulse clic paquete Practica_2_3_1, elija la opcin derecho sobre el nombre del Refactor y luego la opcin Rename (Alt + Maysculas + R).

Figura 2.9. Un proyecto y sus paquetes respectivos

3.

En la entrada New Name del cuadro Rename Package, introduzca el nuevo nombre del paquete, en este caso vista. Tal como se muestra en la figura 2.10, debe quitar la seleccin de la casilla Preview All Changes antes de pulsar clic sobre el botn Next para evitar pasos adicionales.

Figura 2.10. Cuadro para renombrar paquetes

Terminada esta accin el paquete debe mostrarse en la ficha Projects con el nuevo nombre. 4. Agregue una clase al paquete. Esta vez aadir de la siguiente manera: la clase ser de tipo JFrame y la

a. Pulse clic derecho sobre el nombre del paquete (en este caso vista) y del men que se muestra elija la opcin New. b. Del submen mostrado elija la opcin JFrameForm. Si dicha opcin no est disponible elija la opcin File/Folder para abrir el cuadro New File. Tal como se muestra en la figura 2.11, en dicho cuadro debe seleccionar la categora Java GUI1 Forms y el tipo de archivo JFrame Form, para posteriormente pulsar clic sobre el botn Finish.

GUI (Graphical User Interface).

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

Figura 2.11. Seleccin de tipos de componentes complementarios

c. En la entrada Class Name del cuadro de dilogo New Frame Form, ingrese como nombre de clase: JFrmCalificacion. Verifique que los dems datos mostrados en el cuadro de la figura 2.12 sean correctos y pulse clic sobre el botn Finish.

Figura 2.12. Cuadro de dilogo para la creacin de clases

Un momento despus la ficha de proyectos se actualiza como se muestra en la figura 2.13, para desplegar la clase agregada.

Vista de clases dentro de un paquete

Vista de componentes de una clase

Figura 2.13. Despliegue de clases y componentes2 de clases

No se preocupe por saber ahora a qu corresponden los componentes que aparecen en el Navigator, gradualmente ir dominando dichos temas.

Aprenda a Programar con Java y NetBeans

Importante Colocar prefijos a los nombres de los componentes indicando su tipo, es una buena prctica de programacin que facilita conocer el tipo de componente. Por esta razn aqu se utiliza el prefijo JFrm para el nombre de la clase. Esto ayudar a identificar fcilmente que la clase es de tipo JFrame. Los nombres de clases no pueden tener espacios ni deben tener caracteres especiales y empiezan por una letra mayscula. Si verifica el contenido de la carpeta donde se cre el archivo de clase (\Practicas_2_3_1\src\vista\) encontrar que por cada clase mostrada dentro de un paquete, existe un archivo con extensin .java en la carpeta correspondiente al paquete.

5.

Para desplegar el diseo del formulario creado cuando agreg la clase JFrmCalificacion, ubique el elemento JFrmCalificacion dentro de la ficha Project y pulse doble clic sobre l. Esta accin deber presentar varios cambios en el IDE, los cuales deben ser similares a los mostrados en la figura 2.14.

Figura 2.14. Representacin del cuadro para el diseo de formularios

En la tabla siguiente cada nmero corresponde a una parte resaltada en la figura 2.14:
PARTE DESCRIPCIN Corresponde a la clase que agreg en el paso 4 de esta prctica. 1 Importante: Cuando requiera ver el diseo del formulario y este no aparezca, pulse doble clic sobre este elemento Si expande el rbol pulsando clic sobre el signo + ver los componentes 2 y 3. Representa el cdigo fuente que NetBeans cre automticamente para representar el formulario. Si pulsa doble clic sobre este elemento, ver dicho cdigo en la ventana del editor. No se sorprenda si mucho del cdigo generado le es desconocido, a medida que avance en estas prcticas comprender cada una de las instrucciones generadas. Este elemento se muestra cuando se pulsa sobre el botn Design marcado con 5 en la figura 2.14. Puede necesitar desplegar el subrbol de Form

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

10

PARTE

DESCRIPCIN JFrmCalificacion para verlo. Si pulsa doble clic sobre este elemento se activa la vista de diseo del formulario que en la figura 2.14 aparece marcada con el nmero 6.

4 5

El botn Source le permite ver el cdigo fuente de la clase creada. El botn Design muestra la vista de diseo del formulario correspondiente a la clase. Es de anotar que no todas las clases que agregue a un proyecto, correspondern a formularios. El rea sealada corresponde al formulario donde se agregarn componentes para disear Interfaces Grficas de Usuario (GUI). La ficha Palette incluye todos los tipos de componentes grficos que podr agregar a un formulario mientras lo disee. Seala la ficha Properties que como su nombre lo indica, muestra las propiedades del componente que seleccione en el formulario.

6 7 8

En los pasos siguientes aprender a utilizar cada una de las partes descritas en la tabla anterior, mientras disea un primer formulario para entrada de datos y salida de informacin. 6. 7. En la ficha Palette pulse clic sobre el componente JLabel (javax.swing). De esta manera selecciona un componente para agregar al formulario. Lleve el puntero del ratn hasta el rea del formulario (sealado con el nmero 6 en la figura 2.14) y luego pulse clic. De esta manera habr agregado el componente JLabel (etiqueta) al formulario. Repita los pasos 6 y 7 hasta completar cuatro componentes JLabel, dispuestos en el formulario de la manera que se muestran en la figura 2.15.

8.

Figura 2.15. Etiquetas agregadas a un formulario

9.

Pulse clic derecho sobre la primera etiqueta, elija la opcin Edit Text y cambie el texto actual por Parcial 1:

10. De nuevo pulse clic derecho sobre la primera etiqueta, elija la opcin Change Variable Name y cambie el nombre de variable actual por jlblParcial1. Importante: Los nombres de los componentes no pueden tener espacios ni deben tener caracteres especiales y empiezan por una letra que se recomienda sea minscula.

Aprenda a Programar con Java y NetBeans

11

Una buena prctica consiste en colocar un prefijo que identifique el tipo de componente. En el caso del ejemplo se utiliz el prefijo jlbl para recordar que el componente es de tipo JLabel.

11. Repita los pasos 9 y 10 con el resto de etiquetas hasta haber modificado el texto que muestran y el nombre de variable de cada una, de acuerdo a los datos de la tabla siguiente:
NOMBRE ACTUAL JLabel1 JLabel2 JLabel3 JLabel4 EDIT TEXT Parcial 1: Parcial 2: Parcial 3: Definitiva: CHANGE VARIABLE NAME jlblParcial1 jlblParcial2 jlblParcial3 jlblDefinitiva

12. Verifique en la ficha Inspector o en la ficha Projects que las etiquetas agregadas al formulario aparezcan exactamente con los cambios de nombre y de texto que se muestran en la figura 2.16. Tambin verifique que la disposicin de dichos componentes sea similar a la mostrada en dicha figura.

Vista de componentes en la ficha Inspector o en la ficha Projects

Vista del diseo actual del formulario al que se le han agregado algunos componentes de tipo JLabel

Figura 2.16. Visualizacin de componentes agregados

Nota: Pulsar clic derecho sobre los elementos que aparecen en la ficha Inspector despliega el mismo men emergente de los pasos 9 y 10, que permite cambiar las propiedades de los componentes. Adicionalmente, el elemento seleccionado de la ficha Inspector ser resaltado en la ventana de diseo del formulario. 13. Proceda como se indic en los pasos del 7 al 10 para agregar esta vez cuatro componentes de tipo JTextField (javax.swing), al frente de cada etiqueta y a los que asignar las siguientes propiedades, exactamente con el uso de maysculas y minsculas que se muestra.

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

12

NOMBRE ACTUAL jTextField1 jTextField2 jTextField3 jTextField4

*

EDIT TEXT*

CHANGE VARIABLE NAME jtfParcial1 jtfParcial2 jtfParcial3 jtfDefinitiva

Elimine el texto que aparece por defecto en las cuatro cajas de texto.

14. Verifique que el diseo del formulario sea similar al que se muestra en la figura 2.17.

Figura 2.17. Visualizacin de etiquetas y campos de texto

15. De la manera indicada agregue en la parte inferior dos componentes de tipo JButton (javax.swing) a los que asignar las siguientes propiedades, exactamente con el uso de maysculas y minsculas que se muestra.
NOMBRE ACTUAL jButton1 jButton2 EDIT TEXT* Calcular Limpiar CHANGE VARIABLE NAME jbtnCalcular jbtnLimpiar

16. Verifique en la ficha Inspector o en la ficha Projects que los botones agregados al formulario aparezcan exactamente con los cambios de nombre y de texto que se muestran en la figura 2.18. Tambin compruebe que la disposicin de dichos componentes sea similar a la mostrada en dicha figura.

Vista de componentes

Vista del diseo general

Figura 2.18. Diseo completo del formulario

Aprenda a Programar con Java y NetBeans

13

17. Quiere ver cmo se ejecuta la aplicacin? Bien, pulse clic derecho sobre el botn Source (marcado con el 4 en la figura 2.14) y sobre cualquier parte del cdigo de programacin que muestra el editor, pulse clic derecho para elegir seguidamente la opcin Run File (Shift + F6). El resultado de la ejecucin deber ser muy similar al que se muestra en la figura 2.19. Si no es as, haga los ajustes necesarios.

Figura 2.19. Formulario en ejecucin

Nota: No espere a que los botones Calcular y Limpiar hagan algo cuando sean pulsados, puesto que no han sido programados an.

18. Es importante elaborar copias de seguridad de sus proyectos. A continuacin se le indica la manera ms segura de contar con una copia rpida, comprimida y confiable. a. Use Mi PC para ubicar y seleccionar la carpeta que contiene el proyecto. b. Pulse clic derecho sobre dicha carpeta. c. Elija la opcin Enviar a d. Selecciona la opcin Carpeta comprimida (en zip). Este paso crear un archivo con el nombre de la carpeta. e. Copie el archivo comprimido en otro medio de almacenamiento. Importante: Puede que no sea posible enviar este archivo por correo debido a que puede tener archivos con extensin jar o class que son reseados como peligrosos por la aplicacin de correo.

2.3.2. Construccin de un formulario con lista desplegable

En esta prctica se explican los pasos bsicos para crear un formulario que permita calcular un incremento de sueldo de la siguiente manera: se pedir el sueldo actual los aos de antigedad en la empresa y el cdigo del cargo. Con base en estos datos cuando se pulse el botn Calcular en un formulario como el de la figura 2.20, se mostrar el nuevo sueldo.

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

14

Figura 2.20. Formulario para el clculo de nuevos sueldos.

En la tabla siguiente se incluyen detalles a tener en cuenta para el desarrollo de la aplicacin:

Datos de entrada Clculos Informacin de salida Restricciones Un valor real correspondiente al sueldo del empleado. Un valor entero equivalente a la antigedad en la empresa. Un cdigo 001, 002, 003 o 004 que corresponde al cargo.

El nuevo sueldo con un porcentaje de incremento calculado como se indicar en la prctica 4.3. El nuevo sueldo. No aplica para esta fase de desarrollo.

1. 2. 3. 4.

Cree el proyecto Practica_2_3_2 con los paquetes vista y dominio. Al paquete vista agregue una clase de tipo JFrame con el nombre JFrmSueldo. De la ficha Palette, agregue un componente de tipo JPanel. Despliegue el cuadro Properties dando clic derecho sobre el objeto de tipo JPanel y cambie el atributo border pulsando clic sobre el botn que aparece al lado derecho de esta propiedad y en el nuevo cuadro que se muestra elija TitledBorder. Pulse clic sobre el botn Ok para volver al cuadro Properties. Nota: Si pierde de vista la ubicacin de un panel, recuerde que puede buscarlo en la lista de componentes que aparecen en la ficha Inspector y pulsar un solo clic sobre l, para que se seleccione nuevamente. Esto mismo puede hacer cuando pierda de vista una etiqueta (JLabel).

5.

Termine de disear el formulario de acuerdo a lo mostrado en la figura 2.21 y teniendo en cuenta que al frente de la etiqueta Cdigo del cargo debe agregar un componente de tipo JComboBox.

Aprenda a Programar con Java y NetBeans

15

Vista de componentes

Vista del diseo general

Figura 2.21. Diseo del formulario JFrmSueldo.

6.

Al componente de tipo JComboBox que acaba de agregar, cmbiele los valores que aparecen en la propiedad model por los valores: 001, 002, 003 y 004 para que la lista muestre dichos elementos. Para ver los resultados del diseo en tiempo de ejecucin, pulse clic derecho sobre el elemento que representa el formulario y seguidamente elija la opcin Run File (Shift + F6). El resultado de la ejecucin deber ser muy similar al que se muestra en la figura 2.20. Si no es as, haga los ajustes necesarios.

7.

2.3.3. Construccin de un formulario con botones de seleccin

Para esta prctica se supondr que calcular el valor de una factura de energa elctrica, es algo tan sencillo como multiplicar el valor del kilovatio por la cantidad de kilovatios consumidos, luego de lo cual se debe aplicar un descuento de acuerdo una tabla de estratos que no interesa ahora, porque an no se va a implementar la funcionalidad del formulario mostrado en la figura 2.22. Enseguida se proceder a disear el formulario que cumpla con los requisitos expuestos pero, la programacin necesaria para su funcionamiento se desarrollar en el captulo 4. 1. 2. 3. Cree un proyecto con el nombre Practica_2_3_3 con los paquetes vista y dominio de costumbre. Agregue al paquete vista una clase de tipo JFrame con el nombre JFrmFactura y lleve a cabo los cambios de diseo que se documentan en los pasos siguientes. Agregue al formulario los nuevos componentes que se muestran en la figura 2.22, de acuerdo a las instrucciones que se incluyen luego de la grfica.

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

16

Vista de componentes

Vista del diseo general

Figura 2.22. Diseo del formulario JFrmFactura.

Cambie las propiedades border y title del componente panelEstratos. que Para esto, seleccione dicho componente y pulse clic sobre el botn aparece a la derecha de la propiedad border. Para la propiedad border seleccione TitledBorder y para la propiedad title digite Estratos: (sin comillas).

En el panelEstratos agregue cuatro componentes de tipo JRadioButton etiquetados como lo muestra la figura 2.22. Marque como seleccionada la propiedad selected de jrbEstrato1. De esta manera cuando se ejecute el programa, el primer botn ser el que aparezca seleccionado. Agregue un componente de tipo ButtonGroup. No importa en qu parte del formulario lo agregue, siempre quedar invisible pero en la lista de la ficha Inspector aparecer en el nodo Other Components. Para todos los objetos JRadioButton seleccione en la propiedad buttonGroup el elemento bgGrupoEstratos. De esta manera todos los botones formarn parte de un grupo y slo se podr seleccionar uno de ellos en tiempo de ejecucin. Si no llevara a cabo este paso, se podran seleccionar a la vez varios de ellos.

4.

Pulse clic derecho sobre el cdigo fuente del formulario y seguidamente elija la opcin Run File (Shift + F6). El resultado de la ejecucin deber ser muy similar a lo que se muestra en la figura 2.22.

Aprenda a Programar con Java y NetBeans

17

2.3.4. Formulario para el manejo de listas En esta prctica se disear un formulario en el que ser posible desplegar una lista de nmeros de acuerdo a la opcin elegida. Como es costumbre, la funcionalidad se implementar en el captulo 4. 1. Cree un nuevo proyecto con el nombre Practica_2_3_4, nombre que facilitar su referencia a esta parte del captulo. Igual que en los anteriores, agregue a dicho proyecto los paquetes vista y dominio y elimine el paquete que NetBeans crea por defecto. En el paquete vista agregue un JFrame con el nombre JFrmSerie y diselo de la manera que se muestra en la figura 2.23, teniendo en cuenta que el componente que aparece al lado derecho es de tipo JList.

2.

Vista de componentes

Vista del diseo general

Figura 2.23. Diseo de un formulario para generacin de series.

3.

Pulse clic derecho sobre el objeto JList que acaba de agregar, elija la opcin Properties y d clic sobre el botn que aparece al lado derecho de la opcin model. En el nuevo cuadro que se muestra, pulse clic sobre el botn Reset to default y cierre el cuadro Properties. Estas acciones eliminarn los elementos que aparecen por defecto cuando se crea un objeto JList. Pulse clic derecho sobre el cdigo fuente del formulario y seguidamente elija la opcin Run File (Shift + F6). El resultado de la ejecucin deber ser muy similar a lo que se muestra en la figura 2.23, pero el objeto JList aparecer sin elementos y por consiguiente sin la barra de desplazamiento vertical.

4.

5.

2.3.5. Construccin de un formulario para la facturacin de productos

Se debe implementar un formulario para una aplicacin de ventas que trabaje de la siguiente manera:

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

18

TABLA DE ANLISIS DEL PROBLEMA Datos de entrada Clculos Informacin de salida Restricciones Un String con el nombre del producto. Un double con el precio del producto. Un int con la cantidad del producto a facturar. No aplica para esta prctica No aplica para esta prctica Se dispondr de un botn Iniciar venta que podr los datos de total venta y lneas de la venta actual en cero. Se dispondr de un segundo botn Agregar lnea de venta. En esta versin no hay implementacin de la funcionalidad.

El formulario respectivo tendr la apariencia que se mostr en la figura 2.3 y se implementar como se indica a continuacin: 1. 2. 3. 4. Cree un nuevo proyecto con el nombre Practica_2_3_5 y con los dos paquetes que se viene trabajando: vista y controlador. Agregue en el paquete vista un JFrame con el nombre de JFrmVenta. De la ficha Palette, agregue un componente de tipo JPanel. Despliegue el cuadro Properties dando clic derecho sobre el panel y cambie algunos de los valores de sus atributos de la manera que se indica a continuacin: border: Pulse clic sobre el botn que aparece al lado derecho de esta propiedad y en el cuadro que aparece elija TitledBorder y como Title escriba Entrada de datos:. Pulse clic sobre el botn Ok para volver al cuadro Properties. Nota: Si pierde de vista la ubicacin de un panel recuerde que puede buscarlo en la lista de componentes que aparecen en la ficha Inspector y pulsar un solo clic sobre l, para que se seleccione nuevamente. 5. Proceda como en el paso 4 para anexar otros dos paneles que hagan ver el formulario como se muestra en la figura 2.24.

Figura 2.24. Paneles agregados a un formulario.

Aprenda a Programar con Java y NetBeans

19

6.

Agregue en la parte del formulario donde no hay paneles, un componente de tipo JList, para dar la apariencia que se muestra en la figura 2.25.

Figura 2.25. Componente JList agregado al formulario.

7.

Pulse clic derecho sobre el objeto JList que acaba de agregar, elija la opcin Properties y d clic sobre el botn que aparece al lado derecho de la opcin model. En el nuevo cuadro que se muestra, pulse clic sobre el botn Reset to default y cierre el cuadro Properties. Estas acciones eliminarn los elementos que aparecen por defecto cuando se crea un objeto JList. Seleccione un objeto de tipo JCheckBox y colquelo dentro del panel Opciones.

8.

9.

10. Agregue los dems componentes que se muestran en la figura 2.26, de tal manera que el formulario quede exactamente como el que se muestra en la figura.

Figura 2.26. Vista de diseo de un formulario de facturacin.

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

20

Tenga en cuenta los siguientes aspectos: La etiqueta que se incluye dentro del panel que est dentro del JFrame Total de la venta, debe tener el tamao resaltado en la figura 2.26. Dicha etiqueta tiene asignado en la propiedad text un cero (0), sin espacios. La propiedad HorizontalAlignment de la etiqueta se cambi a CENTER. Al componente JCheckBox se le cambi el texto por defecto mediante la opcin Edit text que se muestra cuando se pulsa clic derecho sobre la mayora de componentes.

11. Utilice la ficha Inspector para seleccionar cada componente, dando un solo clic sobre ellos y cambie los nombres de variables de objetos, de acuerdo a los mostrados en la figura 2.27.

Figura 2.27. Nombres de variables de los objetos de JFrmVenta.

Note algo curioso: en el paso 6 se agreg un objeto de tipo JList y en ningn momento se incluy dentro de un componente de tipo JScrollPane. Sin embargo la figura 2.27 muestra que NetBeans agreg automticamente un JScrollPane en el que a su vez anex el JList. 12. Si quiere hacer visible el componente JScrollPane agregado, pulse clic derecho sobre dicho elemento en la ficha Inspector y seguidamente en el men que se despliega elija la opcin Properties y proceda a modificar las propiedades border y TitledBorder. La apariencia final del formulario ser la que se muestra en la figura 2.28.

Aprenda a Programar con Java y NetBeans

21

Figura 2.28. Disposicin final de los componentes del formulario JFrmVenta.

13. Pulse clic derecho sobre el cdigo fuente del formulario y seguidamente elija la opcin Run File (Shift + F6). El resultado de la ejecucin deber ser muy similar a lo que se mostr en la figura 2.3, pero el objeto JList aparecer sin elementos y por consiguiente sin la barra de desplazamiento vertical.

2.4. Talleres
Elabore los siguientes talleres con base en las explicaciones de la prctica 2.3. Tenga en cuenta que en captulos posteriores necesitar los proyectos que se implementen en este captulo y que para entonces ya no se darn indicaciones de cmo elaborar los formularios, a menos que cuenten con componentes no vistos en este captulo.

2.4.1. Un proyecto con una GUI similar a la anterior.

Caso de estudio: Se requiere una aplicacin que permita introducir cuatro notas parciales de una asignatura indeterminada, cursada por un estudiante cualquiera. Dadas las cuatro notas que tienen valores porcentajes del 20%, 20%, 30% y 30% respectivamente, se puede pulsar un botn para ver la definitiva obtenida. En la tabla siguiente se incluyen detalles a tener en cuenta para el desarrollo de la aplicacin:
Datos de entrada Clculos Informacin de salida Restricciones Cuatro valores que pueden tener decimales y que corresponden a las cuatro notas parciales. La definitiva se calcular mediante la suma de los valores porcentuales de las notas. Un valor con posibles decimales que corresponde a la definitiva lograda. En esta versin no se agrega funcionalidad.

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

22

1. 2. 3.

Use la ficha Projects para dar clic en el elemento que representa dicho proyecto, el cual por supuesto debe estar cargado en la ficha Projects. Del men contextual que se despliega, elija la opcin Copy Project. Cuando se muestre el cuadro de la figura 2.29, utilice la entrada Project Name para ingresar el nombre del nuevo proyecto como se indica en la figura:

Figura 2.29. Cuadro de dilogo Copia de proyectos

4. 5.

Verifique la localizacin del proyecto en la entrada Project Location, antes de pulsar el botn Copy que da inicio a la copia del proyecto. En este nuevo proyecto, seleccione el formulario y lleve a cabo los cambios que se documentan en la figura 2.30.

Vista de componentes

Vista del diseo general

Figura 2.30. Nueva GUI para el clculo de notas definitivas

2.4.2. GUI para aplicacin de pago de facturas de energa.

Caso de estudio: Para este taller se supondr que calcular el valor de una factura de energa elctrica, es algo tan sencillo como multiplicar el valor del kilovatio por la cantidad de kilovatios consumidos. En la tabla siguiente se incluyen detalles a tener en cuenta para el desarrollo de la aplicacin:

Aprenda a Programar con Java y NetBeans

23

Datos de entrada

Un valor entero que corresponde al nmero de kilovatios consumidos y un valor real correspondiente al valor de cada kilovatio. El valor de la factura es igual al producto de kilovatios consumidos por valor del kilovatio. Un valor de factura con posibles decimales. En esta versin no se implementa la funcionalidad.

Clculos Informacin de salida Restricciones

1. 2. 3. 4.

Cree un nuevo proyecto con el nombre Practica_2_4_2. Cambie el nombre del paquete que NetBeans crea por defecto por vista. Agregue al paquete vista una clase de tipo JFrame y asigne el nombre JFrmFactura a dicha clase. Implemente el formulario de acuerdo a la informacin provista en la figura 2.31.

Vista de componentes

Vista del diseo general

Figura 2.31. GUI para el clculo bsico de facturas de energa

2.4.3. GUI para el clculo de mediante series.

Enseguida se presenta un sencillo diseo de una aplicacin que se implementar en el captulo 4, para mostrar diferentes series con las que algunos matemticos han calculado el valor de . 1. 2. 3. Cree un nuevo proyecto con el nombre Practica_2_4_3. Cambie el nombre del paquete que NetBeans crea por defecto por vista. Al paquete vista de este mismo proyecto agregue un JFrame con el nombre JFrmPI de acuerdo con el diseo que se muestra enseguida:

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

24

Vista de componentes

Vista del diseo general

Figura 2.32. GUI para la demostracin de clculos mediante mtodos

2.4.4. GUI para la demostracin de ciclos anidados.

El formulario que disear en esta prctica servir para exponer la implementacin en el captulo 4 de estructuras llamadas ciclos anidados. 1. 2. 3. Cree un nuevo proyecto con el nombre Practica_2_4_4. Cambie el nombre del paquete que NetBeans crea por defecto por vista. Al paquete vista de este mismo proyecto agregue un JFrame con el nombre JFrmTablas de acuerdo con el diseo que se muestra enseguida:

Vista de componentes

Vista del diseo general

Figura 2.33. GUI para la demostracin de ciclos anidados

4.

Pulse clic derecho sobre el cdigo fuente del formulario y seguidamente elija la opcin Run File (Shift + F6). El resultado de la ejecucin deber ser muy similar a lo que se mostr en la figura 2.33, pero tanto los combos desplegables como el objeto JList aparecern sin elementos.

Aprenda a Programar con Java y NetBeans

25

2.4.5. GUI para la de demostracin de condiciones.

Los siguientes pasos crean una versin ligeramente distinta del formulario que se implement en la prctica 2.4.1. 1. 2. Desde la ficha Projects de NetBeans copie el proyecto Practica_2_4_1 como Practica_2_4_5. En el paquete vista modifique o agregue un JFrame con el nombre JFrmCalificacion y diselo de la manera que se muestra en la figura 2.34. Tenga presente agregar la etiqueta resaltada antes de los botones en la figura 2.34 con el nombre que se sugiere en la lista de componentes.

Vista de componentes

Vista del diseo general

Figura 2.34. Disposicin final de los componentes del formulario JFrmCalificacion.

2.4.6. GUI para la de demostracin de casos.

El formulario que implementar enseguida, permitir ingresar un nmero entero correspondiente a un mes y cuando se pulse el botn Calcular, mostrar el nmero de da de dicho mes. Como siempre los clculos necesarios se implementarn en el captulo 4. Las especificaciones del formulario puede verlas en la figura 2.35. 1. 2. Cree el proyecto Practica_2_4_6. En el paquete vista agregue un JFrame con el nombre JFrmDiasMes y diselo de la manera que se muestra en la figura 2.35.

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

26

Vista de componentes

Vista del diseo general

Figura 2.35. Diseo del formulario JFrmDiasMes.

2.4.7. GUI para la de demostracin de intercambio de valores.

El formulario correspondiente a este diseo servir en el captulo siguiente para llevar a cabo una sencilla demostracin de intercambio de valores.

1. 2.

Cree el proyecto Practica_2_4_7. En el paquete vista agregue un JFrame con el nombre JFrmIntercambio y diselo de la manera que se muestra en la figura 2.36.

Vista de componentes

Vista del diseo general

Figura 2.36. Diseo del formulario para la aplicacin de intercambio de valores.

2.4.8. GUI para demostrar el uso de la clase String.

El formulario correspondiente a este diseo servir en el captulo siguiente para llevar a cabo una sencilla demostracin sobre el uso de cadenas (objetos de tipo String).

Aprenda a Programar con Java y NetBeans

27

1. 2.

Cree el proyecto Practica_2_4_8. En el paquete vista agregue un JFrame con el nombre JFrmCadena y diselo de la manera que se muestra en la figura 2.37.

Figura 2.37. Diseo del formulario para la aplicacin de unin de cadenas.

Restricciones La interfaz de usuario se llamar JFrmCadena y tendr los componentes mostrados en la figura 2.38:

Figura 2.38. Componentes del formulario JFrmCadena.

Captulo 2. Creacin de Interfaces Grficas de Usuario (GUI)

28

2.4.9. GUI para el clculo de conversiones de medidas mtricas.

El formulario correspondiente a este diseo servir en el captulo siguiente para llevar a cabo una sencilla demostracin de la estructura de control secuencial. 1. 2. Cree el proyecto Practica_2_4_9. En el paquete vista agregue un JFrame con el nombre JFrmConversion y diselo de la manera que se muestra en la figura 2.39.

Vista de componentes

Vista del diseo general

Figura 2.39. Componentes del formulario JFrmConversion.

2.5. Cuestiones y puntos a considerar

1. 2. A qu se denomina objeto en programacin? En la prctica de este captulo se agregaron tres tipos de componentes al formulario. Cules fueron? En qu paquete se encuentran dichos tipos de componentes? Qu propiedades se cambiaron de los componentes agregados al formulario? Indique los objetivos que llevaron a hicieron dichos cambios.

3.