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
- Button
- Chekboxes
- Choice
- List
- Menu
- Text Field
2. Otros controles
- Slider
- Scrollbar
- Text Area
- Canvas
- Label
- Panel
- Scroll 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
- Una interfaz grafica lleva asociada una jerarquia (arbol)
- P.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...
- Al [re]dibujar la interfaz, se hace siguiendo la jerarquia, de arriba a abajo.
- Demasiado 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
Son un caso especial de Checkbox: solo 1 puede estar activo en su grupo, como los botones de una radio, que saltan al cambiar...
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
- Un menu Choice es desplegable.
- Permite 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
- Permite 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
- Es un componente similar a TextField.
- TextField es mas conveniente para pequeños textos, idealmente de una sola linea. No tiene barras de deslizamiento
- TextArea en mas conveniente para textos largos, de mas de una linea.
- 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
- La clase Window de AWT permite crear ventanas independientes del navegador que contiene al applet. Frame es mas potente que Dialog
- El LayoutManager por defecto para Frame es BorderLayout
- Los 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?’)
- Se puede forzar a que sean no redimensionables o ‘modales’
- Un 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’)
- A su vez existen dos clases de Dialog:
- Dialog (a secas!)
- FileDialog:
- Presenta los ficheros del directorio, abrir, cancelar, etc..
- 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
- Son menus, pero no desplegables
- Es una lista de items en la que se puede elegir uno o varios
- Si 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
- Los 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.
- Para variar el valor asociado, hay tres formas:
- Pinchar las flechas de los extremos. Variacion unitaria.
- Pinchar en la barra. Variacion en saltos, 10 por defecto.
- 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
- Un componente Canvas es un objeto que permite dibujar en él.
- No hace nada por si mismo. Esta pensado para ser extendido por herencia.
Canvas can = new Canvas();
add(can);
14. Como usar Panels
- Es un tipo de ‘Container’
- Permite 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
- Define un area para mostrar un solo componente con barras deslizantes.
- La utilizacion tipica es la de visualizar una imagen dentro del ScrollPane.
- Si la imagen es mayor que el area del ScrollPane, este crea automaticamente las barras deslizantes necesarias.
- Se 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
- MenuShortcut: asocia una combinacion de teclas para activar una opcion de menu (p.ej.:Control-S para grabar archivo)
- PopupMenu: menu flotante
17. Como aprovechar un applet grafico desde una aplicacion
- Se 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
- La disposicion de componentes en un panel depende del Layout Manager establecido y del orden en que se van añadiendo los componentes con add().
- Cada Panel puede tener su propio LM, incluso si se anidan paneles.
- El AWT tiene los siguientes LM:
- FlowLayout
- GridLayout
- GridBagLayout
- BorderLayout
- CardLayout
- Layout hecho ‘a medida’ por el usuario
- Sin Layout: posicionamiento absoluto de los componentes
- No 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
- En un sistema puede quedar perfecto y en otro salir como un churro...
- FlowLayout
- Es 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.
- Es 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
- GridLayout
- Dividen la superficie del panel en filas y columnas.
- 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
- GridBagLayout
- Es el LM mas complejo y potente.
- Permite definir celdas, pero de distinto tamaño
- Tambien 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...
- BorderLayout
- Se 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);
...
- CardLayout
- Esta clase se usa para hacer ‘slide show’, es decir una sucesion de ‘tarjetas’ en pantalla.
- Los 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)
- Para hacer posicionamiento absoluto, se declara hace:
setLayout(null)
- Definen un espacio de ‘marco’ del panel.
- Se pueden asignar anchuras independientes a los 4 lados
...
public Insets insets()
{
return new Insets(10,10,10,10); // 10 pixels en los 4 lados
}
...
