:: Prof. Yeniffer Peña Programación I Interface Gráfica de Usuario Presentación.

Presentación del tema: ":: Prof. Yeniffer Peña Programación I Interface Gráfica de Usuario Presentación."— Transcripción de la presentación:

1 :: Prof. Yeniffer Peña Programación I Interface Gráfica de Usuario Presentación

2 Interface de Usuario Programación I La interface de usuario es la parte del programa que permite a éste interactuar con el usuario. Las interfaces de usuario pueden adoptar muchas formas, que van desde la simple línea de comandos hasta las interfaces gráficas que proporcionan las aplicaciones más modernas. La interface de usuario es el aspecto más importante de cualquier aplicación. Una aplicación sin una interfaz fácil, impide que los usuarios saquen el máximo rendimiento del programa.

3 Interface Gráfica de Usuario GUI Programación I Permiten dar un mejor look a los programas, además de: Usuarios de nivel básico pueden usar los programas. Rápida familiarización con programas. Reducción de tiempo para aprender a usar los programas.

4 Componentes de Interface Gráfica de Usuario Programación I Como ejemplo de componentes de Interface Gráfica de Usuario podemos apreciar cualquier aplicación bajo windows, y podremos observar elementos como: Ventanas, Barras de menú, Menú, Campos de Texto, Botones, Entre otros.

5 Componentes de Interface Gráfica de Usuario Programación I Por ejemplo, en Microsoft Word, el cuadro diálogo que aparece en el menú Formato comando Fuente: Botón Cuadro de Texto Lista Desplegada Combo Casillas de Verificación Etiquetas

6 Interface Gráfica de Usuario en Java Programación I Java proporciona los elementos básicos para construir decentes interfaces de usuario a través del AWT, y opciones para mejorarlas mediante Swing, que permite la creación de interfaces de usuario de gran impacto y sin demasiados problemas por parte del programador.

7 Programación I Se debe importar java.awt.*; Está compuesto por Componentes y Contenedores. Los Contenedores contienen Componentes, que son los controles básicos. Acerca de… AWT La arquitectura de la aplicación es dependiente del entorno de ventanas, en vez de tener un tamaño fijo. Por tanto, es bastante dependiente de la máquina en que se ejecuta la aplicación (no puede asumir que un diálogo tendrá el mismo tamaño en cada máquina).

8 Programación I Es una superficie de pantalla de alto nivel (una ventana) con borde y título. Una instancia de la clase Frame puede tener una barra de menú. Una instancia de esta clase se asemeja a una ventana. La clase Frame extiende a la clase Window, y su controlador de posicionamiento de Componentes por defecto es el BorderLayout. Los objetos de tipo Frame son capaces de generar varios tipos de eventos, de los cuales el más interesante es el evento de tipo WindowClosing, que se utiliza de forma exhaustiva, y que se produce cuando el usuario pulsa sobre el botón de cerrar colocado en la esquina superior-derecha (normalmente) de la barra de título del objeto Frame. Acerca de… AWT Contenedores: Contenedores: Frame

9 Programación I Acerca de… AWT Contenedores: Contenedores: Frame

10 Programación I Es una superficie de pantalla de alto nivel (una ventana). Una instancia de la clase Window no puede estar enlazada o embebida en otro Contenedor, pero puede Ayudarse del Frame para su creación. El controlador de posicionamiento de Componentes por defecto, sobre un objeto Window, es el BorderLayout. Una instancia de esta clase no tiene ni título ni borde, así que es un poco difícil de justificar su uso para la construcción directa de una interface gráfica, porque es mucho más sencillo utilizar objetos de tipo Frame o Dialog. Dispone de varios métodos para alterar el tamaño y título de la ventana, o los cursores y barrar de menús. Acerca de… AWT Contenedores: Contenedores: Window

11 Programación I Acerca de… AWT Contenedores: Contenedores: Window

12 Programación I Es una superficie de pantalla de alto nivel (una ventana) con borde y título, que permite entradas al usuario. La clase Dialog extiende la clase Window, queextiende la clase Container, que extiende a la clase Component; y el controlador de posicionamiento por defecto es el BorderLayout. De los constructores proporcionados por esta clase, destaca el que permite que el diálogo sea o no modal. Todos los constructores requieren un parámetro Frame y, algunos de ellos, permiten la especificación de un parámetro booleano que indica si la ventana que abre el diálogo será modal o no. Si es modal, todas las entradas del usuario serán recogidas por esta ventana, bloqueando cualquier entrada que se pudiese producir sobre otros objetos presentes en la pantalla. Posteriormente, si no se ha especificado que el diálogo sea modal, se puede hacer que adquiera esta característica invocando al método setModal(). Acerca de… AWT Contenedores: Contenedores: Dialog

