Programación Orientada a Objetos Unidad V – Interfaz Gráfica de Usuario en Java Programación Orientada a Objetos Programación I - 0416202

Programación Orientada a Objetos Contenido Esta lección abarca los siguientes temas con respecto a Java: ¿Qué es una Interfaz gráfica de usuario (GUI)? AWT Layout Manager Contenedores Componentes

Programación Orientada a Objetos ¿Qué es GUI? GUI: Graphical User Interfaces Uno de los aspectos que ha cobrado mayor relevancia en la informática actual en los últimos años es el desarrollo de aplicaciones con interfaces más amigables, asimilables e intuitivas para el usuario. Por lo tanto, el desarrollo de unas bibliotecas para la creación de GUI’s (Graphical User Interfaces) potentes y fáciles de utilizar ha supuesto un gran avance en el campo del desarrollo de aplicaciones. 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.

Programación Orientada a Objetos ¿Qué es GUI? GUI: Graphical User Interfaces Permiten dar un mejor look a los programas, además que: 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.

Programación Orientada a Objetos ¿Qué es GUI? GUI: Graphical User Interfaces 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.

Programación Orientada a Objetos ¿Qué es GUI? Por ejemplo, en Microsoft Word, el cuadro diálogo que aparece en el menú Formato comando Fuente: Cuadro de Texto Lista Desplegada Combo Etiquetas Casillas de Verificación Botón

Programación Orientada a Objetos ¿Qué es GUI? GUI: Graphical User Interfaces El gran apogeo de Java y la gran cantidad de facilidades que da su extensa documentación, unido a la especial relevancia de la construcción de interfaces gráficas en la actualidad, hacen de AWT y Swing dos claros ejemplos de la importancia de conceptos como la reutilización de software y de las facilidades que ofrece el desarrollo orientado a objetos.

Programación Orientada a Objetos ¿Qué es GUI? GUI: Graphical User Interfaces Java proporciona los elementos básicos para construir interfaces de usuario a través de la biblioteca de clases AWT, y opciones para mejorarlas mediante una nueva biblioteca denominada Swing.

Programación Orientada a Objetos ¿Qué es GUI? GUI: Graphical User Interfaces En Java existen 2 mecanismos para usar GUIs AWT (Depende del Sistema Operativo) SWING (No depende del Sistema Operativo) AWT (Depende del Sistema Operativo) SWING (No depende del Sistema Operativo)

Programación Orientada a Objetos AWT AWT (Abstract Window Toolkit): AWT es un paquete de Java (java.awt.*) que contiene clases para manejar las GUI. Sin embargo AWT es dependiente del sistema operativo

Programación Orientada a Objetos AWT AWT (Abstract Window Toolkit): Debido a que el lenguaje de programación Java es independiente de la plataforma en que se ejecuten sus aplicaciones, la biblioteca AWT también es independiente de la plataforma en que se ejecute, pero no del sistema operativo. Los elementos de la interfaz proporcionados por AWT están implementados utilizando toolkits o herramientas nativas de las plataformas, preservando una apariencia semejante a todas las aplicaciones que se creen para esa plataforma. Pero, tiene la desventaja que una aplicación diseñada para una plataforma, puede no visualizarse correctamente en otra. Estas carencias del AWT son subsanadas en parte por Swing.

Programación Orientada a Objetos AWT AWT: Características Está compuesto por Contenedores y Componentes. Los Contenedores contienen Componentes, que son los controles básicos. No se usan posiciones fijas de los Componentes, sino que están situados a través de una disposición controlada (layouts). El común denominador de más bajo nivel se acerca al teclado, ratón y manejo de eventos. Alto nivel de abstracción respecto al entorno de ventanas en que se ejecute la aplicación.

Programación Orientada a Objetos AWT AWT: Jerarquía de componentes y contenedores

