Interfaz gráfica de usuario y eventos (introducción)

63 %
38 %
Information about Interfaz gráfica de usuario y eventos (introducción)
Education

Published on February 5, 2014

Author: itparral

Source: slideshare.net

Description

Brinda una introducción a la programación de interfaces gráficas de usuario y eventos en Java.

Interfaz gráfica de usuario y eventos Tópicos avanzados de programación M.C. Edgar Omar Bañuelos Lozoya Instituto Tecnológico de Parral

INTRODUCCIÓN 2

¿GUI? • Graphical user interface > Interfaz gráfica de usuario …programa o entorno que gestiona la interacción con el usuario con base en relaciones visuales como iconos, menús o un puntero» 3

4

5

En nuestro caso... 6

Swing & AWT • ¿Qué son? – Conjuntos de librerías que agrupan componentes para desarrollar interfaces gráficas 7

AWT (Abstract Window ToolKit) • Fue el primero en Java (y viene en todas sus versiones) • Sus componentes se denominan «pesados» – … dependen de código nativo del sistema operativo para realizar su funcionalidad • Su paquete es java.awt 8

Swing • Implementado «enteramente» en Java – … no tiene código nativo del sistema operativo • Sus componentes se denominan «ligeros» • Los nombres de algunas clases de Swing inician con la letra «J» para no confundirlas con las equivalentes en AWT (por ejemplo JButton y Button) • Su paquete es javax.swing 9

• Junto con Java 2D (clases para manipular imágenes y gráficos planos), AWT y Swing conforman el JFC (Java Foundation Classes) – … framework para construir interfaces gráficas de usuario basadas en Java 10

Diagrama jerárquico de clases para programación GUI en Java 11

Diagrama jerárquico de clases para programación GUI en Java (cont.) 12

Clasificación GUI • Se dividen en tres: 1. Contenedores 2. Auxiliares 3. Componentes 13

Clases contenedor • Son componentes GUI usados para «contener» otros componentes • Son contenedores AWT: – Window, Panel, Applet, Frame y Dialog • Son contenedores Swing: – Container, JFrame, JDialog, JApplet, y JPanel 14

Contenedores Swing • Container – Usado para agrupar componentes. – Frames, panels y applets son ejemplos de contenedores • JFrame – Es una ventana no contenida dentro de otra ventana. – Es el componente base para construir las interfaces basadas en Swing • JDialog – Es una ventana emergente o de mensaje, usada de manera temporal para recibir información del usuario o dar alguna notificación • JApplet – Es subclase de Applet. Utilizada para crear applets basados en Swing • JPanel – Es un contenedor invisible para agrupar componentes de interfaz de usuario. – Los paneles pueden ser anidados (“uno dentro de otro”) – Pueden ser utlizados como “lienzo” para dibujar gráficos 15

Actividad • Utilizando el entorno gráfico de Netbeans: – Crear un JFrame – Agregar botones para invocar cada uno de los tipos de diálogo de la clase JOptionPane 16

Clases auxiliares • No son subclases de Component • Son usadas para describir propiedades de componentes GUI, están en el paquete java.awt Nota. Los componentes Swing no reemplazan todas las clases AWT, sólo las clases de componentes GUI de AWT (como Button, TextField, TextArea,…) 17

Clases auxiliares (cont.) • Graphics – Clase abstracta que proporciona un contexto gráfico para dibujar líneas y figuras simples • Color – Trata los colores de los componentes GUI. Útil para especificar fondos, color de letras o de líneas, figuras, etc. • Font – Especifica tipo, estilo y tamaño de letras mostradas en componentes GUI • FontMetrics – Clase abstracta utilizada para obtener propiedades de los tipos de letra • Dimension – Encapsula el largo y ancho de un componente (en precisión entera) • LayoutManager – Es una interface que especifica como son alineados los componentes dentro de un contenedor 18

Clases componente GUI • JComponent es la superclase de todos los componentes Swing • Como JComponent es una clase abstracta no es posible usar new JComponent(), es necesario usar los constructores de las subclases 19

Clases componente GUI (cont.) • ¿Cuál sería el resultado de ejecutar el siguiente fragmento de código? JButton jbtOK = new JButton("OK"); System.out.println(jbtOK instanceof System.out.println(jbtOK instanceof System.out.println(jbtOK instanceof System.out.println(jbtOK instanceof System.out.println(jbtOK instanceof System.out.println(jbtOK instanceof JButton); AbstractButton); JComponent); Container); Component); Object); True, para todos los casos 20

COMPONENTES GUI 21

Frames 22

Frames (cont.) import javax.swing.*; public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame("MyFrame"); frame.setSize(400, 300); frame.setLocationRelativeTo(null); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); } } • El frame no es desplegado hasta que frame.setVisible(true); es invocado • frame.setSize(400, 300); especifica el tamaño (400px ancho, 300px alto), si no es usado el formulario se ajusta sólo hasta desplegar la barra de título • setVisible() y setSize() están definidos en la clase Component y son heredados a JFrame, por lo que estos métodos son utilizados 23 también por otras subclases

Frames (cont.) • Invocando frame.setLocationRelativeTo(null)el frame es centrado en la pantalla • frame.setDefaultCloseOperation(JFrame.EXIT _ON_CLOSE)le dice al programa que termine cuando se cierra el formulario, si está opción no se especifica el programa seguirá en ejecución aún y cuando el formulario se haya cerrado 24

