S5 p2

1. Programación 2
Tema: 3 Programación Visual
Mg. Luis Fernando Aguas Bucheli
+593 984015184
@Aguaszoft
Laguas@uisrael.edu.ec

2. Tu voluntad se encuentra siempre bajo tu control,
por lo que nada puede detenerte

3. Objetivo
1. Adquirir los conceptos
básicos relacionados con
la GUI
2. Reconocer las
características de la GUI
● 3.1 Introducción de GUI
Contenido

4. Objetivos de Desarrollo Sostenible
4.3 De aquí a 2030, asegurar el acceso igualitario de todos los
hombres y las mujeres a una formación técnica, profesional y
superior de calidad, incluida la enseñanza universitaria

5. 3.1 Introducción de GUI

6. Interfaces Gráficas de Usuario
● Una interface gráfica de usuario (GUI) es un medio que permite que una
persona se comunique y controle un sistema a través de ventanas, botones,
menúes, etc.
● Una GUI se construye a partir de una colección de componentes con una
representación gráfica y capacidad para percibir eventos generados por
las acciones del usuario.

7. Construcción de una GUI
● La construcción de GUI está fuertemente relacionada con
los conceptos de:
• Encapsulamiento
• Herencia
• Polimorfismo
Y con los criterios de:
• Reusabilidad
• Extensibilidad

8. Diseño de una GUI
• Definir las componentes.
• Definir el diagramado de las componentes contenedoras.
• Decidir cómo reacciona cada componente ante las
acciones realizadas por el usuario.

9. Implementación de una GUI
• crear un objeto gráfico para cada componente de la GUI e
insertarlo en otras componentes contenedoras.
• establecer los valores de los atributos de los objetos
gráficos.
• definir el comportamiento de las componentes reactivas
en respuesta a las acciones del usuario

10. Objetos gráficos y Clases gráficas
● Un objeto gráfico es una instancia de una clase gráfica
● Una clase gráfica define algunos atributos gráficos y brinda servicios
gráficos.
● Una clase gráfica puede usarse para:
• Crear objetos gráficos asociados a las componentes de la interfaz.
• Definir clases más específicas a partir de las cuales se crearán componentes.

11. Paquetes Gráficos
● Usarmos clases gráficas provistas por los paquetes AWT (Abstract Window
Toolkit) o Swing o deriva de una ellas.
● AWT y Swing son entonces paquetes que facilitan la construcción de
interfaces gráficas. Ambos brindan una colección de clases que permiten
crear botones, cajas de texto, menúes, etc.
● Una de las ventajas de Swing sobre AWT es que permite desarrollar
aplicaciones con una apariencia similar a la de la plataforma subyacente con
muy poco esfuerzo.
● Swing no reemplaza a AWT sino que lo usa y agrega nuevas clases.

12. En esta jerarquía la relación entre una clase
derivada y una clase base no siempre es de
Paquetes Gráficos

13. javax.swing
java.lang.Object
java.awt.Component
java.awt.Container
java.awt.Window
java.awt.Frame
javax.swing.JFrame
La clase Frame agrega a la clase Window el
marco, la línea de título y los botones
La clase JFrame agrega a Frame el panel de
contenido donde se insertan las componentes.
El paquete Swing
La clase JFrame

14. Ventanas y frames
● Un frame es un tipo especial de ventana sobre el que se ejecuta una
aplicación.
Toda instancia de
JFrame tiene
atributos marco,
barra de título,
algunos botones y
un panel de
contenido.
La clase JFrame brinda servicios para
modificar los valores de los atributos.

15. Ventanas y frames
● import java.awt.*;
● class UnaVentana {
● public static
● void main(String args[ ]) {
● MiVentanaColor f= new
● MiVentanaColor( “Una ventana”,Color.BLUE );
● f.setVisible(true);
● }
● }

16. Ventanas y frames
● import java.awt.*;
● import javax.swing.*;
● class MiVentanaColor extends JFrame{
● private JLabel etiqueta;
● public MiVentanaColor ( String titulo,Color col ){
● super(titulo);
● setSize(400,300);
● getContentPane().setBackground(col);
● etiqueta = new JLabel("Panel de contenido");
● getContentPane().add(etiqueta);
● setDefaultCloseOperation(EXIT_ON_CLOSE);
● }
● }

17. • Invoca al constructor de JFrame con el texto para la
barra de título.
• Establece el tamaño del frame.
• Establece el color del panel de contenido del frame.
• Crea una etiqueta estableciendo su texto.
• Recupera el panel del contenido del frame e inserta en
su interior la etiqueta.
• Determina que la aplicación termine cuando el usuario
cierre la ventana.
Ventanas y frames

18. Ventanas y frames
● import java.awt.*;
● class DosVentanas {
● public static void main(String args[ ]) {
● MiVentanaColor f1= new
● MiVentanaColor(“Una ventana”, Color.BLUE);
● f1.setVisible(true);
● MiVentanaColor f2= new
● MiVentanaColor(“Otra ventana”, Color.RED);
● f2.setVisible(true);
● }
● }

19. Ventanas y frames
● La GUI tiene varias componentes gráficas, cada una asociada a un objeto
gráfico.
● En la definición de la clase MiVentanaColor ser crea una etiqueta y se
referencia al panel de contenido.
● La etiqueta es un atributo declarado la clase MiVentanaColor, el panel de
contenido es un atributo heredado de JFrame o una clase ancestro de
JFrame.
● Ambos objetos son pasivos, no reaccionan ante las acciones del usuario.

20. Ventanas y frames
● La GUI tiene incluye objetos reactivos, su comportamiento está establecido
por las clases provistas por Swing y AWT.
● Por ejemplo la barra de título cuando arrastramos el mouse o los botones
para minimizar, maximizar y cerrar.

21. Gracias
Responsabilidad con pensamiento positivo