Interfase gráfica de usuario (GUI)

Principios de Computadoras II

Interfase gráfica de usuario (GUI)

Departamento de Ingeniería Electrónica y ComputadorasUniversidad Nacional del Sur

Mg. Ricardo [email protected]

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



Partes de una ventana de Windows

Barra de menú

Barra de estado

Barra de título

Ventana



Partes de una ventana de WindowsBarra de herramientas

Panel

Componente tipoBotón



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



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)



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.



¿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)



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)



Cuadros de dialogo simples



Cuadros de dialogo simples



Organización de las clases de SWING

Casi todos los componentes Swing se derivan de JComponent



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)…



Crear ventanas directamente en código



Crear ventanas directamente en código



Creación de ventanas con el IDE







BotonesPara intercambiar

visualización

Contenedores y componentes Swing




Las zonas remarcadas no pueden ser modificadas en el texto. Solo a través

de la ventana Diseño







Propiedades iniciales del componente




Inspector decomponentes



Creación de ventanas en el IDE

Un contenedor dentro de otro



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 [email protected]

Documents

Interfase gráfica de usuario (GUI)