Practica002

5/9/2018 Practica002 - slidepdf.com

http://slidepdf.com/reader/full/practica002 1/28

Aprenda a Programar con Java y NetBeans 1

CAPÍTULO 2

CREACIÓN DE INTERFACES GRÁFICAS DE USUARIOS

2.1. Objetivos• Conocer los conceptos esenciales relacionados con la construcción de

formularios.

• Adquirir destreza en la elaboración de aplicaciones en las que los usuariospuedan ingresar datos, ejecutar acciones y ver información de salida.

• Abordar temas fundamentales relacionados con la utilización de las herramientasbásicas provistas por NetBeans, para la generación automática de interfaces deusuario.

2.2. ConceptosTodas las partes que le permiten a usted como usuario de una aplicación interactuarcon ella, son en realidad un conjunto de componentes u objetos gráficos debidamenteasociados para cumplir con el fin propuesto.

En Java existe el paquete gráfico swing que forma parte de las Java FoundationClasses (JFC) y el cual incluye componentes para ser usados en el diseño de interfacesgráficas de usuario tales como etiquetas, cajas de texto, botones, listas desplegables ytablas.

El primer componente swing con el que debe familiarizarse es la clase JFrame, quecrea un marco o formulario en el que se pueden colocar otros componentes. La figura2.1 indica que para crear un formulario sólo se requiere un instrucción para crear unaclase derivada (extends) de la clase JFrame. La clase en este caso se llamóJFrmDemo y el código a partir de la línea cinco sólo es necesario para mostrar elformulario creado. La línea uno del código también indica que JFrame es una clasecontenida en el paquete swing de Java.

Código utilizado Muestra del formulario

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 }

Figura 2.1. Código para la creación de un formulario y muestra del mismo.



Capítulo 2. Creación de Interfaces Gráficas de Usuario (GUI) 2

El formulario mostrado en la figura 2.1, sirve para muy poco: sólo para abrirlo,minimizarlo, restaurarlo y cerrarlo. Sin embargo todas estas operaciones estánimplementadas en la clase JFrame del que él es una derivación. Es por esta razón queel código utilizado no requiere implementar dichas operaciones, lo que haría laaplicación mucho más extensa.

Para que el formulario cumpla con otros propósitos será necesario agregar otroscomponentes de tipo swing que se verán enseguida. En la figura 2.2, se muestra unode estos formularios con sus partes esenciales para entrada de datos y salida deinformación, el cual fue construido utilizando componentes que se encuentran en elpaquete javax.swing.

Figura 2.2. La primera interfaz de usuario

Inicialmente el formulario mostrado en la figura 2.2, era una simple ventana sinningún componente como el de la figura 2.1, pero luego se agregaron cuatroetiquetas, cuatro campos de texto y dos botones de comando.

En Java una etiqueta se conoce como JLabel y se utiliza básicamente para desplegartexto o gráficos. La figura 2.2 muestra que el formulario incluye cuatro etiquetas, lastres primeras utilizadas para mostrar los mensajes de petición de las notas parciales yuna cuarta etiqueta para indicar que el texto del frente, corresponde a la notadefinitiva resultante de promediar los tres parciales.

Los campos de texto que aparecen al frente de las etiquetes en Java se denominanJTextField y están diseñados 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 botón de comando,aquí se utilizan para responder “haciendo algo” cuando el usuario pulse clic sobre ellos.

En la práctica 2.3 se indicará cómo tomar estos componentes desde una paleta yllevarlos hasta el formulario para obtener el aspecto mostrado en la figura 2.2.

Genéricamente los componentes de tipo JButton, JTextField y JLabel se denominanen programación objetos. Estos objetos tienen unos atributos o propiedades que loscaracterizan y en la mayoría de los casos tienen un comportamiento definido, como sise tratara de seres vivos. Como ejemplo observe que las etiquetas muestran los textos




“Parcial 1:”, “Parcial 2:”, “Parcial 3:” y “Definitiva:”. Esto es posible gracias a que en lapropiedad text de dichos objetos se colocaron estos textos, como se indicará másadelante.

Una propiedad muy importante de los objetos es nombre de variable, conocida deforma resumida como name. Esta propiedad identifica de manera única los objetos.Aunque no vea los nombres de los objetos, estos siempre tienen nombres irrepetiblesdentro de un mismo formulario. En la práctica 2.3 aprenderá a darle nombre a éstos.

2.2.1. Más allá de las etiquetas y los campos de texto

