interfase gráfica de usuario (gui)
Post on 15-Jul-2022
17 Views
Preview:
TRANSCRIPT
Principios de Computadoras II
Interfase gráfica de usuario (GUI)
Departamento de Ingeniería Electrónica y ComputadorasUniversidad Nacional del Sur
Mg. Ricardo Copporcoppo@uns.edu.ar
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
2Universidad Nacional del Sur
Introducción� Mecanismo amigable al usuario para
interactuar con los programas
� Aporta una “apariencia visual” a los programas
� Permite al usuario adquirir habilidades que se transmiten de programa a programa
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
3Universidad Nacional del Sur
Partes de una ventana de Windows
Barra de menú
Barra de estado
Barra de título
Ventana
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
4Universidad Nacional del Sur
Partes de una ventana de WindowsBarra de herramientas
Panel
Componente tipoBotón
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
5Universidad Nacional del Sur
Composición de una ventana� Una ventana puede está compuesta por barras de
título, de menú, de herramientas y de estado y una zona central o panel del cliente.
� Cada uno de estos componentes es a su vez contenedora de otros elementos de la interfase (widget o control)
� Estos componentes se distribuyen de acuerdo a un esquema “layout” que los posicionan adecuadamente en el contenedor
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
6Universidad Nacional del Sur
Tipos de ventana� Tipos de ventana
� Ventana de aplicación� SDI – Single Document Interface ( Paint )� MDI – Multiple Document Interface ( Word )
� Cuadro de dialogo� Modal – (No permite continuar hasta que cierra)� No modal – (Queda abierta y funciona en paralelo)
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
7Universidad Nacional del Sur
Ventanas en Java� Java posee una biblioteca de clases que facilita la
creación de ventanas y sus componentes.
� La biblioteca forma parte de la JFC (Java Foundation Clases)
� La primera versión se conocía como AWT (AbstractWindow Toolkit). Actualmente no se usa aunque se mantiene por compatibilidad.
� La biblioteca actual se llama SWING.
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
8Universidad Nacional del Sur
¿Qué es SWING?� Contiene clases para generar ventanas,
botones, rótulos, y prácticamente todos los componentes comunes de la GUI.
� Está compuesto por mas de 18 paquetes! (normalmente se usan 1 o 2 nada mas)� javax.swing� javax.swing.event (no siempre se requiere)
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
9Universidad Nacional del Sur
Metodología para generar ventanas� Usar ventanas y cuadros de dialogo
predefinidas por Java o el sistema operativo
� Crear ventanas directamente en código (metodología original)
� Usar diseñadores gráficos que permiten “dibujar” la ventana para luego generar automáticamente el código (Netbeans)
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
10Universidad Nacional del Sur
Cuadros de dialogo simples
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
11Universidad Nacional del Sur
Cuadros de dialogo simples
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
12Universidad Nacional del Sur
Organización de las clases de SWING
Casi todos los componentes Swing se derivan de JComponent
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
13Universidad Nacional del Sur
Organización de las clases Swing� Las clases “container” pueden contener varios
componentes (agregación de clases)
� Todos los componentes heredan una apariencia visual similar (aunque modificable)
� Todos los componentes presentan capacidades para manejar eventos de ratón, teclado, etcsimilares que pueden ser redefinidas si el programador lo requiere.
� Otras capacidades: tooltips, teclas rápidas (Alt-P)…
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
14Universidad Nacional del Sur
Crear ventanas directamente en código
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
15Universidad Nacional del Sur
Crear ventanas directamente en código
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
16Universidad Nacional del Sur
Creación de ventanas con el IDE
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
17Universidad Nacional del Sur
Creación de ventanas con el IDE
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
18Universidad Nacional del Sur
Creación de ventanas con el IDE
BotonesPara intercambiar
visualización
Contenedores y componentes Swing
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
19Universidad Nacional del Sur
Creación de ventanas con el IDE
Las zonas remarcadas no pueden ser modificadas en el texto. Solo a través
de la ventana Diseño
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
20Universidad Nacional del Sur
Creación de ventanas con el IDE
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
21Universidad Nacional del Sur
Creación de ventanas con el IDE
Propiedades iniciales del componente
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
22Universidad Nacional del Sur
Creación de ventanas con el IDE
Inspector decomponentes
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
23Universidad Nacional del Sur
Creación de ventanas en el IDE
Un contenedor dentro de otro
Principios de Computadoras IIInterfase gráfico del usuario (GUI)Mg.Ricardo Coppo
24Universidad Nacional del Sur
Creación de ventanas con el IDE� Demostración práctica
� Tutoriales en Internet
� http://java.sun.com/docs/books/tutorial/uiswing/learn/index.html
� http://www.netbeans.org/kb/docs/java/quickstart-gui.html
� http://www.netbeans.org/kb/docs/java/gui-functionality.html
Principios de Computadoras II
Interfase gráfica de usuario (GUI)
Departamento de Ingeniería Electrónica y ComputadorasUniversidad Nacional del Sur
Mg. Ricardo Copporcoppo@uns.edu.ar
top related