13 Programación I Acerca de… AWT Contenedores: Contenedores: Dialog

14 Programación I La clase Panel es un Contenedor genérico de Componentes. Una instancia de la clase Panel, proporciona un Contenedor al que se le añaden Componentes. El controlador de posicionamiento de Componentes sobre un objeto Panel, por defecto es el FlowLayout; aunque se puede especificar uno diferente en el constructor a la hora de instanciar el objeto Panel, o aceptar el controlador de posicionamiento inicialmente, y después cambiarlo invocando al método setLayout(). Normalmente, un Panel no tiene manifestación visual alguna por sí mismo, aunque puede hacerse notar fijando su color de fondo por defecto a uno diferente del que utiliza normalmente. Acerca de… AWT Contenedores: Contenedores: Panel

15 Programación I Acerca de… AWT Contenedores: Contenedores: Panel

16 Programación I Los Componentes se añaden al Contenedor invocando al método add() del Contenedor. Acerca de… AWT Añadir Componentes a un Contenedor

17 Programación I La clase Button es una clase que produce un componente de tipo botón con un título. El constructor más utilizado es el que permite pasarle como parámetro una cadena, que será la que aparezca como título e identificador del botón en el interfaz de usuario. No dispone de campos o variables de instancia y pone al alcance del programador una gran variedad de Métodos para ser utilizado Acerca de… AWT Componentes: Componentes: Botón de Pulsación

18 Programación I Para la entrada directa de datos se suelen utilizar los campos de texto, que aparecen en pantalla como pequeñas cajas que permiten al usuario la entrada por teclado de una línea de caracteres. Los campos de texto (TextField) son los encargados de realizar esta entrada, aunque también se pueden utilizar, activando su indicador de no-editable, para presentar texto de una sola línea. La clase TextField extiende a la clase TextComponent, que extiende a su vez, a la clase Component. Por ello, hay una gran cantidad de métodos que están accesibles desde los campos de texto. La clase TextComponent también es importante en las áreas de texto, en donde se permite la entrada de múltiples líneas de texto. Acerca de… AWT Componentes: Componentes: Campos de Texto

19 Programación I Acerca de… AWT Componentes: Componentes: Campos de Texto

20 Programación I Una etiqueta (Label) proporciona una forma de colocar texto estático en un panel, para mostrar información fija, que no varía (normalmente), al usuario. La clase Label extiende la clase Component y dispone de varias constantes que permiten especificar la alineación del texto sobre el objeto Label. Acerca de… AWT Componentes: Componentes: Etiquetas

21 Programación I Una zona de dibujo o lienzo (Canvas), es una zona rectangular vacía de la pantalla sobre la cual una aplicación puede pintar, imitando el lienzo sobre el que un artista plasma su arte, o desde la cual una aplicación puede recuperar eventos producidos por acciones del usuario. La clase Canvas existe para que se obtengan subclases a partir de ella. No hace nada por sí misma, solamente proporciona una forma de implementar Componentes propios. Por ejemplo, un canvas es útil a la hora de presentar imágenes o gráficos en pantalla, independientemente de que se quiera saber si se producen eventos o no en la zona de presentación. Acerca de… AWT Componentes: Componentes: Canvas La clase Canvas es muy simple, consiste en un solo constructor sin argumentos y dos métodos, que son: AddNotify()Crea el observador del canvas paint( Graphics )Repinta el canvas

22 Programación I Cuando se implementa una subclase de la clase Canvas, hay que prestar atención en implementar los métodos minimumSize() y preferredSize() para reflejar adecuadamente el tamaño de canvas; porque, en caso contrario, dependiendo del layout que utilice el contenedor del canvas, éste puede llegar a ser demasiado pequeño, incluso invisible. Acerca de… AWT Componentes: Componentes: Canvas Estudiar el funcionamiento del Canvas.

23 Programación I Se debe importar: javax.swing.*; Acerca de… Swing Para usar los componentes GUI efectivamente, la javax.swing y java.awt debe comprender su jerarquía de herencia, especialmente la de la clase Component, la clase Container y la clase JComponent, las cuales definen caracerísticas comunes para la mayoría de los componentes swing. Entre los métodos que origina la clase Component y que son usados frecuentemente estan: paint, repaint y update.

