Interfaz gráfica de usuario (AWT)

 AWT = Abstract Windowing Toolkit

 Permite crear entornos graficos de ventanas, a la manera de Windows
 Aspecto ‘similar’ en varias plataformas
 Se han utilizado elementos comunes a todas las plataformas: barras deslizantes,
botones, menus desplegables, etc...

1. Controles basicos

oButton
oChekboxes
oChoice
oList
oMenu
oText Field

2. Otros controles

oSlider
oScrollbar
oText Area
oCanvas
oLabel
oPanel
oScroll Pane

Ejemplo: appletviewer GUIWindow.html (tutorial SUN)

Jerarquia de clases (ver grafico)

Los menus dependen de otra rama de Object;

3. Concepto de Jerarquia de Componentes del programa

oUna interfaz grafica lleva asociada una jerarquia (arbol)

oP.ej.: las opciones de un menu son ‘hijas’ del menu, que a su vez es ‘hijo’ de la
ventana en la que aparece, que a su vez es hijo del applet, etc...
oAl [re]dibujar la interfaz, se hace siguiendo la jerarquia, de arriba a abajo.
oDemasiado rapido para verse a simple vista ¡!!

4. Como usar Labels

// EjemploLabelApplet.java

import java.awt.*;

public class EjemploLabelApplet extends java.applet.Applet

{
public void init()

{
Label etiqueta1 = new Label("Label1");
Label etiqueta2 = new Label("Label2");
Label etiqueta3 = new Label("Label3");

add(etiqueta1);
add(etiqueta2);
add(etiqueta3);
}
}

 
 5. Como usar Buttons

//EjemploButtonApplet.java
import java.awt.*;

public class EjemploButtonApplet extends java.applet.Applet

{
public void init()

{
Label etiqueta1 = new Label("Label1");
Button boton1 = new Button("Boton 1");
Button boton2 = new Button("Boton 2");

add(boton1);
add(etiqueta1);
add(boton2);
}
}

Probar a cambiar las dimensiones de la ventana de appletviewer: la disposicion de los

elementos es automatica.

6. Como usar Checkboxes

// EjemploAWTApplet.java

...
add(new Checkbox("Pamplona"));
add(new Checkbox("Bilbao", null, true));
add(new Checkbox("Madrid"));
add(new Checkbox("Barcelona"));
...

Metodos utiles:

setState() //consulta el estado del checkbox

setState() //altera el estado del checkbox
etc...

 RadioButton

o Son un caso especial de Checkbox: solo 1 puede estar activo en su grupo,

como los botones de una radio, que saltan al cambiar...
o Hay que crear el CheckboxGroup

...
CheckboxGroup cbg = new CheckboxGroup();
add(new Checkbox("Rojo", cbg, false));
add(new Checkbox("Azul", cbg, false));
add(new Checkbox("Verde", cbg, true));
add(new Checkbox("Negro", cbg, false));
...

7. Como usar Choice Menu

oUn menu Choice es desplegable.

oPermite seleccionar un item del menu

...
Choice c = new Choice(); // crea el menu desplegable
c.addItem("Naranja");
c.addItem("Manzana");
c.addItem("Pera");
add(c); // añade el menu al panel
...
Metodos utiles:

getItem(int n) devuelve el string de la opcion n-esima

getSelectedIndex() devuelve el indice de la opcion seleccionada

//Este tipo de menus solo permiten seleccionar una opcion. Para multiples
opciones, usar una lista 
 8. Como usar TextFields

oPermite al usuario introducir texto

...
add(new Label("Nombre completo"));
add(new TextField("-esciba aqui su nombre-"));
add(new Label("Telefono"));
add(new TextField(12));
add(new Label("Password"));
TextField t = new TextField(20);
t.setEchoCharacter('*');
add(t);
...
Metodos utiles:

setEditable(boolean) define si el testo es editable o no

select(int, int) selecciona el texto entre las dos posiciones (origen
= 0)
etc...

9. Como usar TextArea

oEs un componente similar a TextField.

