Objetos TextBox y lectura de datos desde un objeto TableItem

Las dos entradas anteriores del blog muestran como se envía información hacia objetos TableItem, hoy se aprenderá como editar un valor dentro de la tabla y luego leerlo para finalmente hacer algo con esos valores.

 Por ejemplo si se desea realizar un programa que calcule el promedio de 5 calificaciones, pues para realizar este ejemplo es necesario conocer las calificaciones, para después sumarlas y finalmente obtener el promedio, bueno pues esas calificaciones pueden ser capturadas en una tabla.

Bueno esto que aprenderemos hoy es otra opción para capturar datos aparte de un TextField, yo les dejo el ejemplo, ustedes piensen en sus aplicaciones igual y en alguna pueden usar esta técnica de ingresar datos. El ejemplo es muy didáctico: obtener el promedio de cinco calificaciones, pero pues ojala les sirva en algún programa que hagan.

Antes de analizar el ejemplo veamos de nueva cuenta en la imagen la jerarquía de clases de Java Micro Edition, se ven sombreadas algunas clases con las que ya se ha trabajado. Pero hay otras que no se han visto, hay una clase que se llama TextBox, hoy vamos a usarla también.

Vea la clase TextBox, esta al mismo nivel que la clase List  y que la clase Form.

La clase TextBox

Los objetos de esta clase me permiten capturar información desde el teclado del celular, en otras palabras funciona igualito que un TextField, que ya se ha visto infinidad de veces. Solo que el Textfield muestra un solo cuadrito de texto para capturar y el TextBox es una pantalla del celular completa, donde se pueden capturar múltiples líneas de texto.

El primer paso para trabajar con él, es agregarlo a la pantalla de flujo de NetBeans, la figura siguiente muestra la ubicación exacta de un TextBox y como se agrega a la vista de flujo.

Ya se mencionó, un TextBox está al mismo nivel que un Form, así que es posible agregar comandos en el, para que el TexBox pueda ejecutar código de java. Por ejemplo puedo agregar un Okcommand para que desde el Form se puede mostrar el TextBox, e igual para el TextBox, puedo agregar un OkCommand para que se regrese al Form, la siguiente imagen muestra esta conexión.

Así puedo navegar entre el Form y el TextBox, esto se usará un poco más adelante.

Para enviar datos al TextBox se usa el mismo método que el de un TextField, se usa el método setText, un ejemplo puede ser el siguiente:

textBox.setText(“ Grupo de Sistemas Digitales, ITESI”);

Recuerde, al arrastrar y soltar el TextBox en la pantalla de flujo NetBeans agrega el nombre textBox a la instancia, si hubiera otra NetBeans agrega textBox1 al siguiente objeto.

Por otro lado, para leer el dato que se ha ingresado en el TextBox se usa el método getString(), está es la sentencia completa para capturar todo el texto que haya en el TextBox:

textBox.getString();

Editar datos al TableItem

Antes que podamos aprender a leer los datos de una tabla y procesarlos,  primero la tabla tiene que tener valores, para escribir los valores, se mueve el cursor hasta seleccionar la celda deseada, por ejemplo la figura siguiente muestra la celda 2 (columna = 0, renglón 1) seleccionada.

Claro que la tabla y su modelo (simpleTableModel) son agregados al Form previamente, así como el okCommand. Por cierto, el okCommand que me lleva al TextBox, se le puso la etiqueta “Editar Celda”, puesto que eso es precisamente lo que se hará, editar la celda para colocarle un valor en ella.

Al dar clic en “Editar Celda”, se muestra el TextBox, es justo ahí cuando se captura el valor deseado por el usuario. La figura siguiente muestra una pantalla cuando se introduce el valor de 90 en la celda desde el TextBox.

Vea la figura, El TextBox también tiene un okCommand, al que se le puso la etiqueta de “Guardar Dato”, al dar clic debe guardar el dato en la tabla, para hacerlo se requiere código.

Primero se debe conocer, cual celda estaba seleccionada previamente, esto se hace con los métodos getSelectedCellRow( ) y con getSelectCellColumn( ), el primer método me indica cual renglón se ha seleccionado y el segundo cual columna. Entonces el par de instrucciones que almacenan la columna y el renglón son las siguientes:

          columna = tableItem.getSelectedCellColumn();