Programación Orientada a Objetos AWT AWT: Componentes Los Componentes permiten al usuario interactuar con la aplicación. En la biblioteca AWT, todos los Componentes de la interfaz gráfica de usuario son instancias de la clase Component o de una clase descendiente de ella. Típicos ejemplos de estos Componentes son los botones, barras de desplazamiento, etiquetas, listas, cajas de selección o campos de texto.

Programación Orientada a Objetos AWT AWT: Contenedores Los Componentes no se encuentran aislados, sino agrupados dentro de Contenedores. Los Contenedores contienen y organizan la situación de los Componentes; además, los Contenedores son en sí mismos Componentes y como tales pueden ser situados dentro de otros Contenedores. En la biblioteca AWT, todos los Contenedores son instancias de la clase Container o una clase descendiente de ella.

Programación Orientada a Objetos AWT – Layout Manager La portabilidad de Java a distintas plataformas y distintos sistemas operativos necesita flexibilidad a la hora de situar los Components (Buttons, Canvas, TextAreas, etc.) en un Container (Window,Panel, …). Un Layout Manager es un objeto que controla cómo los Components se sitúan en un Container. AWT define cinco Layout Managers: dos muy sencillos (FlowLayout y GridLayout), dos más especializados (BorderLayout y CardLayout) y uno muy general (GridBagLayout). Además, los usuarios pueden escribir su propio Layout Manager, implementando la interface LayoutManager.

Programación Orientada a Objetos AWT – Layout Manager AWT: Border Layout La composición BorderLayout (de borde) proporciona un esquema más complejo de colocación de los Componentes en un panel. La composición utiliza cinco zonas para colocar los Componentes sobre ellas: Norte, Sur, Este, Oeste y Centro. Es el layout o composición que utilizan por defecto los Frame, Window y Dialog. El Norte ocupa la parte superior del panel, el Este ocupa el lado derecho, Sur la zona inferior y Oeste el lado izquierdo. Centro representa el resto que queda, una vez que se hayan rellenado las otras cuatro partes.

Programación Orientada a Objetos AWT – Layout Manager AWT: Flow Layout Es el más simple y el que se utiliza por defecto en todos los Paneles si no se fuerza el uso de alguno de los otros. Los Componentes añadidos a un Panel con FlowLayout se encadenan en forma de lista. La cadena es horizontal, de izquierda a derecha, y se puede seleccionar el espaciado entre cada Componente.

Programación Orientada a Objetos AWT – Layout Manager AWT: Grid Layout La composición GridLayout proporciona gran flexibilidad para situar Componentes. El layout se crea con un número de filas y columnas y los Componentes van dentro de las celdas de la tabla así definida.

Programación Orientada a Objetos AWT – Layout Manager AWT: Card Layout Este es el tipo de composición que se utiliza cuando se necesita una zona de la ventana que permita colocar distintos Componentes en cada momento. Este Layout suele ir asociado con botones de lista (Choice), de tal modo que cada selección determina el panel (grupo de componentes) que se presentarán.

Programación Orientada a Objetos AWT – Layout Manager AWT: GridBag Layout El GridBagLayout es el Layout Manager más completo y flexible, aunque también el más complicado de entender y de manejar. Al igual que el GridLayout, el GridBagLayout parte de una matriz de celdas en la que se sitúan los componentes. La diferencia está en que las filas pueden tener distinta altura, las columnas pueden tener distinta anchura, y además en el GridBagLayout un componente puede ocupar varias celdas contiguas.

Programación Orientada a Objetos AWT – Contenedores Frame Tipos de contenedores Window Panel Dialog

Programación Orientada a Objetos AWT – Contenedores AWT Contenedores: Frame Es una superficie de pantalla de alto nivel (una ventana) con borde y título. Tiene métodos que permiten asignar título, cursor, color, tamaño, dimensiones, etc. Su controlador de posicionamiento de Componentes por defecto es el BorderLayout. Los objetos de tipo Frame generan varios tipos de eventos, entre ellos el evento WindowClosing que se produce cuando el usuario pulsa sobre el botón Cerrar colocado en la esquina superior derecha de la barra de título del objeto Frame.

