Ciclo 2: Programación Básica

Sesión 11:
Diseño de Interfaces de usuario (UI).

Programa Ciencias de la Computación e Inteligencia Artificial

Escuela de Ciencias Exactas e Ingeniería
Universidad Sergio Arboleda
Bogotá
 Contenido

• Introducción a SWING
• Wireframes
• Contenedores
• JFrame.
• JPanel.
• Propiedades generales.
• Layout.
Introducción a SWING
 Introducción a SWING
Librería liviana parte del paquete estándar de Java.

Permite crear interfaces gráficas de usuario en Java.

SWING tiene una cantidad enorme de clases.

Los elementos son principalmente divididos en Contenedores y

Componentes.
 SWING
Podemos utilizar contenedores para crear la interfaz gráfica que deseemos

Tomado de: https://www.google.com/url?sa=i&url=http%3A%2F%2Fwww.edu4java.com%2Fes%2Fswing%2Fswing3.html&psig=AOvVaw0we7LCQ90zY1x3qYv-

1rYZ&ust=1622340085792000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKid0Pfl7fACFQAAAAAdAAAAABAD
 SWING - Componentes
Elementos agradables visualmente.

Nos permite incluir una interfaz para interactuar con el usuario

Ejemplo: Un botón, campo de texto y etiquetas.

Tomado de: https://www.google.com/url?sa=i&url=http%3A%2F%2Fwww.edu4java.com%2Fes%2Fswing%2Fswing3.html&psig=AOvVaw0we7LCQ90zY1x3qYv-

1rYZ&ust=1622340085792000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKid0Pfl7fACFQAAAAAdAAAAABAD
 SWING
Antes de construir una interfaz gráfica, generalmente se realiza un diseño inicial a
través de un wireframe, un mockup o un prototipo

Tomado de: https://www.google.com/url?sa=i&url=http%3A%2F%2Fwww.edu4java.com%2Fes%2Fswing%2Fswing3.html&psig=AOvVaw0we7LCQ90zY1x3qYv-

1rYZ&ust=1622340085792000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKid0Pfl7fACFQAAAAAdAAAAABAD
Wireframes
 Wireframes
Diseño conceptual de interfaces de usuario.

Bocetos.

Ayuda a visualizar un proyecto previo al

código.
 Wireframes - Balsamiq
Software sencillo para diseño de wireframes.

Tiene versión online y de escritorio.

Se recomienda usar la versión online:

https://balsamiq.com/wireframes/

Vincular con cualquier cuenta de correo.

Iniciar la prueba gratis de 30 días.

 Wireframes - Balsamiq
El manejo es intuitivo.

Algunos de los elementos más utilizados son:

Window (En el menú de Containers).

Field Set (Menú de Containers).

Todo tipo de botones (Menú Buttons).

Label (Menú Common).

JFrame
 SWING - JFrame
Es el contenedor principal.

jFrame() Es el constructor de la clase, crea una ventana sin título y no es visible.

setVisible(boolean b) Hace visible o no visible un jFrame que haya sido instanciado.

setTitle(String titulo) Le agrega el título a la ventana. En el ejemplo el título es:

“Ejemplo Jframe”.

Tomado de:
https://www.google.com/url?sa=i&url=https%3A%2F%2Fes.wikipedia.org%2Fwiki%2FJframe&psig=AOvVaw1rZCHSpau1nMgSciuZOV_3&ust=1622340732245000&source=images&cd=vfe&ved=0
CAIQjRxqFwoTCPDtpqvo7fACFQAAAAAdAAAAABAD
 SWING - JFrame
setSize(int ancho, int alto) Definir el tamaño de la ventana (en píxeles).

pack() Modifica el tamaño para que se ajuste al tamaño de su contenedor.

setLocation(int horizonta, int vertical) Ubicación en la pantalla (en píxeles).

Tomado de:
https://www.google.com/url?sa=i&url=https%3A%2F%2Fes.wikipedia.org%2Fwiki%2FJframe&psig=AOvVaw1rZCHSpau1nMgSciuZOV_3&ust=1622340732245000&source=images&cd
=vfe&ved=0CAIQjRxqFwoTCPDtpqvo7fACFQAAAAAdAAAAABAD
JPanel
 SWING - JPanel
Es un contenedor.

A diferencia de Jframe, no incluye los elementos de una ventana.

Se usa para agrupar elementos.

En el ejemplo se puede ver en donde dice “Login Panel” que el panel contiene el botón y los
textos.

Tomado de:
https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.codejava.net%2Fjava-se%2Fswing%2Fjpanel-basic-tutorial-and-
examples&psig=AOvVaw3b7cNlPeYc2QuqfVqc1LuL&ust=1622342894827000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi-n7Lw7fACFQAAAAAdAAAAABAe
 SWING - JPanel
En este otro ejemplo podemos observar un panel (negro) que contiene otros 3 paneles (rojos).