Muchas veces el diseño de un formulario requiere la agrupación de componentes quefaciliten la organización de los mismos. La figura 2.3 es una muestra de ello, alagrupar en cuatro componentes de tipo JPanel la totalidad de componentes deentrada de datos.

Figura 2.3. Paneles, cajas de chequeo y listas

También puede requerirse la posibilidad de activar o desactivar un estado (productocon IVA, por ejemplo), para lo cual están hechas las casillas de selección que en Javase crean mediante el tipo JCheckBox.

Un último y frecuente caso es el de las listas de elementos. La figura 2.3 muestracomo ejemplo las líneas de venta, pero podría ser un listado de estudiantes, deempleados o cualquier otra lista creada en Java mediante un objeto de tipo JList.

Enseguida se presenta la documentación básica de estos componentes:




JPanel: Los objeto de este tipo son contenedores swing de otros objetos y permitenvarios tipos de presentaciones. En la figura 2.3 por ejemplo, los paneles muestran unborde (propiedad border) que no necesariamente tiene que ser visible y un título(propiedad Titled Border).

JCheckBox: Este tipo de componente swing permite elegir un estado de seleccionadoo no seleccionado. En el formulario de la figura 2.3 sólo cuando dicha casilla aparezcaseleccionada, a la línea de venta se le agregará el IVA.

Los objetos creados a partir de la clase JCheckBox del paquete swing cuentan con elmétodo 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 buenaalternativa 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 perono por ello deja de ser interesante. Su razón de ser es permitir el manejo decolecciones de cualquier tipo de objeto.

Los objetos creados a partir de esta clase se redimensionan automáticamente, por loque se puede colocar en ellos cualquier número de objetos sin necesidad de tener queir controlando continuamente en el programa la longitud de la colección. Como ejemplosuponga que requiere mantener una colección de películas como la que se muestra en

la figura 2.5:

Figura 2.5. Ejemplo de un vector de películas.

Una colección manejada con un vector además de permitir agregar elementos, entremuchas otras tareas, también permite buscarlos, eliminarlos uno a uno o todos de una

vez y cambiarlos. A su debido tiempo se profundizará debidamente sobre el manejo devectores, por lo que no debe preocuparle en este momento entender el funcionamientode los mismos.

JList: Este sí es un componente visible para manejar listas que son presentadas alusuario como un grupo de ítems para elegir. Para continuar con el ejemplo de laspelículas, se podría asociar el vector listaPeliculas con un objeto de tipo JList paraque en este último se muestre el listado de películas y se permita elegir una. Demanera similar y esta vez volviendo a la explicación de la figura 2.5, se puede crear un




vector con la colección de líneas de venta y pasárselas a un objeto JList para que lasmuestre.

Un objeto de tipo JList puede tener muchos ítems, o podría crecer tanto como crezcasu vector asociado, por lo que se requiere un objeto adicional para que le proporcioneal JList barras de desplazamiento que permitan moverse por los elementos.

JScrollPane: Este tipo de objeto es muy similar a un JPanel, solo que como semuestra en la figura 2.6, proporciona barras de desplazamiento por lo que es idealpara colocar en él los objetos de tipo JList. Como cualquier panel tiene también laspropiedades border y TitledBorder.

Figura 2.6. Representación visual de cómo un Vector proporciona los elementosque administra un JList, el cual es colocado dentro de un JScrollPane.

En el capítulo 4 se documentará la manera de asociar un objeto de tipo Vector a unode tipo JList para luego mostrar este último dentro de un JScrollPane y dar lafuncionalidad requerida.

JRadioButton: Este tipo de componente se usa normalmente para elegir opcionesmutuamente excluyentes, aunque se pudiera usar para hacer varias selecciones, locual no es recomendable, ya que para este caso existen los objetos de tipoJCheckBox.

Para que un conjunto de componentes JRadioButton permita que sólo uno de ellospermanezca seleccionado, los JRadioButton deben agruparse dentro de un controlinvisible de tipo JButtonGroup. La figura 2.7 muestra un ejemplo del uso de dichoscomponentes:

Figura 2.7. Uso de componentes tipo JRadioButton




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

Figura 2.8. Uso de componentes tipo JComboBox.

2.3. PrácticaEn los pasos siguientes, experimentará de diversas maneras sobre los paquetes de un

proyecto creado en NetBeans y diseñará la interfaz de usuario que se muestra en lafigura 2.2. Dicha interfaz corresponde a la primera aplicación que se desarrollará comoejemplo.

2.3.1. Construcción de un formulario básico

En esta práctica se explican los pasos básicos para crear un formulario que permitaingresar dados al usuario. Sin embargo su funcionalidad no será implementada hastael capítulo 3.

