INTERFACES GRFICAS

DE USUARIO

AWT- SWING
Recopilado por: Vanessa Cristina Miranda

INTRODUCCIN

La programacin en ventanas es muy distinta a la programacin de aplicaciones en texto. Por lo general una aplicacin en texto tiene la estructura Pide datos Procesa Imprime resultados. Una aplicacin de ventanas responde a eventos como un clic del ratn, una seleccin de men, el solapamiento de dos ventanas y otros. El programa principal de una de esas aplicaciones es esencialmente un ciclo infinito. Por lo general la funcin o procedimiento que responde a eventos usa un switch o case para saber cual fue el evento y responde de acuerdo a ello. El AWT de Java nos provee un lenguaje para manejar ventanas en muchos sistemas de ventanas. La implantacin de los distintos objetos en cada sistema puede ser distinto. As que un botn en una Mac se va a ver distinto que en Windows95 pero va a seguir siendo botn. Java no es el primer lenguaje propuesto para tratar de superar el problema de portabilidad de cdigo, pero es probablemente el mas sencillo.

LAS INTERFACES

GRFICAS DE

USUARIO
Una interfaz de usuario es un medio a travs del cual la aplicacin y el usuario interactan con el fin transmitir mensajes y datos. Una interfaz de usuario va desde las clsicas consolas de comandos (como la de un sistema operativo) hasta las ms avanzadas y modernas interfaces grficas o GUIs (Graphical User Interface o Interfaz Grfica de Usuario), en donde aparecen componentes visuales e intuitivos, tales como cajas de texto, listas, rboles, pestaas, botones, cajas de chequeo, etc.
Una interfaz de usuario grfica, adems de aportar componentes debe tambin permitir la interactuacin del usuario y poder comunicar los datos y las acciones con el usuario. Para ello, posee tambin la habilidad de capturar eventos, tales como la pulsacin de una tecla, el movimiento y la pulsacin del ratn, una seleccin, un cambio de texto, etc.

LAS INTERFACES GRFICAS DE USUARIO (CONT)

Las interfaces grficas de usuario (GUI) ofrecen al usuario ventanas, cuadros de dilogo, barras de herramientas, botones, listas desplegables y muchos otros elementos con los que ya estamos muy acostumbrados a tratar. Las aplicaciones son conducidas por eventos y se desarrollan haciendo uso de las clases que para ello nos ofrece la API de Java. Java ofrece al programador generar interfaces grficas a travs de las Java Foundation Classes (JFC).

LA API DE JAVA PARA DESARROLLO DE GUI

La API de Java proporciona una biblioteca de clases para el desarrollo de Interfaces grficas de usuario (en realidad son dos).

La biblioteca proporciona un conjunto de herramientas para la construccin de interfaces grficas que tienen una apariencia y se comportan de forma semejante en todas las plataformas en las que se ejecuten.
La estructura bsica de la biblioteca gira en torno a componentes y contenedores. Los contenedores contienen componentes y son componentes a su vez, de forma que los eventos pueden tratarse tanto en contenedores como en componentes. La API est constituida por clases, interfaces y derivaciones.

JAVA FOUNDATION CLASSES

JFC (Java Foundation Classes o Fundacin de Clases de Java) es una coleccin de clases en Java que permiten generar entornos o interfaces grficos, de tal manera que puedan llevarse a cualquier plataforma o sistema operativo.

En Java , JFC posee las siguientes caractersticas principales:

AWT: Abstract Window Toolkit, o algo as como Juego de Herramientas Abstractas para Ventanas. Son clases que permiten generar entornos con componentes grficos comunes a todas las plataformas, y gestionar eventos de teclado y ratn, entre otros. El aspecto visual s es dependiente de la plataforma.

Swing: Proporciona componentes de presentacin visual independiente a la plataforma en la que se ejecuta. Swing extiende AWT y aade nuevas caractersticas, mejoras y componentes para interactuar con el usuario, tales como rboles, pestaas, tablas, etc. Look and Feel: Permite establecer el look (aspecto) de la interfaz de usuario, con aspecto Java o Windows. Java 2D: Este conjunto de clases abordan la gestin de grficos. Fue construida bajo la licencia de IBM/Taligent. Accesibility: Estas clases facilitan el acceso a disminuidos fsicos al uso de los ordenadores.