oTextField es mas conveniente para pequeños textos, idealmente de una sola linea. No
tiene barras de deslizamiento

o TextArea en mas conveniente para textos largos, de mas de una linea.

o Por defecto, tiene barras de deslizamiento
 ...
String texto = "Erase una vez un pais en el que vivian tres cerditos que
eran\n" +
"hermanos. Decidieron construirse una casa, y uno el primero de\n" +
"ellos se la hizo de paja, el segundo de madera y el tercero de ladrillo\n"
+
"Un buen dia aparecio por alli el lobo y blablabla...";
// el caracter ‘\n’ es para forzr el retorno de linea
add(new TextArea(texto, 10, 60));
...
Metodos utiles:
insertText(String, int) // inserta texto en la posicion indicada
replaceText(String, int,int) // reepmplaza el texto entre las posiciones
dadas
etc...

10. Como usar Frames y Dialogs

oLa clase Window de AWT permite crear ventanas independientes del navegador que
contiene al applet. Frame es mas potente que Dialog
oEl LayoutManager por defecto para Frame es BorderLayout
oLos Dialog son ventanas emergentes pensadas para mensajes no permanentes, como
‘ADVERTENCIA’, peticion de informacion especifica, etc..., que una vez
presentados al usuario pueden desaparecer (p.ej.: ‘Se va a proceder a la
instalacion de HyperQuake V. Confirmar?’)
oSe puede forzar a que sean no redimensionables o ‘modales’
oUn Dialog ‘modal’ es aquel que impide usar otra ventana hasta que no se lleve a cabo
la accion de la presente ventana (p.ej.: ‘Es necesario que introduzca la clave de
acceso para continuar la ejecucion’)
oA su vez existen dos clases de Dialog:

o Dialog (a secas!)
o FileDialog:

o Presenta los ficheros del directorio, abrir, cancelar, etc..

o Debido a las restricciones de los applets, tiene muchas mas
funcionalidades si se emplea en una aplicacion Java
 ...
// Ejemplo de utilizacion de Frame
Frame ventanaFrame = new Frame("Mi ventana FRAME");
ventanaFrame.setLayout(new FlowLayout()); //por defecto es
BorderLayout
ventanaFrame.add(new Button("Opcion 1"));
ventanaFrame.add(new Button("Opcion 2"));
ventanaFrame.add(new Button("Opcion 3"));
ventanaFrame.resize(100,150); //define el tamaño de la ventana
Point dim = location(); //devuelve la posicion de este componente, como
la esquina sup-izda
//medida respecto al componente padre
ventanaFrame.move(dim.x + 50, dim.y + 50);
ventanaFrame.show(); //cuando se crea la ventana, es invisible. Para
ocultarla, hide()
...

// Ejemplo de utilizacion de Dialog

...

// Ejemplo de utilizacion de FileDialog

...

 
11. Como usar List

oSon menus, pero no desplegables

oEs una lista de items en la que se puede elegir uno o varios
oSi el numero de items es mayor que la longitud de la lista, aparecen barras de
deslizamiento

...
List lista = new List(5, true); // crea una lista que tendra 5 lineas, y que
permitira
// seleccion multiple (valor 'true')
lista.addItem("Afrodita");
lista.addItem("Apolo");
lista.addItem("Ares");
lista.addItem("Hades");
lista.addItem("Zeus"); // si se añade un sexto elemento, se creara
automaticamente
// una barra deslizante
add(lista);
 ...
Metodos utiles:

getSelectedIndex() // devuelve el indice del item seleccionado, si

no se permite seleccion mult.
getSlectedIndexes() // devuelve un array de indices de los items
seleccionados
getSelectedItem() // devuelve el item seleccionado
getSlectedItems() // idem varios items
select(int) // fuerza a que esté seleccionado el item de la posicion
dada
etc...

12. Como usar Scrollbars

oLos componentes TextArea y TextField vienen con sus propias barras deslizantes. Pero
tambien se pueden crear barras deslizantes independientes, tipicamante para
manipular rangos de valores entre un maximo y un minimo.
oPara variar el valor asociado, hay tres formas:

o Pinchar las flechas de los extremos. Variacion unitaria.

o Pinchar en la barra. Variacion en saltos, 10 por defecto.
o Pinchar y arrastar el ‘elevador’.

...Scrollbar barraDeslizante = new Scrollbar(Scrollbar.HORIZONTAL);

add(barraDeslizante);
...
// constructor mas general:
// Scrollbar(int orientacion, int valorInicial, int anchura, int valorMinimo,
int valorMaximo);
...
Metodos utiles:

getValue() // Devuelve el valor actual de la barra

setValue() // Asigna un valor a la barra

13. Como usar Canvas

oUn componente Canvas es un objeto que permite dibujar en él.

 oNo hace nada por si mismo. Esta pensado para ser extendido por herencia.

Canvas can = new Canvas();

add(can);

14. Como usar Panels

oEs un tipo de ‘Container’

oPermite definir un area en la cual incluir otros componentes, incluidos otros Panels
(‘paneles anidados’). De esta forma los componentes se agrupan, dando un aspecto
ordenado al conjunto de la interfaz grafica. Para que esta ordenacion sea eficaz,
hay que usar Panel en un componente que tenga bien definida la disposicion
mediante un LayoutManager (se ve mas adelante).

...
Panel unPanel = new Panel();
unPanel.add(new Label("Arriba"));
unPanel.add(new Label("Abajo"));
add(unPanel);
... 

15. Como usar Scroll Panes

oDefine un area para mostrar un solo componente con barras deslizantes.

oLa utilizacion tipica es la de visualizar una imagen dentro del ScrollPane.
oSi la imagen es mayor que el area del ScrollPane, este crea automaticamente las
barras deslizantes necesarias.
oSe puede forzar que no haya barras.

NOTA: utilizar ScrollPane es un poco mas complicado que los

componentes anteriores. En este ejemplo se ha tenido que definir una clase
aparte, que hereda de Canvas, e implementar varios metodos para que la imagen
aparezca con un tamaño adecuado
...
Image foto = getImage(getCodeBase(), "orb.gif");
ScrollableCanvas sCanvas = new ScrollableCanvas(foto);
ScrollPane sPane = new ScrollPane();
sPane.add(sCanvas);
add(sCanvas);
 ...

// Ahora viene la clase definida por nosotros (se pueden incluir varias
clases en un mismo fichero siempre que solo haya una de ellas con el
atributo ‘public’
class ScrollableCanvas extends Canvas
{
Dimension preferredSize;
Dimension minimumSize;
Image imagen;
// Constructor de la clase ScrollableCanvas (definida por nosotros ¡!)
public ScrollableCanvas(Image imagen)

{
this.imagen = imagen;
preferredSize = new Dimension(600, 320);
minimumSize = new Dimension(10, 10);
}

public Dimension getMinimumSize()

{
return minimumSize;
}

public Dimension getPreferredSize()

{
return preferredSize;
}

public void paint(Graphics g)

{
g.drawImage(imagen, 0, 0, getBackground(), this);
}
}

16. Otros componentes

oMenuShortcut: asocia una combinacion de teclas para activar una opcion de menu
(p.ej.:Control-S para grabar archivo)
oPopupMenu: menu flotante

17. Como aprovechar un applet grafico desde una aplicacion

 oSe puede lanzar desde una aplicacion un applet haciendo lo siguiente;

// Heredar –con extends- de las clases Applet, AWT, etc...

