Introducción a Swing Taller de Programación 2021 - EVA Fing

Introducción a Swing
Taller de Programación 2021
tprog@fing.edu.uy

Introducción

• ¿Qué debemos desarrollar?
• ¿Cómo aplicamos los conocimientos previos?
• ¿Por dónde empezar?

• Empecemos por entender el contexto y la
  arquitectura de lo que debemos construir en
  esta primera etapa

Introducción
• Desarrollaremos un sistema distribuido
• Cada componente tiene su propia arquitectura

Introducción
• Conocemos lo que es la Arquitectura en Capas

Introducción

Introducción

   • Pensemos en la calidad del software
   • Más precisamente en la USABILIDAD

Introducción

Introducción
• Relacionémoslo con el laboratorio

         Diagrama de componentes
            propuesto en la letra
          para el Servidor Central

Introducción
• Resumen del contexto
  ▫ Se requiere una capa de presentación
    gráfica, no por consola de comandos
  ▫ Es decir, el proyecto requiere una
    tecnología para construir una capa de
    presentación más amigable e intuitiva
  ▫ Para cumplir con dicho requerimiento se
    propone el uso de Swing

¿Qué es Swing?
• Tecnología Java para la construcción de
  interfaces de gráficas (GUI) de escritorio
• Biblioteca que contiene un conjunto de
  controles y elementos gráficos que permiten
  interactuar con la lógica de la aplicación
   • javax.swing
   • javax.swing.events
• Permite construir interfaces capaces de ser
  ejecutadas en diferentes plataformas

¿Qué es Swing?
• Veamos las principales características:
  ▫ Componentes :: qué forma parte de la GUI
  ▫ Layout Managers :: cómo se organizan
  ▫ Modelos :: cómo se muestra información
  ▫ Eventos :: cómo se realizan acciones

¿Qué es Swing? :: Componentes
• Jerarquía de componentes
 ▫ Contenedores de Alto Nivel (top-level containers)
    son la raíz de la jerarquía de componentes
 ▫ Contenedores Intermedios (intermediate containers)
    pueden tener otros contenedores intermedios y/o
     componentes básicos
 ▫ Componentes Básicos (basic components)
    controles elementales para entrada y salida de
     datos a los usuarios finales como botones, listas,
     etiquetas, etc.

¿Qué es Swing? :: Componentes
                          JFrame

               JMenuBar
               JMenu

               JMenuItem                    JInternalFrame

        JComboBox
                                   JLabel

           JTextField
                                                   JButton

¿Qué es Swing? :: Componentes
• Contenedores de Alto Nivel
 ▫ Algunos top-level containers
    JFrame: ventana con título, borde y contenido
    JDialog: sub-ventana independiente (cuadro de
     diálogo)
 ▫ Para visualizar un control Swing en pantalla, debe
   pertenecer a alguna jerarquía de contenedores (cuya
   raíz será un top-level container)
 ▫ Cada top-level container tiene un content-pane que
   contendrá todos los componentes visibles

¿Qué es Swing? :: Componentes
• Contenedores de Alto Nivel
   • Opcionalmente un top-level puede incluir
    una barra de menús (menu bar)
  • La barra de menú no está
    contenida en el content-pane

¿Qué es Swing? :: Componentes
• Contenedores Intermedios, ejemplos
 ▫ JPanel: contenedor de componentes
 ▫ JScrollPane: proporciona barras de desplazamiento
   alrededor de un componente
 ▫ JSplitPane: permite al usuario cambiar el tamaño
   relativo de dos componentes
 ▫ JInternalFrame: ventana dentro de otra ventana

¿Qué es Swing? :: Componentes
• Contenedores Básicos, ejemplos
 ▫ JLabel: etiqueta textual
 ▫ JTextField: campo para el ingreso de texto
 ▫ JComboBox: muestra una lista de opciones como un
   combo desplegable
 ▫ JButton: botón que permite asociar una acción al
   evento de pulsado del botón