Programación Orientada a Objetos AWT – Contenedores Ejemplo de Frame

Programación Orientada a Objetos AWT – Contenedores Ejemplo de Frame

Programación Orientada a Objetos AWT – Contenedores AWT Contenedores: Window Es una ventana que no tiene ni título ni borde. Necesita de un Frame para su creación. Tiene métodos para cambiar su tamaño, cursor, etc.  Su controlador de posicionamiento de componentes por defecto es el BorderLayout.

Programación Orientada a Objetos AWT – Contenedores Ejemplo de Window

Programación Orientada a Objetos AWT – Contenedores Ejemplo de Window

Programación Orientada a Objetos AWT – Contenedores AWT Contenedores: Panel Un Panel es un Container de propósito general. Se puede utilizar para contener otros componentes. Su controlador de posicionamiento de componentes por defecto es el FlowLayout. Un Panel puede contener otros Paneles. Esto es una gran ventaja respecto a los demás tipos de containers, que son containers de máximo nivel y no pueden introducirse en otros containers. 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.

Programación Orientada a Objetos AWT – Contenedores Ejemplo de Panel

Programación Orientada a Objetos AWT – Contenedores Ejemplo de Panel

Programación Orientada a Objetos AWT – Contenedores Otro ejemplo de Panel

Programación Orientada a Objetos AWT – Contenedores Otro ejemplo de Panel

Programación Orientada a Objetos AWT – Contenedores AWT Contenedores: Dialog Es una superficie de pantalla de alto nivel (una ventana) con borde y título, que permite entradas al usuario. Su controlador de posicionamiento de componentes por defecto es el BorderLayout. De los constructores proporcionados por esta clase, destaca el que permite que el diálogo sea o no modal (setModal()). 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.

Programación Orientada a Objetos AWT – Contenedores Ejemplo de Dialog

Programación Orientada a Objetos AWT – Contenedores Ejemplo de Dialog

Programación Orientada a Objetos AWT – Contenedores Otro ejemplo de Dialog

Programación Orientada a Objetos AWT – Contenedores Otro ejemplo de Dialog

Programación Orientada a Objetos AWT – Contenedores y Componentes Añadir componentes a los contenedores Para que una interfaz sea útil, no debe estar compuesta solamente por Contenedores, éstos deben tener Componentes en su interior. Los Componentes se añaden al Contenedor invocando al método add() del Contenedor. La ubicación de cada componente en el contenedor depende del Layout Manager que esté utilizando el mismo. En muchas ocasiones se acostumbra a usar un Layout Manager null. En este caso los componentes deben ubicarse manualmente y sus dimensiones debe ser dadas por el usuario; para ello se utiliza el método setBounds (int x, int y, int alto, int ancho) de cada componente.

Programación Orientada a Objetos AWT – Componentes Label Button Choice Tipos de contenedores List TextField TextArea CheckBox

Programación Orientada a Objetos AWT – Componentes AWT Componentes: Etiquetas 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 de la clase Component y dispone de varias constantes que permiten especificar la alineación del texto sobre el objeto Label.

Programación Orientada a Objetos AWT – Componentes Ejemplo de Label

Programación Orientada a Objetos AWT – Contenedores AWT Componentes Ejemplo de Label

Programación Orientada a Objetos AWT – Componentes AWT Componentes: Botón de Pulsación 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 la 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.

Programación Orientada a Objetos AWT – Componentes Ejemplo de Button

Programación Orientada a Objetos AWT – Contenedores AWT Componentes Ejemplo de Button

Programación Orientada a Objetos AWT – Componentes AWT Componentes: Campos de texto 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 de la clase TextComponent, que extiende a su vez, de la clase Component. Por ello, hay una gran cantidad de métodos que están accesibles desde los campos de texto.