public static void main(String args[])
{
Frame f = new Frame("Mi ventana para el applet"); // Crea una
ventana para mostrar el applet, //a la manera de un navegador
EjemploAWTApplet unApplet = new EjemploAWTApplet(); // El
fichero EjemploAWTApplet es //tambien una clase y por lo tanto se
puede instanciar ¡!
unApplet.init(); // Lanza init(), igual que haria el navegador
unApplet.start(); // idem con start()
f.add("Center", unApplet);
f.resize(300, 300); // Hace las veces de WIDTH y HEIGHT en el
HTML!!
f.show();

//ATENCION: esta ‘adaptacion’ para ver applets como aplicaciones debe

tener en cuenta si el applet lee //parametros del fichero HTML. Habria que
pasar los parametros en la linea de comandos, a main(String //args[])
} 

18. LayoutManager

oLa disposicion de componentes en un panel depende del Layout Manager establecido y

del orden en que se van añadiendo los componentes con add().
oCada Panel puede tener su propio LM, incluso si se anidan paneles.
oEl AWT tiene los siguientes LM:

o FlowLayout
o GridLayout
o GridBagLayout
o BorderLayout
o CardLayout
o Layout hecho ‘a medida’ por el usuario
o Sin Layout: posicionamiento absoluto de los componentes
 oNo es recomendable usarlo, porque las coordenadas de pantalla dependen de
la plataforma, y esto va en contra de la filosofia Java de hacer programas
portables
oEn un sistema puede quedar perfecto y en otro salir como un churro...

o FlowLayout

oEs la clase mas sencilla. Simplemente se van añadiendo los componentes uno detras
de otro, en linea. Si no caben en una linea, se pasa a la siguiente.
oEs el LM por defecto.

setLayout(new FlowLayout());

setLayout(new FlowLayout(FlowLayout.LEFT), 10, 10); // alineacion izquierda, con

distancias de 10 pixeles en horizontal y vertical

o GridLayout

oDividen la superficie del panel en filas y columnas.

o Al añadir componentes con add(), estos se distribuyen por las celdas

...
Panel panelGridLayout = new Panel();
panelGridLayout.setLayout(new GridLayout(3,3)); // Layout de 3 filas y 3 columnas

pa.nelGridLayout.add(etiqueta1);
panelGridLayout.add(boton1);
panelGridLayout.add(boton2);
 panelGridLayout.add(boton3);
add(panelGridLayout);
...
Otro constructor:
public GridLayout(int rows, int columns, int horizontalGap, int verticalGap) // define
tambien la separacion entre celdas, en pixels

o GridBagLayout

oEs el LM mas complejo y potente.

oPermite definir celdas, pero de distinto tamaño
oTambien se puede definir el comportamiento de las celdas al variar el tamaño de la
ventana que los contiene (ver GridBagConstraints): se mantiene su tamaño, utilizan
el nuevo espacio disponible, etc...

o BorderLayout

oSe indica la posicion ‘geografica’ del componente: norte, sur, este, oeste o centro.

...
Panel panelBorderLayout = new Panel();
panelBorderLayout.setLayout(new BorderLayout(5,5));
panelBorderLayout.add("Center", etiqueta1);
panelBorderLayout.add("North", boton1);
panelBorderLayout.add("East", boton2);
panelBorderLayout.add("West", boton3);
panelBorderLayout.add("South", boton4);
add(panelBorderLayout);
...

o CardLayout
 oEsta clase se usa para hacer ‘slide show’, es decir una sucesion de ‘tarjetas’ en
pantalla.
oLos paneles se presentan ‘uno cada vez’.

...
Panel panelCardLayout = new Panel();
panelCardLayout.setLayout(new CardLayout());
panelCardLayout.add("primero", new Button("Boton 14"));
panelCardLayout.add("segundo", new Button("Boton 15"));
panelCardLayout.add("tercero", new Button("Boton 16"));
panelCardLayout.add("cuarto", new Button("Boton 17"));
((CardLayout)panelCardLayout.getLayout()).show(panelCardLayout, "tercero"); //
complicadillo...
add(panelCardLayout);
...
Metodos utiles:
public void first(Container parent)
public void next(Container parent)
public void previous(Container parent)
public void last(Container parent)

o Sin LayoutManager

o Para hacer posicionamiento absoluto, se declara hace:

setLayout(null)

o Insets
 oDefinen un espacio de ‘marco’ del panel.
oSe pueden asignar anchuras independientes a los 4 lados

...
public Insets insets()
{
return new Insets(10,10,10,10); // 10 pixels en los 4 lados
}
...

""