Frames (cont.) • Propiedades comunes de un JFrame: – contentPane • Panel de contenido del frame – iconImage • Imagen que representa el frame, reemplaza la imagen por default de Java en la barra de título y cuando el frame es minimizado Image image = (new ImageIcon(Filename)).getImage(); frame.setIconImage(image); – JMenuBar • Barra de menú opcional – resizable • Valor booleano que indica si el frame puede cambiar de tamaño frame.setResizable(Value); – title • Especifica el título del formulario frame.setTitle(Title); 25

Frames (cont.) • Para añadir componentes a un frame utilizar el método add(): // Añadir un botón al frame JButton jbtOK = new JButton("OK"); frame.add(jbtOK); • Este método añade el componente al panel de contenido del frame. – El botón sería colocado al centro y ocupando todo el frame, esto debido al layout manager que el frame tiene por default • Puede usarse la siguiente instrucción para remover el botón: frame.remove(jbtOK); 26

Actividad 1. Crear en bloc de notas una clase Java de nombre PruebaFrames 2. En el método principal crear un objeto formulario con titulo «Mi primer frame en TAP» 3. Especificar el tamaño a 500px de alto por 400px de ancho 4. Guardar y ejecutar en línea de comandos ¿qué es lo que sucede? 27

Actividad (cont.) 5. Ubicarlo en las coordenadas (0, 0) de la pantalla 6. Hacer visible el frame 7. Guardar y ejecutar ¿qué pasa si cierran el formulario? 8. Comentar la línea de ubicación anterior y agregar lo necesario para centrar el frame en la pantalla 9. Configurar que la aplicación termine al cerrar el formulario 10. Guardar y ejecutar 28

Actividad (cont.) 11. Configurar una imagen para mostrar en la barra de título 12.Establecer que el frame no pueda cambiar de tamaño 13. Cambiar el título del frame a «Mi primer frame modificado» 14.Guardar y ejecutar 29

EVENTOS 30

Programación dirigida por eventos • Imaginen un programa para imprimir los primeros 100 números de la serie de Fibonacci o un programa para recibir dos números y escribir el resultado de su suma ¿quién controla que se ejecutará primero y que después? • Ahora imaginen Microsoft Word con un nuevo documento abierto ¿quién controla la secuencia de ejecución? 31

Programación dirigida por eventos (cont.) • En este paradigma la estructura como la ejecución de los programas van determinados por los sucesos que ocurran en el sistema, generalmente provocados por el usuario» • Es la base para el desarrollo de interfaces gráficas de usuario • Maneja el concepto de evento y administrador de eventos: – Un evento es la señal que indica que sucedió una acción predeterminada – Un administrador de eventos es la parte de la aplicación que se encarga de ejecutar ciertas tareas cuando se ha detectado un evento en particular 32

Programación dirigida por eventos (cont.) • Los eventos soportados estarán determinados por el lenguaje de programación utilizado, algunos son heredados por el propio sistema operativo e incluso otros pueden ser creados por el mismo programador • En este tipo de aplicaciones generalmente hay una fase de inicialización seguida de una fase de espera a la detección de algún evento que determine la secuencia de ejecución a seguir 33

Add a comment

Related presentations

Related pages

Interfaz gráfica de usuario y eventos (introducción ...

1. Interfaz gráfica de usuario y eventos Tópicos avanzados de programaciónM.C. Edgar Omar Bañuelos Lozoya Instituto Tecnológico de Parral
Read more

Introducción a la interfaz gráfica de usuario de NWAM ...

Introducción a la interfaz gráfica de ... de comandos de NWAM y la interfaz gráfica de usuario de ... los eventos de NWAM a medida que ...
Read more

Introduccion a la Interfaz Grafica y crear una ventana en ...

Introduccion a la Interfaz Grafica y crear una ventana en Java ... Interfaz Gráfica Introducción. ... Interfaz Grafica de Usuario.wmv ...
Read more

“INTERFAZ GRAFICA DE USUARIO (GUI)” by Danny Mishelle on Prezi

“INTERFAZ GRAFICA DE USUARIO ... Para crear la calculadora de la imagen anterior debemos tener en cuenta la interfaz y los eventos. ... Introducción a ...
Read more

Introducción a UI: Definiciones iniciales - Programación ...

Introducción a UI: Definiciones ... y físicos (hardware). Interfaz de Usuario también se puede ... los usuarios finales mediante una interfaz gráfica ...
Read more

Copy of “INTERFAZ GRÁFICA DE USUARIO (GUI)” - prezi.com

“INTERFAZ GRAFICA DE USUARIO ... Para crear la calculadora de la imagen anterior debemos tener en cuenta la interfaz y los eventos. ... Introducción a ...
Read more

Interfaz gráfica: Actividades, layouts y eventos ...

Desde el punto de vista de un usuario una aplicación está formada por un conjunto de pantallas que permiten la interacción. En Android estas pantallas ...
Read more

Introducción para desarrolladores a la interfaz de usuario ...

Introducción a la experiencia del usuario de la ... el sistema de interfaz de usuario y los ... Los clics del mouse y otros eventos aplicados ...
Read more