Drag and Drop: Provee la posibilidad de arrastrar y soltar (drag and drop) entre una aplicacin Java y una aplicacin nativa.

COMPONENTES

Para empezar a construir interfaces con AWT hay que saber que la unidad fundamental es el componente, que es un elemento grfico bsico que interacta entre la aplicacin y el usuario, tal como un botn, una caja de texto, una lista, etc. Todos los componentes en AWT descienden de la clase Component, y necesitan alojarse dentro de un contenedor. Los contenedores son un tipo especial de componentes instanciados de la clase Container, la cual es a su vez una clase abstracta derivada de la clase Component, la clase padre de todos los componentes. Los contenedores, como su nombre indica, se encargan de contener en su interior al resto de componentes e, incluso, a otros contenedores. Esta caracterstica de contener otros componentes se realiza organizando la situacin de los componentes.

LAS BIBLIOTECAS DISPONIBLES

Cuando apareci Java, los componentes grficos disponibles para el desarrollo de GUI se encontraban en una biblioteca conocida como Abstract Window Toolkit (AWT).
AWT es adecuada para interfaces grficas sencillas, pero no para proyectos ms complejos. Al aparecer en Java 2 la biblioteca AWT se reemplaz por otra biblioteca ms robusta, verstil y flexible: Swing.

Aunque AWT an sigue estando disponible, e incluso es usada por los componentes de Swing.

El paquete awt

El paquete awt contiene todas las clases necesarias para generar interfaces grficas de usuario mediante AWT, as como tambin para dibujar y visualizar imgenes. Este paquete cubre todas las necesidades para generar componentes, contenedores y eventos. Para generar interfaces grficas de usuario mediante AWT es necesario importar este paquete al principio del programa, mediante la siguiente lnea: import java.awt.*;

ALGUNOS COMPONENTES DE AWT

SWING
Paquete de Java para la generacin del GUI en aplicaciones reales de gran tamao. Disponible como paquete externo en Java 1.1 e integrado desde Java 1.2.

Es una de las API de JFC (Java Foundation Classes): AWT, Java 2D, Accessibility, Drag and Drop, Swing, ...
Escrito totalmente en Java. No reemplaza a AWT. Se apoya sobre AWT y aade JComponents. Utiliza el modelo de eventos de Java 1.1. Eleccin entre diferentes aspectos (look & feel). Arquitectura Model-View-Controller (MVC). Nuevos componentes (rboles, tablas, frames internos, iconos, bordes, tooltips, beans, etctera).

JERARQUA DE CLASES PARA LAS GUI

JERARQUA DE CLASES PARA LAS GUI

Component: Superclase de todas las clases de interfaz grfica. Container: Para agrupar componentes. JComponent: Superclase de todos los componentes de Swing que se dibujan directamente en los lienzos (canvas). Sus subclases son los elementos bsicos de la GUI. JFrame: Ventana que no est contenida en otras ventanas. JDialog: Cuadro de dilogo. JApplet: Subclase de Applet para crear applets tipo Swing. JPanel: Contenedor invisible que mantiene componentes de interfaz y que se puede anidar, colocndose en otros paneles o en ventanas. Tambin sirve de lienzo. Graphics: Clase abstracta que proporciona contextos grficos donde dibujar cadenas de texto, lneas y otras formas sencillas.

JERARQUA DE CLASES PARA LAS GUI

Color: Color de los componentes grficos. Font: Aspecto de los caracteres. FontMetrics: Clase abstracta para propiedades de las fuentes. Categoras de clases:

Contenedores: JFrame, JApplet, JWindow, JDialog Componentes intermedios: JPanel, JScrollPane Componentes: JLabel, JBbutton, JTextField, JTextArea, ... Clases de soporte: Graphics, Color, Font, ...

JERARQUA DE CLASES PARA LAS GUI: AWT

JERARQUA DE CLASES PARA LAS GUI: JCOMPONENT

ESQUEMA DE APLICACIN EN SWING

ESQUEMA DE APPLET CON SWING

LA CLASE STRING - CADENA DE CARACTERES

JFRAME
Para mostrar una ventana en una posicin concreta disponemos del mtodo setLocation(x, y) de la clase JFrame. Cuando se crea un objeto JFrame, se crea un objeto Container (AWT).