Tomado de: https://www.google.com/url?sa=i&url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F20293545%2Fhow-do-you-stretch-a-jpanel-within-a-

jpanel&psig=AOvVaw3b7cNlPeYc2QuqfVqc1LuL&ust=1622342894827000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi-n7Lw7fACFQAAAAAdAAAAABAj
 SWING - JPanel
JPanel() Crear un nuevo panel vacío.

.add(Component componente) Agrega un componente (botón, texto, etc.) al panel.

Tomado de: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.codejava.net%2Fjava-se%2Fswing%2Fjpanel-basic-tutorial-and-

examples&psig=AOvVaw3b7cNlPeYc2QuqfVqc1LuL&ust=1622342894827000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi-n7Lw7fACFQAAAAAdAAAAABAe
Layout
 Layout
Podemos utilizar diferentes layout manager para organizar los elementos en los contenedores.

GridLayout
FlowLayout
BoxLayout
BorderLayout
GroupLay

Tomado de: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.codejava.net%2Fjava-se%2Fswing%2Fjpanel-basic-tutorial-and-

examples&psig=AOvVaw3b7cNlPeYc2QuqfVqc1LuL&ust=1622342894827000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi-n7Lw7fACFQAAAAAdAAAAABAe
 BorderLayout
El BorderLayout se utiliza para organizar los componentes en cinco regiones: norte, sur, este,
oeste y centro.

Tomado de: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.codejava.net%2Fjava-se%2Fswing%2Fjpanel-basic-tutorial-and-

examples&psig=AOvVaw3b7cNlPeYc2QuqfVqc1LuL&ust=1622342894827000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi-n7Lw7fACFQAAAAAdAAAAABAe
 FlowLayout
El FlowLayout se utiliza para organizar los componentes en una línea, uno tras otro (en un
flujo). Es el diseño predeterminado de subprograma o panel.

Tomado de: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.codejava.net%2Fjava-se%2Fswing%2Fjpanel-basic-tutorial-and-

examples&psig=AOvVaw3b7cNlPeYc2QuqfVqc1LuL&ust=1622342894827000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi-n7Lw7fACFQAAAAAdAAAAABAe
 BoxLayout
BoxLayout se utiliza para organizar los componentes de forma vertical u horizontal. Para este
propósito, BoxLayout proporciona cuatro constantes. X_AXIS, Y_AXIS, LINE_AXIS, PAGE_AXIS

Tomado de: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.codejava.net%2Fjava-se%2Fswing%2Fjpanel-basic-tutorial-and-

examples&psig=AOvVaw3b7cNlPeYc2QuqfVqc1LuL&ust=1622342894827000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi-n7Lw7fACFQAAAAAdAAAAABAe
 GridLayout
GridLayout se utiliza para organizar los componentes en una cuadrícula rectangular. Se muestra
un componente en cada rectángulo.

Tomado de: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.codejava.net%2Fjava-se%2Fswing%2Fjpanel-basic-tutorial-and-

examples&psig=AOvVaw3b7cNlPeYc2QuqfVqc1LuL&ust=1622342894827000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi-n7Lw7fACFQAAAAAdAAAAABAe
 Layout
Javatpoint ofrece documentación detallada sobre los diferentes
LayoutManagers disponibles en Swing

https://www.javatpoint.com/java-layout-manager

Tomado de: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.codejava.net%2Fjava-se%2Fswing%2Fjpanel-basic-tutorial-and-

examples&psig=AOvVaw3b7cNlPeYc2QuqfVqc1LuL&ust=1622342894827000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi-n7Lw7fACFQAAAAAdAAAAABAe
Ejercicios
 Ejercicios
Replique las siguientes ventanas utilizando los diferentes Layout manager disponibles en Swing.
Modifique propiedades como el color, tamaño y etc. El objetivo de este ejercicio es
comprender como distribuir objetos en un contenedor

Tomado de: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.codejava.net%2Fjava-se%2Fswing%2Fjpanel-basic-tutorial-and-

examples&psig=AOvVaw3b7cNlPeYc2QuqfVqc1LuL&ust=1622342894827000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi-n7Lw7fACFQAAAAAdAAAAABAe
 Referencias

[1] Sierra, K., & Bates, B. (2013). Head first java. " O'Reilly Media, Inc.".
[2] Martin, R. C. (2009). Clean code: a handbook of agile software craftsmanship. Pearson Education.
(Chap 1, 2)
[3] Sommerville, I. (2016). Software Engineering GE. Pearson Australia Pty Limited. (Chap 6, 6.3)
[4] Coronel, C., Morris, S., & Rob, P. (2011). Bases de datos: diseño, implementación y administración.
Cengage Learning Editores. (Chap 1)
[5] Seidl, M., Scholz, M., Huemer, C., & Kappel, G. (2015). UML@ classroom: An introduction to
object-oriented modeling. Springer. (Chap 1, 4)