|
Sucesos(events) |
Hacer doble clic sobre un elemento de una lista
Seleccionar un elemento de una lista
El control barra de desplazamiento
A continuación vamos a ver la respuesta a las acciones del usuario sobre varios controles, y dada su importancia dedicaremos una página al estudio de los controles de edición, aquellos que nos permiten introducir datos al programa para su procesamiento.
lista1:
ListaApplet1.java
En una lista existen dos posibles acciones, seleccionar un elemento de la lista cuando se sitúa el cursor sobre dicho elemento, o hacer doble-clic sobre un elemento de la lista.
Un control lista tiene como elementos los nombres de los tres colores básicos: rojo, verde y azul. Al hacer doble-clic sobre un elemento de la lista se pinta un rectángulo del color seleccionado.
Para crear un control lista de la clase List y añadirle elementos, se procede del siguiente modo
List lista=new List();
lista.add("Rojo");
lista.add("Verde");
lista.add("Azul");
lista.select(0);
La última línea de código, indica que el primer elemento de la lista, "Rojo", aparecerá inicialmente seleccionado.
Para saber qué elemento de la lista ha sido seleccionado empleamos dos funciones getSelectedIndex y getSelectedItem, el primero devuelve un entero que indica la posición del elemento en la lista, y la segunda devuelve un string que guarda el elemento de la lista.
int indice=lista.getSelectedIndex();
string texto=lista.getSelectedItem();
Crear un applet y situar sobre el applet en el modo diseño (pestaña Design) un control lista (List)
Establecer FlowLayout como gestor de diseño del applet, con alineamiento a la derecha (la propiedad alignement vale 2).
Crear un array de objetos de la clase Color cuyos elementos son los tres colores básicos
Color[] colores={Color.red, Color.green, Color.blue};
Redefinir la función paint para pintar un rectángulo (a la izquierda del applet) del color seleccionado
La respuesta a las acción de hacer doble-clic sobre un elemento de la lista es similar a la acción de pulsar sobre un botón, y la resumiremos en los siguientes puntos:
Para responder a las acción de hacer doble-clic sobre un elemento de la lista, vamos a elegir la alternativa más cómoda, la que nos proporciona el IDE de JBuilder2. En el modo diseño, seleccionamos el control lista y en el panel Events hacemos doble-clic sobre el editor asociado a actionPerformed. En el código que genera JBuilder, se asocia el control lista con un objeto de una clase anónima mediante la función miembro addActionListener (Anonymous adapter).
lista.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(ActionEvent e) {
lista_actionPerformed(e);
}
});
Queda ahora el trabajo de definir la función respuesta lista_actionPerformed, la tarea a realizar por esta función miembro, que es la de dibujar un rectángulo pintado del color seleccionado.
Para pintar un rectángulo de un determinado color, redefinimos la función miembro paint que nos proporciona el contexto gráfico g en el cual podemos dibujar figuras llamando a distintas funciones.
public void paint(Graphics g){
g.setColor(colores[indice]);
g.fillRect(2, 2, 100, 50);
}
La primera sentencia selecciona el color del lápiz con el que se va a pintar el contorno de una figura, o la brocha con la que se va a pintar su interior, donde colores es un array cuyos elementos son los tres colores básicos, y la variable indice guarda el índice del color seleccionado.
La tarea de la función respuesta lista_actionPerformed será la de obtener el índice del color seleccionado y a continuación llamar a la función paint para que pinte un rectángulo de dicho color.
void lista_actionPerformed(ActionEvent e) {
indice=lista.getSelectedIndex();
repaint();
}
La función miembro getSelectedIndex de la clase List obtiene el índice del color selecionado y lo guarda en el miembro dato indice. Luego, llama a paint.
El código completo de este ejemplo, es el siguiente
package lista1;
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
public class ListaApplet1 extends Applet {
List lista=new List();
FlowLayout flowLayout1 = new FlowLayout();
final Color[] colores={Color.red, Color.green, Color.blue};
int indice;
public void init() {
flowLayout1.setAlignment(2);
lista.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(ActionEvent e) {
lista_actionPerformed(e);
}
});
lista.add("Rojo");
lista.add("Verde");
lista.add("Azul");
lista.select(0);
this.setLayout(flowLayout1);
this.add(lista, null);
}
void lista_actionPerformed(ActionEvent e) {
indice=lista.getSelectedIndex();
repaint();
}
public void paint(Graphics g){
g.setColor(colores[indice]);
g.fillRect(2, 2, 100, 50);
}
}
|
lista2:
ListaApplet2.java
Un control lista tiene como elementos los nombres de los tres colores básicos: rojo, verde y azul. Al selecccionar un elemento de la lista se pinta un rectángulo del color seleccionado.
El mismo que en el ejemplo anterior
La respuesta a las acción de seleccionar un elemento de la lista la podemos resumir en los siguientes puntos:
Para responder a las acción de seleccionar un elemento de la lista, vamos a elegir la alternativa más cómoda, la que nos proporciona el IDE de JBuilder. En el modo diseño, seleccionamos el control lista y en el panel Events hacemos doble-clic sobre el editor asociado a itemStateChanged. En el código que se genera se asocia el control lista con un objeto de una clase anónima mediante la función miembro addItemListener (Anonymous adapter)
lista.addItemListener(new java.awt.event.ItemListener() {
public void itemStateChanged(ItemEvent e) {
lista_itemStateChanged(e);
}
});
La definición de la función respuesta lista_itemStateChanged es la misma que lista_actionPerformed. El código completo de este ejemplo, es el siguiente.
package lista2;
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
public class ListaApplet2 extends Applet {
List lista=new List();
FlowLayout flowLayout1 = new FlowLayout();
final Color[] colores={Color.red, Color.green, Color.blue};
int indice;
public void init() {
lista.addItemListener(new java.awt.event.ItemListener() {
public void itemStateChanged(ItemEvent e) {
lista_itemStateChanged(e);
}
});
flowLayout1.setAlignment(2);
lista.add("Rojo");
lista.add("Verde");
lista.add("Azul");
lista.select(0);
this.setLayout(flowLayout1);
this.add(lista, null);
}
public void paint(Graphics g){
g.setColor(colores[indice]);
g.fillRect(2, 2, 100, 50);
}
void lista_itemStateChanged(ItemEvent e) {
indice=lista.getSelectedIndex();
repaint();
}
}
|
El uso del control selección (Choice) es similar al uso del control lista (List), la diferencia está en el espacio que ocupa en el applet. El control Choice se puede desplegar pulsando en la flecha situada en la parte derecha para mostrar los elementos que contiene y seleccionar uno de ellos, que aparece a la izquierda de la flecha de la caja combinada. El control Choice implementa el interface ItemListener de la misma marera que el control List.
Para crear un control lista de la clase Choice y añadirle elementos, se procede del siguiente modo
Choice lista=new Choice();
lista.add("Rojo");
lista.add("Verde");
lista.add("Azul");
lista.select(1);
La última línea de código, indica que el segundo elemento de la lista, "Verde", aparecerá inicialmente seleccionado a la izquierda de la flecha en la caja combinada.
lista3:
ListaApplet3.java
Podemos llenar una lista o un control selección a partir de un array de strings y en un bucle for.
String[] comidas={"Desayuno", "Comida", "Cena"};
for(int i=0; i<comidas.length; i++){
chComida.addItem(comidas[i]);
}
Para eliminar un elemento de una lista, se llama a la función miembro remove y se le pasa el índice del elemento que queremos eliminar o el nombre de dicho elemento.
listElegir.remove(indice);
listElegir.remove(item);
Para eliminar todos los elementos de una lista, se llama a la función miembro removeAll.
listElegir.removeAll();
En una lista podemos elegir varios elementos, siempre que su propiedad multipleMode tenga el valor true, (por defecto, toma el valor false). Para cambiar esta propiedad llamamos a la función setMultipleMode
listElegir.setMultipleMode(true);
Para obtener los elementos seleccionados disponemos de dos funciones getSelectedIndexes que devuelve un array de enteros int[] (los índices de los elementos seleccionados), y getSelectedItems que devuelve un array de strings, String [] (los nombres de los elementos seleccionados).
String[] items=listElegir.getSelectedItems();
int[] indices=listElegir.getSelectedIndexes();
Más adelante estudiaremos con más detalle el control de edición. Por ahora, mencionaremos que para cambiar el texto del control de edición se llama a la función miembro setText
tMenu.setText("Nuevo texto");
En este ejemplo, combinamos un control selección (Choice), una lista (List) que va cambiando según sea el elemento elegido en el control selección, y un control de edición (TextField) que muestra los elementos seleccionados.
Crear el applet. En el modo diseño (pestaña Design) situar sobre el applet un control etiqueta (Label), un control selección (Choice), un control lista (List), y un control de edición (TextField). Cambiar sus propiedades en sus correspondientes hojas de propiedades
Establecer BorderLayout como gestor de diseño del applet, de modo que la etiqueta se sitúa al norte (NORTH), el control selección al oeste (WEST), la lista al este (EAST) y el control de edición al sur (SOUTH).
Crear un array de strings para llenar el control selección
String[] comidas={"Desayuno", "Comida", "Cena"};
Crear un array bidimensional de strings para llenar la lista con grupos de elementos distintos, según sea la opción elegida en el control selección.
String[][] menus={{"zumo", "huevos", "jamón", "mantequilla", "cereales"},
{"pizza", "hamburguesa", "ensalada", "patatas", "filete", "café"},
{"sopa", "pollo", "tortilla"}};
Establecer el estado inicial de los distintos controles
Para responder a las acción de seleccionar un elemento de la lista, vamos a elegir la alternativa más cómoda, la que nos proporciona el IDE de JBuilder. En el modo diseño, seleccionamos el control listElegir y en el panel Events hacemos doble-clic sobre el editor asociado a itemStateChanged. Hacemos lo mismo para el control selección chComida.
Para cambiar dinámicamente los elementos de una lista, primero se eliminan todos mediante removeAll, y luego, se añaden los nuevos elementos de la lista mediante addItem. En la función respuesta a la selección de un elemento del control selección (Choice), se obtiene el índice del elemento que ha sido seleccionado mediante getSelectedIndex..
void chComida_itemStateChanged(ItemEvent e) {
int indice=chComida.getSelectedIndex();
listElegir.removeAll();
for(int i=0; i<menus[indice].length; i++){
listElegir.addItem(menus[indice][i]);
}
}
En la función respuesta a la acción de seleccionar elementos en la lista, obtenemos los elementos de la lista que han sido seleccionados mediante getSelectedItems, que devuelve un array de strings.
Para poner en el control de edición los nombres de los elementos seleccionados en el control lista, se llama a la función setText.
void listElegir_itemStateChanged(ItemEvent e) {
String[] items=listElegir.getSelectedItems();
String menu=chComida.getSelectedItem()+": ";
for(int i=0; i<items.length; i++){
menu+=items[i]+" ";
}
tMenu.setText(menu);
}
El código completo de este ejemplo, es el siguiente
package lista3;
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
public class ListaApplet3 extends Applet {
Label label1 = new Label();
Choice chComida = new Choice();
List listElegir = new List();
TextField tMenu = new TextField();
BorderLayout borderLayout1 = new BorderLayout();
String[][] menus={{"zumo", "huevos", "jamón", "mantequilla", "cereales"},
{"pizza", "hamburguesa", "ensalada", "patatas", "filete", "café"},
{"sopa", "pollo", "tortilla"}};
String[] comidas={"Desayuno", "Comida", "Cena"};
public void init() {
label1.setText("Realice su pedido");
listElegir.addItemListener(new java.awt.event.ItemListener() {
public void itemStateChanged(ItemEvent e) {
listElegir_itemStateChanged(e);
}
});
chComida.addItemListener(new java.awt.event.ItemListener() {
public void itemStateChanged(ItemEvent e) {
chComida_itemStateChanged(e);
}
});
borderLayout1.setVgap(10);
borderLayout1.setHgap(10);
tMenu.setText("");
listElegir.setMultipleMode(true);
this.setLayout(borderLayout1);
this.add(label1, BorderLayout.NORTH);
this.add(chComida, BorderLayout.WEST);
this.add(listElegir, BorderLayout.EAST);
this.add(tMenu, BorderLayout.SOUTH);
for(int i=0; i<comidas.length; i++){
chComida.addItem(comidas[i]);
}
chComida.select(0);
//por defecto pone el desayuno
for(int i=0; i<menus[0].length; i++){
listElegir.addItem(menus[0][i]);
}
}
void chComida_itemStateChanged(ItemEvent e) {
int indice=chComida.getSelectedIndex();
listElegir.removeAll();
for(int i=0; i<menus[indice].length; i++){
listElegir.addItem(menus[indice][i]);
}
}
void listElegir_itemStateChanged(ItemEvent e) {
String[] items=listElegir.getSelectedItems();
String menu=chComida.getSelectedItem()+": ";
for(int i=0; i<items.length; i++){
menu+=items[i]+" ";
}
tMenu.setText(menu);
}
}
|
barra: BarraApplet.java
El control barra de desplazamiento se emplea frecuentemente en los interfaces gráficos de usuario, cuando la figura o el texto que queremos ver es más gande que las dimensiones de la ventana. Dicho control es mucho más manejable que un control de edición, ya que basta arrastrar el dedo de la barra de desplazamiento, en vez de introducir un dato en un control de edición y pulsar el botón apropiado. En una barra de desplazamiento no es necesario verificar el dato que se ha introducido, ya que se trata de números enteros en un determinado intervalo.
Un control barra de desplazamiento es un objeto de la clase Scrollbar. Creamos un control sbRadio llamando al constructor por defecto
Scrollbar sbRadio = new Scrollbar();
Establecemos su orientación mediante la función miembro setOrientation pasándole un cero o un uno. La orientación horizontal es cero, o la constante Scrollbar.HORIZONTAL, y la orientación vertical es uno o la constante Scrollbar.VERTICAL
sbRadio.setOrientation(0);
El valor máximo y mínimo lo establecemos mediante las funciones miembro setMaximum y setMinimum, respectivamente.
sbRadio.setMaximum(110);
sbRadio.setMinimum(10);
Cuando actuamos con el ratón sobre las flechas situadas en los extremos de la barra, el dedo se desplaza una determinada cantidad denominada unidad y que se establece mediante la función miembro setUnitIncrement.
sbRadio.setUnitIncrement(5);
Cuando se actúa con el ratón en las dos regiones de la barra situadas entre las fechas y el dedo, éste se desplaza una determinada cantidad denominada página o bloque, y se establece mediante llamada a la función miembro setBlockIncrement.
sbRadio.setBlockIncrement(25);
La posición del dedo en la barra de desplazamiento se establece en un valor entre el mínimo y el máximo
sbRadio.setValue(10);
Para obtener la posición del dedo en la barra de desplazamiento se llama a la función miembro getValue que devuelve un entero
int pos=sbRadio.getValue();
En este applet hemos situado una barra de desplazamiento en la parte superior del applet. A medida que movemos el dedo de la barra de desplazamiento, el radio de la circunferencia que se dibuja aumenta.
Crear el applet y situar un control barra de desplazamiento (Scrollbar) en la parte superior
Establecer las propiedades del control en su hoja de propiedades
Establecer BorderLayout como gestor de diseño del applet de modo que la barra de desplazamiento quede al norte (NORTH).
Redefinir la función paint para dibujar una circunferencia (oval) centrada en al applet
Se recuerda al lector, que cada vez que se pretenda dibujar una circunferencia se debe llamar a la función paint mediante repaint.
La respuesta a las acción del usuario sobre una barra de desplazamiento la podemos resumir en los siguientes puntos:
Para responder a las acciones de mover el dedo en la barra de desplazamiento, actuar con el ratón sobre las flechas situadas en los extremos, o en entre los extremos de la barra y el dedo, vamos a elegir la alternativa más cómoda, la que nos proporciona el IDE de JBuilder. En el modo diseño, seleccionamos el control sbRadio y en el panel Events hacemos doble-clic sobre el editor asociado a adjustmentValueChanged. En el código que se genera se asocia el control sbRadio con un objeto de una clase anónima mediante la función miembro addAdjustementListener (Anonymous adapter)
sbRadio.addAdjustmentListener(new java.awt.event.AdjustmentListener() {
public void adjustmentValueChanged(AdjustmentEvent ev) {
sbRadio_adjustmentValueChanged(ev);
}
});
En la definición de la función respuesta sbRadio_adjustmentValueChanged, obtenemos el valor del dedo en la barra de desplazamiento mediante la función miembro getValue, y la guardamos en el miembro dato radio.
void sbRadio_adjustmentValueChanged(AdjustmentEvent ev) {
radio=sbRadio.getValue();
repaint();
}
Para dibujar una circunferencia cuyo centro está situado en el centro del applet, y cuyo radio sea el valor que indica el dedo en la barra de desplazamiento redefinimos la función miembro paint.
public void paint(Graphics g){
int x1=getSize().width/2;
int y1=getSize().height/2;
g.setColor(Color.black);
g.drawOval(x1-radio, y1-radio, 2*radio, 2*radio);
}
Las dimensiones del applet se obtienen mediante la función miembro getSize, que devuelve un objeto de la clase Dimension, que tiene dos miembros dato width, que proporciona la anchura del applet y heigth que proporciona la altura del applet.
El código completo de este ejemplo, es el siguiente
package barra;
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
public class BarraApplet extends Applet {
Scrollbar sbRadio = new Scrollbar();
BorderLayout borderLayout1 = new BorderLayout();
int radio=10;
public void init() {
sbRadio.setOrientation(0);
sbRadio.setValue(10);
sbRadio.setMaximum(110);
sbRadio.setUnitIncrement(5);
sbRadio.setBlockIncrement(25);
sbRadio.setMinimum(10);
sbRadio.addAdjustmentListener(new java.awt.event.AdjustmentListener() {
public void adjustmentValueChanged(AdjustmentEvent ev) {
sbRadio_adjustmentValueChanged(ev);
}
});
this.setLayout(borderLayout1);
this.add(sbRadio, BorderLayout.NORTH);
}
void sbRadio_adjustmentValueChanged(AdjustmentEvent ev) {
radio=sbRadio.getValue();
repaint();
}
public void paint(Graphics g){
int x1=getSize().width/2;
int y1=getSize().height/2;
g.setColor(Color.black);
g.drawOval(x1-radio, y1-radio, 2*radio, 2*radio);
}
}
|