Caso de estudio: Se requiere diseñar un formulario para una aplicación que permitaintroducir tres notas parciales de una asignatura indeterminada, cursada por unestudiante cualquiera. Dadas las tres notas, se puede pulsar un botón para ver la

definitiva correspondiente al promedio obtenido.

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

Datos de entrada Tres valores que pueden tener decimales y que corresponden a lastres notas parciales.

Cálculos La definitiva se calculará mediante la fórmula:

definitiva = (nota1 + nota2 + nota3) / 3

Información de salida Un valor con posibles decimales que corresponde a la definitivalograda.

Restricciones • 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 aplicación no validará que los datos sean correctos o deltipo esperado.

• Sólo diseñe el formulario, no realice entrada de datos,cálculos, ni se preocupe por dar información de salida ya queestas tareas se llevarán a cabo en el siguiente capítulo.




Se sugiere tener mucho cuidado con el uso de las mayúsculas, minúsculas y espaciosporque Java es sensible a estos aspectos. Por consiguiente, antes de dar un nombre aun componente verifique que sí está utilizando el que se indica en estos pasos.

1. Cree un nuevo proyecto con el nombre Practica_2_3_1.

2. Cambie el nombre del paquete por defecto por el de vista. Para esto pulse clic

derecho sobre el nombre del paquete Practica_2_3_1, elija la opciónRefactor y luego la opción Rename (Alt + Mayúsculas + R).

Figura 2.9. Un proyecto y sus paquetes respectivos

3. En la entrada New Name del cuadro Rename Package, introduzca el nuevonombre del paquete, en este caso vista. Tal como se muestra en la figura 2.10,debe quitar la selección de la casilla Preview All Changes antes de pulsar clicsobre el botón Next para evitar pasos adicionales.

Figura 2.10. Cuadro para renombrar paquetes

Terminada esta acción el paquete debe mostrarse en la ficha Projects con elnuevo nombre.

4. Agregue una clase al paquete. Esta vez la clase será de tipo JFrame y laañadirá de la siguiente manera:

a. Pulse clic derecho sobre el nombre del paquete (en este caso vista) y del

menú que se muestra elija la opción New.

b. Del submenú mostrado elija la opción JFrameForm. Si dicha opción no estádisponible elija la opción File /Folder para abrir el cuadro New File. Tal comose muestra en la figura 2.11, en dicho cuadro debe seleccionar la categoríaJava GUI1 Forms y el tipo de archivo JFrame Form, para posteriormentepulsar clic sobre el botón Finish.

1GUI (Graphical User Interface).




Figura 2.11. Selección de tipos de componentes complementarios

c. En la entrada Class Name del cuadro de diálogo New Frame Form, ingresecomo nombre de clase: JFrmCalificacion. Verifique que los demás datosmostrados en el cuadro de la figura 2.12 sean correctos y pulse clic sobre elbotón Finish.

Figura 2.12. Cuadro de diálogo para la creación de clases

Un momento después la ficha de proyectos se actualiza como se muestra enla 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

2No se preocupe por saber ahora a qué corresponden los componentes que aparecen en el Navigator,

gradualmente irá dominando dichos temas.




Importante

•••• Colocar prefijos a los nombres de los componentes indicando su tipo,es una buena práctica de programación que facilita conocer el tipo decomponente. Por esta razón aquí se utiliza el prefijo JFrm para elnombre de la clase. Esto ayudará a identificar fácilmente que la clasees de tipo JFrame.

•••• Los nombres de clases no pueden tener espacios ni deben tenercaracteres especiales y empiezan por una letra mayúscula.

•••• Si verifica el contenido de la carpeta donde se creó el archivo de clase(…\Practicas_2_3_1\src\vista\) encontrará que por cada clasemostrada dentro de un paquete, existe un archivo con extensión .java en la carpeta correspondiente al paquete.

5. Para desplegar el diseño del formulario creado cuando agregó la claseJFrmCalificacion, ubique el elemento JFrmCalificacion dentro de la fichaProject y pulse doble clic sobre él. Esta acción deberá presentar varios cambiosen el IDE, los cuales deben ser similares a los mostrados en la figura 2.14.

Figura 2.14. Representación del cuadro para el diseño de formularios

En la tabla siguiente cada número corresponde a una parte resaltada en la figura2.14:

PARTE DESCRIPCIÓN

1

Corresponde a la clase que agregó en el paso 4 de esta práctica.

Importante: Cuando requiera ver el diseño del formulario y este no aparezca,