El objeto JFrame usa el panel de contenido (Container) para albergar los componentes del frame.
1. Obtenemos el panel de contenido del frame: Container panel = this.getContentPane(); 2. Aadimos componentes a dicho panel: panel.add(unComponente);

COMPONENTES EN EL JFRAME

ADMINISTRADORES DE DISPOSICIN
Los componentes se agregan al contenedor con el mtodo add().
JButton unBoton = new JButton("Texto del botn"); panel.add(unBoton);

El efecto de add() depende del esquema de colocacin o disposicin (layout) del contenedor que se use.
Existen diversos esquemas BorderLayout, GridLayout, ... de disposicin: FlowLayout,

Los objetos contenedores se apoyan en objetos LayoutManager (administradores de disposicin). Clases ms usadas que implementa la interfaz LayoutManager:

ADMINISTRADORES DE DISPOSICIN

ORGANIZACIN DE CONTENEDORES

FLOWLAYOUT

BORDERLAYOUT

GRIDLAYOUT
setLayout(new GridLayout(filas, columnas)) Crea una zona de filas x columnas componentes y stos se van acomodando de izquierda a derecha y de arriba a abajo. GridLayout tiene otro constructor que permite establecer la separacin (en pixels) ente los componentes, que es cero con el primer constructor.
As, por ejemplo: new GridLayout(3, 4, 2, 2) Crea una organizacin de 3 filas y 4 columnas donde los componentes quedan a dos pixels de separacin. Ejemplo: setLayout(new GridLayout(3, 4, 2, 2); for(int i = 0; i < 3 * 4; i++) { add(new JButton(Integer.toString(i + 1))); }

GRIDLAYOUT

PANELES COMO CONTENEDORES

PANELES COMO CONTENEDORES

PANELES COMO CONTENEDORES

INTERACCIN CON EL USUARIO

Al interactuar con la aplicacin, el usuario: Acciona componentes (ActionEvent). El usuario pulsa un botn. El usuario termina de introducir un texto en un campo y presiona Enter. El usuario selecciona un elemento de una lista pulsando el preferido (o de un men). Pulsa o suelta botones del ratn (MouseEvent). Minimiza, cierra o manipula una ventana (WindowEvent). Escribe con el teclado (KeyEvent). Descubre porciones de ventanas (PaintEvent).

INTERACCIN CON EL USUARIO

Cuando el usuario de un programa o applet mueve el ratn, presiona un pulsador o pulsa una tecla, genera un evento (actionEvent).

Los eventos son objetos de ciertas clases. Normalmente un objeto de alguna subclase de EventObject que indica:
El elemento que accion el usuario. La identificacin del evento que indica la naturaleza del evento. La posicin del ratn en el momento de la interaccin. Teclas adicionales pulsadas por el usuario, como la tecla Control, la tecla de Cambio a maysculas, etctera.

ACCIONES DEL USUARIO

RESPONDER A EVENTOS
Para que un componente (applet, ventana, ...) responda a los eventos generados por el usuario sobre ese componente, convertimos el componente en un oyente (listener) de ciertos eventos generados por l o por otros componentes. Convertir un componente en oyente de un tipo de eventos consiste en implementar la interfaz correspondiente, codificando sus mtodos, y agregar el componente a la lista de oyentes de ese tipo de eventos.

Por ejemplo, si queremos que la GUI responda a las pulsaciones sobre un botn colocado en la ventana:
La ventana (oyente) ha de implementar la interfaz ActionListener. El mtodo actionPerformed() de dicha interfaz estar preparado para responder a un evento e. El oyente se aade a la lista de eventos de accin de botn.

RESPONDER A EVENTOS

1.

La ventana (oyente) indica que implementa ActionListener (hay otras para diferentes eventos).

la

interfaz

2. Se implementa el mtodo ActionPerformed() de la interfaz para responder a un evento e. 3. Se agrega la ventana (oyente) a la lista de oyentes de eventos ActionEvent desde el botn.

EJEMPLO

RESPONDER A EVENTOS

RESPONDER A EVENTOS

RESPONDER A EVENTOS
Creamos un manejador de eventos en dos pasos: Definimos una clase especfica que haga de oyente de eventos y que implemente el mtodo actionPerformed(). class MiOyente implements ActionListener { public void actionPerformed() { cdigo ... Registramos un ejemplar como oyente de componentes: componente.addActionListener(ejemplar_de_MiOyente);

OTRO MODELO PARA RESPONDER A

EVENTOS

EJEMPLO: BOTN CON PITIDO (MODELO 1)

EJEMPLO: BOTN CON PITIDO (MODELO 2)

EJEMPLO: REPRODUCIR UN
VALOR

EJEMPLO: REPRODUCIR UN
VALOR

EJEMPLO: CONTADOR DE
PULSACIONES

EJEMPLO: CAMBIO DE COLOR

EJEMPLO: CAMBIO DE COLOR

ACTIONEVENT

ACTIONEVENT

INTERFACES PARA PROCESAR

EVENTOS

COMPONENTES ( JAVABEANS): JBUTTON

EJEMPLOS

COMPONENTES ( JAVABEANS): JLABEL

COMPONENTES ( JAVABEANS): JTEXTFIELD

COMPONENTES ( JAVABEANS): JCOMBOBOX

COMPONENTES ( JAVABEANS): JLIST

COMPONENTES ( JAVABEANS): JLIST

COMPONENTES ( JAVABEANS): JSCROLLBAR

COMPONENTES: JSCROLLBAR Y JCOMBOBOX

COMPONENTES: JSCROLLBAR Y JCOMBOBOX

COMPONENTES: JSCROLLBAR Y JCOMBOBOX

MOVIMIENTOS DE RATN

PULSACIONES DE RATN

JERARQUA DE COMPONENTES (REPASO)

CONTENEDORES

EJEMPLO DE CUADRO DE MENSAJE

EJEMPLO DE CUADRO DE
OPCIONES

EJEMPLO DE CUADRO DE
ENTRADA DE DATOS

EJEMPLO DE CUADRO DE
ENTRADA DE DATOS

MENS

MENS

MENS

EJEMPLO DE MEN

EJEMPLO DE MEN

EJEMPLO DE MEN

EJEMPLO DE MEN

EJEMPLO DE MEN

EJEMPLO DE MEN

EJEMPLO DE MEN

EJEMPLO DE MEN

DIBUJO DE GRFICOS EN
PANELES
JPanel se puede usar para dibujar.

Para dibujar en un panel se crea una clase derivada de Jpanel y se redefine el mtodo paintComponent() que le indica al panel como dibujar.
La clase Graphics es una clase abstracta para todos los contextos grficos.

Una vez obtenido el contexto grfico podemos llamar desde este objeto a las funciones grficas definidas en la clase Graphics.
Graphics contiene informacin acerca de la zona que necesita ser redibujada: el objeto donde dibujar, un origen de traslacin, el color actual, la fuente actual, etctera.

EJEMPLO DE DIBUJO

DIBUJO DE GRFICOS EN
PANELES
Cuando utilizamos el mtodo paintComponent() para dibujar en un contexto grfico g, ese contexto es un ejemplar de una subclase concreta de la clase Graphics para la plataforma especfica.

El mtodo paintComponent() es llamado la primera vez y cada vez que es necesario redibujar el componente.
Al hacer super.paintComponent(g) nos aseguramos de que el rea visualizada se limpia antes de volver a dibujar. class MiPanel extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); g.drawString("Interfaz grfica", 40, 40); } }

EJEMPLO DE DIBUJO

ALGUNOS MTODOS DE GRAPHICS

Graphics g; ... g.setColor(Color.blue); g.setBackground(Color.red); g.drawLine(int x1, int y1, int x2, int y2); g.drawRect(int x, int y, int ancho, int alto); g.drawRoundedRect(int x, int y, int ancho, int alto, int arcWidth, int arcHeight); g.fillRect(int x, int y, int ancho, int alto); g.fillRoundedRect(int x, int y, int ancho, int alto, int arcWidth, int arcHeight); g.drawOval(int x, int y, int ancho, int alto); g.fillOval(int x, int y, int ancho, int alto); g.drawArc(int x, int y, int ancho, int alto, int ang1, int ang2); g.drwaString(String cadena, int x, int y); g.setFont(Font f); ...

FUENTES

EJEMPLO