|
JavaBeans |
Propiedades y sucesos del bean
Relación entre el aspecto y las propiedades del bean
Una vez que hemos estudiado las características esenciales de los beans, vamos a crear un bean que tenga alguna utiidad para el programador de applets y aplicacaciones.
La barra de desplazamiento (Scrollbar) es un componente muy útil para introducir datos, no es tan flexible como un control de edición, pero tiene la ventaja de ser accionado exclusivamente por el ratón. Su limitación está en que solamente podemos seleccionar datos enteros entre un mínimo y un máximo, y en que no nos muestra la cantidad a la que equivale la posición del dedo.
El control de edición es más flexible, ya que podemos introducir cualquier dato. Tiene la desventaja de la utilización del teclado, y que hemos de verificar los datos que se introducen. Por ejemplo, si se requiere un dato numérico, hemos de verificar que no se introducen otros caracteres, una coma en vez de un punto como separador de la parte entera y la decimal, que el dato introducido está dentro de un determinado intervalo, etc.
En el Ejercicio 2 se planteaba al lector crear un applet con un control de edición y una barra de desplazamiento horizontal. Si el lector ha resuelto con éxito este ejercicio, podrá reutilizar la mayor parte del código para crear el bean. La única diferencia reside en que en el ejercicio hemos puesto los controles sobre un applet (un panel especializado), mientras que en el JavaBean los situaremos sobre un panel (objeto de la clase Panel)
La combinación de un control de edición y una barra de desplazamiento, es muy útil para la programación de aplicaciones en el ámbito científico. Vamos a crear un bean que tenga estos dos componentes situados sobre un panel. Además, haremos que la posición del dedo en la barra de desplazamiento no se limite a números enteros sino a numeros reales en general.
Creamos un nuevo proyecto seleccionando File/New Project
Añadimos al proyecto un JavaBean seleccionado File/New y a continuación en el diálogo New el icono JavaBean
En el diálogo que aparece titulado JavaBean Wizard ponemos BarTexto en el campo Name of new JavaBean, el nombre del bean, y en el campo Base class to inherit from seleccionamos java.awt.Panel.
Observamos que se genera una clase denominada BarTexto que deriva de la clase Panel.
Seleccionamos la pestaña Design y situamos sobre el panel un control de edición a la izquierda y una barra de desplazamiento horizontal a la derecha. Podemos introducir otros nombres para los controles o dejar los que pone por defecto el IDE. No es necesario efectuar otros cambios significativos en las hojas de propiedades de los componentes.
textField1.setText("0.0");
textField1.setColumns(3);
scrollbar1.setValue(50);
scrollbar1.setOrientation(0);
BorderLayout es el gestor de diseño que elegimos para el panel BarTexto, de modo que el control de edición queda a la izquierda (WEST) y la barra de desplazamiento en el centro (CENTER).
this.setLayout(borderLayout1);
this.add(textField1, BorderLayout.WEST);
this.add(scrollbar1, BorderLayout.CENTER);
Como ya vimos al estudiar el control botón rudimentario en la página anterior, es necesario redefinir las funciones getPreferredSize y getMinimunSize. En este caso, se ha tomado como unidad las dimensiones del carácter 0 de la fuente de texto por defecto. El ancho se ha tomado igual a 20 veces la anchura de un carácter y el alto, igual al doble de la altura de un carácter. La clase FontMetrics nos proporciona la información relativa a la fuente de texto actuamente seleccionada.
Estas dimensiones son las que tendrá el bean cuando se coge de la barra de herramientas y se deposita en el applet, luego, podemos cambiarlas actuando con el ratón en el momento de diseño. Las dimensiones finales de este componente dependerán de las dimensiones del panel que lo contiene, de los otros componentes presentes y del gestor de diseño (layout) empleado. Las dimensiones del componente no podrán ser inferiores al valor mínimo dado por la función miembro getMinimumSize.
public Dimension getPreferredSize() {
FontMetrics fm=getFontMetrics(getFont());
return new Dimension(20*fm.stringWidth("0"), 2*fm.getHeight());
}
public Dimension getMinimumSize() {
return getPreferredSize();
}
Cada programador puede definir estas funciones como mejor le convenga.
Examinamos en este apartado cómo interaccionan los dos controles. Cómo la posición del dedo en la barra de desplazamiento se muestra en el control de edición, y cómo el dato que se introduce en el control de edición se refleja en la posición del dedo en la barra de desplazamiento.
En primer lugar, queremos que el valor al que equivale la posición del dedo en la barra de desplazamiento se muestre en el control de edición.
En el capítulo dedicado al estudio de la respuesta a las acciones del usuario sobre los controles examinamos el control barra de desplazamiento.
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 scrollbar1 y en la hoja de propiedades y sucesos pulsamos en la pestaña Events, haciendo doble-clic en el editor de adjustmentValueChanged. En el código que se genera se asocia el control scrollbar1 (la fuente de sucesos) con un objeto de una clase anónima que implementa el interface AdjustementListener, mediante la función miembro addAdjustementListener.
scrollbar1.addAdjustmentListener(new java.awt.event.AdjustmentListener() {
public void adjustmentValueChanged(AdjustmentEvent e) {
scrollbar1_adjustmentValueChanged(e);
}
});
En la función respuesta adjustementValueChanged o bien en scrollbar1_adjustmentValueChanged, leemos la posición del dedo suministrada por el suceso e de la clase AdjustementEvent mediante getValue. Convertimos el valor numérico a texto y lo mostramos en el control de edición textField1 mediante setText.
void scrollbar1_adjustmentValueChanged(AdjustmentEvent e) {
int pos=e.getValue();
textField1.setText(String.valueOf(pos));
}
Al introducir un dato en el control de edición y pulsar la tecla RETORNO o ENTER queremos que dicho dato se refleje en la posición del dedo en la barra de desplazamiento.
Cuando se pulsa RETORNO en un control de edición se genera un suceso del tipo ActionEvent, como en el control botón. Para responder a esta acción, nos situamos en el modo diseño, pestaña Design, seleccionamos el control textField1, y vamos a su hoja de propiedades y sucesos. Pulsamos en la pestaña Events, hacemos doble-clic en el editor asociado a actionPerformed. El IDE genera el siguiente código.
textField1.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(ActionEvent e) {
textField1_actionPerformed(e);
}
});
En el cuerpo de la función respuesta actionPerformed o bien textField1_actionPerformed, leemos el dato introducido en el control de edición mediante getText, convertimos el texto en número, y modificamos la posición del dedo de la barra de desplazamiento scrollbar1 mediante setValue.
void textField1_actionPerformed(ActionEvent e) {
int pos=Integer.parseInt(textField1.getText());
scrollbar1.setValue(pos);
}
Filtrado de los caracteres
En el control de edición introducimos un dato numérico, de modo que no son necesarios los caracteres no numéricos. En el estudio del control de edición vimos como podía crearse un filtro de estas características.
Cada vez que que se teclea un carácter en un control de edición se genera un suceso de la clase KeyEvent. Para responder a estas acciones, seleccionamos el control de edición textField1, y vamos a su hoja de propiedades y sucesos. Pulsamos en la pestaña Events y hacemos doble-clic en el editor asociado a keyTyped. El IDE genera el siguiente código.
textField1.addKeyListener(new java.awt.event.KeyAdapter() {
public void keyTyped(KeyEvent e) {
textField1_keyTyped(e);
}
});
En la función respuesta keyTyped o bien en textField1_keyTyped, filtramos los caracteres
void textField1_keyTyped(KeyEvent e) {
char c=e.getKeyChar();
if((c>='0' && c<='9')||(c=='.')||(c==KeyEvent.VK_DELETE)
||(c==KeyEvent.VK_BACK_SPACE)){
return;
}
e.consume();
}
Solamente, aparecerán en el control de edición los caracteres numéricos del 0 al 9, el carácter punto, separador de la parte entera y decimal, y los caracteres correspondientes a las teclas de edición suprimir (KeyEvent.VK_DELETE) y retroceso (KeyEvent.VK_BACK_SPACE). El resto de los caracteres son consumidos consume y no llegan al control de edición.
Una vez concluído el diseño, la siguiente tarea a realizar en el bean, es la de determinar sus propiedades simples o ligadas y los sucesos (events) que emite o a los que ha de responder.
El primer paso, el más sencillo, es el de proporcionar al bean la característica de la persistencia. Seleccionamos la pestaña Bean y a continuación General y activamos la casilla Support serialization.
El IDE genera el código para que la clase BarTexto implemente el interface Serializable
public class BarTexto extends Panel implements java.io.Serializable{
//...
}
El bean va a tener dos propiedades simples el valor máximo y el valor mínimo, y una propiedad ligada, el valor indicador (al que equivale la posición del dedo en la barra de desplazamiento)
Para definir dichas propiedades seleccionamos la pestaña Bean y a continuación la pestaña Properties, y pulsamos en el botón addProperty, apareciendo el diálogo titulado New Property
Para definir la propiedad simple maximo ponemos
| Property name | maximo |
| Type | double |
| Binding | none |
A continuación, pulsamos el botón Apply.
Para definir la propiedad minimo ponemos
| Property name | minimo |
| Type | double |
| Binding | none |
A continuación, pulsamos el botón Apply
Para definir la propiedad ligada indicador ponemos
| Property name | indicador |
| Type | double |
| Binding | bound |
A continuación pulsamos el botón OK para cerrar el diálogo
El IDE genera nuevo código,
public class BarTexto extends Panel implements java.io.Serializable{
private double maximo=1.0;
private double minimo=0.0;
private double indicador=0.0;
private transient PropertyChangeSupport propertyChangeListeners = new PropertyChangeSupport(this);
//...
public synchronized void removePropertyChangeListener(PropertyChangeListener l) {
propertyChangeListeners.removePropertyChangeListener(l);
}
public synchronized void addPropertyChangeListener(PropertyChangeListener l) {
propertyChangeListeners.addPropertyChangeListener(l);
}
public void setMaximo(double newMaximo) {
maximo = newMaximo;
}
public double getMaximo() {
return maximo;
}
public void setMinimo(double newMinimo) {
minimo = newMinimo;
}
public double getMinimo() {
return minimo;
}
public void setIndicador(double newIndicador) {
double oldIndicador = indicador;
indicador = newIndicador;
propertyChangeListeners.firePropertyChange("indicador",
new Double(oldIndicador), new Double(newIndicador));
}
public double getIndicador() {
return indicador;
}
}
El bean emite (fire) un suceso de la clase PropertyChangeEvent cuando cambia su propiedad ligada indicador, pero no responde (listen) a ningún suceso.
public void setIndicador(double newIndicador) {
double oldIndicador = indicador;
indicador = newIndicador;
propertyChangeListeners.firePropertyChange("indicador",
new Double(oldIndicador), new Double(newIndicador));
}
Los objetos (listeners) interesados en el cambio de esta propiedad ligada, como veremos más adelante, han de implementar el interface PropertyChangeListener y definir la función propertyChange.
Ahora queremos que cuando cambiamos el valor de las propiedades en la hoja de propiedades del componente, se refleje este cambio en el aspecto del bean. En concreto, cuando se cambia el valor de la propiedad indicador, este cambio debe reflejarse en la posición del dedo en la barra de desplazamiento.
En la figura inferior tenemos la hoja de propiedades a la izquierda y el aspecto del bean sobre un applet en el momento de diseño a la derecha.
 |
 |