pulse doble clic sobre este elementoSi expande el árbol pulsando clic sobre el signo + verá los componentes 2 y 3.

2

Representa el código fuente que NetBeans creó automáticamente pararepresentar el formulario. Si pulsa doble clic sobre este elemento, verá dichocódigo en la ventana del editor. No se sorprenda si mucho del código generadole es desconocido, a medida que avance en estas prácticas comprenderá cadauna de las instrucciones generadas.

3 Este elemento se muestra cuando se pulsa sobre el botón Design marcado con5 en la figura 2.14. Puede necesitar desplegar el subárbol de Form




PARTE DESCRIPCIÓN

JFrmCalificacion para verlo. Si pulsa doble clic sobre este elemento se activala vista de diseño del formulario que en la figura 2.14 aparece marcada con elnúmero 6.

4 El botón Source le permite ver el código fuente de la clase creada.

5El botón Design muestra la vista de diseño del formulario correspondiente a laclase. Es de anotar que no todas las clases que agregue a un proyecto,corresponderán a formularios.

6 El área señalada corresponde al formulario donde se agregarán componentespara diseñar Interfaces Gráficas de Usuario (GUI).

7 La ficha Palette incluye todos los tipos de componentes gráficos que podráagregar a un formulario mientras lo diseñe.

8 Señala la ficha Properties que como su nombre lo indica, muestra laspropiedades del componente que seleccione en el formulario.

En los pasos siguientes aprenderá a utilizar cada una de las partes descritas en latabla anterior, mientras diseña un primer formulario para entrada de datos ysalida de información.

6. En la ficha Palette pulse clic sobre el componente JLabel (javax.swing). De estamanera selecciona un componente para agregar al formulario.

7. Lleve el puntero del ratón hasta el área del formulario (señalado con el número 6en la figura 2.14) y luego pulse clic. De esta manera habrá agregado elcomponente JLabel (etiqueta) al formulario.

8. Repita los pasos 6 y 7 hasta completar cuatro componentes JLabel, dispuestosen el formulario de la manera que se muestran en la figura 2.15.

Figura 2.15. Etiquetas agregadas a un formulario

9. Pulse clic derecho sobre la primera etiqueta, elija la opción Edit Text y cambie eltexto actual por Parcial 1:

10. De nuevo pulse clic derecho sobre la primera etiqueta, elija la opción ChangeVariable Name y cambie el nombre de variable actual por jlblParcial1.

Importante:

• Los nombres de los componentes no pueden tener espacios ni deben tenercaracteres especiales y empiezan por una letra que se recomienda seaminúscula.




• Una buena práctica consiste en colocar un prefijo que identifique el tipo decomponente. En el caso del ejemplo se utilizó el prefijo jlbl para recordarque 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 latabla siguiente:

NOMBRE ACTUAL EDIT TEXT CHANGE VARIABLE NAME

JLabel1 Parcial 1: jlblParcial1



JLabel4 Definitiva: jlblDefinitiva

12. Verifique en la ficha Inspector o en la ficha Projects que las etiquetasagregadas al formulario aparezcan exactamente con los cambios de nombre y detexto que se muestran en la figura 2.16. También verifique que la disposición dedichos componentes sea similar a la mostrada en dicha figura.

Vista de componentes enla ficha Inspector o en laficha Projects

Vista del diseño actual del formulario alque se le han agregado algunoscomponentes de tipo JLabel

Figura 2.16. Visualización de componentes agregados

Nota: Pulsar clic derecho sobre los elementos que aparecen en la fichaInspector despliega el mismo menú emergente de los pasos 9 y 10, que permitecambiar las propiedades de los componentes. Adicionalmente, el elemento

seleccionado de la ficha Inspector será resaltado en la ventana de diseño delformulario.

13. Proceda como se indicó en los pasos del 7 al 10 para agregar esta vez cuatrocomponentes de tipo JTextField (javax.swing), al frente de cada etiqueta y a losque asignará las siguientes propiedades, exactamente con el uso de mayúsculas yminúsculas que se muestra.




NOMBRE ACTUAL EDIT TEXT* CHANGE VARIABLE NAME

jTextField1 jtfParcial1



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

14. Verifique que el diseño del formulario sea similar al que se muestra en la figura2.17.

Figura 2.17. Visualización de etiquetas y campos de texto

15. De la manera indicada agregue en la parte inferior dos componentes de tipoJButton (javax.swing) a los que asignará las siguientes propiedades,exactamente con el uso de mayúsculas y minúsculas que se muestra.

NOMBRE ACTUAL EDIT TEXT* CHANGE VARIABLE NAME

