Introducción a Swing Taller de Programación 2016 [email protected] Introducción • ¿En qué estamos exactamente? • ¿Cómo debemos codificar? • ¿Por donde empezar? • Empecemos por entender el contexto y la arquitectura de lo que debemos construir en esta primera etapa Introducción • Contexto • Arquitectura en capas • Al día de hoy… Introducción Introducción • Pensemos en la calidad del software • Más precisamente en la USABILIDAD Introducción Introducción • Paréntesis… ▫ Relacionémoslo con el laboratorio Diagrama de componentes propuesto en la letra 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 de escritorio • Biblioteca que contiene un conjunto de controles y elementos gráficos como botones, listas, etiquetas, etc., que permiten interactuar con la lógica de la aplicación • Permite construir interfaces capaces de ser ejecutadas en diferentes plataformas (al igual que el propio lenguaje Java) ¿Qué es Swing? • Está implementado en 18 paquetes (packages) ▫ Los paquetes más utilizados son: javax.swing javax.swing.events ▫ Swing utiliza (“hereda de”) AWT (Abstract Window Toolkit) una versión “primitiva” para manejo de interfaces gráficas en Java ¿Qué es Swing? • Posee una gran cantidad de características, por ejemplo: ▫ Jerarquías de componentes Swing ▫ Uso de layout managers ▫ Uso de models ▫ Manejo de eventos ¿Qué es Swing? :: Componentes • Jerarquía de componentes Swing ▫ 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 ¿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? :: 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? :: Eventos • Manejo de eventos ▫ Un evento ocurre cada vez que el usuario interactúa con componentes de la interfaz gráfica ▫ Se dice que el evento es “disparado” por Swing y el programador, si le interesa hacer algo debido a la ocurrencia del evento, debe “manejarlo” ▫ Similar al manejo de excepciones, pero un evento no manejado no provoca un error en el programa ▫ Manejar un evento significa asociar un código para que se ejecute cuando el evento se dispara ¿Qué es Swing? :: Eventos • Manejo de eventos ▫ Un control tiene una serie de eventos a los que podemos especificarles código ▫ Ejemplo ▫ Evento click de un botón que tiene el objetivo de dar un alta de Usuario ▫ Al presionar dicho botón, se ejecutará código definido por el usuario programador, el cual creará un Usuario en el Sistema… ¿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 • Antes de ejecutar, veamos la realidad implementada: ▫ Se ha creado un software que permite el registro de Usuarios de los que se conoce el nombre, apellido y su cédula de identidad (que lo identifica) ▫ Se debe brindar la posibilidad de buscar Usuarios por su cédula y ver su información personal Demo • Se cuenta con dos paquetes ▫ Lógica (Clases) Usuario (representa al Usuario) DataUsuario (representa su información) ManejadorUsuario (colección global de usuarios) ControladorUsuario (controlador de los CU) IControladorUsuario (interface del controlador) Fábrica (creadora de interfaces) ▫ Presentación JFrame Principal.java 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 (B. Eckel) http://www.univo.edu.mx/computo/maestria/Pensando%20En%2 0Java.pdf