Universidad los Ángeles de Chimbote

Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

OBJETOS CONTENEDORES JPANEL Y

JSCROLLPANEL

Swing Containers
Los objetos pertenecientes a Swing Containers, son objetos que permiten agrupar a
otros objetos y facilitan el manejo de ciertos procesos dentro de una aplicación. En el
entorno de NetBeans la paleta de los Swing Containers muestra lo siguiente:

En el presente tema vamos a hacer uso de los objetos Jpanel y JScrollPanel.

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 1

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

Objeto Contenedor JPanel

Este componente lo que nos permite es Agrupar Otros Componentes dentro de él (algo
así como el Frame en Visual.net o el GroupBox de Power Builder).
Para empezar creamos un proyecto, una vez hecho este paso, vamos al panel del lado
derecho donde se encuentran los elementos Swing Containers y seleccionamos el
componente Panel (Jpanel), lo seleccionamos y soltamos en el Formulario.

Después de hacer esto soltamos y si hacemos click en otro lado del área del formulario
nótese que pareciera que el Panel no estuviera pero si esta pase el mouse por donde
colocó el Panel y ahí lo ubicará, pero no se alarmen si está.

Bien para no tener estos problemas vamos a darle un borde a nuestro JPanel, En la

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 2

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

ventana de propiedades como se muestra en la imagen seleccionamos a la propiedad

Border.

Click!

Nos mostrará la siguiente imagen

1. Seleccionar TitledBorder

2. Colocar en Title: Seleccione un Color

3. Click en Ok y Listo

Bien tendremos esto:

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 3

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

Propiedad más usada:

● Border: Se establece el borde y el título si fuese necesario.

Método más usado:

● setEnabled(): Para habilitar o inhabilitar el uso del objeto.

Objeto Contenedor JScrollPanel

Un objeto ScrollPanel permite ubicar dentro de ella uno o varios objetos que comúnmente
son objetos de control. Cuando se sobrepasa el espacio del objeto JScrollPanel, éste
muestra las barras de desplazamiento vertical y/o horizontal.

Por ejemplo, agregamos el JScrollPanel y dentro del mismo agregamos un JPanel para
poder utilizar los componentes libremente; no olvidarse de la propiedad Aboslute Layout
que nos permite colocar en cualquier posición otro componente dentro del Jpanel.
Haremos que cuando cargue el formulario cargue un texto dentro de un Frame

BtnMostrar

JPanel
BtnClear

JScrollPanel

Si colocamos el siguiente código en el botón de comando Mostrar:

private void BtnMostrarActionPerformed(java.awt.event.ActionEvent evt) {

lblTexto.setText(“Observa que el código de ejemplo selecciona el tamaño preferido del
contenedor del panel desplazable. Una alternativa sería seleccionar el tamaño preferido

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 4

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

del propio panel desplazable. De cualquier modo, se está limitando el tamaño del panel
desplazable. Esto es necesario porque el tamaño preferido de un panel desplazable es ser
tan grande como pueda”);
}

Para el botón de comando Limpiar colocamos:

private void btnLimpiar ActionPerformed(java.awt.event.ActionEvent evt) {

lblTexto.setText(“”);
}

Al ser ejecutado se debe mostrar el formulario como sigue.

Aplicación
Construye una aplicación que permita ingresar el título de una película, seleccionar su
categoría que puede ser Comedia, acción, Dibujos animados o Drama. Además se debe
ingresar la duración en minutos de la película y el nombre del actor principal. Una vez
ingresado los datos se procede a agregar en un objeto JTable generando una fila de datos
y mostrando en un cuadro de texto el número de películas ingresadas.

Solución:
1. Creamos un proyecto denominado Ejercicios.

Luego dar click en el botón de comando Finish (Terminar si el entorno de

NetBeans es en castellano).

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 5

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

2. Estando en el entorno de NetBeans, seleccionamos el paquete ejercicios y dando

click botón derecho del mouse se muestra un menú flotante, donde seleccionamos
Formulario Jframe.

3. A continuación, colocaremos como nombre de formulario frmPeliculas.

Luego dar click en el botón de comando Finish (en caso de que la versión de

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 6

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

NetBeans es en castellano entonces dar click en el botón de comando Terminar)

4. Se muestra el entorno de desarrollo de NetBeans y no olvidemos de dar click en el

botón derecho del mouse sobre el formulario y establece AbsoluteLayout en
SetLayout.

5. Procedemos a colocar un objeto de control Jlabel con la expresión “PELICULA:” y

al lado derecho un cuadro de texto JTextField.

6. Colocamos un objeto contenedor JPanel por debajo de la expresión “PELICULA:”.

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 7

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

7. Procedemos a utilizar la ventana de propiedades del objeto Jpanel. No vamos a

usar la ficha de propiedades que se encuentra al lado derecho del diseño del
formulario, sino que seleccionamos al objeto JPanel y luego al dar click botón
derecho del mouse, seleccionamos la opción propiedades.

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 8

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