jButton1 Calcular jbtnCalcular

jButton2 Limpiar jbtnLimpiar

16. Verifique en la ficha Inspector o en la ficha Projects que los botones agregadosal formulario aparezcan exactamente con los cambios de nombre y de texto quese muestran en la figura 2.18. También compruebe que la disposición de dichoscomponentes sea similar a la mostrada en dicha figura.

Vista de componentes Vista del diseño general

Figura 2.18. Diseño completo del formulario




17. ¿Quiere ver cómo se ejecuta la aplicación? – Bien, pulse clic derecho sobre elbotón Source (marcado con el 4 en la figura 2.14) y sobre cualquier parte delcódigo de programación que muestra el editor, pulse clic derecho para elegirseguidamente la opción Run File (Shift + F6). El resultado de la ejecución deberáser muy similar al que se muestra en la figura 2.19. Si no es así, haga los ajustesnecesarios.

Figura 2.19. Formulario en ejecución

Nota: No espere a que los botones Calcular y Limpiar “hagan algo” cuandosean pulsados, puesto que no han sido programados aún.

18. Es importante elaborar copias de seguridad de sus proyectos. A continuaciónse le indica la manera más segura de contar con una copia rápida, comprimida yconfiable.

a. Use Mi PC para ubicar y seleccionar la carpeta que contiene el proyecto.

b. Pulse clic derecho sobre dicha carpeta.

c. Elija la opción Enviar a…

d. Selecciona la opción Carpeta comprimida (en zip). Este paso creará unarchivo 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 debidoa que puede tener archivos con extensión jar o class que son reseñadoscomo peligrosos por la aplicación de correo.

2.3.2. Construcción de un formulario con lista desplegable

En esta práctica se explican los pasos básicos para crear un formulario que permitacalcular un incremento de sueldo de la siguiente manera: se pedirá el sueldo actual losaños de antigüedad en la empresa y el código del cargo. Con base en estos datoscuando se pulse el botón Calcular en un formulario como el de la figura 2.20, semostrará el nuevo sueldo.




Figura 2.20. Formulario para el cálculo de nuevos sueldos.

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

aplicación:

Datos de entrada • Un valor real correspondiente al sueldo del empleado.

• Un valor entero equivalente a la antigüedad en la empresa.

• Un código 001, 002, 003 o 004 que corresponde al cargo.

Cálculos El nuevo sueldo con un porcentaje de incremento calculado comose indicará en la práctica 4.3.

Información de salida El nuevo sueldo.

Restricciones No aplica para esta fase de desarrollo.

1. Cree el proyecto Practica_2_3_2 con los paquetes vista y dominio.

2. Al paquete vista agregue una clase de tipo JFrame con el nombre JFrmSueldo.

3. De la ficha Palette, agregue un componente de tipo JPanel.

4. Despliegue el cuadro Properties dando clic derecho sobre el objeto de tipoJPanel y cambie el atributo border pulsando clic sobre el botón que aparece allado derecho de esta propiedad y en el nuevo cuadro que se muestra elijaTitledBorder. Pulse clic sobre el botón Ok para volver al cuadro Properties.

Nota: Si pierde de vista la ubicación de un panel, recuerde que puede buscarloen la lista de componentes que aparecen en la ficha Inspector y pulsar un soloclic sobre él, para que se seleccione nuevamente. Esto mismo puede hacer

cuando pierda de vista una etiqueta (JLabel).

5. Termine de diseñar el formulario de acuerdo a lo mostrado en la figura 2.21 yteniendo en cuenta que al frente de la etiqueta Código del cargo debe agregarun componente de tipo JComboBox.





Figura 2.21. Diseño del formulario JFrmSueldo.

6. Al componente de tipo JComboBox que acaba de agregar, cámbiele los valoresque aparecen en la propiedad model por los valores: 001, 002, 003 y 004 paraque la lista muestre dichos elementos.

7. Para ver los resultados del diseño en tiempo de ejecución, pulse clic derecho

sobre el elemento que representa el formulario y seguidamenteelija la opción Run File (Shift + F6). El resultado de la ejecución deberá ser muysimilar al que se muestra en la figura 2.20. Si no es así, haga los ajustesnecesarios.

2.3.3. Construcción de un formulario con botones de selección

Para esta práctica se supondrá que calcular el valor de una factura de energíaeléctrica, es algo tan sencillo como multiplicar el valor del kilovatio por la cantidad dekilovatios consumidos, luego de lo cual se debe aplicar un descuento de acuerdo unatabla de estratos que no interesa ahora, porque aún no se va a implementar lafuncionalidad del formulario mostrado en la figura 2.22.

