Download CompbasGUI

Componentes básicos de GUI
Parte I
Proyecto de software
Introducción al AWT
• AWT es el acrónimo del X Window Toolkit para Java, donde X
puede ser cualquier cosa: Abstract, Alternative, Awkward o Another
• Se trata de una biblioteca de clases Java para el desarrollo de
Interfaces de Usuario Gráficas.
• La estructura básica del AWT se basa en Componentes y
Contenedores.
• La interface de usuario es la parte del programa que permite a éste
interactuar con el usuario.
• La interface de usuario es el aspecto más importante de cualquier
aplicación.
• El AWT también es independiente de la plataforma en que se
ejecute.
Estructura del AWT
• 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
• Es bastante dependiente de la máquina en que
se ejecuta la aplicación
Componentes y Contenedores
• Una interface gráfica está construida en base a
elementos gráficos básicos, los Componentes.
• Típicos ejemplos de estos Componentes son los
botones, barras de desplazamiento, etiquetas, listas,
cajas de selección o campos de texto.
• En el AWT, todos los Componentes de la interface de
usuario son instancias de la clase Component o uno de
sus subtipos.
• Los Componentes no se encuentran aislados, sino
agrupados dentro de Contenedores.
• En el AWT, todos los Contenedores son instancias de la
clase Container o uno de sus subtipos.
Ejemplo de GUI simple
Ejemplo… Jerarquía componentes
Tipos de Componentes
Clases:
BorderLayout
CardLayout
CheckboxGroup
Color
Component
Button
Canvas
Checkbox
Choice
Container
Panel
Window
Dialog
Frame
Label
List
Scrollbar
TextComponent
TextArea
TextField
Dimension
Event
FileDialog
FlowLayout
Font
FontMetrics
Graphics
GridLayout
GridBagConstraints
GridBagLayout
Image
Insets
MediaTracker
MenuComponent
MenuBar
MenuItem
CheckboxMenuItem
Menu
Point
Polygon
Rectangle
Toolkit
Interfaces:
LayoutManager
MenuContainer
Ejemplo GUI
En la figura se reproduce la ventana generada por el código de la aplicación
ComponentesAWT.java que muestra todos los Componentes que proporciona el
AWT. (Ver ejemplo: ComponentesAWT.java)
Componentes
•
Component es una clase
abstracta que representa todo lo
que tiene una posición, un
tamaño, puede ser pintado en
pantalla y puede recibir eventos.
•
Los Objetos derivados de la clase
Component que se incluyen en el
Abstract Window Toolkit (AWT)
son los siguientes:
Button
Canvas
Checkbox
Choice
Container
Panel
Window
Dialog
Frame
Label
List
Scrollbar
TextComponent
TextArea
TextField
Botón
Canvas
Casilla Verificación
Botón de Opción
Contenedores
Panel
Ventana
Dialogo
Marco
Etiqueta-Rotulo
Lista
Barra deslizamiento
Componente Texto
Area de texto
Texto de campo
Botones de Pulsación (Button)
• Creación
Button boton;
boton = new Button( "Botón");
• Captura de eventos
public boolean action( Event evt,Object obj )
{ if ( evt.target instanceof Button )
System.out.println( (String)obj );
else
System.out.println( "Evento No-Button" ); }
(Ver ejemplo: Botones.java)
Botones de Lista (Choice)
• Los botones de selección en una lista
(Choice) permiten el rápido acceso a una
lista de elementos
Botones de Lista (Choice)
• Creación
Selector = new Choice();
• Asignando valores
Selector.addItem( "Rojo" );
Selector.addItem( "Verde" );
Selector.addItem( "Azul" );
• Captura de eventos
public boolean action( Event evt,Object obj )
{ if( evt.target instanceof Choice ) {
String color = (String)obj;
System.out.println( "El color elegido es el " + color ); }
return true; }
(Ver ejemplo: BotonSeleccion.java )
Botones de Marcado (Checkbox)
• Los botones de comprobación (Checkbox) se utilizan
frecuentemente como botones de estado.
• Proporcionan información del tipo Sí o No (true o false).
• El estado del botón se devuelve en el argumento Object
de los eventos Checkbox.
• el argumento es de tipo booleano: verdadero (true) si la
caja se ha seleccionado y falso (false) en otro caso.
Botones de Marcado (Checkbox)
• Creación
Relleno = new Checkbox( "Relleno");
• Captura de eventos
public boolean action( Event evt,Object obj )
{ if ( evt.target instanceof Checkbox )
System.out.println( "CheckBox: " + evt.arg.toString() );
return true; }
(Ver ejemplo: BotonComprobacion.java )
Botones de Selección
(CheckboxGroup)
• Los botones de comprobación se pueden
agrupar para formar una interfaz de botón
de radio (CheckboxGroup), que son
agrupaciones de botones Checkbox en las
que siempre hay un único botón activo.
Botones de Selección
(CheckboxGroup)
• Creación
CheckboxGroup Radio;
Asignando valores
public void init() {
Radio = new CheckboxGroup();
add( new Checkbox( "Primero",Radio,true) );
add( new Checkbox( "Segundo",Radio,false) );
add( new Checkbox( "Tercero",Radio,false) );
}
(Ver ejemplo: BotonRadio.java)
Etiquetas (Label)
• Las etiquetas proporcionan una forma de
colocar texto estático en un panel, para
mostrar información que no varía.
Etiquetas (Label)
• Creación
Label etiq1 = new Label( "Hola Java!" );
• Alineacion de etiquetas
setLayout( new FlowLayout( FlowLayout.CENTER,10,10) );
(Ver ejemplo: Etiqueta.java)
Listas (List)
•
•
•
•
•
Las listas (List) facilitan 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.
Para acceder a los elementos seleccionados se utilizan los métodos
getSelectedItem() o getSelectedItems().
Para listas de selección simple, cualquier selección con doble-click en la
lista disparará el método action()
Listas (List)
• Creación
List planetas = new List( 4,false );
• Asignando valores
planetas.addItem( "Mercurio" );
planetas.addItem( "Venus" );
planetas.addItem( "Tierra" );
planetas.addItem( "Marte" );
planetas.addItem( "Jupiter" );
planetas.addItem( "Saturno" );
planetas.addItem( "Neptuno" );
planetas.addItem( "Urano" );
planetas.addItem( "Pluton" );
(Ver ejemplo: Lista.java)
Campos de Texto (TextField)
•
•
•
Los campos de texto (TextField) , son para la entrada directa de datos por
teclado.
Los campos de texto se pueden crear vacíos, vacíos con una longitud
determinada, rellenos con texto predefinido y rellenos con texto predefinido
y una longitud predeterminada.
Cuando el usuario teclea un retorno de carro en un campo de texto, se
genera un evento TextField.
Campos de Texto (TextField)
•
Creación
TextField tf1,tf2,tf3,tf4;
•
Asignando valores
// Campo de texto vacío
tf1 = new TextField();
// Campo de texto vacío con 20 columnas
tf2 = new TextField( 20 );
// Texto predefinido tf3 = new TextField( "Hola" );
// Texto predefinido en 30 columnas
tf4 = new TextField( "Hola",30 );
•
Captura de eventos
public boolean action( Event evt,Object obj )
{ if( evt.target instanceof TextField )
{ if( evt.target.equals( tf1 ) )
System.out.println( "Campo de Texto 1: " + evt.arg.toString() );
(Ver ejemplo: CampoTexto.java)
Áreas de Texto (TextArea)
•
•
•
•
Las áreas de texto permiten incorporar texto multilínea dentro de zonas de texto
(TextArea).
Los objetos TextArea se utilizan para elementos de texto que ocupan más de una
línea, como puede ser la presentación tanto de texto editable como de sólo lectura.
Se puede permitir que el usuario edite el texto con el método setEditable() de la
misma forma que se hace en el TextField.
Para acceder al texto actual de una zona de texto se utiliza el método getText().
Áreas de Texto (TextArea)
• Creación
t1 = new TextArea();
t2 = new TextArea( "Tutorial de Java",5,40 );
t2.setEditable( false );
• Captura de Eventos
Las áreas de texto no generan eventos por sí solas, por lo que hay
que utilizar eventos externos, para saber cuando tenemos que
acceder a la información contenida en el TextArea. (Por ejemplo un
botón.)
Canvas
• Los canvas son lienzos o zonas de dibujo.
• Son un Componente básico que captura eventos de
exposición (expose), de ratón y demás eventos
relacionados.
• Los canvas simplifican la producción de applets que
necesitan una única funcionalidad para distintas áreas.
• Por ejemplo, el applet Lienzo.java, contiene un
manejador de eventos que controla el evento
mouseDown en el canvas. Si el evento no se genera en
el canvas, se le pasa al applet que lo tratará como un
evento de ratón normal.
Barras de Desplazamiento
(Scrollbar)
• Las barras de desplazamiento (Scrollbar) proporcionan
una forma de trabajar con rangos de valores o de áreas
como el Componente TextArea, que proporciona dos
barras de desplazamiento automáticamente.
• Si queremos implementar un selector de color, como en
el applet Slider.java, podemos utilizar una barra de
desplazamiento para cada uno de los colores primarios.
Barras de Desplazamiento
(Scrollbar)
• También podríamos utilizar una barra de desplazamiento para un
rango de valores de color, tal como se muestra en el ejemplo
Ranger.java.
• las barras de desplazamiento no disponen de un display o zona
donde se muestren directamente los valores asociados a los
desplazamientos, para ello es necesario añadir explícitamente una
caja de texto, tal como se muestra en el ejemplo RangoRojo.java.
Contenedores (Container)
• Container es una clase abstracta derivada de
Component, que representa a cualquier componente
que pueda contener otros componentes. Se trata, en
esencia, de añadir a la clase Component la
funcionalidad de adición, sustracción, recuperación,
control y organización de otros componentes.
• El AWT proporciona cuatro clases de Contenedores:
–
–
–
–
Window
Frame
Dialog
Panel
• La clase Applet también es un Contenedor, es un
subtipo de la clase Panel y puede tener Componentes.
Contenedores (Container)
•
•
•
•
Window
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.
Una instancia de esta clase no tiene ni título ni borde.
Frame
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 es mucho más aparente y más semejante a lo que
nosotros entendemos por ventana.
Dialog
Es una superficie de pantalla de alto nivel (una ventana) con borde y título.
Una instancia de la clase Dialog no puede existir sin una instancia
asociada de la clase Frame.
Panel
Es un Contenedor genérico de Componentes. Una instancia de la clase
Panel, simplemente proporciona un Contenedor al que ir añadiendo
Componentes.