La barra de desplazamiento tiene por defecto un valor mínimo que vale cero y un valor máximo que vale 100, las posiciones del dedo en la barra de desplazamiento son números enteros comprendidos entre 0 y 100.
Hemos de transformar el valor de la propiedad indicador (un número real) comprendido entre los valores de las propiedades minimo y maximo en un valor entero comprendido entre 0 y 100 que señale la posición del dedo en la barra de desplazamiento. La función valorEntero realiza esta transformación
private int valorEntero(double x){
return (int)((100*(x-minimo))/(maximo-minimo));
}
A su vez, hemos de transformar la posición del dedo, un valor entero comprendido entre 0 y 100, en el valor de la propiedad indicador comprendido entre los valores minimo y maximo. Esta tarea la realiza la función valorDouble
private double valorDouble(int x){
return (minimo+x*(maximo-minimo)/100);
}
Cuando se cambia el valor de la proiedad indicador en la hoja de propiedades o durante la ejecución del programa, se llama a la función setIndicador para reflejar dicho cambio. En el cuerpo de dicha función, se deberá actualizar la posición del dedo en la barra de desplazamiento y el texto en el control de edición. Por razón de seguridad, se comprobará que el nuevo valor de la proiedad indicador está comprendido entre los valores minimo y maximo .
public void setIndicador(double newIndicador) {
if(newIndicador<minimo) newIndicador=minimo;
if(newIndicador>maximo) newIndicador=maximo;
//...
textField1.setText(String.valueOf(indicador));
scrollbar1.setValue(valorEntero(indicador));
}
Cuando se introduce un determinado valor numérico en el control de edición, debe quedar reflejado en el la posición del dedo en la barra de desplazamiento y también, debe actualizarse la propiedad indicador. Ya hemos comentado en el apartado Interacción entre controles cómo cambia la posición del dedo en la barra de desplazamiento cuando se introduce un número entero en el control de edición textField1 y se pulsa RETORNO. Ahora, manejamos números reales, por lo que el código de la función repuesta a la acción de pulsar RETORNO en el control de edición precisa de algunos cambios.
void textField1_actionPerformed(ActionEvent e) {
double pos=Double.valueOf(textField1.getText()).doubleValue();
if(pos<minimo) pos=minimo;
if(pos>maximo) pos=maximo;
scrollbar1.setValue(valorEntero(pos));
setIndicador(pos);
}
En el código de la función respuesta textField1_actionPerformed, se obtiene el texto del control de edición textField1, se convierte el texto en un número del tipo double. Se verifica que dicho número está en el intervalo comprendido entre los valores de las propiedades minimo y maximo. Por último, se actualiza la posición del dedo en la barra de desplazamiento, realizando una conversión de unidades, y se actualiza la propiedad indicador llamado a setIndicador.
Cuando se mueve con el ratón el dedo en la barra de desplazamiento, vimos en el apartado Interacción entre controles cómo cambia el texto en el control de edición. Ahora, trabajamos con números reales y además hemos de actualizar la propiedad ligada indicador.
void scrollbar1_adjustmentValueChanged(AdjustmentEvent e) {
int pos=e.getValue();
textField1.setText(String.valueOf(valorDouble(pos)));
setIndicador(valorDouble(pos));
}
Se lee la posición del dedo en la barra de desplazamiento mediante getValue, se convierte el valor entero devuelto en un número real comprendido entre los valores de las propiedades minimo y maximo, se convierte dicho número real en texto, y se muestra en el control de edición textField1, mediante setText. Por úlltimo, se actualiza la propiedad indicador llamado a setIndicador.
El código completo del bean BarTexto es el siguiente
package bean3;
import java.awt.*;
import java.awt.event.*;
import java.beans.*;
public class BarTexto extends Panel implements java.io.Serializable{
private double maximo=1.0;
private double minimo=0.0;
private double indicador=0.0;
TextField textField1 = new TextField();
Scrollbar scrollbar1 = new Scrollbar();
BorderLayout borderLayout1 = new BorderLayout();
private transient PropertyChangeSupport propertyChangeListeners = new PropertyChangeSupport(this);
public BarTexto() {
try {
jbInit();
}
catch (Exception ex) {
ex.printStackTrace();
}
}
private void jbInit() throws Exception {
this.setSize(new Dimension(100, 20));
textField1.setText("0.0");
textField1.setColumns(3);
textField1.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(ActionEvent e) {
textField1_actionPerformed(e);
}
});
textField1.addKeyListener(new java.awt.event.KeyAdapter() {
public void keyTyped(KeyEvent e) {
textField1_keyTyped(e);
}
});
scrollbar1.setValue(50);
scrollbar1.setOrientation(0);
scrollbar1.addAdjustmentListener(new java.awt.event.AdjustmentListener() {
public void adjustmentValueChanged(AdjustmentEvent e) {
scrollbar1_adjustmentValueChanged(e);
}
});
this.setLayout(borderLayout1);
this.add(textField1, BorderLayout.WEST);
this.add(scrollbar1, BorderLayout.CENTER);
}
void scrollbar1_adjustmentValueChanged(AdjustmentEvent e) {
int pos=e.getValue();
textField1.setText(String.valueOf(valorDouble(pos)));
setIndicador(valorDouble(pos));
}
void textField1_keyTyped(KeyEvent e) {
char c=e.getKeyChar();
if((c>='0' && c<='9')||(c=='.')||(c==KeyEvent.VK_DELETE)||(c==KeyEvent.VK_BACK_SPACE)){
return;
}
e.consume();
}
void textField1_actionPerformed(ActionEvent e) {
double pos=Double.valueOf(textField1.getText()).doubleValue();
if(pos<minimo) pos=minimo;
if(pos>maximo) pos=maximo;
scrollbar1.setValue(valorEntero(pos));
setIndicador(pos);
}
private int valorEntero(double x){
return (int)((100*(x-minimo))/(maximo-minimo));
}
private double valorDouble(int x){
return (minimo+x*(maximo-minimo)/100);
}
public synchronized void removePropertyChangeListener(PropertyChangeListener l) {
propertyChangeListeners.removePropertyChangeListener(l);
}
public synchronized void addPropertyChangeListener(PropertyChangeListener l) {
propertyChangeListeners.addPropertyChangeListener(l);
}
public Dimension getPreferredSize() {
FontMetrics fm=getFontMetrics(getFont());
return new Dimension(20*fm.stringWidth("0"), 2*fm.getHeight());
}
public Dimension getMinimumSize() {
return getPreferredSize();
}
public void setMaximo(double newMaximo) {
maximo = newMaximo;
}
public double getMaximo() {
return maximo;
}
public void setMinimo(double newMinimo) {
minimo = newMinimo;
}
public double getMinimo() {
return minimo;
}
public void setIndicador(double newIndicador) {
if(newIndicador<minimo) newIndicador=minimo;
if(newIndicador>maximo) newIndicador=maximo;
double oldIndicador = indicador;
indicador = newIndicador;
textField1.setText(String.valueOf(indicador));
scrollbar1.setValue(valorEntero(indicador));
propertyChangeListeners.firePropertyChange("indicador", new Double(oldIndicador), new Double(newIndicador));
}
public double getIndicador() {
return indicador;
}
}
|
Una vez completado el código fuente, se compila, y si tiene éxito se prepara para su utilización en otros programas.
El primer paso es crear uno o más iconos representativos del bean. En este caso, se ha creado un icono en color de 32x32 pixels que lo guardamos en el archivo BarTexto.gif
El segundopaso, consiste en crear una clase que implemente el interface BeanInfo. Seleccionado las pestañas Bean y a continuación, BeanInfo apareciendo un panel con información relativa al bean. En la parte inferior derecha, pulsamos sobre el botón ... del campo 32x32 color icon y cargamos el icono que se guarda en el archivo BarTexto.gif.
Finalmente, pulsamos en el botón titulado Generate Bean Info y observamos como se añade un nuevo archivo al proyecto.
Como ya se ha explicado, la mejor forma de guardar los applets y los beans es en un archivo .JAR
Volvemos a compilar el archivo BarTexto.java y seleccionamos en el menú del IDE Wizard/Deployment Wizard. En el campo Archive Output Path del diálogo que aparece, ponemos un nombre significativo al archivo JAR, y también podemos indicar el subdirectorio en el cual guardarlo. Finalmente, pulsamos en el botón Finish
La última etapa en la creación de un bean es su inserción en la barra de herramientas. Ya se ha explicado en la página anterior el proceso de instalación de un bean en la barra de herramientas, que tiene dos partes
Para usar el bean BarTexto creamos el siguiente applet
En el momento del diseño de applet podemos cambiar las propiedades del bean BarTexto: máximo, minimo e indicador según se muestra en la figura inferior. En los editores de la hoja de propiedades del bean hemos introducido nuevos valores para sus propiedades.
Los valores que se introducen en el control de edición o la posición del dedo en la barra de desplazamiento, van a representar los radios de una circunferencia.
En la parte inferior del applet situamos un panel con dos controles una etiqueta label1 que contiene el texto "Area del círculo", y un control de edición textArea en el que se muestra el área del círculo cuyo radio hemos seleccionado en el control barTexto1 de la clase BarTexto.
barTexto1.setMaximo(15.0);
barTexto1.setIndicador(6.0);
barTexto1.setMinimo(2.0);
label1.setText("Area de un círculo");
textArea.setColumns(10);
textArea.setText("0.0");
Para conectar el bean barTexto1 con el control de edición textArea, hemos de definir la función respuesta al cambio de la propiedad ligada indicador. En el momento del diseño, pestaña Design, seleccionamos el bean y en la hoja de propiedades y sucesos pulsamos en la pestaña Events, haciendo doble-clic en el editor de propertyChange, tal como se ve en la figura.
El IDE genera el siguiente código.
barTexto1.addPropertyChangeListener(new java.beans.PropertyChangeListener() {
public void propertyChange(PropertyChangeEvent e) {
barTexto1_propertyChange(e);
}
});
En el cuerpo de la función respuesta propertyChange, o bien barTexto1_propertyChange definimos la tarea a realizar cuando cambia el valor de la proiedad ligada indicador del control barTexto1.
En este caso, será calcular el área del círculo. y mostrarlo en el control de edición textArea.
void barTexto1_propertyChange(PropertyChangeEvent e) {
double radio=((Double)e.getNewValue()).doubleValue();
double area=Math.PI*radio*radio;
textArea.setText(String.valueOf(area));
}
El objeto e de la clase PropertyChangeEvent, contiene la información relativa al suceso (cambio en el valor de la propiedad ligada indicador). La función getNewValue, devuelve el nuevo valor de la propiedad ligada indicador. No devuelve un valor double, sino un objeto de la clase base Object que ha de ser promocionado a un objeto de la clase envolvente Double. Recuérdese la forma en la que se emite (fire) el suceso correspondiente al cambio en el valor de la propiedad ligada indicador.
propertyChangeListeners.firePropertyChange("indicador",
new Double(oldIndicador), new Double(newIndicador));
Para convertir un objeto de la clase envolvente Double en un dato del tipo predefinido double empleamos la función doubleValue. Una vez que tenemos el radio, se calcula el área del círculo y se guarda en la variable local area. Finalmente, se comvierte el valor numérico a texto, para mostrarlo en el control de edición textArea.
El código completo de este applet es el siguiente
package bean3Test;
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
import bean3.*;
import java.beans.*;
public class Bean3TestApplet extends Applet {
bean3.BarTexto barTexto1 = new bean3.BarTexto();
Panel Panel1 = new Panel();
Label label1 = new Label();
TextField textArea = new TextField();
FlowLayout flowLayout1 = new FlowLayout();
BorderLayout borderLayout1 = new BorderLayout();
public Bean3TestApplet() {
}
public void init() {
try {
jbInit();
}
catch (Exception e) {
e.printStackTrace();
}
}
private void jbInit() throws Exception {
this.setSize(new Dimension(400, 75));
this.setLayout(borderLayout1);
barTexto1.setMaximo(15.0);
barTexto1.setIndicador(6.0);
barTexto1.setMinimo(2.0);
barTexto1.addPropertyChangeListener(new java.beans.PropertyChangeListener() {
public void propertyChange(PropertyChangeEvent e) {
barTexto1_propertyChange(e);
}
});
Panel1.setLayout(flowLayout1);
label1.setText("Area de un círculo");
textArea.setColumns(10);
textArea.setText("0.0");
this.add(Panel1, BorderLayout.CENTER);
Panel1.add(label1, null);
Panel1.add(textArea, null);
this.add(barTexto1, BorderLayout.NORTH);
//valor inicial
double radio=barTexto1.getIndicador();
double area=Math.PI*radio*radio;
textArea.setText(String.valueOf(area));
}
void barTexto1_propertyChange(PropertyChangeEvent e) {
double radio=((Double)e.getNewValue()).doubleValue();
double area=Math.PI*radio*radio;
textArea.setText(String.valueOf(area));
}
}
|
BarTexto.gif, BarTexto.java,
BarTextoBeanInfo.java, BarTexto.jar