24 Acerca de… Swing Programación I Un Container es una colección de componentes relacionados. La clase Container define los atributos y métodos comunes para todas sus subclases. Un método que origina la clase Container es add para añadir componentes a un Container, otro es setLayout, el cual dispone de un programa para especificar el layout manager (administrador de trazado) que ayuda al Container posicionar y darle tamaño a sus componentes. Estudiar los atributos y métodos de la clase Component y Container en la documentación.

25 Acerca de… Swing Programación I La clase JComponent es la superclase de la mayoría de los componentes swing, por tanto ella define atributos y métodos a todas las subclases de JComponent y entre sus características se cuentan: Un pluggable look and feel que puede ser usado para personalizar el look and feel cuando el programa ejecuta en diferentes plataformas. Método abreviado de acceso directo a los componentes GUI a través del teclado. Manejadores de eventos comunes para aquellos casos en donde diversos componentes GUI inician la misma acción en un programa.

26 Acerca de… Swing Programación I Descripciones breves de los componentes GUI (tool tips) que son desplegadas cuando el mouse es posicionado sobre el componente en tiempo de ejecución por un corto tiempo.

27 Acerca de… Swing Programación I Las diferencias principales en código de AWT y Swing son las siguientes: Para agregar componentes al frame AWT  frame.add(nombre_componente); SWING  frame.getContentPane().add(nombre_com); Para establecer el layout AWT  frame.setLayout(null); SWING  frame.getContentPane().setLayout(null);

28 Acerca de… Swing Programación I Para cerrar la aplicación AWT  frame.addWindowListener(new WindowAdapter(){ public void windowClosing(WindowEvent e){ System.exit(0);} }); SWING  Ya trae uno implícito, pero se puede colocar frame.setDefaultCloseOperation(frame.EXIT_ON_CLOSE); Para hacer visible el frame AWT  frame.setVisible(true); SWING  frame.setVisible(true); frame.show();

29 Componente JLabel Programación I Las Labels (etiquetas) proveen instrucciones de texto o información. Se definen con la clase JLabel – subclase de JComponent –. Una etiqueta despliega una línea sencilla de texto de solo lectura, una imagen o ambos. El siguiente programa muestra un ejemplo de JLabel.

30 Programación I El programa declara un JLabel. Los objetos JLabel son inicializados en el constructor LabelTest: Se crea un JLabel con el texto “Label with Text”. El label despliega este texto cuando aparece en la pantalla. Se usa el método setToolTipText (heredado en la clase JLabel de la clase JComponent) para especificar el tool tip (o descripción) que es desplegado automáticamente cuando el usuario posicona el mouse sobre la etiqueta. Luego, se añade el label al content pane. Estudiar en la documentación de Java, los métodos de la clase javax.swing.JLabel. Componente JLabel

31 Programación I La interface SwingConstants (paquete javax.swing) define un grupo de constantes enteras (así como SwingConstants.LEFT) que son usadas por muchos componentes swing. La alineación vertical y horizontal de las etiquetas puede fijarse con los métodos setHorizontalAlignment y setVerticalAlignment, respectivamente. Errores comunes: Si no se añade explícitamente un componente al Container, el componente no será desplegado cuando el Container aparezca en la pantalla. Añadir a un Container un Componente que no ha sido instanciado. Componente JLabel

32 Programación I ¿Qué es un evento? Un evento es una encapsulación de una información que puede ser enviada a la aplicación de manera asíncrona. Los eventos pueden corresponder a acciones físicas (ratón y teclado) y acciones lógicas. ¿Con cuáles clases se trabajan los eventos? Java.util.EventObject es la clase padre de todos los eventos, su subclase java.awt.event es la clase padre de todos los eventos AWT. Eventos

33 Programación I Las GUI son manejadores de eventos, ellos generan eventos cuando el usuario del programa interactúa con la GUI) algunas interacciones comunes son las del movimiento del mouse, hacer clic, clic en un botón, tipeando un campo de texto, seleccionando un ítem de un menú, cerrando una ventana, etc. Cuando un usuario interactúa, ocurre un evento que es enviando al programa. La información del evento de la GUI es almacenada en un objeto de una clase que hereda de AWTEvent. Modelo de Manejo de Eventos