¿Qué es Swing? :: Layouts
• Layout
 ▫ Se refiere al esquema de distribución de los
   elementos dentro de un diseño
• Layout Manager
 ▫ Es un objeto que implementa la interfaz
   LayoutManager y determina el tamaño y posición
   de los componentes dentro de un contenedor
 ▫ Realiza el layout (tamaño y ubicación) automático
   de los elementos que se agregan al contenedor al
   cual el layout manager controla

¿Qué es Swing? :: Layouts
• Layout Manager
 ▫ Existen múltiples formas preexistentes de layout
   managers así como la posibilidad de no utilizar
   ningún layout manager (llamado Absolute Layout).
 ▫ También se pueden crear layout managers
   personalizados (poco común y desaconsejable)
 ▫ Los más sencillos son: BorderLayout, FlowLayout,
   BoxLayout y GridLayout

¿Qué es Swing? :: Layouts
            BorderLayout                             FlowLayout

                                      Acomoda los componentes de izquierda a derecha

Utiliza cinco zonas para colocar componentes          BoxLayout

              GridLayout

                                        Componentes de forma horizontal y vertical (X, Y)

  Acomoda componentes en forma de matriz

¿Qué es Swing? :: Modelos
• Uso de Modelos (pequeña visión)
 ▫ Casi la totalidad de los componentes poseen un
   modelo (Model), aunque típicamente el
   programador no necesite saber de él
 ▫ Los modelos más útiles son colecciones de
   elementos que serán mostrados por componentes
 ▫ Por ejemplo, si tenemos una lista de elementos, y
   queremos mostrarlo en un control JList, debemos
   trabajar sobre el modelo de la lista (con la
   colección), para que esta se vea bien en pantalla

¿Qué es Swing? :: Modelos
• Un uso necesario de los modelos es para
 manipular la información de una JTable

¿Qué es Swing? :: Eventos
• Manejo de eventos
  ▫ Un evento ocurre cada vez que el usuario
    interactúa con componentes de la GUI
  ▫ Todo componente tiene una serie de eventos que
    se “disparan”, a los que podemos especificarles un
    código que se ejecutará cuando esto ocurra
  ▫ Similar al manejo de excepciones, pero un evento
    no manejado no provoca un error en el programa

¿Qué es Swing? :: Eventos
• Al presionar el botón
  “Registrar”, se captura el
  evento “click” y se ejecuta el
  código definido
• En este caso se toman los
  datos de la interfaz gráfica:
  nombre, apellido y C.I.
• Luego se llama a una interfaz
  de caso de uso, que registra
  un Usuario en el Sistema

Recomendaciones prácticas
• ¿Cómo desarrollar en Swing?
  ▫ Hacerlo mediante código puro
  ▫ Utilizar como ayuda el diseñador
   incorporado en los IDE, el cual genera código
   para facilitar el proceso de diseño GUI.

Recomendaciones prácticas
Diseñador

                    Mediante Drag and Drop
                    (arrastrar y soltar), el
                    usuario Programador
                    diseña la interfaz

                    Luego se agrega el código
                    pertinente para trabajar
                    con la lógica (eventos, etc.)

Demo
• Se ha creado un software que permite el
  registro y búsqueda de Usuarios
• Sistema en capas
 • Lógica: siguiendo buenas prácticas con
   datatypes y excepciones específicas para
   comunicarse con la presentación
 • Presentación: cada ventana en una clase
   separada para facilitar el diseño

Demo

Referencias
The Swing Tutorial (Oracle)
http://download.oracle.com/javase/tutorial/uiswing/index.html
The Definitive Guide to Java Swing (J. Zukowski)
http://link.springer.com/book/10.1007/978-1-4302-0033-8
Piensa en Java – Thinking in Java (B. Eckel)
ISBN-13: 978-0131872486, ISBN-10: 0131872486
WindowBuilder
https://www.eclipse.org/windowbuilder/