8. Seleccionamos la propiedad Border y damos click en el botón de comando

correspondiente a ésta propiedad.

9. A continuación, seleccionamos como borde disponible a TitledBorder.

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 9

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

10. En título colocamos “Categorías de Películas”.

11. Ahora procedemos a definir el borde (propiedad que se encuentra encima de

Título).

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 10

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

12. Posteriormente, seleccionamos el tipo de Borde EtchedBorder.

13. Luego de dar click en el botón de comando OK, queda definido el Borde y el título.

14. Volvemos a dar click en el botón de comando OK y regresamos a la ventana de

propiedades del JPanel.

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 11

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

Cerrar ésta ventana usando el botón de comando Close (Cerrar).

15. El diseño del formulario queda así:

16. Ahora debemos hacer algo muy importante, que es establecer como
AbsoluteLayout al objeto JPanel para que permita colocar los objetos de control
con facilidad.

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 12

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

17. Colocamos cuatro objetos de tipo JRadioButton dentro del objeto Panel,
quedando el diseño del formulario así:

18. No olvidemos de crear un objeto ButtonGroup e indicar para cada objeto

JRadioButton en su propiedad ButtonGroup que pertenecen a ButtonGroup1.

19. Seguimos agregando los objetos de control según observamos en el diseño del
formulario. Esta vez vas a agregar un objeto JScrollPanel para colocar dentro de
ella a un objeto JTable.

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 13

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

20. A continuación colocamos un objeto JTable. Los nombres de los objetos de control
son tal como se aprecia en el siguiente diseño de formulario.

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 14

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

21. Vamos a proceder a programar. Comenzamos con hacer uso del paquete swing y
específicamente a las clases JOptionPane y a la clase JTable.

22. Luego procedemos a crear un modelo para el objeto JTable llamado Tabla a través
de la clase DefaultTableModel. Lo hacemos dentro de la clase frmNotas. Usar la
clase DefaultTableModel es posible gracias al import javax.swing.table.*;

Declaramos y creamos una variable de memoria dtm del tipo DefaultTableModel.

23. En el método constructor programamos lo siguiente (sólo escribe lo que se señala

la llave de color rojo):

Declaramos y creamos una variable de memoria titulos del tipo cadena y es un

arreglo. Esta variable titulos se inicializa con los valores “Título de la Película”,
”Categoría”, “Duración(min)” y “Actor Principal”, que serán los títulos de las
columnas del objeto JTable. Luego, con el método setColumnIdentifiers() se
define las columnas con sus respectivos títulos en la variable dtm (modelo del
JTable llamado Tabla). Se vincula el modelo, representado en la variable dtm, al
objeto JTable llamado Tabla. Inhabilitamos los objetos indicados en la
programación y damos el enfoque al botón de comando Nuevo.

24. Procedemos a programar en el botón de comando Nuevo (sólo escribe lo que se

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 15

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

señala la llave de color rojo).

25. Procedemos a programar en el botón de comando Agregar (sólo escribe lo que se

señala la llave de color rojo).

Declaramos una variable de memoria llamada datos de tipo String y de tamaño 4.

También declaramos una variable entera llamada total. En el primer elemento del
arreglo datos (datos[0]) se asigna el valor ingresado en el cuadro de texto txtPel
(el título de la película). A continuación, se hace uso de sentencias selectivas IF

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 16

 Universidad los Ángeles de Chimbote
Facultad de Ingeniería
Escuela Profesional de Ingeniería de Sistemas Asignatura: Programación Visual

para evaluar cuál de los objetos JRadioButton ha sido seleccionado y según el

objeto seleccionado se asigna la categoría al segundo elemento del arreglo datos
(datos[1]). En el tercer elemento (datos[2]) y cuarto elemento (datos[3]) del arreglo
datos se asignan la duración y el actor principal respectivamente. Con el método
addRow(), agregamos una fila en el objeto Table con los datos contenidos en el
arreglo datos. Finalmente, en la variable total se asigna la cantidad de filas de
datos que tiene el objeto JTable haciendo uso del método getRowCount() de la
variable objeto dtm. Este último valor conseguido es visualizado en el cuadro de
texto txtTotal a través del método setText().

26. Luego, procedemos a programar en el botón de comando Eliminar (sólo escribe lo

que se señala la llave de color rojo).

Declaramos las variables fila y total de tipo entero. La variable fila se le asigna el
valor de la posición de la fila seleccionada en el objeto Jtable llamado Tabla. Con la
sentencia IF se evalúa a la variable fila si es mayor o igual a cero procedemos a
remover o borrar la fila previamente seleccionada, caso contrario se muestra un
mensaje indicando que se debe seleccionar una fila en la Tabla. Finalmente, se
muestra la cantidad de filas agregadas en el cuadro de texto txtTotal y haciendo
uso del método setRowCount() perteneciente a dtm.

27. Finalmente, programamos en el botón de comando Cerrar.

28. Procedemos a ejecutar el formulario.

Elaborado por: Ing. Martín Gustavo Salcedo Quiñones 17