34 Programación I Modelo de Manejo de Eventos ComponentEventEsconder, mover, redimensionar, mostrar ContainerEventAñadir o eliminar un componente FocusEventObtener o perder el Focus KeyEventPulsar, liberar o teclear una tecla MouseEventEntrar, salir, pulsar, soltar o hacer click MouseMotionEventArrastrar o mover WindowEventMaximizar, minimizar, abrir, cerrar, activar o desactivar Eventos Físicos

35 Programación I Modelo de Manejo de Eventos ActionEventUna acción se ha ejecutado AdjustmendEventUn valor se ha ajustado ItemEventUn estado ha cambiado TextEventUn texto ha cambiado Eventos Semánticos

36 Programación I Modelo de Manejo de Eventos Origen de los Eventos

37 Programación I Modelo de Manejo de Eventos Origen de los Eventos

38 Programación I Existen 3 mecanismos para manejar los eventos: event source event object event listener El event source es el particular componente GUI con el cual el usuario interactúa. El event object encapsula información del evento que ocurre. Esta información incluye una referencia al source event y cualquier información del evento que puede ser requerida por el escuchador de eventos para el manejador del mismo. El escuchador de eventos es un objeto que es notificado por el source event cuando un evento ocurre y recibe un event object. Modelo de Manejo de Eventos

39 Programación I Un escuchador de eventos para un evento de una GUI es un objeto de una clase que implementa uno o más interfaces de escuchadores de eventos del paquete java.awt.event y javax.swing.event. Modelo de Manejo de Eventos El programador debe realizar 2 tareas para el proceso de eventos de una GUI en un programa: Registrar un escuchador de eventos para el componente GUI que se espera que genere un evento; y la implementación de un método (o métodos) manejador(es) de eventos, comúnmente llamados event handlers.

40 Programación I Existen tres componentes importantes a la hora de crear lo que debe hacer un evento: La interface que maneja el evento. La clase adaptadora del evento. El método que implementa el evento. Modelo de Manejo de Eventos

41 Programación I Modelo de Manejo de Eventos

42 Programación I Modelo de Manejo de Eventos

43 Programación I Modelo de Manejo de Eventos

44 Programación I Un objeto escuchador de eventos escucha específicos tipos de eventos generados por event source (normalmente componentes GUI) en un programa. Un manejador de eventos es un método que es invocado en respuesta de un particular tipo de evento. Cada interface de escuchador de eventos específica uno o mas métodos manejadores de eventos que deben ser definidos en la clase que implementa la interface escuchadora de eventos, recordando que las interfaces definen métodos abstractos y cualquier clase que implemente una interface debe definir todos sus métodos; además, no pueden crearse objetos de una clase abstracta. Modelo de Manejo de Eventos

45 Programación I El uso de escuchadores de eventos en manejadores de eventos es conocido como Modelo de Delegación de Eventos — el proceso de un evento es delegado a un particular objeto (el que escucha) en el programa. Cuando ocurre un evento, el componente GUI con el cual el usuario interactúa notifica a sus escuchadores registrados para que cada escuchador invoque al método manejador de evento apropiado. Por ejemplo, cuando el usuario presiona la tecla Enter en un JTextField, el método actionPerformed del escuchador registrado es invocado. Modelo de Manejo de Eventos

46 Programación I Modelo de Manejo de Eventos La interfaz que implementa el escuchador La clase Adaptadora El método que se va a implementar Nombre del Evento

47 Programación I Un botón es un componente que al hacer el usuario click captura una acción. Un programa en Java puede usar diversos tipos de botones, incluyendo botones de comando, Check Box y botones de radio. Captura de Eventos del Componente JButton Estudiaremos los botones que son utilizados para iniciar un comando: Botones de Comando. Estos generan un ActionEvent cuando el usuario hace click en el botón con el mouse. Son creados con la clase JButton.

48 Programación I Captura de Eventos del Componente JButton La interfaz que implementa el escuchador No posee clase adaptadora, se debe crear objeto anónimo de la escuchadora El método que se va a implementar Nombre del Evento

49 Programación I Captura de Eventos del Componente JButton Objeto de la clase interna Se le configura la escuchadora a cada botón y se le envía el objeto anterior El objeto anterior se puede enviar también anónimo Clase interna que implementa la interface escuchadora El método que se va a implementar Nombre del Evento

50 :: Prof. Yeniffer Peña Programación I Programación Orientada a Objetos Finalización