Enseguida se procederá a diseñar el formulario que cumpla con los requisitosexpuestos pero, la programación necesaria para su funcionamiento se desarrollará enel capítulo 4.

1. Cree un proyecto con el nombre Practica_2_3_3 con los paquetes vista y

dominio de costumbre.

2. Agregue al paquete vista una clase de tipo JFrame con el nombre JFrmFactura y lleve a cabo los cambios de diseño que se documentan en los pasos siguientes.

3. 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 gráfica.





Figura 2.22. Diseño del formulario JFrmFactura.

• Cambie las propiedades border y title del componente panelEstratos. Para esto, seleccione dicho componente y pulse clic sobre el botón que

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 estamanera cuando se ejecute el programa, el primer botón será el queaparezca seleccionado.

• Agregue un componente de tipo ButtonGroup. No importa en qué partedel formulario lo agregue, siempre quedará invisible pero en la lista de laficha Inspector aparecerá en el nodo Other Components.

• Para todos los objetos JRadioButton seleccione en la propiedadbuttonGroup el elemento bgGrupoEstratos. De esta manera todos losbotones formarán parte de un grupo y sólo se podrá seleccionar uno deellos en tiempo de ejecución. Si no llevara a cabo este paso, se podríanseleccionar a la vez varios de ellos.

4. Pulse clic derecho sobre el código fuente del formulario y seguidamente elija laopción Run File (Shift + F6). El resultado de la ejecución deberá ser muy similara lo que se muestra en la figura 2.22.




2.3.4. Formulario para el manejo de listas

En esta práctica se diseñará un formulario en el que será posible desplegar una lista denúmeros de acuerdo a la opción elegida. Como es costumbre, la funcionalidad seimplementará en el capítulo 4.

1. Cree un nuevo proyecto con el nombre Practica_2_3_4, nombre que facilitará

su referencia a esta parte del capítulo. Igual que en los anteriores, agregue adicho proyecto los paquetes vista y dominio y elimine el paquete que NetBeanscrea por defecto.

2. En el paquete vista agregue un JFrame con el nombre JFrmSerie y diséñelo dela manera que se muestra en la figura 2.23, teniendo en cuenta que elcomponente que aparece al lado derecho es de tipo JList.


Figura 2.23. Diseño de un formulario para generación de series.

3. Pulse clic derecho sobre el objeto JList que acaba de agregar, elija la opciónProperties y dé clic sobre el botón que aparece al lado derecho de la opciónmodel.

4. En el nuevo cuadro que se muestra, pulse clic sobre el botón Reset to default ycierre el cuadro Properties. Estas acciones eliminarán los elementos queaparecen por defecto cuando se crea un objeto JList.

5. Pulse clic derecho sobre el código fuente del formulario y seguidamente elija laopción Run File (Shift + F6). El resultado de la ejecución deberá ser muy similar

a lo que se muestra en la figura 2.23, pero el objeto JList aparecerá sinelementos y por consiguiente sin la barra de desplazamiento vertical.

2.3.5. Construcción de un formulario para la facturación de productos

Se debe implementar un formulario para una aplicación de ventas que trabaje de lasiguiente manera:




TABLA DE ANÁLISIS DEL PROBLEMA

Datos de entrada • Un String con el nombre del producto.

• Un double con el precio del producto.

• Un int con la cantidad del producto a facturar.

Cálculos • No aplica para esta práctica

Información de salida • No aplica para esta práctica

Restricciones• Se dispondrá de un botón Iniciar venta que podrá los datos

de total venta y líneas de la venta actual en cero.

• Se dispondrá de un segundo botón Agregar línea de venta.

• En esta versión no hay implementación de la funcionalidad.

El formulario respectivo tendrá la apariencia que se mostró en la figura 2.3 y seimplementará como se indica a continuación:

1. Cree un nuevo proyecto con el nombre Practica_2_3_5 y con los dos paquetes

que se viene trabajando: vista y controlador.

2. Agregue en el paquete vista un JFrame con el nombre de JFrmVenta.

3. De la ficha Palette, agregue un componente de tipo JPanel.

4. Despliegue el cuadro Properties dando clic derecho sobre el panel y cambiealgunos de los valores de sus atributos de la manera que se indica a continuación:

border: Pulse clic sobre el botón que aparece al lado derecho de estapropiedad y en el cuadro que aparece elija TitledBorder y como Title escriba

“Entrada de datos:”. Pulse clic sobre el botón Ok para volver al cuadroProperties.