renglon  = tableItem.getSelectedCellRow();

Previamente las variables columna y renglón se declaran como enteros.

Después se obtiene el valor del textField y se envía a la tabla con el método setValue():

simpleTableModel.setValue(columna, renglón, textBox.getString());

         simpleTableModel.fireTableModelChanged();

La primera instrucción, coloca el valor del TextBox, en la columna y el renglón especificados por sus respectivas variables, y la segunda instrucción repinta la tabla para mostrar que valores se han almacenado.

Repitiendo el proceso anterior es posible llenar de datos cada una de las celdas así como se observa en la figura siguiente:

Y qué tal si se desea manipular esos datos, por ejemplo como se menciono en la parte de arriba, para obtener su promedio. ¿qué hago?

Como Leer datos de Un TableItem

Primero que nada se le agrega otro okCommand que es el que va a procesar los datos. Para el simple caso de sacar un promedio de 5 datos, pues simplemente se crea un ciclo for como el siguiente:

 

for (i = 0; i < 5; i++) {                    

 

 

}

 

Al observar la documentación de la clase TableItem, se puede ver un método llamado getValue(column, row), que regresa el valor de la celda especificada por las variables column y row, así la instrucción:

 

valor = simpleTableModel.getValue(0,0);

 

Asigna a la variable “valor” lo que este almacenado en la celda cuya columna es la 0 y cuyo renglón es el 0.

 

Entonces si se está dentro de un ciclo for y en nuestro caso hay una sola columna (la 0) se puede recorrer cada uno de los valores con la sentencia siguiente:

 

valor = simpleTableModel.getValue(0, i);

 

La documentación es muy clara y dice que la variable valor debe ser declarada de tipo Object, y usando un método llamado toString() se puede cambiar el valor capturado a cadena de caracteres, el código completo para sacar los valores de la tabla y calcular su promedio es el siguiente:

               // Declaración de variables

               float prom;                       

                int suma=0, i;

                String val;

                Object valor; 

                for (i = 0; i < 5; i++) {                    

                     valor = simpleTableModel.getValue(0,i); // obtiene el valor de la tabla

                     val = valor.toString();  // se convierte a String

                     suma = suma + Integer.parseInt(val); //se convierte a entero y se acumula la suma

                }

                prom = suma / 5; // aquí se obtiene el promedio

                simpleTableModel.setValue(0,6,"" + prom);        // aquí se envía el resultado a la celda 6 para mostrar el promedio.

                simpleTableModel.fireTableModelChanged();

 

Bueno les dejo el código por si necesitan analizarlo, esta creado para la versión 6.7.1 de NetBeans y comprimido en formato RAR, dar clic aqui para bajarlo.            

Clic AQUI para leer más...!

Como se usan los objetos de tipo TableItem

Hoy vamos a aprender como se usan los objetos que provienen de la clase TableItem. Con este tipo de objetos se pueden crear rápidamente tablas que consisten de una o más columnas y de uno o más renglones. Cabe mencionar que la clase TableItem es un componente creado por los diseñadores del NetBeans y no es un estándar qué proviene directamente de las clases de Java Micro Edition, esa es la razón del por qué este componente no está en la ayuda estándar de Java.

La figura siguiente muestra como se ve una tabla creada con objetos de tipo TableItem, en un emulador de un celular, con el cursor se puede navegar entre todas y cada una de las celdas de la tabla.

El componente se encuentra en la paleta de componentes. La figura siguiente muestra la ubicación exacta de este componente en el NetBeans, ya se ha visto con otros componentes, para crearlo, basta con arrastrar y soltar en el Form (puedes dar clic en la imagen para verla más grande si lo deseas).

 

Después de arrastrar y soltar en el Form la tabla, se crea el objeto. La figura siguiente muestra el objeto tableItem en el Form y los pasos que siguen para crear la tabla.

(1) Clic en el objeto TableItem, para seleccionar la Tabla

(2) Se debe elegir un modelo de tabla (table Model) usamos la opción que se muestra “ New SimpleTableModel”