Programación Orientada a Objetos AWT – Componentes Ejemplo de TextField

Programación Orientada a Objetos AWT – Contenedores AWT Componentes Ejemplo de TextField

Programación Orientada a Objetos AWT – Componentes AWT Componentes: Lienzo para pintar Una zona de dibujo o lienzo (Canvas), es una zona rectangular vacía de la pantalla sobre la cual una aplicación puede pintar ó 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. 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

Programación Orientada a Objetos AWT – Componentes Ejemplo de Canvas

Programación Orientada a Objetos AWT – Contenedores AWT Componentes Ejemplo de Canvas

Programación Orientada a Objetos AWT – Componentes AWT Componentes: Botón de selección Los botones de selección (Choice) permiten el rápido acceso a una lista de elementos, presentándose como título el ítem que se encuentre seleccionado. La clase Choice extiende de la clase Component e implementa la interface ItemSelectable, que es la interface que mantiene un conjunto de ítems en los que puede haber, o no, alguno seleccionado. Además, esta clase proporciona el método addItemListener(), que añade un registro de eventos ítem, que es muy importante a la hora de tratar los eventos que se producen sobre éstos objetos.

Programación Orientada a Objetos AWT – Componentes Ejemplo de Choice

Programación Orientada a Objetos AWT – Contenedores AWT Componentes Ejemplo de Choice

Programación Orientada a Objetos AWT – Componentes AWT Componentes: Botón de comprobación La clase CheckBox extiende de la clase Component e implementa la interfaz ItemSelectable, que es la interface que contiene un conjunto de ítems entre los que puede haber o no alguno seleccionado. Los botones de comprobación (Checkbox) se pueden agrupar para formar una interface de botón de radio (CheckboxGroup), que son agrupaciones de botones de comprobación de exclusión múltiple, es decir, en las que siempre hay un único botón activo.

Programación Orientada a Objetos AWT – Componentes Ejemplo de CheckBox

Programación Orientada a Objetos AWT – Contenedores AWT Componentes Ejemplo de CheckBox

Programación Orientada a Objetos AWT – Componentes AWT Componentes: Listas Las listas (List) aparecen en las interfaces de usuario para facilitar a los operadores la manipulación de muchos elementos. Se crean utilizando métodos similares a los de los botones Choice. La lista es visible todo el tiempo y se utiliza una barra de desplazamiento para visualizar los elementos que no caben en el área de la lista que aparece en la pantalla.

Programación Orientada a Objetos AWT – Componentes Ejemplo de List

Programación Orientada a Objetos AWT – Contenedores AWT Componentes Ejemplo de List

Programación Orientada a Objetos AWT – Componentes AWT Componentes: Áreas de texto Un área de texto (TextArea) es una zona multilínea que permite la presentación de texto, que puede ser editable o de sólo lectura. Al igual que la clase TextField, esta clase extiende de la clase TextComponent y dispone de cuatro campos, que son constantes simbólicas que pueden ser utilizadas para especificar la información de colocación de las barras de desplazamiento en algunos de los constructores de objetos TextArea. Estas constantes simbólicas son: SCROLLBARS_BOTH SCROLLBARS_NONE SCROLLBARS_HORIZONTAL_ONLY SCROLLBARS_VERTICAL_ONLY

Programación Orientada a Objetos AWT – Componentes Ejemplo de TextArea

Programación Orientada a Objetos AWT – Contenedores AWT Componentes Ejemplo de TextArea

Programación Orientada a Objetos AWT – Componentes AWT Componentes: Barras de desplazamiento Las barras de desplazamiento ó ScrollBar proporcionan una forma de trabajar con rango de valores ó con el componente área de texto (TextArea), que ofrece 2 barras de desplazamiento automáticamente.

Programación Orientada a Objetos AWT – Componentes Ejemplo de ScrollBar

Programación Orientada a Objetos AWT – Contenedores AWT Componentes Ejemplo de ScrollBar