Nota: Si pierde de vista la ubicación de un panel recuerde que puede buscarlo en

la lista de componentes que aparecen en la ficha Inspector y pulsar un solo clicsobre él, para que se seleccione nuevamente.

5. Proceda como en el paso 4 para anexar otros dos paneles que hagan ver elformulario como se muestra en la figura 2.24.

Figura 2.24. Paneles agregados a un formulario.




6. Agregue en la parte del formulario donde no hay paneles, un componente de tipoJList, 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 opciónProperties y dé clic sobre el botón que aparece al lado derecho de la opciónmodel.

8. En el nuevo cuadro que se muestra, pulse clic sobre el botón Reset to default ycierre el cuadro Properties. Estas acciones eliminarán los elementos queaparecen por defecto cuando se crea un objeto JList.

9. Seleccione un objeto de tipo JCheckBox y colóquelo dentro del panel Opciones.

10. Agregue los demás componentes que se muestran en la figura 2.26, de talmanera que el formulario quede exactamente como el que se muestra en lafigura.

Figura 2.26. Vista de diseño de un formulario de facturación.




Tenga en cuenta los siguientes aspectos:

• La etiqueta que se incluye dentro del panel que está dentro del JFrameTotal de la venta, debe tener el tamaño resaltado en la figura 2.26.

• Dicha etiqueta tiene asignado en la propiedad text un cero (0), sinespacios.

• La propiedad HorizontalAlignment de la etiqueta se cambió a CENTER.

• Al componente JCheckBox se le cambió el texto por defecto mediante laopción Edit text que se muestra cuando se pulsa clic derecho sobre lamayoría de componentes.

11. Utilice la ficha Inspector para seleccionar cada componente, dando un solo clicsobre ellos y cambie los nombres de variables de objetos, de acuerdo a losmostrados 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 ningúnmomento se incluyó dentro de un componente de tipo JScrollPane. Sin embargola figura 2.27 muestra que NetBeans agregó automáticamente 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 sedespliega elija la opción Properties y proceda a modificar las propiedadesborder y TitledBorder. La apariencia final del formulario será la que se muestraen la figura 2.28.




Figura 2.28. Disposición final de los componentes del formulario JFrmVenta.

13. Pulse clic derecho sobre el código fuente del formulario y seguidamente elija laopción Run File (Shift + F6). El resultado de la ejecución deberá ser muy similara lo que se mostró en la figura 2.3, pero el objeto JList aparecerá sin elementosy por consiguiente sin la barra de desplazamiento vertical.

2.4. TalleresElabore los siguientes talleres con base en las explicaciones de la práctica 2.3. Tengaen cuenta que en capítulos posteriores necesitará los proyectos que se implementen eneste capítulo y que para entonces ya no se darán indicaciones de cómo elaborar losformularios, a menos que cuenten con componentes no vistos en este capítulo.

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

Caso de estudio: Se requiere una aplicación que permita introducir cuatro notasparciales 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 botón para ver la definitiva obtenida.


Datos de entrada Cuatro valores que pueden tener decimales y que corresponden alas cuatro notas parciales.

Cálculos La definitiva se calculará mediante la suma de los valoresporcentuales de las notas.

Información de salida Un valor con posibles decimales que corresponde a la definitivalograda.

Restricciones En esta versión no se agrega funcionalidad.




1. Use la ficha Projects para dar clic en el elemento que representadicho proyecto, el cual por supuesto debe estar cargado en la ficha Projects.

2. Del menú contextual que se despliega, elija la opción Copy Project.

3. 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 diálogo “Copia de proyectos”

4. Verifique la localización del proyecto en la entrada Project Location, antes depulsar el botón Copy que da inicio a la copia del proyecto.

5. En este nuevo proyecto, seleccione el formulario y lleve a cabo los cambios que sedocumentan en la figura 2.30.


Figura 2.30. Nueva GUI para el cálculo de notas definitivas

2.4.2. GUI para aplicación de pago de facturas de energía.

Caso de estudio: Para este taller se supondrá que calcular el valor de una factura deenergía eléctrica, es algo tan sencillo como multiplicar el valor del kilovatio por lacantidad de kilovatios consumidos.





Datos de entrada Un valor entero que corresponde al número de kilovatiosconsumidos y un valor real correspondiente al valor de cadakilovatio.

Cálculos El valor de la factura es igual al producto de kilovatios consumidospor valor del kilovatio.

Información de salida Un valor de factura con posibles decimales.Restricciones En esta versión no se implementa la funcionalidad.


2. Cambie el nombre del paquete que NetBeans crea por defecto por vista.