(3) Se da clic en el botón indicado en la figura para crear las columnas y renglones de la tabla.

Realizando lo anterior se muestra un nuevo cuadro de dialogo para crear los renglones y columnas de la tabla. La figura siguiente muestra la creación de una tabla de tres columnas por cuatro renglones.

Siguiendo todos los pasos anteriores ya se tiene lista la tabla ahora lo interesante es ver como se pueden enviar datos a ella.

Enviando datos al objeto TableItem

Para enviar datos a la tabla se usa el objeto simpleTableModel y su método setValue, tal y como se muestra en la sentencia siguiente:

simpleTableModel.setValue(columna, renglón, valorString);

columna = Aqui va el número de columna
renglón = aqui va el número de renglón
valorString = Valor que sedesea que aparezca en la tabla debe ser de tipo String
Por ejemplo la siguiente sentencia envía el número 8 a la columna 3 y el renglón 2

simpleTableModel.setValue( 3, 5, “8”);

Se agrega la instrucción siguiente, para repintar en la pantalla del celular y mostar los cambios agregados a la tabla.

simpleTableModel.fireTableModelChanged();

El método fireTableModelChanged() detecta cuando hay un cambio en algún valor de la celda y repinta la tabla para poder observar ese valor o esos valores

Ejemplo

Realizar un segmento de código para la serie armónica vista en el post anterior para un valor de N=10, enviar los valores que se van generando en cada iteración a una tabla de 2 columnas y 10 renglones, la primer columna debe mostrar el valor de la iteración( 0, 1, 2, 3… 10) y la segunda los cálculos que se van generando de la serie armónica.

Solución

La solución a este problema se analizó en el post anterior, aquí se reproduce completamente el código y se adapta para el valor fijo de N=10 
   suma=0;
   for (int i = 1; i<=10; i++) {
     suma = suma + (float) 1/i;               
   }
   stringItem.setText("El resultado de la serie con N=10 es " + suma);
Si se desea mostrar en la tabla, en la columna el valor de la iteración basta con escribir el código siguiente dentro del ciclo de repetición:

simpleTableModel.setValue(0, i-1, ""+i);

La columna es la 0, y el renglón debe iniciar en 0 (por eso el valor de i-1), recuerde que Ia serie empieza en i=1, después simplemente se muestra el valor, ya se había visto esto, la i es entero y para convertirlo a String y poder usarlo en la sentencia, basta con agregar “” + i y listo se convierte a String y se puede usar en la sentencia.

Como la sentencia anterior, estará dentro del ciclo, además se sabe que la i inicia en 1, entonces este código enviará el valor de 0 a la celda (0,0) después el valor de 1 a la celda (0, 1), luego el valor de 2 a la celda (0,2) y así sucesivamente por que la i va cambiando como ya se vio en el post anterior.

De igual forma para mostrar las sumas acumuladas, solo que estas van en la columna 1, la sentencia es la siguiente:

simpleTableModel.setValue(1, i-1, ""+suma);

Al finalizar el ciclo se agrega la instrucción para repintar la tabla con los nuevos valores y listo, el segmento de código con los cambios indicados arriba, se muestra enseguida:

suma=0;
for (int i = 1; i<=10; i++) {
   suma = suma + (float) 1/i;
   simpleTableModel.setValue(0, i-1, ""+i);
   simpleTableModel.setValue(1, i-1, ""+suma);
}
simpleTableModel.fireTableModelChanged();
stringItem.setText("El resultado de la serie con N=10 es " + suma);

La figura siguiente muestra una imagen con un par de pantallas del emulador de teléfonos celulares con la solución de este ejercicio.

El código anterior, lo probe en el celular Sony Ericsson W595 y funciono bien, a excepción de que al presionar el comando para calcular los datos, habia que mover el cursor una vez entre las celdas para actualizarla y ver el resultado.

Si lo desea el lector puede bajar el código completo de este ejemplo, el archivo esta comprimido en formato RAR, da clic aqui para bajarlo. Al descomprimir aparece la carpeta con todos los archivos generados por el NetBeans, cabe mencionar que esta realizado usando la nueva  versión del  NetBeans la 6.7.1

Clic AQUI para leer más...!