3. Agregue al paquete vista una clase de tipo JFrame y asigne el nombreJFrmFactura a dicha clase.

4. Implemente el formulario de acuerdo a la información provista en la figura 2.31.


Figura 2.31. GUI para el cálculo básico de facturas de energía

2.4.3. GUI para el cálculo de ππππ mediante series.

Enseguida se presenta un sencillo diseño de una aplicación que se implementará en elcapítulo 4, para mostrar diferentes series con las que algunos matemáticos han

calculado el valor de ππππ.



3. Al paquete vista de este mismo proyecto agregue un JFrame con el nombreJFrmPI de acuerdo con el diseño que se muestra enseguida:





Figura 2.32. GUI para la demostración de cálculos mediante métodos

2.4.4. GUI para la demostración de ciclos anidados.

El formulario que diseñará en esta práctica servirá para exponer la implementación enel capítulo 4 de estructuras llamadas ciclos anidados.



3. Al paquete vista de este mismo proyecto agregue un JFrame con el nombreJFrmTablas de acuerdo con el diseño que se muestra enseguida:


Figura 2.33. GUI para la demostración de ciclos anidados

4. Pulse clic derecho sobre el código fuente del formulario y seguidamente elija laopción Run File (Shift + F6). El resultado de la ejecución deberá ser muy similara lo que se mostró en la figura 2.33, pero tanto los combos desplegables como elobjeto JList aparecerán sin elementos.




2.4.5. GUI para la de demostración de condiciones.

Los siguientes pasos crean una versión ligeramente distinta del formulario que se

implementó en la práctica 2.4.1.

1. Desde la ficha Projects de NetBeans copie el proyecto Practica_2_4_1 comoPractica_2_4_5.

2. En el paquete vista modifique o agregue un JFrame con el nombreJFrmCalificacion y diséñelo de la manera que se muestra en la figura 2.34.

Tenga presente agregar la etiqueta resaltada antes de los botones en la figura2.34 con el nombre que se sugiere en la lista de componentes.


Figura 2.34. Disposición final de los componentes del formulario JFrmCalificacion.

2.4.6. GUI para la de demostración de casos.

El formulario que implementará enseguida, permitirá ingresar un número enterocorrespondiente a un mes y cuando se pulse el botón Calcular, mostrará el número dedía de dicho mes. Como siempre los cálculos necesarios se implementarán en el

capítulo 4. Las especificaciones del formulario puede verlas en la figura 2.35.

1. Cree el proyecto Practica_2_4_6.

2. En el paquete vista agregue un JFrame con el nombre JFrmDiasMes y diséñelode la manera que se muestra en la figura 2.35.





Figura 2.35. Diseño del formulario JFrmDiasMes.

2.4.7. GUI para la de demostración de intercambio de valores.El formulario correspondiente a este diseño servirá en el capítulo siguiente para llevara cabo una sencilla demostración de intercambio de valores.


2. En el paquete vista agregue un JFrame con el nombre JFrmIntercambio ydiséñelo de la manera que se muestra en la figura 2.36.


Figura 2.36. Diseño del formulario para la aplicación de intercambio de valores.

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

El formulario correspondiente a este diseño servirá en el capítulo siguiente para llevara cabo una sencilla demostración sobre el uso de cadenas (objetos de tipo String).





2. En el paquete vista agregue un JFrame con el nombre JFrmCadena y diséñelode la manera que se muestra en la figura 2.37.

Figura 2.37. Diseño del formulario para la aplicación de unión de cadenas.

Restricciones

• La interfaz de usuario se llamará JFrmCadena y tendrá los componentesmostrados en la figura 2.38:

Figura 2.38. Componentes del formulario JFrmCadena.




2.4.9. GUI para el cálculo de conversiones de medidas métricas.

El formulario correspondiente a este diseño servirá en el capítulo siguiente para llevara cabo una sencilla demostración de la estructura de control secuencial.


2. En el paquete vista agregue un JFrame con el nombre JFrmConversion ydiséñelo de la manera que se muestra en la figura 2.39.


Figura 2.39. Componentes del formulario JFrmConversion.

2.5. Cuestiones y puntos a considerar1. ¿A qué se denomina objeto en programación?

2. En la práctica de este capítulo se agregaron tres tipos de componentes al

formulario. ¿Cuáles fueron? ¿En qué paquete se encuentran dichos tipos decomponentes?

3. ¿Qué propiedades se cambiaron de los componentes agregados al formulario?Indique los objetivos que llevaron a hicieron dichos cambios.

Practica002

Documents

Transcript of Practica002