Programación de Teléfonos Celulares Usando Java Micro Edition

Ejemplo #23 Animación usando la Clase Sprite

2010-11-05T01:23:00.000-07:00

Ya se ha visto en el blog varios ejemplos de la clase GameCanvas, una clase de la API para juegos de Java Micro Edition, contenida en el paquete javax.microedition.lcdui.game, pero este paquete tiene más clases en total son cinco clases más que ayudan al desarrollo de juegos, una de ellas es la clase Sprite, que hoy es la que se va analizar.

¿Qué es un Sprite?

Un Sprite es cualquier objeto gráfico que esta aparece en la pantalla del juego, ya se vio en el ejemplo #19 como realizar la animación de una pelotita por toda la pantalla, pues ese es un objeto gráfico, ese es un Sprite.

Sprite Animados

Existen dos tipos de sprite: los sprite estáticos, una imagen vale más que mil palabras y en la figura siguiente se muestran dos sprite estáticos, el fondo y la pelotita que, como recordará el lector se mueve por toda la pantalla y rebota, aún así a pesar de ello la pelotita es un Sprite estático.

Ahora vea la siguiente animación, ahí se muestra un sprite animado, qué es el otro tipo de sprite.

El Sprite, animado se forma por dos o más imágenes, en el caso de la animación anterior, que por cierto muestra a Mario, un famoso personaje de los video juegos que va caminando, se forma por 3 imágenes, las cuales son mostradas en la figura siguiente

Las tres imágenes se diseñaron para que juntas puedan simular que Mario camina.

En el ambiente de los juegos cada imagen es llamada “frame” o se podría decir fotograma en español, para realizar la animación, Java necesita las imágenes tal y como se muestran en la imagen anterior, un fotograma seguido del otro, en un arreglo horizontal como el de la figura o también se puede hacer en un arreglo vertical, es importante el tamaño, muy importante, en este caso, la imagen para cada fotograma mide 32 pixeles de ancho y 62 de alto, la imagen con los tres fotogramas juntos mide 96*62, Java para optimizar obtiene los datos de cada uno de los fotogramas de una sola imagen, en otros tiempos era necesario ingresar una a una las imágenes, ahora no es necesario, se carga una imagen con los fotogramas y Java hace el resto..

Por cierto, a cada fotograma Java le asigna un índice, un único número, que inicia en 0 y termina con el último fotograma.

Código para la creación del sprite

El primer paso para crear un Sprite, es cargar las imágenes en variables de tipo Image, tal y como se observa en el siguiente código:

mario = Image.createImage("/Mario96_62.gif");

fondo = Image.createImage("/fondo.jpg");

No se muestra pero, es obvio que las variables “fondo” y “mario” deben ser declaradas antes de este código como variables de tipo Image, esto ya se hizo en ejemplos anteriores, también recuerde que estas instrucciones deben ser encerradas con su try y catch, tampoco se muestra por que ya se vio en ejemplos anteriores del blog y también el MIDlet donde se probo NO fue creado con el "hello MIDlet" como otros proyectos por eso la ruta de la imagen no lleva el "/hello/".

El segundo paso es la creación del Sprite, primeramente deben declarar dos variables de tipo sprite así:

Sprite sprFondo;

Sprite sprMario;

Con lo anterior apenas se reserva espacio en memoria, falta el código que de verdad crea los sprites, por cierto son dos tipos diferentes de Sprite, el fondo que va a ser un sprite estático y el de Mario caminando que es un Sprite animado, el código siguiente crea el sprite para el fondo:

sprFondo = new Sprite(fondo);

Con lo anterior se crea el sprite, vea que simple fue, el constructor de la clase solo lleva un parámetro que es la imagen y listo, ahora vea el código para el Sprite animado:

sprMario = new Sprite(mario, 32, 62);

El constructor ahora lleva tres parámetros, uno que es la imagen la que contiene los tres fotogramas y dos parámetros más que son el ancho y alto de cada fotograma y listo, Java se encarga de manipular los fotogramas y mostrarlos en la pantalla del celular, uno tras otro.

Es muy importante la dimensión, en base al ancho (32) del fotograma que se envía al constructor con el código anterior, Java espera una imagen que sea múltiplo de 32, por eso es que nuestra imagen de mide 96*62, así Java sabe que solo son tres fotogramas los que se reproducirán automáticamente, cualquier dimensión que no sea múltiplo del ancho o del alto Java no cargaría la imagen al momento de ejecutar el programa y no podríamos ver ninguna animación.

Dibujando el Sprite

Para mostrar en la pantalla el sprite se debe hacer uso del método paint, así:

sprMario.paint(g);

sprFondo.paint(g);

Este método lleva como parámetro el objeto “g” que es el objeto de tipo Graphics usado para dibujar en el GameCanvas como ya se ha visto en ejemplos pasados. Este método se escribe dentro del while(true) del método run(), recuerde que en este método se realiza la animación como se vio en ejemplos pasados.

Moviendo los fotogramas

El método nextFrame, me permite ir avanzando por los fotogramas de la animación, si yo no lo uso, el sprite animado simplemente se quedaría en una única imagen y no se movería, el método debe ir dentro del ciclo while, del método run, así se usa:

sprMario.nextFrame();

Cada que se ejecuta este método, el sprite avanza un fotograma, automáticamente Java controla esto, así que cuando llega al tercer fotograma en nuestro caso, se vuelve a mostrar el primer fotograma y así sucesivamente, en un ciclo infinito.

Moviendo el Sprite

Existe un método que me permite mover el sprite, el método es llamado “move” y con él se mueve el Sprite a la velocidad que uno desee, un ejemplo del uso de este método es como sigue:

sprMario.move(5, 5);

Con esa instrucción el sprite se mueve en el eje x y en el eje y a una velocidad de 5 pixeles, esto implica que “mario caminaría” en diagonal, si deseo que camine en línea recta que es lo normal para un sprite como el que estamos trabajando sería así:

sprMario.move(5, 0);

Vea la coordenada en Y esta en 0 así no hay incremento en Y y el Sprite avanzaría en línea recta.

Por otro lado, el sprite automáticamente realiza los incrementos de la variable, así que yo no me preocupo en incrementar la posición para realizar la animación, en verdad que esta clase me evita mucho código y me facilita las cosas muchísimo.

¿Dónde aparece el Sprite?

Para poder definir donde debe aparecer el Sprite, por “default” aparece en la posición (0,0) de la pantalla, se usa el método setPosition, por ejemplo:

sprMario.setPosition(10, 90);

Ubicará al Sprite dentro del GameCanvas en la posición 10 en x y 90 en Y, con este método se puede colocar el Sprite donde nosotros deseemos.

Video-Tutorial

Finalmente el video muestra el ejemplo completo que hace que el sprite de Mario camine en línea recta, por la pantalla. Se anima al lector para que experimente cambiando la posición y velocidad para que vaya viendo por si mismo los cambios y así queden más claros los ejemplos y las instrucciones vistas en este articulo.

El video inicia ya con el Midlet creado y la subclase AnimacionSprite que deriva con GameCanvas, inclusive ya con el código para el botón de Salir, se baso en el Ejemplo #18 y el
#19

Aún así aquí les dejo comprimido todas las carpetas que genera NetBeans 6.8, para este ejemplo, puedes probar el archivo JAR directamente en tu celular, este como se recordará está en la carpeta “dist”, inclusive, en la carpeta “src” está el código fuente además de las imágenes usadas en el ejemplo, obvio incluye la imagen de Mario con los tres fotogramas.

Ejemplo #22 "Como enviar datos de la interfaz de alto nivel al GameCanvas"

2010-10-15T18:02:00.000-07:00

Como continuación del ejemplo #21, ahora se verá en este ejemplo como enviar datos desde la interfaz de alto nivel a la interfaz de bajo nivel, este es una forma para poder capturar datos del usuario y usarlos en la clase GameCanvas, recuerde que en esta clase no existe forma alguna para que el usuario introduzca los datos.

El ejemplo de hoy va a hacer uso del código Java del ejemplo #19, el cuál puedes ver dando clic aqui, el ejemplo, como se recordará muestra la animación de una pelotita que está rebotando por toda la pantalla, una y otra vez, pero lo hace a una velocidad constante siempre, hoy se mostrará cómo se puede elegir desde la interfaz de alto nivel, la velocidad de la pelotita la cual se enviará a la interfaz de bajo nivel para que la pelotita responda a esta velocidad.

Interfaz de alto nivel

La imagen siguiente muestra la interfaz de alto nivel para este ejemplo:

Si has seguido el blog desde los artículos iníciales, sabrás fácilmente realizar la interfaz de usuario mostrada en la figura anterior, lleva dos TextField y un okCommand.

Por otro lado, en el ejemplo #19 se hace uso de la clase llamada “Animacion” también vista ya en varios ejemplos del blog, el nombre de la clase es importante para poder mandarla llamar desde la interfaz de alto nivel

Vea el código siguiente:

int velx = Integer.parseInt(textField.getString());

int vely = Integer.parseInt(textField1.getString());

Con ese par de instrucciones se obtiene el valor que el usuario ingreso en los TextField, en las variables de tipo entero llamadas “velx” y “vely”, estas variables se envían como parámetros a la interaz de bajo nivel, tal y como se observa en la siguiente instrucción:

Animacion canvas = new Animacion(this, velx, vely);

Recuerde con esa instrucción se crea un objeto llamado “canvas” de la clase “Animación, vea las variables “velx”, y “velY” son enviadas a la clase “Animacion” como parámetros. Así de fácil se envían los datos de la interfaz de alto nivel a la clase que deriva de GameCanvas.

El código completo, cuando se presiona el comando que nos envía a la interfaz de bajo nivel entonces queda así:

int velx = Integer.parseInt(textField.getString());

int vely = Integer.parseInt(textField1.getString());

Animacion gameCanvas = new Animacion(this, velx, vely);

Display.getDisplay(this).setCurrent(gameCanvas);

Si no tienes idea de donde se ubica este código al final del post viene el video tutorial para que no quede duda alguna.

Cambios a la clase "Animacion"

Este es el código final del ejemplo #19 que hacia rebotar la pelotita por toda la pantalla:

import javax.microedition.lcdui.game.*;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;
public class Animacion extends GameCanvas implements Runnable {
    Graphics g;
    Thread subproceso;
    Image fondo, pelota;
    public Animacion() {
        super(true);
        g = getGraphics();
        try {
            fondo = Image.createImage("/fondo.jpg");
            pelota = Image.createImage("/pelotita.gif");
        } catch (Exception e) { }
        subproceso = new Thread(this);
        subproceso.start();
    }

    public void run() {
        int coordX = 0;
        int coordY = 0;
        int velX = 5;
        int velY = 3;
        int alto = getHeight();
        int ancho = getWidth();   
        while(true) {
            g.drawImage(fondo, 0, 0, Graphics.TOP | Graphics.LEFT);
            g.drawImage(pelota, coordX, coordY, Graphics.TOP | Graphics.LEFT);
            try {
                subproceso.sleep(30);
            } catch (InterruptedException e) { }
            coordX = coordX + velX;
            coordY = coordY + velY;
            if ((coordX + pelota.getWidth()) > ancho || (coordX < 0))
                velX = -velX;
            if ((coordY + pelota.getHeight()) > alto || (coordY < 0))
                velY = -velY;
            flushGraphics();
        }
    }
}

Vea las variables "velX" y "velY", se declaran en el método run() y ahí son inicializadas con un valor fijo de 5 y 3 respectivamente, bueno pues en primer lugar hay que quitarlas de ahí, porque ahora los valores para estas variables vienen de la interfaz de alto nivel, se declaran a continuación de la definición de la clase, con eso basta para poder las usar en todo lo largo del programa.

Otro cambio es el constructor que ahora recibe tres parámetros, el primero es el MIDlet y los otros dos son las variables de la velocidad que se enviaron desde la interfaz de alto nivel, enseguida se muestra parte del código para el constructor:

// Declaración de las variables (después de la clase)

int velX;
int velY;

public Animacion(HelloMIDlet mid, int vx, int vy) {

// Aquí va el código para el constructor

VelX = vx;

VelY = vy;
}

Justo aquí se asignan los valores que vienen de la interfaz de alto nivel a las variables de la clase, con esto basta para poder comunicarnos, para poder enviar datos desde la interfaz de alto nivel, al hacer lo anterior la velocidad de la pelotita va respondiendo al valor que se ingreso en la interfaz.

Básicamente eso son los cambios, más significativos, lo que sigue es repetir lo que se hizo en la entrada anterior (ejemplo #21), que es lo de agregar los comandos para cambiarse de una interfaz a otra, esto ya se explico con detalle, en ese ejercicio, así que no tiene caso volverlo repetir.

Fiel a mi costumbre y para evitar malos entendidos, y para eliminar las dudas que pudieran surgir de lo visto arriba, a continuación se muestra el video tutorial para este ejemplo.

Aún así, por si hubiera dudas del video puesto que hubo una parte de copiar y pegar, voy a colocar en este enlace, un archivo comprimido que incluye toda la carpeta que genera NetBeans para este ejemplo, la versión que se uso fue la 6.8, ahí está el código fuente completo, incluso en la carpeta “dist” se encuentra el archivo JAR para enviarlo directo al celular y probar este ejemplo en el teléfono.

Ejemplo #21 “Hola mundo” con interfaces de alto nivel y de bajo nivel en el mismo MIDlet

2010-10-06T22:11:00.000-07:00

En modo gráfico (interfaces de bajo nivel), no existe forma alguna para poder capturar valores tal y como se hace con las interfaces de alto nivel, ahí simplemente se coloca un TextField y se capturan valores como ya se ha visto en varios ejemplos en este blog, en la clase GameCanvas no existe esa posibilidad hay que usar otros medios y uno de ellos es mezclando las interfaces de bajo nivel con las de alto nivel.

Por ejemplo, pensando en el único ejemplo de animación que hemos visto, el de la pelotita que rebota por toda la pantalla, sería interesante poder elegir la velocidad a la que rebota la pelotita, sería interesante que el usuario escribierá que velocidad desea y que la animación respondiera a ello, bueno pues este ejemplo es el primer paso para llegar ahí a la lectura de datos en modo gráfico, así que iniciemos.

Hola Mundo con interfaces de alto nivel

Existe una entrada del blog, de hecho es casi de las iniciales que muestra cómo crear el clásico ejemplo “hola mundo” con interfaces de alto nivel, lo puedes consultar aquí para que lo recuerdes:

Basándonos en ese ejemplo fácilmente se puede crear esta pantalla

Veamos ahora el "hola mundo" en modo gráfico.

“Hola Mundo” con interfaces de bajo nivel

Por otro lado el blog tiene un articulo llamado “Ejemplo #17 Hola Mundo usando GameCanvas” el cuál puedes ver dando clic aqui, el resultado del código se puede ver en la siguiente pantalla

La idea es agregar un botón o comando a cada una de las interfaces, que me permita cambiarme de una interfaz a otro, por lo pronto, este ejemplo solo mostrará los mensajes que se muestran en las imágenes de arriba. Vamos a iniciar agregando el botón en la interfaz de alto nivel porque es más fácil.

Agregando el Command a la interfaz de alto nivel

La idea recuerde es agregar un botón o comando para cambiarme a la interfaz de bajo nivel, existe otra entrada del blog, llamada Ejemplo #6 como usar objetos de tipo Command, puedes consultarlo dando clic aquí, ahí se observa con detalle cómo se puede agregar un comando, como el de la figura siguiente:

El comando se llama “Modo Gráfico” y me permitirá cambiarme de interfaz, es muy fácil crear un comando usando interfaces de alto nivel, siguiendo las instrucciones del ejemplo #6, básicamente solo es de arrastrar y soltar el comando.

Cuando se presione el comando se debe crear el objeto de la clase GameCanvas, para que aparezca en la pantalla, afortunadamente existe otro artículo en el blog, bueno, hay varios que muestran como agregar código cuando se presiona el botón, el artículo se llama Ejemplo #7 “programa que calcula el área de un rectángulo”, en la parte final viene como agregar el código cuando se presione el comando, lo puedes consultar dando clic aquí.

Justo donde se indica en el ejemplo #7 se debe agregar el código (si no deseas ver el ejemplo, no te preocupes, al final viene el video-tutorial). El primer paso es crear una instancia de la clase que deriva de GameCanvas, para ello se debe conocer el nombre de la clase, la clase definida en el Ejemplo #17 se llama EjemploGameCanvas, para mostrar en pantalla lo que está en la clase GameCanvas se agrega el siguiente código:

EjemploGameCanvas gCanvas = new EjemploGameCanvas();

Display.getDisplay(this).setCurrent(gCanvas);

Primero se crea el objeto de la clase EjemploGameCanvas y posteriomente se muestra en pantalla este objeto, logrando que se ve el mensaje de “Hola mundo…”.

Por otro lado, si se desea interactuar en los dos modos de pantalla, se debe enviar una referencia del modo de texto al modo grafico, para poder trabajar en los dos lados, si no lo hago así no podré regresar del modo gráfico al modo de texto, basta pues agregar como parámetro la palabra “this”, que en este caso “this” hace referencia al MIDlet principal, entonces el código final queda así:

EjemploGameCanvas gCanvas = new EjemploGameCanvas(this);

Display.getDisplay(this).setCurrent(gCanvas);

Más adelante se verá el uso que se le dará a ese parámetro que fue enviado al Canvas.

Como lo mencionaba, si se tienen dudas de donde ubicar el código, al final de este post, como siempre, el video tutorial dará todas las respuestas. Pasemos entonces a la interfaz de bajo nivel que es algo más complicado que lo visto ahora.

Agregando el Command a la interfaz de bajo nivel

La idea recuerde, es agregar a la clase GameCanvas también, un botón o comando para que al presionarlo pueda cerrar está pantalla en modo gráfico y abrir la pantalla mostrando la interfaz de alto nivel.

Desgraciadamente en el modo gráfico, tengo que hacerlo todo manualmente, no es como en las interfaces de alto nivel, como se vio arriba, donde solo se arrastran y sueltan los botones en el área de trabajo y NetBeans genera todo el código, no aquí no es así, hay que teclearlo todo, eso es bueno porque así se aprende nuevo código nuevas funciones que no se aprendieron con las interfaces de alto nivel y que NetBeans genero automáticamente.

Vemos primeramente el código final del ejemplo #17, el código Java que me permite mostrar el “hola mundo…” en bajo nivel, ya se analizó a detalle y quedo así:

public class EjemploGameCanvas extends GameCanvas implements Runnable {

Graphics g;

public EjemploGameCanvas () {

super(true); // código del constructor

g = getGraphics();

Thread subproceso = new Thread(this);

subproceso.start();

}

public void run() {

// pantalla en negro

g.setColor(0x000000);

g.fillRect(0, 0, getWidth(), getHeight());

// dibujo de las letras “hola mundo…

g.setColor(0xff00FF);

g.drawString("Hola mundo, con GameCanvas", 0, 60, Graphics.LEFT || Graphics.TOP);

flushGraphics();

}

Agregando el parámetro al constructor

Vea el constructor, obviamente no tiene parámetros, nosotros desde la interfaz de alto nivel le enviamos uno, que era, dicho sea de paso el MIDlet (por medio de la palabra “this”), hay que recibir el parámetro con una variable para que haya una correspondencia, recuerde el post de los métodos con parámetros.

El MIDlet, fue creado automáticamente por Netbeans, viendo el código se observa que el MIDlet se llama HelloMidlet entonces el parámetro se tiene que recibir como una variable o más bien dicho como una instancia de tipo HelloMidlet así:

public EjemploGameCanvas ( HelloMIDlet hm) {

// código del constructor

}

Se recibe como parámetro la instancia o el objeto de la clase HelloMIDlet, es llamada "hm", debe haber una variable declarada después de la clase, de ese mismo tipo para poder almacenar el párametro que llega desde el MIDlet y también para posteriormente usarla a lo largo de toda la clase que deriva de GameCanvas, el código es así:

HelloMIDlet hellomidlet;

Esta variable se inicializa dentro del constructor con el parámetro que llego de la interfaz de alto nivel, así:

hellomidlet = hm;

Con esto, por decirlo así se tiene el MIDlet dentro de GameCanvas y se puede usar en cualquier lado de la clase, por medio del objeto llamado “hellomidlet” el código completo de la clase va quedando así:

public class EjemploGameCanvas extends GameCanvas implements Runnable {

Graphics g;

HelloMidlet hellomidlet;

public EjemploGameCanvas (HelloMIDlet hm) {

super(true); // código del constructor

hellomidlet = hm;

g = getGraphics();

Thread subproceso = new Thread(this);

subproceso.start();

}

public void run() {

// pantalla en negro

g.setColor(0x000000);

g.fillRect(0, 0, getWidth(), getHeight());

// dibujo de las letras “hola mundo…

g.setColor(0xff00FF);

g.drawString("Hola mundo, con GameCanvas", 0, 60, Graphics.LEFT || Graphics.TOP);

flushGraphics();

}

Como agregar el Command al GameCanvas

Aún no se ha agregado ningún botón o comando, veamos que se necesita para agregar los botones con código

Agregar la interfaz CommandListener

Para agregar un botón o comando, primeramente se tiene que agregar la interfaz CommandListener, al igual que la interfaz Runnable, se agrega a la definición de la clase así:

public class EjemploGameCanvas extends GameCanvas implements Runnable, CommandListener {

Esta interfaz me permite “escuchar” los eventos generados por los comandos o botones que se agreguen.

Se debe agregar la siguiente instrucción, arriba, en la sección de los "imports":

import javax.microedition.lcdui.*;

Necesaria para poder usar el CommandListener

Por otro lado, no basta con agregar la interfaz CommandListener para “escuchar” los comandos, debemos indicar, que los comandos se van a “escuchar” en el GameCanvas, esto se logra con la siguiente instrucción, es como un enlace entre el CommandListener y el GameCanvas actual

setCommandListener(this);

Recuerde agregar el “this”, palabra reservada de java que habla del contexto actual, en otras palabras el “this” es en este caso, como si se hiciera referencia a la clase que deriva de GameCanvas. Este es el enlace para que se “escuchen” los comandos dentro de la clase EjemploGameCanvas, esa instrucción va en el constructor de la clase, como se verá más adelante.

La interfaz CommandListener, tiene un único método que se llama CommandAction, algo parecido con la interfaz Runnable que tiene a su único método llamado Run().

El método CommandAction, me permite saber que comando se ha presionado, el método lleva dos parámetros como se observa:

public void commandAction(Command command, Displayable displayable) {

//Código para decodificar las acciones del Command

}

Uno de los parámetros es llamado “command” contiene el comando que se ha presionado, recuerde puede haber varios “Commands”, con este parámetro sabremos cual es el presionado, el otro parámetro indica en que pantalla se ha presionado el comando, que en este ejemplo no es relevante.

Aquí se hace un paréntesis para saber cómo se agrega el botón físicamente al GameCanvas, para agregar un botón o comando se usa la clase Command, haciendo uso de esta clase fácilmente se puede crear un objeto Command, el constructor para hacerlo es así:

Command (Etiqueta, tipo_de_comando, prioridad)

El primer parámetro lleva una etiqueta o palabra que parecerá en el celular como nombre del comando, la etiqueta es importante porque es la que el usuario del programa ve cuando ejecuta la aplicación, el siguiente parámetro especifica el tipo de comando, esto se vio ya en un post anterior como se mencionó arriba, el último parámetro indica la prioridad en que se desplegará el comando en el teléfono, por que puede haber más de un objeto Command, este último parámetro es un número entero.

Un ejemplo para la creación de un objeto Command sería así:

Command cmd = New Command(“Salir”, Command.Exit, 1);

El objeto se llama cmd, el usuario verá “salir” en el teléfono, al presionarlo se cierra la aplicación por que el Command es de tipo “Exit”.

Aún así la sentencia anterior no muestra ningún comando en la pantalla, este tiene que agregarse al Canvas, esto se logra fácilmente con el método

addCommand( Command cmd)

El método en verdad agrega el comando al GameCanvas, lleva como parámetro precisamente un objeto del tipo Command, esto es bueno pues así nos evita declarar la variabla “cmd” vista hace rato, entonces es posible agregar el comando al GameCanvas así:

addCommand ( new Command("Regresar", Command.OK, 1));

El addCommand, se agregan por lo general en el constructor que es el primer código que se ejecuta de la clase, así que la clase completa va viéndose así:

public class EjemploGameCanvas extends GameCanvas implements Runnable, CommandListener{

Graphics g;

public EjemploGameCanvas () {

super(true); // código del constructor

setCommandListener(this);

addCommand ( new Command("Regresar", Command.OK, 1));

g = getGraphics();

Thread subproceso = new Thread(this);

subproceso.start();
}

public void run() {

// pantalla en negro

g.setColor(0x000000);

g.fillRect(0, 0, getWidth(), getHeight());

// dibujo de las letras “hola mundo…

g.setColor(0xff00FF);

g.drawString("Hola mundo, con GameCanvas", 0, 60, Graphics.LEFT || Graphics.TOP);

flushGraphics();

}

//Clase que detecta los comandos

public void commandAction(Command command, Displayable displayable) {

//código que detecta el comando

}

Como agregar el código al método commandAction

Finalmente se debe agregar el código al método commandAction, cada que es presionado el botón, se ejecuta este código, el código primero se “fija” cuál es el comando presionado, esto pensando en que puede haber varios botones, el método que me indica cual botón se presiono es llamado getCommandType, y es un método de la clase Command, así se puede detectar el botón presionado

if(command.getCommandType() == Command.OK) {

// se ejecuta elcódigo cuando se presiona el okCommand

}

Justo al presionar este botón, se tiene que mostrar la pantalla con la interfaz de alto nivel, para hacerlo se usa la clase Display, usando además la variable que hacer referencia al MIDlet “hellomidlet” esto se logra así:

Display.getDisplay(hellomidlet).setCurrent(hellomidlet.getForm());

Esté método se agrega dentro del if anterior y listo se termina el ejercicio, el código completo se muestra enseguida. Al final se observa donde se ubica la instrucción anterior:

import javax.microedition.lcdui.*;

public class EjemploGameCanvas extends GameCanvas implements Runnable, CommandListener{
    HelloMIDlet hellomidlet;
    Graphics g; // objeto gráfico
    public EjemploGameCanvas (HelloMIDlet hm) {
        super(true); // código del constructor
        hellomidlet = hm;
        setCommandListener(this);
        addCommand(new Command("Regresar", Command.OK, 1));
        g = getGraphics();
       Thread subproceso = new Thread(this);
        subproceso.start();
    }
    public void run() {
      // pantalla en negro
       g.setColor(0x000000);
       g.fillRect(0, 0, getWidth(), getHeight());
       // dibujo de las letras “hola mundo…
      g.setColor(0xff00FF);
     g.drawString("Hola mundo, con GameCanvas", 0, 60, Graphics.LEFT || Graphics.TOP);
       flushGraphics();
    }
    public void commandAction( Command cmd, Displayable displayable) {
       if (cmd.getCommandType()== Command.OK)
              Display.getDisplay(hellomidlet).setCurrent(hellomidlet.getForm());
    }
}

Bueno con estos e termina el post, pero fiel a mi costumbre, para evitar dudas de donde se ubica el código y todo eso, aqui les dejo el video-tutorial, guiandose con el, no debe haber dudas de ningún tipo.

Métodos creados por el usuario -- Parte II

2010-09-25T21:16:00.000-07:00

En la entrada anterior del blog quedaron pendientes este par de temas relacionados con métodos creados por el usuario:

• Los métodos que regresan valores

• Los métodos con parámetros

Métodos que regresan valores

Voy a repetir la sintaxis para crear un método definido por el usuario:

Identificador_de_acceso valor_de_regreso Nombre_del_metodo( parametros ) {

//Código del método

}

Un método que regresa un valor también requiere un identificador de acceso que ya se vio en el post pasado, para nuestro ejemplo se usará private, por otro lado el valor de regreso, es el tipo de datos (puede ser int, float double etc.) que va a regresar el método, por ejemplo, el método que voy a diseñar regresa el ancho de una imagen, el ancho es un número enero que se da en pixeles, el método entonces va a regresar un número entero, aparte se va a llamar obtAncho y no tiene parámetros, entonces el método va quedando así:

private int obtAncho( ) {

//Código del método

}

El ejemplo simplemente regresa el ancho, en los códigos vistos en los últimos post, se observa como obtener el ancho de una imagen, de la pelotita específicamente y era así:

pelota.getWidth();

Pues ese código es el que se va a gregar al método. Los métodos que regresan valores deben llevar a fuerzas la palabra

return

Esa instrucción termina el método y regresa el valor que este después del return, el método completo que regresa el ancho de la imagen queda finalmente así:

private int obtAncho( ) {

return pelota.getWidth();

}

Eso es todo, el método se puede invocar o mandar llamar así:

imgAncho = obtAncho( );

Contrario a lo que se vio en el post pasado, los métodos que no regresan valores simplemente se invocan con el nombre del método, los que si regresan deben ser invocados por medio de una variable, como se ve en la instrucción anterior, hasta aquí vamos a dejar eso de los métodos que regresan valores, pero más adelante vamos a realizar algún ejemplo para reforzar este tema que fue un poco superficial.

Métodos con parámetros

Vea el siguiente método:

Public void estVelocidad( int x) {

VelX = x;

}

El método es publico, y no regresa ningún valor, se llama estVelocidad y lleva un parámetro, contrario a todos los métodos vistos anteriormente, entre paréntesis, lleva la declaración de una variable, en este ejemplo la variable se llama x y es de tipo entero, esta variable es el parámetro y sirve para comunicarse con el método.

La regla es bien simple, se agregan los parámetros como una declaración de una variable, en el ejemplo la variable se llama “x” y es de tipo entero.

Para invocar el método, se hace de una forma por demás sencilla, el método no regresa valores es de tipo void como se observa, entonces solo se coloca el nombre del método y entre paréntesis el valor del parámetro así:

estVelocidad(5);

Con la sentencia anterior el valor de “5” es enviado al parámetro, ese valor llega a la variable “x” del método y entonces la sentencia que está dentro del método, esta:

velX = x;

hace que la variable “velX” tome el valor de 5.

Fácilmente puedo mandar llamar el método y cambiar de velocidad, pensando en el ejemplo de la pelotita, con simplemente llamar el método se establece la velocidad en X, otro ejemplo para invocar el método sería así:

estVelocidad(3);

Se manda llamar el método pero vea ahora, lleva entre paréntesis el valor de "3", este valor se refleja en el parámetro y ahora la variable "velX" toma el valor de "3".

El ejemplo es muy simple pero a lo largo del blog se van a ver las ventajas de usar métodos.

Es posible agregar más parámetros, los necesarios, incluso pueden ser hasa de diferentes tipos solo basta con separarlos con comas, por ejemplo, vea el siguiente método usado para calcular el area de un triangulo, recibe como parámetros dos variables la base y la altura:

private int areaTriangulo(int base, int altura) {

return ((a*b)/2)

}

El método, tiene parámetros y parte regresa valores de tipo entero que es precisamente el resultado del area del triangulo, para invocar el método basta llamarlo así:

Area = areaTriangulo(5, 6);

Al ejecutar esa línea la variable Area tendrá el valor calculado en el método, el número “5” se transfiere a la variable “base” y el número “6” a la variable “altura”, el método con esos valores hace el calculo ahí indicado y lo regresa a la variable donde se mando llamar el método. Este ejmplo se ve claramente que los parámetros permiten enviar información al método, en ele ejemplo se envía el "5" y el "6" y por cierto el método es capaz de ahora enviar la información a la clase donde se manda llamar.

Bueno espero me haya explicado bien, con esto terminamos la sintaxis de los métodos, espero mostrar algunos ejemplos para reforzar este tema.

Métodos creados por el usuario -- Parte I

2010-09-15T00:16:00.000-07:00

Hoy se va a seguir trabajando con el mismo código que se vio en el último ejemplo, el de la pelotita que era movida por el teclado del celular, para mostrar otro concepto de la sintaxis de Java, la creación de métodos definidos por el usuario.

Ya se ha trabajado con muchísimos métodos a lo largo del blog, por ejemplo:

Clase Método

TextField getString()

setText()

Graphics drawArc()

drawString()
drawImage()

GameCanvas flushGraphics()

Todos absolutamente todos los métodos fueron creados por Sun Microsystem cuando desarrollo java y están agrupados en paquetes de clases a los que se tiene acceso por medio de la instrucción import. Hoy se va hablar de métodos pero de otro tipo, no los creados por Sun, si no, los métodos definidos por el usuario.

Métodos Definidos por el usuario

Un método es como una subrutina o un pequeño segmento de código que en términos generales sirve para dividir o descomponer un problema grande en partes más pequeñas que se invocan o se llaman desde la mima clase o desde otras clase

El siguiente segmento de código muestra el método llamado constructor, que se hizo en el post del ejemplo #20 y en el #19 :

El constructor entre otras cosas, carga las imágenes que se van a usar en el programa y crea un subproceso para el control de la animación, se puede dividir esta tarea, en partes bien definidas que son cargar las imágenes y crear el subproceso, se puede entonces crear un par de métodos que haga eso, pero veamos esto con calma.

public Animacion() {

super(true);

g = getGraphics();

try {

fondo = Image.createImage("/fondo.jpg");

pelota = Image.createImage("/pelotita.gif");

} catch (Exception e) { }

subproceso = new Thread(this);

subproceso.start();

}

La sintaxis para crear un método definido por el usuario es en términos generales así:

Identificador_de_acceso valor_de_regreso Nombre_del_metodo( parametros ) {

//Código del método

}

Enseguida se explican las cuatro partes que consta el método

1. Identificador de acceso

El identificador de acceso es algo así como la protección que tiene el método y es que el método creado por el usuario puede invocarse desde la misma clase o desde otras clases, el identificador de acceso nos da ciertos niveles de seguridad, existen varios tipos de identificadores de acceso:

• private

• protected

• public

• package

El lector debe elegir un tipo para usarlo en la definición del método, el método creado debe iniciar con una de esas palabras reservadas de Java, ¿pero cúal usar? Enseguida se da una definición superficial de cada uno de estos niveles de acceso.

a) Private

Este es el nivel de acceso más restringido, un método privado solo se puede invocar o solo se tiene acceso desde la misma clase donde está definido, los métodos privados son digámoslo así secretos para todos menos para la clase donde están ubicados, justo este tipo de acceso es el que se va usar en los métodos que vamos a crear, ¿Por qué? Sencillo porque el programa solo consta de una clase (bueno en realidad son dos clases el MIDlet y la clase que hereda de GameCanvas que es donde está todo el código, por eso digo que solo consta de una clase), así que no necesitamos invocar este método desde otros lados, programas que constan de varias clases si requieren de otro identificador de acceso.

Vamos a tomar la definición de la clase vista anteriormente para ir formando nuestro método, entonces, se debe agregar la palabara private al inicio del método así:

private valor_de_regreso Nombre_del_metodo( parametros ) {

//Código del método

}

b) Protected

Este nivel de acceso permite invocar el método desde la misma clase o desde las subclases, recuerde una subclase es la que deriva de otra y hereda sus métodos y propiedades, por ejemplo la clase del ejemplo #20 se llama Animación y deriva de la clase GameCanvas, Game Canvas es la clase y Animación es la subclase, esto es el concepto de herencia, que por lo pronto no ahondaremos en este concepto.

c) Public

Este identificador de acceso es el más sencillo y se ha visto ya en varios métodos que se han realizado, por ejemplo la definición del método run del ejemplo #19 es así:

public void run( ) {

//código del método run

}

Note el identificador de acceso public, como siempre va al inicio del método, este tipo de acceso significa que todas las clases de todos los paquetes de clases tienen acceso al método, un paquete de clases, es un grupo de clases que se relacionan, por ejemplo, Java tiene el paquete de clases llamado Game, en donde está ubicada la clase GameCanvas y otras clases más que se relacionan porque sirven para la programación de juegos para el celular, recuerde los paquetes de clases se agregan al programa en Java usando la palabra import.

d) Package

Este nivel de acceso permite invocar métodos desde cualquier clase que este en el mismo paquete.

2. Valor de Regreso

Este es el segundo punto en la definición del método. Java por fuerza requiere que los métodos regresen un valor a la clase donde se invocan, valor se refiere a algún tipo de dato que se calculo o en el método, el tipo de datos son los ya conocidos, por ejemplo int, boolean, float, double, en el caso que el método creado no regrese ningún valor se coloca la palabra reservada void.

Regresando a nuestro ejemplo, deseamos crear un método para cargar las imágenes y otro para crear un subproceso, las imágenes se cargan con una simple instrucción e igual el subproceso, en otras palabras estos métodos no requieren que se regrese ningún valor, entonces se usa el void como valor de retorno, el método que vamos creando toma la siguiente forma:

private void Nombre_del_metodo( parametros ) {

//Código del método

}

En el siguiente post se hablará de los métodos que regresan valores.

3. Nombre del método

El nombre del método es la tercera parte de la definición del método, este nombre es elegido por el usuario, puede ser cualquiera pero recuerde las reglas básicas: no se vale escribir espacios, no se vale iniciar con un número o carácter alfanumérico, solo se vale el guión bajo.

En nuestro ejemplo el método va a cargar las imágenes, así que como nombre usamos: cargarImagenes entonces el método va quedando así:

private void cargarImagenes( parametros ) {

//Código del método

}

4.- Parámetros

La última parte de la definición del método son los parámetros, estos van después del nombre del método, y deben ir entre paréntesis, los parámetros que en algunos casos no son necesario, sirven como una especie de comunicación entre la clase que los invoca y el método creado por el usuario, en otras palabras, los parámetros son el medio para enviar información desde la clase que los invoca al método creado.

En el método que estamos diseñando no se requiere enviar ninguna información de nada, esto significa que no lleva parámetros por ende, los paréntesis van vacios así:

private void cargarImagenes( ) {

//Código del método

}

Listo la definición del método está terminada, ahora solo va el código necesario para cargar la imagen este código se vio arriba en el constructor de la clase Animación, el método completo y terminado queda así:

private void cargarImagenes( ){

try {

fondo = Image.createImage("/fondo.jpg");

pelota = Image.createImage("/pelotita.gif");

} catch (Exception e) { }

}

El lugar para colocar este código es en cualquier parte dentro de la clase, no importa donde esté Java lo busca.

También en otro post se mostrarán algunos métodos que si llevan parámetros.

Invocación del método

Para que este método se ejecute se debe mandar llamar o invocar desde alguna parte la clase, en este caso obviamente es desde el constructor, para hacerlo basta con colocar el nombre del método seguido de sus parámetros entre paréntesis, así:

cargarImagenes();

Entonces el constructor ya con la llamada al método queda así:

public Animacion() {

super(true);

g = getGraphics();

cargarImagenes( );

subproceso = new Thread(this);

subproceso.start();

}

Eso es todo, cuando el NetBeans encuentre la invocación al método, el flujo de programa cambia, busca el método y ejecuta las instrucciones que ahí se indican, al terminar el método el flujo de programa se regresa a donde se quedo, esto queda más claro con una animación, una animación vale más que mil palabras.

La siguiente animación muestra el método creado junto con el constructor, así como se muestra es como Java ejecuta el método, todo inicia en el constructor, las instrucciones que están en el constructor es lo que se ejecuta primero, note como cambia el flujo de programa cuando se encuentra la instrucción para mandar llamar el método y observe también como al terminar el método el flujo de programa regresa a donde se había quedado.

Método para crear el subproceso

Enseguida se muestra la creación de otro método, el método que se diseñará simplemente crea el subproceso, ya sabemos que todo se inicia con el identificador de acceso, igual que el anterior lo colocamos como “prívate”, luego sigue el tipo de retorno, tampoco en este caso se regresa nada así que se coloca la palabra “void”, luego va el nombre del método, lo llamaremos “crearSubproceso”, luego va entre paréntesis la lista de parámetros, este método no los requiere así que los paréntesis van vacios, con lo anterior fácilmente se crea el método así:

private void crearSubproceso(){

subproceso = new Thread(this);

subproceso.start();

}

Para invocar el método, como ya se vio, basta con colocar su nombre así:

crearSubproceso()

Código Completo

El siguiente código muestra el constructor, note donde se ubica la instrucción para mandar llamar los métodos, junto con los dos métodos creados en esta sección, recuerde la ubicación de los métodos no lleva un orden pueden estar primero o después del constructor, Java los busca y los ejecuta, este es el código con los métodos creados por el usuario:

public Animacion() {

super(true);

g = getGraphics();

cargarImagenes();

crearSubproceso();

}

private void cargarImagenes(){

try {

fondo = Image.createImage("/fondo.jpg");

pelota = Image.createImage("/pelotita.gif");

} catch (Exception e) { }

}

private void crearSubproceso(){

subproceso = new Thread(this);

subproceso.start();

}

Observación final

Enseguida vuelvo a repetir el código para el constructor para el ejemplo #20 tal y como se mostro inicialmente:

public Animacion() {

super(true);

g = getGraphics();

try {

fondo = Image.createImage("/fondo.jpg");

pelota = Image.createImage("/pelotita.gif");

} catch (Exception e) { }

subproceso = new Thread(this);

subproceso.start();

}

Compare este constructor con todo el código anterior el de los métodos creados, los dos hacen exactamente lo mismo, crear las imágenes y el subproceso, pareciera que no se ve ventaja alguna, y quizá así es para este caso, pero créanme es altamente recomendable pensar en términos de métodos, en términos de dividir el problema en partes, por decirlo de alguna manera, las partes son los métodos, se anima al lector para que así lo haga y en adelante así se harán los video-tutoriales siguientes, son muchas las ventajas de usarlos, como se verá en un futuro.

Próxima entrada del blog

Este tema fue muy largo y aún así nos quedaron dos temas pendientes:

• Los métodos que regresan valores

• Los métodos con parámetros

Esto se abordara en la próxima entrada, que ojala sea esta misma semana.

Ejemplo #20 Como detectar Eventos de teclado del celular

2010-09-04T18:14:00.000-07:00

Hoy se va a mostrar el código para detectar las teclas presionadas por el usuario, se va a seguir trabajando con el código del ejemplo #19 y del ejemplo # 18, para ahora, mover la pelotita con las teclas del celular.

Usando la clase GameCanvas, de una forma por demás sencilla es posible detectar las teclas que se han presionado, algunas de las teclas ya vienen definidas en la clase, y son mostradas en la figura siguiente, con su respectivo nombre en Java:

Las mismas teclas están presentes en los números del teclado del celular, como se observa en la figura:

El método que detecta las teclas presionadas es el siguiente:

getKeyStates();

El método regresa un valor entero que corresponde a la tecla presionada, si regresa un valor entonces se debe declarar una variable así:

int ValorDeTeclado;

Ya con la variable declarada se puede usar el método así:

ValorDeTeclado = getKeyStates

La misma documentación de la clase GameCanvas muestra que con un simple if puedes detectar cualquiera de las teclas, por ejemplo, si deseas saber cuando se presiona la tecla que va hacia arriba (UP, que es la misma que la tecla del número 2) se coloca el if así:

if ((ValorDeTeclado & UP_PRESSED) != 0) {

// Se ejecuta el código cuando se presiona la tecla UP

}

De igual forma se puede hacer para todas y cada una de las demás teclas.

Ahora vamos a aplicar esto para mover la pelotita del ejemplo anterior, recordando un poquito, este par de instrucciones, mueven automáticamente a la pelotita:

coordX = coordX + velX;

coordY = coordY + velY;

Ahora esas instrucciones o algo parecido debe ir dentro de los ifs que detectan las teclas ya que ahora se desea que la pelotita se mueva con respecto a la tecla presionada, por ejemplo, imagine el lector que la pelotita se encuentra en las coordenadas (150, 100), si se presiona la tecla UP la pelotita debe ir “para arriba”, pero “para arriba” significa la coordenada 0 en Y, recuerde el sistema de coordenadas de Java el primer pixel está en la coordenada (0, 0), entonces cada que se presione la tecla se debe realizar una resta así:

if ((valorDeTeclado & UP_PRESSED) != 0)
coordY = coordY - velY;

Con eso basta para que la pelotita se mueva hacia arriba, no fueron necesarias las { } cuando menos no ahorita porque solo sigue una instrucción después del if.

Ahora, imagine el lector el que la pelotita esta en la coordenada Y en 100 y se presiona continuamente la tecla UP, llega un momento que la pelotita llega a la coordenada 0, si se deja intacto el código visto en el ejemplo #18 y #19, la pelotita rebota y cambia de dirección (cambiando el signo de la variable velY) eso, no es bueno, porque al cambiar el signo, ahora cambian las condiciones, y la pelotita no haría lo que se desea.

Mejor es, eliminar los ifs que hacían que la pelotita rebote. Ahora si se realiza esto, surge otro problema, regresando a las condiciones anteriores, la coordenada Y en 100 y se presiona continuamente la tecla UP, llega un momento en que la pelotita desaparece, esto debido a que se presiono la tecla UP de tal forma que rebaso la coordenada 0 y como se sigue restando, la coordenada Y se hizo negativa y la pelotita desaparece de nuestra visión.

Para resolver el conflicto, sería mejor que cuando llegue a la coordenada 0, la pelotita no se mueva aunque se siga presionando la tecla UP, esto se hace fácilmente con la instrucción siguiente:

if ((valorDeTeclado & UP_PRESSED) != 0) {

if ((coordY >0 )

coordY = coordY - velY;

}

Otra opción quizá mas fácil es usar la función “max” de la clase Math, esta función, simplemente regresa el valor más alto, de los dos que se ponen como parámetros. Por ejemplo : Math.Max( 10, 5) regresa el valor de 10, otro ejemplo Math.Max(0, -5) regresa el 0, concluimos que siempre que ponga el 0 con un número negativo el valor máximo que regresa siempre va a ser 0, y con esta simple instrucción se resuelve el problema, inclusive si hago la resta de coordY con velY se puede reducir el código a algo tan simple como esto:

if ((valorDeTeclado & UP_PRESSED) != 0)
coordY = Math.Max(0, coordY - velY);

Por otro lado, si se presiona la tecla hacía abajo (DOWN), Basta con hacer una suma dentro de un if parecido al anterior, pero ahora con DOWN_PRESSED, el código queda así:

if ((valorDeTeclado & DOWN_PRESSED) != 0)
coordY = coordY + velY;

Pero, el ir para abajo no es tan sencillo, porque no se está tomando en cuenta el alto de la pelotita, el código anterior no funcionaría bien. Para resolver este problema, basta con colocar un if que nos detecte si se ha llegado al borde de la pantalla, algo como esto

if ((ValorDeTecla & DOWN_PRESSED) != 0) {
if ((coordY + pelota.getHeight()) < alto )

coordY = coordY + velY;

}

Listo se resuelve el problema en la coordenada Y, algo idéntico es usado para la coordenada X, cuando se presiona la tecla LEFT y RIGHT, no se muestra aquí para no ser repetitivo, pero en el video tutorial se ve claramente cúal es el código.

Bueno eso es todo en el post de hoy, termino presentando el video tutorial, para que como siempre no quede duda alguna en donde deben ir las instrucciones.

Ejemplo #19 Animación usando imágenes

2010-08-28T13:47:00.000-07:00

El objetivo de este ejemplo es mostrar la misma animación que el post pasado, pero usando imágenes, la animación del ejemplo #18 se hizo usando figuras creadas con la misma clase Graphics, hoy se crean las imágenes con algún programa de dibujo y se agregan al mismo código visto en el post pasado, el resultado es exactamente el mismo, pero con imágenes se ve mejor el programa, vea la siguiente animación es lo que se pretende hacer.

Claro que se ve mejor está que la realizada con puras funciones de Java, para hacerla, se necesitan dos imágenes, por un lado el fondo del MIDlet y por otro lado la pelotita que si lo ven se ve muchísimo mejor que la anterior, según está dibujada en 3D, para realizar estas imágenes se requiere un programa de edición de imágenes, yo las hice usando el programa llamado PhotoImpact X3 de la empresa Corel, pero hay muchos programas algunos muy famosos como el Photoshop, el Corel Draw, incluso hasta el mismo Paint de Windows.

Creación de las imágenes usando el PhotoImpact X3

La figura siguiente muestra una pantalla del PhotImpact X3:

Solo me basto crear un archivo nuevo se le dieron las dimensiones deseadas (más adelante se dirán que dimensiones son) y se rellena con un color de fondo, el color de fondo se agrego usando una textura que ya vienen predefinidas en PhotImpact, se elige la textura deseada desde la Paleta de acceso fácil (se encuentra al lado derecho) y simplemente con dar doble clic en la textura elegida se rellena el archivo y listo ya tengo el fondo del MIDlet con una textura, esté se guarda como archivo jpg y ya.

Tamaño de la imagen de fondo

Algo importante es que la imagen de fondo debe ser exactamente del mismo tamaño que la pantalla del celular o bien pudierá ser más grande pero lo principal es que cubra toda la pantalla.

Fácilmente se puede ver el ancho y alto de la pantalla del celular, puesto que si el lector recuerda el código anterior viene un par de instrucciones que precisamente obtienen este valor, justo son las instrucciones siguientes:

int alto = getHeight();

int ancho = getWidth();

y una instrucción como la siguiente puede mostrar el ancho y el alto en la misma pantalla del celular:

g.drawString("Ancho = " + ancho +" y alto = " + alto, 10, 10, Graphics.TOP | Graphics.LEFT);

Vea el resultado de ejecutar el código con las líneas anteriores, en el emulador que hemos usado a lo largo del blog:

El ancho y alto del celular es 176, ejecute el programa en mi Sony Ericsson 705 y el resultado fue en ancho = 240 y alto = 266.

Si tu celular soporta Java puedes bajar el archivo JAR de este programa para que veas cuanto es el ancho y el alto de la pantalla de tu celular, dando clic aquí lo puedes bajar, este archivo se lo pase a mi celular usando el Bluetooh, también se puede hacer usando el cable USB.

Pelotita

Para realizar la pelotita fue también de lo más simple, con el photimpact se crea un circulo como se ve en la figura, para que se vea mejor se puso en 3D, esta opción la trae el Photo Impact, yo no sé si otros software la tienen, pero supongo que sí, puesto que Photoshop es superior al PhotoImpact.

Ahora vea que pasa si pongo la pelotita en el fondo anterior:

Como se puede observar, las imágenes son cuadradas obviamente y queda un fondo blanco que no es conveniente, porque no se ve bien la pelotita, este problema se resuelve bien fácil, se elije la pelotita con un fondo transparente, esto se puede hacer desde el PhotoImpact simplemente creando el fondo transparente y guardando el archivo como GIF o con formato PNG, el resultado de hacer esto es mostrado en la figura siguiente:

Obviamente se ve mejor, la imagen sigue teniendo el mismo rectángulo pero con el fondo transparente no se nota.

Agregando el código para las imágenes

Se vió algo parecido a lo que se va hacer en este ejemplo pero usando la clase Canvas si lo deseas puedes verlo dando clic aquí.

Bueno, partiendo del código del ejemplo #18 se agregan dos variables de tipo Image así:

Image fondo, pelota;

Para usar la clase Image, hay que hacer la importación del paquete de clases donde está ubicada, en otras palabras se escribe el siguiente código , antes de iniciar la clase:

import javax.microedition.lcdui.Image;

Ahora con este par de instrucciones se hace el enlace del archive físico de la imagen con la variable creada:

fondo = Image.createImage("/fondo.jpg");

pelota = Image.createImage("/pelotita.gif");

Por supuesto como ya se vio en la anterior entrada las imágenes deben estar en la ruta o directorio adecuado ¿no sabes cuál es? Da clic aquí y repasa, este punto ya se vio.

Estas instrucciones lanzan excepciones así que deben estar encerradas en su try y catch así:

try {

fondo = Image.createImage("/fondo.jpg");

pelota = Image.createImage("/pelotita.gif");

} catch(Exception e) { }

Es todo ahora simplemente se muestran en la pantalla así:

g.drawImage(fondo, 0, 0, Graphics.TOP | Graphics.LEFT);

y la pelotita así:

g.drawImage(pelota, coordX, coordY, Graphics.TOP | Graphics.LEFT);

También hay que tomar en cuenta el ancho y alto de la pelotita para hacer las comparaciones con el alto y ancho de la pantalla, se puede obtener el alto y ancho de la pelotita fácilmente, la clase Image tiene un par de métodos par ello, basta con este par de instrucciones:

Pelota.getWidth();

Pelota.getHeigh();

Estas se acomodan en los ifs donde se comparan las coordenadas, así:

if ((coordX + Pelota.getWidth()) > ancho || (coordX < 0 )
velX = -velX;

Bueno eso es todo si existen dudas aquí les muestro el video tutorial para que vean donde se agregan las instrucciones vistas hoy.

Por cierto ya pueden pasar a visitar mi nuevo blog, dedicado a la electrónica, después de todo yo soy ingeniero en electrónica y mi fuerte debe ser la electrónica así que no duden en visitarlo, va creciendo poco a poco tengan paciencia, dando clic aquí lo pueden visitar.

Ejemplo #18 “Animación usando GameCanvas: Pelota rebotando”

2010-08-18T18:18:00.000-07:00

La animación es un proceso de movimiento de imágenes o dibujos, hoy se muestra un pelotita o bolita o circulo, rebotando por toda la pantalla del celular, esa es la primera animación de varias que se van a realizar. La animación siguiente muestra lo que se pretende hacer con Java en el celular:

Como hacer la pelotita
Recuerde que la clase Graphics contiene métodos para dibujar ya se han visto algunas de estos métodos, hay una función que me permite dibujar arcos se llama así

fillArc

Es posible realizar un círculo con esta función, esto se hace así porque la clase Graphics no tienen ninguna instrucción para directamente crear un círculo. La función anterior requiere de 4 parámetros, estos se puede ver en la ayuda de J2ME para la clase Graphics, los parámetros son así:

fillArc(int x, int y, int width, int height, startAngle, arcAngle);

Una imagen vale más que 1000 palabras, así que muestro un par de imágenes con la instrucción fillArc.

Aquí hay otra imagen, que muestra incluso dos líneas para que quede bien claro donde se ubica el circulo cuando se dibuja.

El lector puede seguir experimentando con los parámetros si así lo desea. Note que el primer par de parámetros, que en el ejemplo son (10, 10) ubican la posición de una esquina de un rectángulo imaginario, ese es el punto de referencia para iniciar el dibujo del círculo, después siguen las coordenadas (30, 30) que es el ancho y el alto del circulo, y luego va el ángulo de inicio y el ángulo del arco, para que sea un circulo completo se inicia con el ángulo en 0 y se termina con el ángulo en 360.

Por otro lado, en ese par de imágenes anteriores se puede ver que si la bolita se “desplaza” (primero se puso en la coordenada (0,0) y luego en la (10,10) ), podemos decir que la bolita “se movio”, eso es la animación, sensación de movimiento.

Ciclo para la animación

La animación, se puede resumir en lo siguiente: dibujar la pelota en una posición, borrar la pantalla y volver a dibujarla ahora en otra posición, y repetir todo, una y otra vez, ¿Cómo se hace esto? Bien simple con un ciclo, dando clic aquí para ver el post de los ciclos, si así lo deseas.

Por facilidad se usa el ciclo while(), la condición la colocamos en “true”, con eso basta para lograr un ciclo infinito, después de todo se desea que la pelotita rebote “siempre”, entonces el código para el ciclo es así:

while (true) {
   // código para la animación
}

Pero ¿Dónde va el ciclo? Sencillo, en el método run(), después de todo este ciclo se ejecuta cuando se inicia el subproceso, y como se vio en la entrada anterior aquí es donde van las instrucciones para graficar, así que el método run se va formando así:

public void run() {
   while (true) {
       // Código para la animación
    }
}

El método “sleep” del subproceso

Se mencionó arriba que la animación es simplemente dibujar, borrar, volver a dibujar en otra posición, borrar, y repetirlo, pero necesito hacerlo en pausas, es decir, dibujar por un tiempo (algunos milisegundos), luego borrar todo y volver a dibujar en otra posición después de otro tiempo, esto se puede realizar por medio del subproceso, ya se vio en el post anterior algo de los subprocesos, al crear y después de iniciar el subproceso, se puede hacer uso de sus métodos, hay un método llamado “sleep” (ver la documentación de la clase Thread, si se desean ver más detalles), este método me permite hacer una pausa, un ejemplo en código puede ser el siguiente:

subproceso.sleep(100);

Al ejecutar esa instrucción el programa se detiene durante 100 milisegundos, este método debe ser encerrado en un par de instrucciones así:

try {
subproceso.sleep(10);
} catch (InterruptedException e) { }

El “try y catch” son requeridos por el programa, si no se agregan hay un error de compilación y nunca podre ejecutar el programa. Esas instrucciones, me permiten capturar algún error, en java se llaman excepciones, ya que el método sleep, puede crear errores por eso se usa el “try” y el “catch”, el código va dentro del ciclo while y va quedando así:

public void run() {
while (true) {
    // Código para la animación
    try {
     subproceso.sleep(100);
  } catch (InterruptedException e) { }
}
}

No se profundizará sobre las excepciones quizá más adelante se haga un post de esto, por lo pronto nos interesa la animación, así que continuamos.

Variables usadas en la animación

Se vio en la sección anterior, que la pelotita se “mueve” con solo mover el parámetro x y el parámetro y de fillArc, entonces, como inicio se pueden declarar esos parámetros con una variable para después cambiarlos, así:

int coordX = 0;

int coordY = 0

Recuerde que la declaración va al inicio del método, ya con las variables declaradas, se puede crear el circulo con la instrucción fillArc, en este caso es un circulo con 20 pixeles de ancho y alto, esta es la instrucción

g.fillArc(coordX, coordY, 20, 20, 0, 360)

La instrucción va dentro del ciclo, el código toma la forma siguiente:

public void run() {
int coordX = 0;
int coordY = 0
while (true) {
     g.fillArc(coordX, coordY, 20, 20, 0, 360)
     try {
     subproceso.sleep(100);
    } catch (InterruptedException e) { }
  }
}

¿Ahora que se necesitará para mover la pelotitia? Simplemente desplazar las coordenadas, estas que son variables se pueden desplazar sumandoles un valor, así:

coordX = coordX + 1

coordY = coordY + 1

Otro ejemplo sería así:

coordX = coordX + 5
coordY = coordY + 5

O uno con desplazamientos diferentes,

coordX = coordX + 5
coordY = coordY + 3

Vea los ejemplos, en el primero solo se desplaza la pelotita 1 pixel, el segundo 5 pixeles ¿Qué diferencia hay? Entre 1 pixel o 5 pixeles en el desplazamiento, la animación siguiente nos da la respuesta:

Nota: La animación es para fines ilustrativos solamente, está realizada con un programa llamado SwishMax 2, por lo que no se si vaya más rápido o más lento cuando se programe en Java.

Obviamente la pelotita va más rápido con 5 pixeles que con 1, por que los incrementos en las coordenadas son mayores, podemos entonces decir que el sumarle una variable a la coordenada hace que se cambie su velocidad, por comodidad se va a almacenar este desplazamiento en variables también, se declaran así:

int velX = 5;
int velY = 5;

Yo las inicie en 5, el lector puede hacerlo en 1 o en otro valor, queda el código así:
public void run() {
   int coordX = 0;
   int coordY = 0;
   int velX = 5;
   int velY = 5;
   while (true) {
     g.fillArc(coordX, coordY, 20, 20, 0, 360)
     try {
       subproceso.sleep(100);
     } catch (InterruptedException e) { }
     coordX = coordX + velX;
     coordY = coordY + velY;
   }
}

Es obvio también, que si se ejecuta este código la pelotita se va de largo ¿Por qué? Ya se imaginará el lector que falta agregar un código que haga que la pelotita rebote esto es que cambie de dirección como se ve en la figura:

Aparte, en la figura se observa donde está el punto (0,0) en el sistema de coordenadas de Java para que el lector lo recuerde, también se muestra el alto y ancho de la pantalla, que es donde la pelotita rebota, entonces bastaría con que yo compare la posición de la pelotita para saber si llego a lo alto de la pantalla (o a lo ancho) y simplemente cambio de dirección.

Entonces, una simple comparación puede detectar si la pelotita llego a lo alto del panel, primero pues vamos a usar un par de variables para obtener el alto y ancho del panel así:

int ancho = getWidth();

int alto = getHeight();

Ahora sí, se inician las comparaciones, que tal un if para “ver “ si ya toco el alto así:

if (coordY > alto) {
// código para cambiar de dirección
}

Pero vea la figura y recuerde lo que se menciono arriba, el círculo se dibuja tomando como referencia la esquina de un rectángulo, que justo son las coordenadas x e y:

¿Cómo se cambia la dirección?

La respuesta es bien simple, para el ejemplo que se muestra, la pelotita se desplaza hacia abajo por que se suma se suma la velocidad (variable velY) pero que tal si envés de sumar se resta la velocidad, la pelotita se iría hacia arriba.

Entonces para que la pelotita cambie la dirección basta con restar la velocidad, esto se hace simplemente con cambiar el signo de la variable así:

velY = -velY;

Con esa instrucción la pelotita rebotará al llegar a lo alto de la pantalla, el código del método run queda de la siguiente forma al agregar el primer if:

public void run() {
int coordX = 0;
int coordY = 0;
int velX = 5;
int velY = 5;
while (true) {
   g.fillArc(coordX, coordY, 20, 20, 0, 360)
   try {
     subproceso.sleep(100);
   } catch (InterruptedException e) { }
   coordX = coordX + velX;
   coordY = coordY + velY;
   if ((coordY + 20) > alto) {
     velY = -velY;
   }
}
}

Ahora vea en la figura el siguiente caso que tiene que ver con la coordenada Y todavía:

La pelotita se dirige a la coordenada 0, de Y, para ese momento la velocidad es negativa obviamente deseamos que rebote de ahí, entonces se requiere otra comparación para hacerlo, así:

if (coordY < 0) {
velY = -velY;
}

Con eso basta para que detecte el límite de la pantalla y al cambiar de signo la velocidad, la pelotita cambia de dirección.

Es posible unir los dos if’s para la coordenada Y usando el operador OR (operador lógico) de Java, el operador OR en Java es así || el código queda entonces con un solo if de esta forma:

if ((coordY + 20) > alto || (coordY < 0 ))
velY = -velY;
También quitamos las { }, puesto que sigue solo una instrucción no son necesarias.

Todo lo que se hizo para la coordenada Y se aplica para la coordenada X y el ancho de la pantalla , así que les dejo como va quedando el código para el método run ya con los if’s para las ambas coordenadas


public void run() {
  int coordX =0, coordY=50;
  int velX = 5;
  int velY = 5;
  int ancho = getWidth();
  int alto = getHeight(); 
  while(true) {
    g.fillArc(coordX,coordY,20,20,0,360);
    try {
      subproceso.sleep(30);
    } catch (InterruptedException e) { }
    coordX = coordX + velX;
    coordY = coordY + velY;
    if ((coordX + 20) > ancho || (coordX < 0) ) 
       velX = -velX; 
    if ((coordY + 20) > alto || (coordY < 0 )) 
       velY = -velY; 
    flushGraphics(); 
  } 
}

También en el código anterior se agrego  el método flushGraphics al final del código.

Recuerde la animación es un ciclo de dibujar, borrar, dibujar en otra posición, borrar…. Y así sucesivamente, para terminar falta el borrado el código anterior, no funcionaría como se desea si no es borrada la pantalla, esto se hace colocando el fondo del color que se quiera, en este caso es en color negro, aparte se agrega el código para pintar la pelotita en color azul.

g.setColor(0x000000); //color negro
g.fillRect(0, 0, ancho, alto);
g.setColor(0x0000FF); //color azul

Por fin se muestra el código completo para el método run(), el código para borrar se coloca después del while

public void run() {
int coordX =0, coordY=50;
int velX = 5;
int velY = 5;
int ancho = getWidth();
int alto = getHeight();
while(true) {
    g.setColor(0x000000); //color negro
    g.fillRect(0, 0, ancho, alto);
    g.setColor(0x0000FF); //color azul
   g.fillArc(coordX,coordY,20,20,0,360);
    try {
      subproceso.sleep(30);
    } catch (InterruptedException e) { }
    coordX = coordX + velX;
    coordY = coordY + velY;
    if ((coordX + 20) > ancho || (coordX < 0 )
      velX = -velX;
    if ((coordY + 20) > alto || (coordY < 0 ))
      velY = -velY;
    flushGraphics();
}
}

Vaya este post se me hizo larguísimo, pero ya es todo, fiel a mi costumbre se muestra el video-tutorial completito para que no haya errores de ningún tipo y el lector pueda implementarlo con toda la confianza del mundo.

Ejemplo #17 “Hola mundo usando la clase GameCanvas”

2010-08-07T07:56:00.000-07:00

Ya se vieron a lo largo del blog, varios video tutoriales donde se muestra como se usa la clase Canvas para dibujar elementos gráficos, incluso en el último ejemplo se gráfica la función seno en el celular, ahora veremos una clase que nos permitirá realizar animaciones fácilmente, se mostrará el ejemplo más sencillo que puede haber para esta clase, el clásico mensaje “Hola Mundo”, así que iniciemos.

La Clase GameCanvas

En este post se muestra la clase GameCanvas diseñada para simplificar el desarrollo de juegos para el teléfono celular. Con esta clase es muy fácil detectar las teclas que son presionadas por el usuario además fácilmente se actualiza la pantalla, sin necesidad de usar la técnica llamada doble buffer, la cual tampoco veremos aquí pues ya no se necesita, además esta clase está optimizada precisamente para la programación de juegos, esté ejemplo y los siguientes mostrarán ejemplos sencillos de su uso.

Se presenta detalladamente las partes de la clase y como se va codificando, quizá sea repetitivo al volver escribir a cada rato la clase, pero me gusta hacerlo así, creo que así queda más claro.

Siguiendo el mismo procedimiento que los ejemplos de la clase Canvas, se crea primero una clase que derive o herede de la clase GameCanvas, en código es así:


public class EjemploGameCanvas extends GameCanvas {
// Código de la clase
}

El nombre de la clase es EjemploGameCanvas, recuerda que en Java para definir la herencia se usa la palabra extends, entonces la clase EjemploGameCanvas hereda todos los métodos y atributos de la clase GameCanvas, por cierto a su vez la clase GameCanvas deriva de la clase Canvas.

Por otro lado la pura definición como está arriba nos marcaría error, puesto que hay que importar el paquete de clases donde se ubica la clase GameCanvas, la instrucción Import lo hace, se codifica como se muestra enseguida y se coloca al iniciar la clase:

import javax.microedition.lcdui.game.*;

Pero eso no es todo, está clase porque así está diseñada, se debe ejecutar en su propio “subproceso”, para implementar esto en Java se usa la interfaz Runnable, para hacerlo se escribe en la definición de la clase el “implements Runnable” así:


import javax.microedition.lcdui.game.*;
public class EjemploGameCanvas extends GameCanvas implements Runnable {
    // Código de la clase
}

Veamos una explicación muy superficial de los subprocesos.

Subprocesos

Para ver el concepto de subproceso se debe pensar en, por ejemplo, el procesador de textos Word, donde precisamente estoy escribiendo este texto, el Word fue programado para que haga varias tareas digamos “al mismo tiempo”, por ejemplo mientras se escribe el texto, Word crea un subproceso para verificar la ortografía la cuál señala con una línea roja, entonces Word se dice que es multitarea, esto es, la realización aparente de poder hacer varias tareas “al mismo tiempo”, aunque esto no es verdad puesto que las computadoras solo tienen un único procesador, pero como estos ejecutan millones de instrucciones por segundo nos dan la ilusión de que lo hace en paralelo

Para dar esta ilusión de ejecutar las instrucciones en paralelo en Java, se usan los subprocesos, en nuestro caso se usan en clase Game Canvas, porque esta clase debe aislarse del resto del código, además así se diseño esta clase, para facilitarnos la vida a la hora de programar animaciones y juegos, por eso se agrega a la definición de la clase el “implements Runnable” ese es el primer paso para crear el subproceso, pero todavía faltan más cosas.

Constructor de la clase

Por otro lado, olvidándonos un momentito de los subprocesos, recuerde algo, todas las clases deben llevar su constructor (método que se llama igual que la clase) y que generalmente sirve para inicializar variables que se usaran a lo largo del programa.

El constructor de la clase que hereda de GameCanvas, según la documentación, requiere un parámetro que es de tipo booleano (verdadero o falso), si es verdadero se suprimen los mecanismos para los eventos de las teclas, si es falso se activan los mecanismos y se pueden detectar fácilmente las teclas que se han presionado, esto se verá después por lo pronto nosotros le vamos agregar al constructor el parámetro “true” puesto que solo se mostrará un mensaje en la pantalla, entonces el constructor para la clase que acabamos de crear es así:


public class EjemploGameCanvas extends GameCanvas implements Runnable {
    public EjemploGameCanvas () {
      super(true); // código del constructor
    }
}

Vea la instrucción

super(true)

Justo ahí se le envía el valor de verdadero (true), la instrucción “super” significa que se manda llamar el constructor de la superclase, recuerde la herencia, Canvas es la superclase de GameCanvas, esté es un requisito para usar la clase GameCanvas, si no se llama el constructor de la superclase simplemente nos marca un error de compilación.

El método run

Regresando a los subprocesos, toda clase que lleve en su definición el “implements Runnable” debe a fuerzas implementar el método run() este método es la clave de los subprocesos, cuando se activa el subproceso, este método es el que se ejecuta, la clase ahora agregando el método run toma la forma siguiente:


public class EjemploGameCanvas extends GameCanvas implements Runnable {
   public EjemploGameCanvas () {
      super(true); // código del constructor
   } 
   public void run() { 
     //Código del subproceso
   }
}

El Método getGraphics()

Por otro lado, la clase GameCanvas contiene varios métodos, uno de ellos es getGraphics(), este método es el primer paso para iniciar a dibujar en el GameCanvas, el método regresa un objeto tipo grafico con el que posteriormente se dibuja, la instrucción para usarlo es así:

g = getGraphics();

g es el objeto gráfico, pero recuerde, en Java todo se debe declarar antes de usar, para declarar un objeto es bien simple, inicia con el nombre de la clase (en este caso Graphics), seguido por el nombre que yo desee (yo quiero la “g”) la declaración queda así :

Graphics g;

¿Donde va este código?, la declaración la colocamos después de la definición de la clase, y la llamada al método en el constructor que es el método que se ejecuta primero, así se prepara todo para iniciar el dibujo en el GameCanvas, queda entonces la clase así:




public class EjemploGameCanvas extends GameCanvas implements Runnable {
  Graphics g;
  public EjemploGameCanvas () {
  super(true); // código del constructor
    g = getGraphics();
  } 
  public void run() { 
    //Código para el subproceso
  }
}

Creación del Subproceso

Otra vez regresamos a los subprocesos, no basta con escribir el “implements Runnable” y el método “run” se debe en verdad crear el subproceso, esto se hace creando un objeto de la clase Thread, como se crea el objeto, ya lo vimos, primero se declara y se crea usando la palabra new, esto incluso se puede escribir en una sola línea así:

Thread subproceso = new Thread(this);

O como el objeto g, en dos líneas, con la excepción de que g no requiere la palabra new.

Ya está creado el subproceso con la línea anterior pero mientras no se inicie jamás se va a ejecutar el método run, así que para iniciarlo basta con mandar llamar su método start así:

subproceso.start();

¿Dónde va el código? Nos conviene que se inicie inmediatamente, después de todo nuestro primer ejemplo solo mostrará “hola mundo en la pantalla” y ya, así que de nueva cuenta el constructor es buena idea para este código, queda entonces la clase así:


public class EjemploGameCanvas extends GameCanvas implements Runnable {
  Graphics g;
  public EjemploGameCanvas () {
     super(true); // código del constructor
     g = getGraphics();
     Thread subproceso = new Thread(this);
     subproceso.start(); 
  } 
  public void run() { 
   //Código 
  }
}

Ahora si a Dibujar

Listo tenemos todos los elementos para empezar a dibujar lo que querramos en la pantalla del celular, usando de por medio el objeto “g” tal y como se hizo con la clase Canvas, esto ya se vio por lo que no entrare en detalles, el código siguiente coloca la pantalla del celular en negro y escribe “hola Mundo usando GameCanvas”, en color magenta creo.


// pantalla en negro
g.setColor(0x000000);
g.fillRect(0, 0, getWidth(), getHeight());
// dibujo de las letras “hola mundo…
g.setColor(0xff00FF);
g.drawString("Hola mundo, con GameCanvas", 0, 60, Graphics.LEFT | Graphics.TOP);

¿Dónde va el código? En el método run() después de todo es el que se ejecuta al iniciar el subproceso, antes de ver donde, veamos otro método de la clase GameCanvas.

El método flushGraphics();

Este método, también de la clase GameCanvas es usado para colocar realmente en la pantalla del celular lo dibujado por el objeto “g”, el código anterior que pinta la pantalla de negro y dibuja el letrero esta en la memoria o como le llaman en el “buffer” y no se puede ver, hasta que se invoque el método flushGraphics(), al hacerlo se ve ahora si lo dibujado, este código va al final, despueés del método drawString, también va en el método run, queda finalmente el código así:


public class EjemploGameCanvas extends GameCanvas implements Runnable {
  Graphics g;
  public EjemploGameCanvas () {
    super(true); // código del constructor
    g = getGraphics();
    Thread subproceso = new Thread(this);
    subproceso.start();
  } 
  public void run() { 
    // pantalla en negro
    g.setColor(0x000000);
    g.fillRect(0, 0, getWidth(), getHeight());
    // dibujo de las letras “hola mundo…
    g.setColor(0xff00FF);
    g.drawString("Hola mundo, con GameCanvas", 0, 60, Graphics.LEFT |   Graphics.TOP); 
   flushGraphics();
  }
}

Video

Enseguida se muestra el video para este ejemplo, recuerde que se requiere el MIDlet principal para mandar llamar la clase que hereda de GameCanvas esto ya se vio en un post anterior, por eso no lo repito aquí, aún así el tutorial muestra todo el procedimiento, todo él código para agregar la clase creada al MIDlet.

Como obtener la nueva versión del SDK de Sony Ericsson

2010-07-21T16:38:00.000-07:00

Vaya después de tanto tiempo --la última entrada del blog data del 13 de enero de 2010 :D -- ya estoy de regreso… después de más de 6 meses vuelvo a retomar el blog… ahora si tengo todas las intenciones de “postear” más seguido.

Bueno ahora si hablemos de lo que nos corresponde, hoy se muestra como obtener la nueva versión del SDK de sony Ericsson (ya se explico una vez qué es y cómo obtenerlo en la entrada del blog con fecha de martes 19 de mayo de 2009 y que si lo deseas puedes ver dando clic aquí), pero a más de un año de esa fecha las cosas cambian, ya no son las instrucciones indicadas ahí, las que nos llevan al SDK de Sony Ericsson, ya cambio la página Web así que reiniciamos el blog justo como lo empezamos con las nuevas versiones del software, además muchos lectores me dicen que por que a ellos no les aparecen los emuladores de Sony, pues aqui se dice como obtenerlos.

¿Por qué usar el SDK de Sony Ericsson?

La respuesta es de lo más simple y sencilla, la razón, es porque mi teléfono celular es un Sony Ericsson W550, esa es la respuesta. Habrá más de algún lector que tenga su celular de Nokia o de Motorola bueno pues a ellos les conviene bajar el SDK para sus teléfonos que también existe solo es cuestión de buscarlo, así le pueden sacar el máximo provecho a su teléfono incluso quizá hasta el software tenga un emulador exactamente igual al de su celular.

Primer paso

Todo Inicia desde la página para desarrolladores de Sony Ericsson cuya dirección es la siguiente:

http://developer.sonyericsson.com/

Al dar clic en la dirección se observa la nueva versión de la pagina web de Sony, donde se da clic en el menú “technology” tal y como se observa en la figura

Al hacerlo se despliega todas las diferentes tecnologías con las que cuentan los celulares de Sony Ericsson, obviamente ahí esta Java, se da clic en la sección de Java, para ser exacto en “Read More” tal y como se observa en la figura.

Al hacer lo anterior, parece la opción donde se indica, que es el SDK y cuestiones por el estilo, casi hasta abajo viene el link para bajar el SDK cuya versión esta desde octubre de 2009, la figura siguiente indica el link para bajar el SDK.

Al dar clic en el link aparece por fin el archivo de instalación del SDK

Y listo se baja el archivo para instalar, está en formato ZIP, se des-comprime y se da doble clic en el archivo de instalación

Antes de instalar la nueva versión se debe desinstalar la versión anterior del SDK

Cuando intente instalar la nueva versión del SDK se marca un error que dice: “One of the applications you are trying… bueno mejor vean el error en la imagen siguiente:

En la documentación que se incluye en el archivo ZIP (archivo llamado “README”) se indica que hay que desinstalar las versiones anteriores, así que intento hacerlo y me sale el mismo error al desinstalar el SDK¡ y aquí se los muestro en esta imagen

Siguiendo las instrucciones del archivo “README”, ahi se indica que se debe detener el “SDK Service” si deseamos desinstalar el software, esto es sencillo, simplemente se da clic en “Stop SEMC SDK Service” en el menú de instalación del SDK, bueno una imagen vale más que mil palabras

Al hacer clic sale una ventana de MS-Dos donde se detiene el servicio del SDK después de esto, se inicia la desinstalación del programa, ya sea desde el mismo menú en la opción (Unistall) o desde el panel de control, se desinstala sin dificultad alguna el SDK, incluso la siguiente figura muestra la ventana inicial de la desinstalación:

Finalmente se instala la nueva versión del Sony Ericsson SDK, dando doble clic al archivo que previamente se des-comprimió y listo.

Adjuntar la nueva versión del SDK con el NetBeans

Ahora para poder usar esta versión recién instalada se adjunta al NetBeans, existe un video en una entrada anterior que hace justamente eso, aquí lo reproduzco para que se vea como se hace es lo mismo para esta nueva versión.

Actualizar los proyectos de NetBeans a la nueva versión del SDK

Al realizar lo anterior me encontré que muchos de mis proyectos en el NetBeans estaban marcados en color rojo como se observa:

Esto debido a que se realizaron con la otra versión del SDK basta con dar clic derecho en el proyecto deseado y elegir “Properties” y en el menú “platform” se elige la nueva versión y listo una figura quizá ayude un poco más a visualizar lo que se dijo:

Bueno con esto se termina esta entrada, hasta la próxima que esperemos sea muy pronto.

Ejemplo #16 Graficando la función seno en el celular

2010-01-13T17:46:00.000-08:00

-->

Hoy se mostrará una aplicación practica de los arreglos, el ejemplo que se mostrará en este post tiene como objetivo graficar la función seno así que iniciemos.

La función seno

Como siempre se inicia recurriendo a la WikiPedia para conocer detalles de esta función da clic aquí para que veas el articulo de esta función. En la siguiente imagen se muestra la gráfica de la función, que a final de cuentas es lo que deseamos graficar en el celular:

Dos cosas, una la grafica en el eje de las y’s solo toma valores de 1 y de -1, y la otra, solo se graficará un ciclo completo de la función como en la figura, esto implica que se va a graficar en las x’s solo de 0 a 360 grados, esto se debe tomar en cuenta para realizar el programa.

Programa

Enseguida se da la explicación del código Java para que se muestre la grafica deseada, pero cabe mencionar que solo se muestra la parte que va en el método paint(), como crear los códigos para el proyecto ya se ha mencionado en los post anteriores a este, y creo yo, que ya no es necesario repetirlo.

Dibujando los ejes

Se inicia la gráfica dibujando los ejes coordenados, son simples dos líneas como se puede observar en la figura anterior. Para saber con exactitud el número de pixeles que tiene la pantalla del celular y además, para que el programa que se diseñe, funcione con cualquier tipo de pantalla así tenga más pixeles en una que en otra vamos a obtener el ancho y el alto en pixeles así:

ancho = getWidth();

alto = getHeight();

Obviamente que las variables que yo invente: ancho y alto, previamente se tuvieron que declarar de tipo entero. Recuerde las coordenadas que usa Java en la pantalla del celular son así: esquina superior izquierda (0,0), esquina inferior izquierda (0, alto), esquina superior derecha: (0, ancho) y esquina inferior derecha (ancho, alto)

Entonces basta con dos instrucciones que dibujan líneas para crear los ejes en color rojo así:

g.setColor(0xFF, 0x00, 0x00); // Rojo

g.drawLine(0, alto/2, ancho, alto/2); //eje x
g.drawLine(0, 0, 0, alto); //eje y

Si se ejecuta el programa así se verán los ejes así:

Bueno apenas se ve el eje de las Y que esta totalmente a la derecha, pero ahi esta, en el celular por supuesto que se ve mejor, por cierto el emulador que se está usando es el Sony Ericsson K750, cuyo ancho y alto en pixeles es de 176.

Ahora si se desea colocar letreros para denotar los ejes, se usa el método drawString, por ejemplo si se desea agregar el 1 y -1 al eje Y o si se desea agregar los grados al eje X podemos escribir así:

g.drawString("1", 4, 0, Graphics.TOP | Graphics.LEFT);
g.drawString("-1", 3, alto, Graphics.BOTTOM | Graphics.LEFT);
g.drawString("0", 4, alto/2, Graphics.TOP | Graphics.LEFT);
g.drawString("180", ancho/2-5, alto/2, Graphics.TOP | Graphics.LEFT);
g.drawString("360", ancho, alto/2, Graphics.TOP | Graphics.RIGHT);

cuyo resultado sería este:

Datos del eje X

Ahora si, vamos a realizar los cálculos de la función seno, se inicia con el eje x, esté es de lo más simple como se observa en la figura anterior, ya que son los grados que se usarán para la función seno y van desde 0 hasta 360, así que, si han pensado en un ciclo for que recorra desde 0 hasta 360, tienen toda la razón, el código sería el siguiente:

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

}

Lo que seguiría sería declarar un arreglo de 360 posiciones para que almacene cada uno de los números para posteriormente graficarlos, el arreglo, entonces almacenaría los números 0, 1, 2, 3…. 360, pero justo en este punto se ve un pequeño problema: Yo quiero graficar hasta 360 y el emulador del teléfono celular solo tiene en ancho 176 pixeles como ya lo mencioné, esté es un problema grave, porque un ciclo completo de la función seno va exactamente de 0 a 360 grados, si yo grafico la función está se vería así:

Casi se observa un semi-ciclo de la función, casi se grafica de 0 a 180 grados, esto porque solo se tienen 176 pixeles de ancho en el emulador, ahora si ya se ve el problema ¿verdad? Yo quiero que se grafique todo el ciclo de la función seno, pero no tengo los pixeles suficientes para ello.

La solución es bien simple, se hace un ajuste de lo más sencillo usando la llamada “regla de tres” es decir: “si 360 grados equivalen a 176 pixeles entonces cada grado equivale a X pixeles” al go parecido a esto:

360 - 176

1 grado - x

El resultado para 1 grado queda así:

x = ( 1 * 176) / 360 = 0.488888 pixeles

Entonces cada grado equivale a 0.4888 pixeles, algo que no es del todo practico por que los pixeles son números enteros, aún así esta aproximación es suficiente para mostrar la gráfica de la función seno como se verá un poco más adelante.

Basta con agregar la ecuación anterior al ciclo for mencionado arriba, para obtener en términos de pixeles cada uno de los 360 grados, por otro lado, cada uno de los grados (convertidos ahora en pixeles) se almacenaran en un arreglo de números enteros, entonces la ecuación en términos de las variables que se están manejando para el programa y dentro del ciclo for es la siguiente:

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

x[i] = (ancho * i ) / 360; //datos del eje X

}

El arreglo se declara de tipo entero, es llamado “x” y obviamente es de 360 posiciones. Pero vea la ecuación, es una división por lo que, como se vio, genera un número decimal, entonces pareciera que es un error, que se asigne un resultado decimal a un arreglo de enteros, pero no lo es del todo (al menos no en este ejemplo), se aprovecha la propiedad de Java de que, una división de números enteros se puede asignar a una variable de tipo entero perdiendo los decimales, esto debe sonar lógico puesto que lo que se desean son pixeles por que para trazar las líneas que dibujen la función seno se requieren números enteros solamente. Bueno espero me haya explicado.

Datos del eje Y

El eje Y contiene los valores de la función seno, recuerde la ecuación es así:

Y = sin x

Donde “x” son los grados, que en este punto ya están en el arreglo llamado x. Pero veamos que dice la documentación de Java acerca de la función seno (insisto, si no se ve bien da clic en la imagen para verla mejor):

Dos cosas se pueden ver de la documentación, una el ángulo debe estar en radianes y no en grados como se venía manejando y la otra, tanto el ángulo como el resultado deben ser de tipo double.

El primer punto se resuelve fácil convirtiendo cada uno de los 360 grados a radianes, esto se hace fácilmente con la función llamada “toRadians” que está en la clase Math, la función la puedes ver en la documentación de java, no la voy a mostrar pero ahí puedes verla, entonces una sentencia como la siguiente me convierte cada grado en radianes:

angRad = Math.toRadians(i);

Previamente se debe declarar la variable “angRad” de tipo double, con lo anterior se tiene el ángulo listo para la función seno, ahora solo se aplica la función y se asigna a un arreglo para formar los valores para el eje “y”, esto se hace así:

yt[i] = Math.sin(angRad);

El arreglo es llamado “yt” y debe ser declarado de tipo “double” para evitar pérdidas de decimales, y más en este punto puesto que el valor de la función seno es entre 1 y -1. Justo aquí tenemos un nuevo problema, el valor es entre 1 y -1, esto en términos de pixeles es nada, absolutamente nada, pero esto se resuelve bien fácil, una simple multiplicación puede “amplificar” la función de una forma proporcional, por ejemplo si se multiplica la función por 10 así:

yt[i] = 10 * Math.sin(angRad);

entonces “yt” almacenará valores de la función seno, ahora entre 10 y -10, el valor exacto para que la forma de onda se múltiplique y quede proporcionalmente a la pantalla del celular es: alto/2, entonces la ecuación final para “yt” es:

yt[i] = (alto/2) * Math.sin(angRad);

El ciclo for para los dos ejes queda así:

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

x[i] = (ancho * i ) / 360; //datos del eje X

angRad = Math.toRadians(i); //grados a radianes

yt[i] = (alto/2) * Math.sin(angRad); //datos del eje Y
}

Je je je , no me lo van a creer pero tenemos un nuevo problema, este igual de grave que los otros, con el ciclo anterior tendríamos los valores exactos del eje de las Y ¡¡pero estos valores son negativos¡¡¡ y me servirían a mi para graficar manualmente la función seno, con valores positivos y negativos pero a Java no le sirven por que las coordenadas de la pantalla del celular son positivas siempre. Vaya lio ¿verdad?.

La solución después de analizar un rato el problema es desplazar cada punto del arreglo “yt” cierta cantidad “hacia abajo” (recuerde que las coordenadas de java crecen hacia abajo), para ser exacto se desplaza en pixeles lo equivalente al valor de la variable alto/2, está es la ecuación exacta que me permite hacer lo que menciono:

y[i]=Math.abs(yt[i] - alto/2);

El desplazamiento se hace con una simple resta, la resta genera números negativos, para evitarlo se obtiene el valor absoluto de la resta con lo que se tendría ahora si puros valores positivos y estos valores no me la van a creer pero están ya en coordenadas de Java, listos para su graficación, cada valor se almacena en el arreglo de tipo entero llamado “y”, para este caso se debe agregar un conversor de tipo, puesto que la función del valor absoluto regresa un valor double, el conversor de tipo se agrega entre paréntesis así:

y[i]= (int) Math.abs(yt[i] - alto/2);

el (int) obliga a que el resultado se cambie a entero y se asigne al arreglo de enteros “y”, el código para el ciclo for queda entonces así:

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

x[i] = (ancho * i ) / 360; //datos del eje X

angRad = Math.toRadians(i); //grados a radianes

yt[i] = (alto/2) * Math.sin(angRad); //datos del eje Y

y[i]= (int) Math.abs(yt[i] - alto/2);

}

Es posible eliminar el arreglo “yt” del ciclo, y declarar la variable de tipo double, puesto que este arreglo no se va a usar más, así que el código final para el ciclo for (ahora si es el código final se los prometo) queda así:

for (i=0; i<=360; i++ ) {
x[i] = (ancho * i ) / 360; //datos del eje X
angRad = Math.toRadians(i); //grados a radianes

yt = (alto/2) * Math.sin(angRad); //datos del eje Y

y[i]= (int) Math.abs(yt - alto/2);

}

Graficando la función

Para terminar el post, solo queda graficar los 360 puntos, puesto que ahora si los arreglos “y” y “x” tienen almacenadas las coordenadas y estas cooordenadas ya están en el mundo de java, la grafica se crea trazando pequeñas líneas de una coordenada a otra. Por ejemplo se traza una línea de la coordenada (x[0], y[0]) a la coordenada (x[1], y[1]), la siguiente línea sería de la coordenada (x[1], y[1]) a la coordenada (x[2], y[2]) y así sucesivamente, hasta terminar con la los 360 puntos.

Obviamente esto se realiza con un ciclo for de la siguiente manera:

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

g.drawLine(x[i], y [i], x[i+1], y[i+1]);

}

El ciclo va de 0 a 359 ¿Por qué será? Y solo se requirió una simple instrucción que hace uso del método drawLine y listo, el resultado lo puedes ver en la siguiente imagen:

-->

Guau, si quedo bien ¿verdad? Ya para terminar agrego el video tutorial para este ejemplo, no se muestra la creación de la clase para el Midlet, ni la clase que proviene de la clase Canvas, esto ya ha sido analizado en los post anteriores, por eso ya no lo inclui en el video.

Por si fuera poco anexo el código fuente, es la carpeta completita que genera Netbeans, esta en formato RAR da clic aqui para bajarlo, este realizada con el NetBeans 6.8, si no deseas el código fuente dando clic aqui puedes bajar el archivo JAR para que se lo envies via Bluetooth o USB a tu celualar, si soporta java verás la gráfica del seno sin lugar a dudas, yo lo probe en mi Sony Ericsson W595 y el resultado fue exactamente el mismo que el del emulador.

-->

Arreglos

2010-01-07T15:12:00.000-08:00

Continuando con la sintaxis de Java Micro Edition, hoy vamos a hablar de una de las estructuras de datos que se usan mucho en programación: los arreglos. Para iniciar nuestro estudio nos remitimos a la WikiPedia, la famosa enciclopedia libre, dando clic aquí puedes entrar al artículo de los arreglos, lo leemos y nos damos una idea de lo que es un arreglo, con esto me evito repetir la definición para que hacerlo si está al alcance de la mano, me interesa más analizar los arreglos pero usando código Java como se ve enseguida.

Arreglos en Java
Es posible crear un arreglo declarando una variable como el siguiente ejemplo:

int A[ ] = new int[10];

El arreglo se llama “A” es de tipo entero y tiene 10 espacios o lugares para almacenar datos, la información que se puede almacenar resulta obvia puros números enteros.

Veamos otro ejemplo, imagine el lector que se desea almacenar la altura, en metros de 20 personas, la opción más sencilla es declarar un arreglo de 20 posiciones y ahí almacenar los datos, que declarar 20 variables para los 20 datos, ahí se ve el uso de los arreglos, la declaración para lo que se pide es así:

float altura[ ] = new float[20];

La variable se llama “altura” y es de tipo float porque una persona puede medir 1.70 metros otra 1.67 y así sucesivamente, como son valores con punto decimal se usa la variable float.

Un ejemplo más imagine que se requiere almacenar el nombre de 40 personas, para realizarlo se declara un arreglo de tipo String así:

String nombres[ ] = new String[40];

Acceso a los datos de un arreglo

El arreglo creado con sentencias como las anteriores, reservan espacio de memoria, por ejemplo el arreglo “A” de enteros visto anteriormente reserva 10 espacios de memoria para almacenar datos, esto se puede imaginar como 10 celdas así:

El arreglo se llama “A” un solo nombre ¿entonces como puedo diferenciar las 10 celdas que hay? Sencillo, usando un número llamado índice, así la primer celda tiene el índice 0 y la última el índice 9, ahora el arreglo lo podemos visualizar como se muestra en la figura:

Escritura de datos en el arreglo

Para escribir datos basta con colocar el nombre del arreglo y entre “[ ]” el número de índice, por ejemplo si deseo almacenar el número 20 en la posición cero escribo así:

A[0] = 20;

Si deseo almacenar el -30 en la posición 8 lo hago así:

A[8] = -30;

Si deseo el número 290 en la celda 3 y el 100 en la 6 lo haría con estas instrucciones:

A[3] = 290;
A[6] = 100;

Con lo anterior puedo visualizar el arreglo así:

Lectura de datos del arreglo

Para leer lo que tiene un arreglo basta con asignarlo a una variable, en este caso la variable debe ser de tipo entero, por ejemplo si se desea saber que dato tiene la celda 6 escribo así:

x = A[6];

Previamente se debió declarar “x” de tipo “int”, después de que se ejecute la instrucción anterior “x” tendrá el valor de 100, ya que ese valor estaba previamente almacenado en el arreglo.

Escritura de datos usando ciclos for

Generalmente la lectura y escritura de un arreglo, por la gran cantidad de datos que hay se realiza con un ciclo for (aunque puede ser cualquier estructura repetitiva, pero el ciclo for se ajusta más)

Por ejemplo si se desea almacenar en el arreglo “A” los primeros 20 números a partir de 0, se podría escribir el código siguiente:

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

A[ i ] = i;

}

Recuerde en el ciclo for “ i ” toma los valores de 0, 1, 2, 3… 20.

Bueno aquí vamos a dejar esta lección, en la siguiente vamos a usar los arreglos en un ejemplo completo con todo y video-tutorial para que vea el lector donde se puede declarar el código del arreglo.

Ejemplo #15 Como agregar imágenes y el comando de salir en el modo gráfico

2009-12-30T09:17:00.000-08:00

En el post pasado se vio como se agregan las imágenes en el modo gráfico y por otro lado en el ejemplo #14 “hola mundo en modo gráfico” se menciono que el comando “Exit” que se agrega en la clase Canvas, no funciona, se presiona el botón y no pasa absolutamente nada, la razón es bien simple, no hace nada por que no existe ninguna línea de código en el método correspondiente para que realice una acción cuando se presiona el comando, así que el objetivo de este post es aprender a agregar comandos desde la interfaz de bajo nivel, específicamente se muestra como agregar el comando de salir a un MIDlet que muestra una imagen, así que iniciemos.

Cambios al código Midlet
Recuerde que se requieren dos códigos fuente para crear las interfaces de bajo nivel:

• El Midlet
• La clase miCanvas que proviene de la clase Canvas

Ambos códigos ya fueron analizados anteriormente, pero cabe mencionar que en la documentación de la clase MIDlet se indica que si se desea salir del MIDlet para que se liberen los recursos usados en el teléfono celular se debe mandar llamar el método:

destroyAPP() y notifyDestroy(),

estos métodos le "dicen" al celular que el MIDlet se va a destruir para que se liberen los recursos usados, para mandarlos llamar se recomienda la creación de un nuevo método en el código para el MIDlet, un método llamado exitMIDlet así:

public void exitMIDlet() {
   destroyApp(false);
   notifyDestroyed();
}

Al ejecutarse el método se destruye el MIDlet de la memoria del celular completamente, el método se puede agregar en cualquier parte del código de la clase Midlet, más adelante muestro donde podría ir este código.

Otro cambio a la clase MIDlet es el siguiente. Como ya se mencionó en algún post anterior, para mostrar los gráficos se crea un objeto de la clase llamada miCanvas esto se realiza con la instrucción:

helloCanvas = new miCanvas();

Y con esta instrucción se ejecuta el código paint de la clase miCanvas y se muestra en el en la pantalla del celular:

Display.getDisplay(this).setCurrent(helloCanvas);

Con la anterior instrucción se puede decir que “el flujo de programa pasa del MIDlet a la clase miCanvas”, entonces, se tiene un pequeño problema porque si el flujo de programa esta en la clase miCanvas es imposible desde ahí mandar llamar el método exitMiDlet que está en la clase MiDlet. ¿Si me explique? O lo puedo ver con otras palabras: el comando salir se agrega en la clase miCanvas ¿Cómo podría entonces mandar llamar el método exitMIDlet, si este método está en la clase MIDlet? Ahora si se ve el problema ¿verdad?.

La solución es la siguiente, es posible enviar información entre clases, esto solo se logra por medio del constructor de la clase que recibe la información, así pues yo puedo enviar datos de la clase MIDlet a la clase miCanvas por medio del constructor de la clase miCanvas, el constructor se manda llamar cuando se crea el objeto, el objeto se crea en la línea mencionada arriba y que aquí vuelvo a escribir:

helloCanvas = new miCanvas();

Con la línea anterior se crea el objeto, lo que hace esta instrucción realmente es ejecutar el código que viene en el constructor de la clase miCanvas, justo ahí es posible enviarle información a la clase miCanvas, la información se enviá como parámetro entre los paréntesis del constructor.

¿Pero que información voy a enviarle? La respuesta es sencilla, se tiene que enviar un objeto de la clase MIDlet, para que con el objeto se pueda mandar llamar el método exitMIDlet, existe una palabra reservada en J2ME para pasar como parámetro el objeto de la clase actual, esta palabra es simplemente “this”, entonces la sentencia para crear el objeto es así:

helloCanvas = new miCanvas(this);

Se crea el objeto helloCanvas y aparte se envía una referencia al objeto de la clase MIDlet que inicio la ejecución del programa, ups espero haberme explicado.

Finalmente el código completo para la clase MIDlet incluyendo el método exitMIDllet queda así:

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
 * @author User
 */
public class Midlet extends MIDlet {
    miCanvas helloCanvas;
    public void startApp() {
        helloCanvas = new miCanvas(this);
        Display.getDisplay(this).setCurrent(helloCanvas);
    }

    public void pauseApp() {
    }

    public void destroyApp(boolean unconditional) {
    }

    public void exitMIDlet() {
        destroyApp(false);
        notifyDestroyed();
    }
}

Cambios a la clase miCanvas

La parte importante del código para esta clase se muestra enseguida (recuerde que este código lo genera NetBeans dar clic aquí si no recuerdas como se hace):

import javax.microedition.lcdui.*;
public class miCanvas extends Canvas implements CommandListener {
    /**
     * constructor
     */
    public miCanvas() {        
        try {
     // Set up this canvas to listen go command events
     setCommandListener(this);
     // Add the Exit command
     addCommand(new Command("Exit", Command.EXIT, 1));
        } catch(Exception e) {
            e.printStackTrace();
        }
    } 
    
    /**
     * Called when action should be handled
     */
    public void commandAction(Command command, Displayable displayable) {        
    }
}

Ahora vea el constructor, esté debe estar preparado para recibir la información que proviene de la clase MIDlet, en este caso lo que se envió fue el mismo Midlet, así que se debe estar preparado para recibirlo, esto lo realizamos agregando una variable entre los paréntesis del constructor así:

public miCanvas(Midlet m ) {        

  // código del constructor
}

Entoces la variable llamada “m” recibe una referencia real del MIDlet, ahora necesito asignarla a una variable para poder usarla por lo que agrego una llamada “mid” así:

Midlet mid;

Ahora simplemente le asigno el valor de “m” así:

mid = m;

El código parcial de la clase helloCanvas queda entonces así:

public class miCanvas extends Canvas implements CommandListener {
    Mildet mid;
 /**
 * constructor
 */
public miCanvas(Midlet m ) {        
     mid = m;
     // código del constructor
 }

Lo único que nos falta es mandar llamar el método para salir del midlet, esto se hace simplemente con la sentencia siguiente:

mid.exitMIDlet();

Esta sentencia se agrega en el método de la clase miCanvas que procesa los comandos y que NetBeans genera automáticamente, justo ahí se coloca la sentencia así:

public void commandAction(Command command, Displayable displayable) {        
  mid.exitMIDlet();
}

Como solo es un comando el que se tiene en el MIDlet es posible hacer lo anterior, cuando hay más de un comando se debe usar un if para identificar cuál comando se presionó pero en este ejemplo solo se tiene el comado de salir.

Bueno otro cambio que se hará es en el código que NetBeans genera para agregar el comando de salir, NetBeans coloca “Exit” nosotros vamos a colocar la palabra “Salir” el código queda así:

addCommand(new Command("Salir", Command.EXIT, 1));

Finalmente agrego el video tutorial, por si quedaron algunas dudas, el programa muestra cómo se agrega una imagen y el comando salir (ahora hice el video con el Sony Vegas y pues no se vio como yo lo deseaba, te recomiendo que lo veas en pantalla completa o desde el sitio de youtube dando clic aqui, mil disculpas)

Dibujo de imágenes en modo gráfico

2009-12-25T07:01:00.000-08:00

La lección de hoy mostrará como cargar una imagen para después desplegarla en la pantalla del celular, en el modo gráfico. Esto es particularmente importante, si en un futuro deseamos realizar animaciones o juegos para el teléfono.

He realizado pruebas en Java Micro Edition y soporta imágenes en los formatos más populares como JPG, PNG y GIF, dando clic aqui puedes ver como crear imágenes en la interfaz de alto nivel algo relativamente fácil, usando las interfaces de bajo nivel no lo es tanto, hay que hacerlo con código, unas pocas líneas se requiere para ello, tampoco nada del otro mundo así que iniciemos, haa se me olvida decir que todo este código debe ir en la clase que hereda de la clase Canvas (donde está el método paint, por si no lo recuerdas).

Paso 1. Declarar un objeto de la clase Image

En J2ME es posible hacer uso de la clase Image para crear objetos que almacenen toda la información de una imagen, para crear el objeto, recuerde que primero hay que declararlo, esto se realiza con la sentencia siguiente:

Image img

El objeto que se declara es llamado img, la sentencia generalmente se coloca justo al principio de la creación de la clase, así:

public class miCanvas extends Canvas implements CommandListener {
    Image img;
    /**
     * constructor
     */
    public miCanvas() {
        try { 
    // etc...

Paso 2. Crear la imagen usando el método createImage

Apenas se declaro el objeto con la sentencia anterior (esto significa que se reserva espacio en la memoria para el objeto img) ahora hay que crearlo realmente, esto se realiza por medio del método creteImage de la clase Image, la sentencia es bien simple como se verá enseguida y debe llevar entre “ “ la ruta de la imagen, así:

img = Image.createImage("/itesiPNG.png");

La imagen se llama itesiPNG y como se puede observar tiene el formato PNG. Por facilidad la imagen fue almacenada previamente en la ruta donde NetBeans crea el código fuente del programa de Java, esto se puede ver en la figura siguiente (recuerda que puedes dar clic en la figura para observarla mejor):

El código anterior generalmente se agrega en el constructor de la clase que hereda de Canvas, aquí lo reproduzco por si no te acuerdas cuál es el constructor:

public miCanvas() {
 try {
    img1 = Image.createImage("/itesiPNG.png"); // Se crea la imagen
   // Set up this canvas to listen tgo command events
    setCommandListener(this);
   // Add the Exit command
    addCommand(new Command("Exit", Command.EXIT, 1));
 } catch(Exception e) {
            e.printStackTrace();
 }
}

El siguiente paso es mostrar la imagen en la pantalla del celular.

Paso #3 Dibujar imagen

Para dibujar la imagen se hace uso del método drawImage, si alguno de ustedes fue curioso y se puso a practicar con la clase Graphics, ahí debió ver este método. El método tal y como lo muestra la documentación de J2ME es así:

La documentación del método indica que debe llevar cuatro párametros entre paréntesis, el primero de ellos es el objeto de la clase Image (en nuestro caso se llama img), el segundo es la coordenada x (por ejemplo 50) el tercero es la coordenada y (por ejemplo 50 también) para finalmente terminar con el parámetro que se llama Anchor o anclaje (por ejemplo Graphics.TOP | Graphics.LEFT), así el ejemplo quedaría:

g.drawImage(img, 50, 50, Graphics.TOP | Graphics.LEFT);

por supuesto que el método debe ser ingresado dentro del método paint() tal y como se observa enseguida:

public void paint(Graphics g) {
   g.setColor(0xFF, 0xFF, 0xFF); // se elige el color blanco de fondo
   g.fillRect(0, 0, getWidth(), getHeight());
   g.drawImage(img1, 50, 50, Graphics.TOP | Graphics.LEFT);    
}

Lo anterior dibuja la imagen a partir de las coordenadas (50, 50), se usa el fillRect para “borrar la pantalla” como se vio en el post pasado.

La figura siguiente muestra como se ve la imagen en el emulador con el código anterior:

Vamos a ver en detalle el último de los parámetros el llamado Anchor Points, para que quede bien claro.

Anchor Points

Voy a trazar un par de líneas que pasen por las coordenada (50, 50), para analizar los llamados Anchor Points (puntos de anclaje), y para ver bien que pasa con la figura voy a pintar el fondo de color amarillo para notar bien su tamaño, entonces voy a ejecutar el código siguiente:

public void paint(Graphics g) {
   g.setColor(0xFF, 0xFF, 0x00); // se elige el color amarillo
   g.fillRect(0, 0, getWidth(), getHeight());
   g.drawImage(img1, 50, 50, Graphics.TOP | Graphics.LEFT);
   g.setColor(0xFF, 0x00, 0x00); // se elige el color rojo para las líneas
   g.drawLine(0, 50, getWidth(), 50);
   g.drawLine(50, 0, 50, getHeight());
}

Que al ejecutarlo resulta:

La coordenada (50, 50) justo es donde se cruzan las líneas, el anchor point que se uso es:

Graphics.TOP | Graphics.LEFT

El anchor Point es el resultado de unir dos parámetros, uno es si la imagen estará arriba o debajo de las coordenadas:

• TOP
• BUTTOM

Y el otro es si está a la izquierda, a la derecha o centrada horizontalmente

• LEFT
• RIGTH
• HCENTER

Esos dos parámetros se unen con el operador lógico “ | ” or.

Pero que más claro que otro ejemplo, vamos a cambiar el Anchor Point ahora por lo contrario que el anterior, “abajo y a la derecha”

Graphics.BUTTOM | Graphics.RIGTH

entonces el código es así:

g.drawImage(img1, 50, 50, Graphics.BUTTOM | Graphics.RIGTH);

El resultado lo puedes ver en la siguiente imagen:

Recuerde que las coordenadas son (50,50) y a partir de ahí se dibuja la imagen dependiendo del punto de anclaje, ahora fue abajo y a la derecha, veamos otro ejemplo:

g.drawImage(img1, 50, 50, Graphics.TOP | Graphics.HCENTER);

da como resultado lo siguiente:

Bueno si lo deseas puedes seguir practicando esto de los Anchor Points yo aquí a cabo este post, por cierto los puntos de anclaje también se usan en el método drawString por si también deseas probarlos ahí.

Haa por cierto, Feliz navidad a todos¡¡¡

La clase Graphics

2009-12-11T18:08:00.000-08:00

Hoy vamos a hablar más acerca de la clase Graphics. Está clase me permite dibujar en pantalla, mostrar incluso imágenes y como se vio en el post anterior es posible mostrar textos. La clase Graphics se crea justo en el método paint() como se vio en la clase HelloCanvas del ejemplo pasado, este método lo reproduzco enseguida:

public void paint(Graphics g) {
 g.drawString("Hola mundo, en modo gráfico",0,0,Graphics.TOP|Graphics.LEFT);
}

Otra vez, la declaración del objeto de la clase Graphics es así:
Graphics g

Con la declaración anterior, por medio del objeto g, ya puedo usar los métodos de la clase, uno de estos métodos es

drawString

pero existen muchos métodos más basta con ver la documentación de la clase Graphics, para conocer algunos de sus métodos. La figura siguiente muestra algunos de ellos directamente de la documentación de J2ME (puedes dar clic en la imagen para verla mas grande).

Claro que para ver la documentación como se muestra en la imagen se debe tener instalado el SonyEricsson SDK, dando clic aquí ver el post para su instalación, por si todavía no lo tienes.

Método drawLine

Como se ve en la figura la clase Graphics tiene infinidad de métodos, ya conocemos uno el drawString, vemos otro:

drawLine

En la documentación dando clic en el método nos lleva a su descripción la cual es mostrada en la siguiente imagen:

La descripción nos dice que el método dibuja una línea entre las coordenadas (x1, y1) y ( x2, y2). Por ejemplo:

drawLine(0, 0, 100, 100);

Dibuja una línea de la coordenada (0,0) a la (100, 100), como se usa el método así:

public void paint(Graphics g) {
   g.drawLine(0, 0, 100, 100);
}

Para usar cualquier método de la clase Graphics, se debe hacer por medio del objeto esa es la razón de que se le agregue la g y el punto y todo lo anterior debe estar dentro del método paint. La figura siguiente muestra la línea en el emulador:

Note como en el emulador no se borran las letras, cuando lo programe físicamente en el celular ahí si se borraba todo y aparecía solo la línea. Más adelante vemos como cambiar eso, para que no aparezcan esas letras.

Método setColor

En la figura siguiente muestro el método setColor tal y como está en la documentación de J2ME:

Este método establece el color en términos de valores RGB (dando clic en el hipervínculo podemos ver la explicación desde la WikiPedia, e incluso se pueden ver los valores para los distintos colores), estos valores son pasados por medio de los parámetros por ejemplo:
.

Negro setColor(0, 0, 0)

Blanco setColor(255, 255, 255)

Este Si se vio el enlace desde la wikipedia está dice qué el color blanco es con el numero FF FF FF, esos valores están en hexadecimal, según dicen, es mejor manejarlos así, entonces el FF es igual al 255 en decimal. Por cierto si deseo escribirlo en hexadecimal también es posible en java usando el operador 0x, así quedaría el color blanco en hexadecimal

setColor(0xFF, 0xFF, 0xFF)

Los tres colores básicos se forman así:

Color      en decimal                en hexadecimal                           
Rojo     setColor(255, 0, 0)       setColor(0xFF, 0, 0)
Verde    setColor(0, 255, 0)       setColor(0, 0xFF, 0)  
Azul     setColor(0, 0, 255)       setColor(0, 0, 0xFF)

Combinando los valores RGB podemos obtener prácticamente cualquier color, la misma wikipedia nos da ejemplos de otros colores por ejemplo:

Amarillo setColor(0xFF, 0xFF, 0x00)

Purpura setColor(0x80, 0x00, 80)

Puedes ver más colores desde el artículo de la wikipedia si lo deseas.

Como hago uso del método, ya te lo has de imaginar, por ejemplo si deseo crear tres líneas dos horizontales y una vertical, una roja, otra verde y la otra azul, escribo dentro del método paint así:

public void paint(Graphics g) {

     g.setColor(0xFF, 0, 0);  // Se establece el color rojo
     g.drawLine(0, 50, 100, 50); // Se dibuja la primer línea horizontal
     g.setColor(0, 0xFF, 0);  // Se establece el color verde
     g.drawLine(0, 150, 100, 150); // Se dibuja la segunda línea horizontal
     g.setColor(0, 0, 0xFF);  // Se establece el color azul
     g.drawLine(100, 50, 100, 150); // Se dibuja la línea vertical
}

Al ejecutar el código se vería lo siguiente:

Método fillRect

La figura siguiente muestra la documentación de este método:

Dibuja un rectángulo relleno con el color actual, a partir de la coordenada (x,y) con un ancho y un alto especificado en los parámetros width y height. Por ejemplo:

public void paint(Graphics g) {
 g.setColor(0xFF, 0, 0);  // Se establece el color rojo
 g.fillRect(45, 60, 100, 100); // rectángulo relleno
}

Al ejecutar el código se muestra la figura siguiente

En este caso dibuja el rectángulo a partir de la coordenada (25, 60) con un ancho de 100 pixeles y con un alto también de 100 pixeles.

Ahora te toca a ti, nos llevaría mucho tiempo ver todos y cada uno de los métodos de la clase Graphics, son más de 20, así que no lo voy a hacer, más adelante usare algunos métodos y los explicaré pero hay muchos con los cuales tu puedes practicar, aquí les muestro como se hace, simplemente ver la documentación y a probar como se comporta, así que tu experimenta con los otros métodos.

Ancho y Alto de la Pantalla

Para finalizar este post, veré dos métodos que me permiten obtener el ancho y alto de la pantalla del celular en el modo gráfico:

getWidth(): Obtiene el ancho en pixeles de la pantalla disponible del celular

getheight(): Obtiene el alto en pixeles de la pantalla disponible del celular

Estos métodos se heredan a la clase Canvas por eso no tengo que crear ningún objeto, son métodos que puede usar directamente, así por ejemplo si deseo rellenar la pantalla con un color de fondo hago lo siguiente:

public void paint(Graphics g) {
     g.setColor(0xFF, 0, 0);  // Se establece el color rojo
     g.fillRect(0, 0, getWidth(), getHeight);
}

El resultado es el siguiente:

Se acostumbra iniciar el método paint con una llamada a ese par de instrucciones, esto con la finalidad de “borrar” toda la pantalla, se acostumbra el blanco pero puede ser el que cada quien desee.

Así por ejemplo si me piden dibujar una línea, un cuadrado sin rellenar, y un cuadrado relleno este sería el código:

public void paint(Graphics g) {
      g.setColor(255,255,255); // se establece el color blanco
      g.fillRect (0, 0, getWidth(), getHeight()); // "borra" la pantalla
      g.setColor(10,200,100);
      g.drawLine (0, 0, 100, 100);
      g.drawRect(90, 50, 30, 30);
      g.fillRect (50, 50, 30, 30);
}

Note como ya no se ve ninguna de las letras que aparecía antes, ahora si esta el área de dibujo libre, solo aparece lo que yo mande dibujar.

Aplicación de la programación de teléfonos celulares usando J2ME

2009-12-09T17:16:00.000-08:00

Ups por fin, terminamos los proyectos finales, ya voy a “postear” más seguido. Hoy les muestro una aplicación practica que se hizo aquí en el ITESI por los alumnos del Grupo de Sistemas Digitales de la carrera de Ingeniería electrónica.

Proyecto: Sistema Electrónico de Identificación por Radio-Frecuencia

Objetivo

Desarrollar un Sistema de hardware y software capaz de identificar y almacenar identificación relevante a la crianza de ganado usando la identificación por radiofrecuencia (RFid). Cabe mencionar que el seguimiento se realiza por un MIDlet programado en un teléfono celular.

La figura siguiente muestra un diagrama a bloques del sistema que se desarrollo.

No voy a entrar en detalle sobre la descripción de cada uno de los bloques, pero el sistema funciona agrandes rasgos así:

1.- Una etiqueta de radiofrecuencia se coloca en el ganado bovino (como si fuera un arete como los que comúnmente se usan) pero la etiqueta tiene un chip especial que contiene un número.

2. Al acercar el lector de RFid, se detecta el número de la etiqueta de RFid que es irrepetible para cada bovino.

3.- El lector de RFid envía el número de etiqueta a la tarjeta DLP-TXRX que se encarga de pasarlo a una PC via puerto USB.

4.- La PC recibe en un programa creado en Java Estándar Edition (J2SE) el número de etiqueta y se lo transfiere (con el mismo programa) a un módulo Bluetooth conectado al puerto USB de la PC (incluso se hicieron pruebas con PCs que tienen internamente un módulo Bluetooth y el sistema igual funciono muy bien).

5.- El teléfono celular recibe el número de etiqueta vía Bluetooth con un programa creado en Java Micro Edition y registra los datos del bovino.

En el video siguiente se muestran más detalles de los componentes usados y del programa en el celular.

Enseguida se muestran algunas fotos del proyecto.

La figura siguiente muestra la fotografía de las etiquetas de RFid y del lector de RFid, estos fueron adquiridos desde la compañá Parallax

En la figura siguiente se ve el módulo USB que fue comprado a la compañía DLP-Design

Finalmente se ve el programa creado para el celular, obviamente fue programado con Java Micro Edition usando el NetBeans.

En la figura se muestra cuando se inicia la busqueda de dispositivos Bluetooth, esto también fue programado en J2ME.

Aqui muestra la lista de dispositivos Bluetooth encontrados, se elije uno y se conecta para poder recibir el dato de la etiqueta

Enseguida se muestra cuando se detecto la etiqueta y se procede a registrar los datos del bovino.

Bueno aqui dejo este post, solamente fue con fines demostrativos en el siguiente post seguiremos con las lecciones de java.

Ejemplo #14 Hola Mundo en modo gráfico

2009-11-11T17:34:00.000-08:00

Bueno por fin se va a explicar en este post como se realiza un ejemplo completo usando las interfaces de bajo nivel del celular o también conocido como modo gráfico. Se va a realizar el clásico ejemplo “hola mundo” así que comencemos.

Paso 1. Crear el MIDlet

Este paso ya se analizó, dando clic aquí se puede ver el post, casi al final se indica como crear el MIDlet desde NetBeans, puedes ver el post si no te acuerdas del procedimiento. El resultado de haber realizado este paso es mostrado en la figura siguiente:

Paso #2 Crear la clase que deriva de Canvas

El siguiente paso es crear la clase que hereda de la clase Canvas, este paso también ya se analizo en un post anterior, dando clic aquí puedes acceder a el. También ahí vienen los pasos requeridos para crear la clase llamada HelloCanvas, el resultado de este paso es mostrado en la imagen siguiente:

Paso #3 Agregar el “Hola mundo” a la clase HelloCanvas

El siguiente paso es con la clase HelloCanvas, identificamos el método paint(), y justo en el método drawString, se modifican dos parámetros, uno es el string que se va a dibujar, el “Sample Text” lo modifico por “Hola Mundo, en modo Grafico” y el otro parámetro es el de las coordenadas las que usare son (20, 100) entonces la instrucción queda así:

g.drawString("Hola Mundo en modo Grafico", 50, 100,Graphics.TOP|

Graphics.LEFT);

Paso #4 Crear el objeto de la clase HelloCanvas

Existen dos códigos, dos archivos de java, generados hasta el momento:

• El MIDlet

• La clase HelloCanvas

La pregunta es: ¿como los relaciono? ¿Cómo puedo usar el método paint para que se dibuje el mensaje en la pantalla del celular?, recuerde el celular sigue los métodos que están en el MIDlet, esto significa que el código del MIDlet es el que se ejecuta primero, pero el método de dibujo está en la clase HelloCanvas, si se ve el problema, como puedo desde el MIDlet llamar el método paint.

La solución es sencilla y quizá muchos ya lo saben, recuerde las clases son plantillas para crear objetos, HelloCanvas es una clase, entonces es posible crear un objeto de la clase HelloCanvas y usarlo en la clase MIDlet, déjenme repetirlo, se puede crear un objeto de la clase HelloCanvas y usarlo desde el MIDlet.

Para crear un objeto, primero hay que declararlo, le llamaramos myCanvas, para hacerlo simplemente se coloca el nombre de la clase seguido del nombre del objeto, así:

HelloCanvas miCanvas;

Lo anterior es la declaración, para realmente crearlo se usa el comando new así:

miCanvas = new HelloCanvas();

Después de esa instrucción el objeto llamado miCanvas, está completamente creado y listo para usarse.

Solo falta un detalle, para mostrar cualquier cosa en la pantalla del celular se usa la clase Display, nunca se ha visto en este blog, por que como se recordara NetBenas creaba todo el código incluyendo los objetos de la clase Display, la siguiente instrucción:

Display.getDisplay(this).setCurrent(miCanvas);

Permite dibujar lo que esté en el método paint de la clase Canvas, la clase Display representa el hardware, la pantalla del celular, para acceder a esta pantalla se usa el método getdisplay(this) se usa el this, para indicar que el MIDlet actual es el que se envía como parámetro, finalmente el método setCurrent(HelloCanvas) es usado para indicar que la pantalla actual será la definida por el objeto miCanvas, bueno en resumen el código queda así:

public class Midlet extends MIDlet {
   HelloCanvas miCanvas
   
   public void startApp() {
       miCanvas = new HelloCanvas();
       Display.getDisplay(this).setCurrent(HelloCanvas);
   }
   public void pauseApp() {
   
   }
   public void destroyApp(boolean unconditional) {
   
   }
}

Y listo al ejecutar el código se mostrará en la pantalla el mensaje “hola mundo, en modo gráfico”. Para que quede más claro y lo puedas hacer mucho más fácil se muestra el video tutorial completo para este ejemplo, tal y como se acostumbra en el blog.

En este caso no voy a anexar el código fuente hasta la siguiente entrada, ya que se va a modificar por que el comando exit no funciona como lo puedes ver en el emulador.

La Clase Canvas Parte II

2009-10-29T14:05:00.000-07:00

En el post anterior aprendimos a crear una clase que hereda de la clase Canvas, NetBeans crea el código, en este post se va a analizar el código generado. En primer lugar está la definición de la clase la cual ya se hablo mucho en el post anterior, aquí se reproduce:

Public class HelloCanvas extends Canvas implements CommandListener {

//Aqui va el código generado por NetBeans

}

Esta clase contiene varios métodos generados por NetBeans como ya se mencionó, los cuales se analizan de una forma un tanto superficial porque hay código que no interesa ver en detalle, al menos no ahora pero que NetBeans lo agrega, asi que iniciemos.

Constructor de la Clase HelloCanvas

No se había mencionado nunca en este blog, pero una clase consta de atributos y métodos pero también lleva un método especial llamado constructor.

El nombre del constructor es igual al nombre de la clase, generalmente se usa para inicializar los objetos con valores iníciales, recuerde todo el código analizado en este post, es creado por NetBeans, en el caso del constructor su código generado es el siguiente:

public HelloCanvas() {
  try {
     // Set up this canvas to listen to command events
     setCommandListener(this);
     // Add the Exit command
     addCommand(new Command("Exit", Command.EXIT, 1));
  } catch(Exception e) {
     e.printStackTrace();
  }
 }

Hay mucho código que no es el momento de explicar en detalle todavía, por ejemplo la pareja de instrucciones:

Try {

}
Catch (exeption e) {

}

Sirven para manejar las llamadas excepciones, esto es código que puede lanzar un error en tiempo de ejecución, no nos interesan detalles de esto ahora, recuerde nos interesa realizar el primer ejemplo con interfaces de bajo nivel, así que por lo pronto no diremos más de estas instrucciones

Además el constructor también lleva las siguientes sentencias:

// Set up this canvas to listen to command events
  setCommandListener(this);
// Add the Exit command
  addCommand(new Command("Exit", Command.EXIT, 1));

Con comentarios NetBeans nos explica cada instrucción, en resumen, agrega un exitCommand al Canvas, así al ejecutar el código aparece en la sección de comandos un botón que puede servir para salir de la ejecución, antes no me preocupaba por el código puesto que yo solo arrastraba y soltaba el comando, pero recuerde al usar la clase Canvas hay que hacer todo con código. Entonces el código anterior agrega exitCommand y con la instrucción: setCommandListener deja listo al Canvas para “escuchar” los comandos, en otras palabras para detectar cuando se presiona el exitCommand.

El método paint

Otro método de la clase HelloCanvas es el método paint, se usa para dibujar en el Canvas y mostrarse en la pantalla del celular, en este método se pueden dibujar líneas rectángulos, imágenes etc. pero esto solo se puede hacer por medio de la clase Graphics. Vea el código que genera NetBeans de este método:

public void paint(Graphics g) {
   g.drawString("Sample Text",0,0,Graphics.TOP|Graphics.LEFT);
}

El método lleva entre ( ) lo siguiente:

Graphics g

Esa sentencia crea un objeto de la clase Graphics, el objeto se llama g.

La clase Graphics

La clase Graphics posee todos los métodos necesarios para dibujar en pantalla, mostrar gráficos y mostrar textos. Recuerde, g es el objeto de la clase Graphics, con el objeto creado se pueden usar los métodos de la clase. Por cierto, la clase Graphics tiene muchísimos métodos que me permiten dibujar en el Canvas, como se verá después, por lo pronto entre estos métodos está el método drawString(), que es el que se muestra en el método paint como se ve en la sección anterior.

El método se llama drawString y sirve para dibujar una cadena de caracteres dentro del Canvas, La figura siguiente muestra la descripción de cada parámetro del drawString:

El texto “Sample Text” es el que aparece en la pantalla del celular, después siguen las coordenadas de ubicación del texto que en este caso es (0, 0), después sigue el punto de referencia para situar el texto, en este post no nos interesa ese punto de referencia, luego se discute más a detalle.

Por cierto J2ME divide la pantalla del celular en puntos denominados pixeles el primer punto se ubica en la coordenada (0, 0), la figura siguiente muestra el sistema de coordenadas de Java Micro Edition:

Bueno después de los detalles sigamos con el código que genera NetBeans para la clase HelloCanvas

Métodos para detectar eventos relacionados con las pulsaciones de una tecla

Siguiendo con el código de la clase HelloCanvas se tienen los siguientes métodos en la clase:

protected  void keyPressed(int keyCode) {
}
protected  void keyReleased(int keyCode) {
}
protected  void keyRepeated(int keyCode) {
}

La siguiente tabla describe que hace cada método:

   Método                            Descripción                 
keyPressed()              Se ejecuta cuando se presiona una tecla
keyReleased()             Se ejecuta cuando se suelta una tecla
keyRepeated()             Se ejecuta cuando se deja presionada una tecla

Métodos para detectar eventos relacionados con apuntadores

También la clase Canvas tiene métodos para detectar los eventos relacionados con

apuntadores o mouse estos los genera Netbeans y son:

protected  void pointerDragged(int x, int y) {
}
protected  void pointerPressed(int x, int y) {
}
protected  void pointerReleased(int x, int y) {
}

Cabe aclarar que estos métodos solo son validos en dispositivos que lo soportan, no todos los celulares tienen un apuntador, asi que no se ven más detalles de estos métodos.

Metodo para procesar comandos

El último método de la clase es mostrado en seguida:

public void commandAction(Command command, Displayable displayable) {

}

Cuando se presiona un comando ya sea un okCommnad o un exitCommand se invoca o se ejecuta el método commandAction(), entonces este método me sirve para procesar los comandos.

Bueno ahora si por fin se tienen todos los medios para realizar un ejemplo completo que muestre el mensaje "Hola Mundo" usando Canvas, pero esto lo dejamos para el siguiente post.

La Clase Canvas

2009-10-22T13:02:00.000-07:00

Introducción

La siguiente figura muestra la ya conocida jerarquía de clases de Java Micro Edition. Ahí se ve claramente las clases que se han usado a lo largo de este blog, con las cuales se crean programas con las llamadas interfaces de alto nivel.

Vea la figura, también está la clase Canvas usada para crear las interfaces de bajo nivel, desgraciadamente esta clase se maneja diferente a lo visto hasta ahorita en el blog, la clase Canvas, NO SE PUEDE ARRASTRAR Y SOLTAR, como las clases que crean interfaces de alto nivel vistas en los ejemplos de este blog, el tratamiento es diferente como se ve a continuación, así que comencemos a analizarla.

La clase Canvas

La clase Canvas es usada para crear las interfaces de bajo nivel. Esta clase contiene los mecanismos necesarios para usar la pantalla del celular como una zona de dibujo, se puede dibujar cualquier cosa en la pantalla, esta clase es usada por los desarrolladores de juegos para celulares porque permite tener control total sobre lo que se dibuja en la pantalla del celular, se tiene un control incluso sobre cada punto de la pantalla (por cierto cada punto en la pantalla es llamado pixel).

Con objetos de esta clase se tiene acceso directo a la pantalla del celular la cual tiene una área de dibujo y un área de comandos, como se observa en la figura siguiente:

La clase Canvas fue diseñada por los creadores de Java como una CLASE ABSTRACTA esto según las reglas de la programación orientada a objetos significa que no se pueden crear objetos (o instancias) a partir de ellas.

Recordemos un poquito los conceptos de la programación orientada a objetos, una clase contiene la definición de atributos y métodos que hacen algo, por ejemplo, la clase TextField, que se ha usado en muchos ejemplos, contiene el método que también ya se ha visto muchas veces: getString(). Este método lo que hace es obtener los caracteres que se han ingresado en el TextField, y los asigna a una variable.

Veamos, La clase se llama TextField, uno de sus método se llama getString(), pero recuerde, una clase es una plantilla para crear objetos, entonces para usar el método getString(), Yo necesito un objeto (o instancia) de la clase, el objeto es creado automáticamente por NetBeans, y como se ha visto en los ejemplos Netbeans le asigna el nombre de textField, si hay mas Netbeans les llama textField1, textField2, etc. Estos objetos NetBeans los genera yo no me preocupo por crearlos, yo lo único que hacía era escribir:

textField.getString();

para obtener el texto ingresado en el textField.

Otra vez, la clase se llama TextField, uno de sus métodos se llama getString(), para usarlo se requiere un objeto o instancia llamado textField, pues la clase Canvas no acepta la creación de instancias, entonces yo no puedo hacer uso de sus métodos, por ejemplo la clase Canvas tiene un método llamado paint( ). Este método me permite realizar dibujos en la pantalla del celular, pero no lo puedo usar por que la clase Canvas es abstracta, entonces estamos en un problema, por un lado necesito de la clase Canvas para dibujar en la pantalla, pero por otro lado no puedo usar la clase por que es abstracta. Pero todo se soluciona bien simple, como a continuación se explica.

Creación de clases en java

Para solucionar el problema de las clases abstractas, se crea otra clase por ejemplo una clase llamada miCanvas o el nombre que se desee.

El código para crear una clase en java es bien simple, así:

class miCanvas {

// aqui van los atributos y métodos de la clase

}

Esa es la sintaxis para crear clases en java: la palabra reservada class, el nombre de la clase y las { }.

Otro ejemplo es:

class HelloCanvas {

}

La clase se llama HelloCanvas, recuerde ese nombre yo se lo asigno como yo lo desee.

Vemos, por un lado se tiene la clase HelloCanvas (o como se llame) y por otro lado se tiene la clase Canvas, obviamente no existe relación alguna entre ellas, son entidades diferentes, para relacionarlas se usa la HERENCIA, la herencia se agrega con la palabra “extends” de la siguiente forma:

class HelloCanvas extends Canvas {

}

Significa que la clase HelloCanvas, hereda todos los métodos y atributos de la clase Canvas, en otras palabras, con la herencia ya puedo usar el método paint() de la clase Canvas, porque ya hay una relación con la clase miCanvas. ¿Me explique?

Recuerde, la clase Canvas no permite crear instancias a partir de ella, pero la clase miCanvas creada por nosotros si permite crear objetos, por que no es abstracta, y como llevan una relación de herencia, puedo usar el método paint() para dibujar en la pantalla cualquier gráfico.

Otra cosa, la clase Canvas es “public” por eso yo puedo agregar la herencia desde la clase miCanvas, por lo que se recomienda que las clases creadas por nosotros sean públicas también, para crearlas públicas simplemente anteponga la palabra “public” así:

public class HelloCanvas extends Canvas {

}

“public” significa que la clase es pública y puede ser usada desde otra clase o desde otro paquete de clases.

Creación de la clase HelloCanvas desde NetBeans

Para crear la clase HelloCanvas desde NetBeans, primero se debe crear un proyecto, déspues se pueden seguir dos opciones similares a las del post anterior:

1. Desde el menú de NetBeans presionar:

File> New file…

Al hacerlo aparece el cuadro de dialogo para crear un nuevo archivo, ahí se elije como en la figura siguiente:

2. Otra opción para crear la clase HelloCanvas, es dando clic derecho en el proyecto que se creó y eligiendo New y luego la opción MIDP Canvas, tal y como se observa en la figura siguiente:

Cualquiera de las dos opciones anteriores me lleva a la pantalla siguiente para asignar el nombre a la clase:

Simplemente se da clic en el botón de Finish, para que termine la creación de la clase HelloCanvas, al proyecto se le agrega el archivo llamado HelloCanvas.java, al dar doble clic en el nombre, esté se abre en la pantalla del netBeans apareciendo el código de la clase HelloCanvas como lo muestra la figura siguiente:

Vea el código que genera NetBeans para la clase HelloCanvas, vea la definición de la clase, al iniciar el código se puede ver, es así:

Public class HelloCanvas extends Canvas implements CommandListener {

// Aquí va el código generado por NetBeans

}

Es exactamente lo que mencionamos arriba más “implements CommandListener”. Esa instrucción permite que el celular detecte los exitCommand, o los okCommand, nunca se había visto esto porque, en los ejemplos realizados NetBeans generaba automáticamente esas instrucciones.

No se va a hablar mucho del “implements” nos llevaría un post completo, ahorita no me interesa los detalles, basta con decir que sirve para detectar los comandos en el celular.

Hasta aqui le vamos a dejar hoy, ya casi se acaba la teoria, nos falta analizar el código que generó NetBeans en la clase HelloCanvas y finalmente enlazar el código del MIDlet con el código de la clase HelloCanvas, para crear el primer programa usando las interfaces de bajo nivel, les ruego paciencia.

Ciclo de vida de un MIDlet

2009-10-19T23:14:00.000-07:00

Introducción

Todos los 13 ejemplos completos vistos en este blog han sido creados usando, Form, TextField, StringItem, List, etc. objetos usados para crear las interfaces de usuario, en Java ME, las interfaces creadas con esos objetos se les conoce como Interfaces de alto nivel.

Pero aquí hacemos un paréntesis, lo fuerte de Java Micro Edition no son las interfaces de alto nivel, y los programas que se pudieran realizar con ellas, lo fuerte de java es la programación de juegos, es el campo donde Java ME ha tenido el mayor éxito, vea su celular ¿Cuántos juegos tiene? Pues la mayoría de esos juegos son programados en java, para programarlos se requiere tener control completo de prácticamente cualquier punto de la pantalla del celular, esto se le conoce como programación de interfaces de usuario de bajo nivel.

“El blog que te enseña a programar teléfonos celulares” no estaría completo si no enseña la programación de bajo nivel. Justo el post de hoy y los subsiguientes hablaran de este tipo de programación, incluso es más interesante (bueno a mi me parece) este tipo de programación que lo que se ha visto ahora, así que si, los ejemplos anteriores les han parecido interesantes pues ahora los ejemplos que vienen les gustarán más ya lo verán. Pero antes hay que ver algo de teoría :(

Ciclo de vida de un MIDlet

Los 13 ejemplos completos que se han visto en el blog tienen un ciclo de vida, nunca les había mencionado esto, pero todos, absolutamente todos los programas de Java Micro Edition, siguen ese ciclo de vida, nosotros no nos percatamos de ello porque el ciclo de vida del MIDlet, lo maneja el dispositivo donde se está ejecutando, en la mayoría de los casos un teléfono celular.

El ciclo de vida de un MIDlet consta de tres estados

• Pausa

• Activo

• Destrucción

La figura siguiente muestra un diagrama de estos tres estados:

Descripción del ciclo de vida

Debe quedar claro que el ciclo de vida del MIDlet es gestionado por el sistema operativo del teléfono celular. Cuando se carga el archivo JAR al celular el sistema operativo del teléfono detecta que es un MIDlet y pregunta si deseas iniciarlo, al aceptar es cuando inician los estados anteriores.

Primero el MIDlet se coloca en pausa, un instante después el sistema operativo hace que el MIDlet pase al estado activo, justo es cuando se manda llamar un método llamado startAPP(), en este estado, se muestra la interfaz de usuario el Form, los StringItem o los TextField o lo que lleva la aplicación.

El MIDlet en el estado activo se queda haciendo lo que se le programo. Pero puede haber eventos externos que interrumpan al MIDlet, por ejemplo, si se recibe una llamada cuando se está ejecutando el MIDlet este se coloca en pausa llamando al método pauseAPP (por eso en la figura se ve una flecha de regreso al estado de pausa) y pues el usuario puede contestar la llamada y después volver a regresar al MIDlet, finalmente cuando el usuario desea salir del MIDlet es cuando este se destruye de la memoria y es cuando pasa al estado de destrucción y se liberan los recursos ocupados por él.

Vuelvo a repetir, estos estados los gestiona el sistema operativo del celular, yo no tengo nada que ver así que estrictamente hablando el ciclo de vida del MIDlet no me importa  o ¿acaso nos ha importado ya después de haber realizado 13 ejercicios completos desde que inicio el blog? Entonces ¿porque lo vemos?, quizá se estén preguntando, la razón es sencilla si quiero programar las interfaces de bajo nivel, los gráficos y en un futuro los juegos necesito hacer uso de los métodos involucrados en los ciclos de vida del MIDlet.

Estructura más básica de un midlet

Regresemos a la figura anterior, cuando se lanzan cada uno de los estados, se ejecutan también los métodos que ahí se indican y que aquí los vuelvo a escribir:

• startAPP()

• pauseAPP()

• destroyAPP()

Esos métodos son parte del código del MIDlet, en todos nuestros ejemplos que se han realizado, estos métodos son generados por el NetBeans cuando se crea el proyecto para un MIDlet nuevo, por eso yo ni me preocupaba por ellos porque el NetBeans los genera automáticamente, si lo deseas puedes ver el código de alguno de los ejemplos que hayas realizado, en algún lado puedes identificar esos métodos.

NetBeans genera mucho código automáticamente para crear un MIDlet, este código generado me permite simplemente arrastrar y soltar elementos o comandos desde la vista de flujo, pero es posible crear un MIDlet con muy poquito código, el listado que a continuación se muestra crea un MIDlet que no hace absolutamente nada, pero contiene los elementos más básicos que debe tener el MIDlet.

import javax.microedition.midlet.*;

import javax.microedition.lcdui.*;

public class Midlet extends MIDlet {

public void startApp() {

}

public void pauseApp() {

}

public void destroyApp(boolean unconditional) {

}

Ahora se procede a analizar el código, por ejemplo las siguientes instrucciones

import javax.microedition.midlet.*;

import javax.microedition.lcdui.*;

Sirven para poder usar la gran cantidad de clases ya diseñadas por los creadores de Java, por ejemplo las clases que ya se han usado en los programas como la clase TextField, StingItem, CohiceGroup etc. están definidas dentro del paquete de clases: javax.microedition.lcdui.*; por eso si yo las voy a utilizar en mi programa debo importar ese paquete de clases, otra vez lo repito en nuestros ejemplos no se hizo la importación por que NetBeans lo realiza por nosotros, cuando creamos el proyecto.

Después de importar las librerías o paquetes, viene la declaración de la clase para crear un MIDlet, el código es así:

public class Midlet extends MIDlet {

}

Recuerde, en java todo absolutamente todo es o proviene de una clase, así que un MIDlet no es la excepción, para su creación se crea una clase, en este caso la clase es llamada Midlet (class Midlet), es de tipo “public”, el echo de que sea public significa que se puede acceder a ella desde otras clases, pero estos conceptos ahorita no nos interesan, en su momento se detallaran más.

Igual pasa con la palabra “extends”, que en java significa herencia (luego se verá con más detalle). La herencia significa que la clase Midlet, hereda todos los atributos y métodos de la clase MIDlet, esto es por regla general, los creadores de Java fueron bien claros, todos absolutamente todos los MIDlets desarrollados por los usuarios tienen que heredar de la clase base, la clase MIDlet. En pocas palabras si yo no defino el MIDlet así no funciona nada, es la regla, así está diseñado el lenguaje y pues nosotros que apenas iniciamos nos apegamos a esas reglas, a esa sintaxis aun cuando todavía no me quede claro la herencia o las clases públicas, más adelante se entenderán.

Después de declarar la clase vienen los métodos, el primero es así:

public void startApp() {

}

Ese es el método que se ejecuta cuando el sistema operativo del celular pase al MIDlet del estado de pausa al estado activo. Por regla general este método se agrega siempre, lleve o no lleve código, bueno y también los otros métodos: pauseAPP y destoyAPP(), si no los agrego al código se tendrá un error de compilación, el porqué tienen que ir a fuerzas, no nos interesa por el momento, nos llevaría un buen rato la explicación y no es el momento, por lo pronto yo me conformo con saber que se tienen que agregar y listo.

Como crear un MIDlet con el código básico desde NetBeans

Desde NetBeans es posible crear un MIDlet con el código base, y esto lo hacemos porque ahora para los ejemplos que siguen nos interesan las interfaces de bajo nivel, así que simplemente necesitamos el código básico para ello, para obtenerlo, basta con seguir los pasos siguientes:

Paso 1 crear un nuevo proyecto

El primer paso es crear un nuevo proyecto desde NetBeans, pero ahora se hace lo que indica la figura:

No se selecciona el HelloMidlet, los 13 ejemplos si lo hacían, recuerde por lo pronto no nos interesa la interfaz de alto nivel, aunque en un futuro vamos a mezclar las dos he¡¡ pero por lo pronto no.

Lo que se muestra en la figura es lo único diferente que se realiza con respecto a los 13 ejemplos anteriores, con eso basta para que NetBeans no genere el código automáticamente

Paso 2 Agregar el MIDlet al proyecto

Con lo anterior se crea el proyecto para NetBeans pero sin código alguno así que podemos seguir dos caminos que nos llevan a la creación del archivo más básico de java:

1. Desde el menú de NetBeans presionar:

File> New file…

Al hacerlo aparece el cuadro de dialogo para crear un nuevo archivo, ahí se elije como en la figura siguiente:

2. Otra opción para crear el archivo más básico es dando clic derecho en el proyecto que se creó y eligiendo New… y luego la opción MIDlet, tal y como se observa en la figura siguiente:

Cualquiera de las dos opciones anteriores me lleva a la pantalla siguiente para asignar el nombre al MIDLet

Por defaul viene el nombre del MIDlet como Midlet si lo deseamos se deja así y simplemente se da clic en el botón de Finish, para que termine la creación, al proyecto se le agrega el archivo llamado Midlet, esté se abre en la pantalla del netBeans pareciendo el código más básico para un MIDlet como lo muestra la figura siguiente:

Eso es todo lo del post de hoy, ya son las 12:46, creo que es hora de dormir, en la siguiente entrada realizaremos el clásico ejemplo del Hola mundo, versión gráfico, o sea usando la interfaz de bajo nivel.

Estructuras de Repetición: Ciclo While y Ciclo Do-while

2009-10-14T22:42:00.000-07:00

Seguimos viendo más sintaxis de java. Hace varias entradas del blog se inicio con las estructuras de repetición, específicamente con el ciclo for, pero existen otras, hoy vamos a ver dos más.

Ciclo While

Una estructura de repetición permite repetir una o varias instrucciones un determinado número de veces. El ciclo “while” repite las instrucciones “mientras” la condición de terminación sea verdadera, si es falsa se termina el ciclo y se pasa a la siguiente instrucción. Su sintaxis se muestra con un ejemplo:

     x = 0; // Inicialización de la variable de control
     while (x <10) {  // condición, repite mientras x sea < 10
         // Aquí van las instrucciones que se repiten
         x++; // Incremento de la variable de control
     }

Este ciclo requiere de una variable de control, esta es la encargada de indicar si se siguen repitiendo las instrucciones o ya no, en el ejemplo se llama “x” pero puede ser cualquier nombre de variable, generalmente es de tipo entero y se inicializa en 0, aunque esto no es obligatorio, puede ser de otro tipo o puede inicializarse con otro valor diferente a cero, depende del ejercicio que haga, pero en este ejemplo se inicializa en 0 con la instrucción:

x = 0;

Después sigue la palabra reservada “while” que significa “mientras” y un paréntesis donde se escribe la condición de terminación del ciclo, después se abre la { que agrupa el total de instrucciones a repetir, en el ejemplo el código del que se habla es este:

        while (x <10) {

        }

En este caso la condición de terminación es:

x < 10

Lo que significa que el ciclo se va a repetir “mientras” x sea menor a 10, cuando x es mayor a 10 se termina el ciclo y se siguen las instrucciones que van después de la }.

Después se ingresan las instrucciones que se van a repetir y antes de terminar el ciclo se debe incrementar la variable de control, esto es:

x++

Sin ese incremento no se terminaría nunca el ciclo, porque entonces la x nunca sería mayor a 10. Bueno eso es todo, lo del ciclo while por supuesto que todo se aclara más con ejemplos, así que iniciemos:

Problema #1

Realizar el segmento de código en Java que sume los primeros 50 números positivos, mostrar el resultado en un stringItem. Usar el ciclo while.

Solución

Como se indica arriba, todo inicia con la variable de control, hay que inicializarla en 0, como se van a sumar los números se requiere de otra variable, la llamaremos suma, también se inicia en 0. La inicialización queda entonces así:

        x = 0;
        suma = 0;

Enseguida va la palabra reservada “while” junto con la condición de terminación, en este caso se desea sumar los primeros 50 números positivos, entonces se requiere un ciclo de 0 a 50, la condición de terminación es pues x <= 50, el código seria:

        while (x <= 50) {

        }

La variable de control debe incrementarse dentro del ciclo, esta inicia en 0, luego se incrementa a 1, 2, 3, etc., hasta 50, así que basta con una instrucción como esta para acumular la suma cada que x toma un valor:

suma = suma + x;

Despues se debe incrementar la variable de control, usando la instrucción de incremento:

x++

Para mostrar el resultado se usa el método setText del Stringitem. Finalmente el código completo seria:

        x = 0;
        suma = 0;
        while (x <= 50) {
           suma = suma + x;
           x++;
        }
        stringItem.setText(“la suma de los primeros 50 números es : “ + suma);

Ciclo Do-While

Este ciclo es idéntico al anterior, se repiten las instrucciones “mientras” la condición es verdadera, la diferencia es que la condición de terminación se evalúa hasta el final, la sintaxis se muestra con un ejemplo.

       x = 0;  // Inicialización de la variable de control
       do {
           // aquí van las instrucciones que se repiten
           x++;  // Incremento de la variable de control
       } while ( x<10)   ;  // evaluación de la condición de terminación

Igual que el ciclo anterior todo empieza con la inicialización de la variable de control, en 0.

x = 0;

Después se escribe la palabra reservada do con una { que junto con la otra } agrupan las instrucciones que se repiten, justo antes de cerrar con la } se debe incrementar la variable de control con la instrucción ya conocida:

x++

Después de } se agrega el while y la condición que en este caso es x < 10, entonces en este caso el ciclo se estará repitiendo “mientras x sea menor o igual a 10”.

A continuación se muestra el mismo ejercicio que el ciclo anterior.

Problema #1

Realizar el segmento de código en Java que sume los primeros 50 números positivos, mostrar el resultado en un stringItem. Usar el ciclo do-while

Solución

Como se indica arriba, se inicializan las variables con el código siguiente:

           x = 0;
           suma = 0;

Enseguida se abre el ciclo con la instrucción

do {

En el cuerpo del ciclo van las instrucciones para sumar los números y el incremento de la variable de control:

           suma = suma + x;
           x++

Al final va la palabra while junto con la condición de terminación, así:

} while ( x <= 50);

La sentencia finaliza con ; el código completo es:

                 suma = 0;
                 x = 0;
                 do {
                     suma = suma + x;
                     x++;
                 } while ( x<= 50)   ;
                 stringItem1.setText(" la suma es:" + suma);

Bueno se presenta en esta entrada dos ciclos más, solo se ve un ejemplo pero a lo largo de este blog se presentarán muchos más.

¿Cual ciclo elegir?

Como ya se vio, existen tres tipos diferentes de estructuras de repetición, ¿cual usar?, depende de la aplicación, del problema que se desea resolver, pareciera que el ciclo for es más fácil de usar, y si lo es, por facilidad se recurre a el, pero los otros ciclos tienen sus ventajas sobre el for, una de ellas es que puedo evaluar dos o más condiciones, cosa que con el for resulta imposible, en conclusión la elección del ciclo depende del programa que se desea solucionar, pero esto con la practica, realizando programas y mas programas uno mismo sabrá cual ciclo conviene más. Hasta la próxima.

Objetos TextBox y lectura de datos desde un objeto TableItem

2009-10-07T06:56:00.000-07:00

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.

Ejemplo #13 Ciclo for y objetos TableItem

2009-10-01T22:29:00.000-07:00

Hoy se va realizar un ejercicio completo (con todo y video-tutorial) el ejercicio incluye los temas que se han tratado en las últimas entradas del blog: ciclo for y TableItem. El ejercicio es tomado de un comentario de uno de mis lectores, justo en el post anterior a este.

Ejercicio: Método de Euler

El comentario del lector con el problema, lo reproduzco aquí tal y como él lo escribió:

“Hola estoy intentando crear una aplicación para que me resuelva el método Euler. Es más o menos así:

y1=y0+f(x0,y0)*h

Donde "h es una constante" te lo dan al igual que el valor inicial de "y0"; y "x0" varía dependiendo de h. Ahora el problema es que la función no es la misma y por ende necesito un texdfield donde ingrese la función y me lo lea.

Un ejemplo de este método es el siguiente para mayor comprensión:

f(x,y)=x^2+y donde y(0)=2 ,h=0.2, hallar y(1)

En este caso mi x0=0 siguiendo 5 pasos o iteraciones hasta llegar a 1. O sea x0=0, x1=0.2, x2=0.4, x3=0.6, x4=0.8, x5=1

Los pasos me lo indica h osea seria 1/0.2=5pasos.

si me dieran como dato: y(1)=2 ,h=0.5 hallar y(4) , serian 4/0.5=8 pasos. Donde x0=1,x1=1.5,.....x8=4

Retomando el primer ejemplo de 5 pasos.la secuencia seria lo siguiente:

y1=y0+h*f(x0,yo)
y1=2+0.2*(0^2+2)=2.4
y2=2.4+0.2*(0.2^2+2.4)=2.888
y3=2.888+0.2*(0.4^2+2.888)=3.4976
y4=3.4976+0.2*(0.8^2+3.4976)=4.32512
y5=4.32512+0.2*(1^2+4.32512)=5.390144

Como podrás ver la función cambia y no va hacer la misma en cada ejercicio, o sea necesito ingresar aparte de y0, h, x0, la función y que NetBeans me lea dicha función para que realice los cálculos. Espero tu ayuda…”

Ese es el ejercicio, no se para que sirve el método de Euler y realmente no me interesa saberlo y mucho menos investigarlo, yo simplemente voy a basarme en lo que dice mi lector bien o mal a mi no me importa yo voy a tomar su información y voy a realizar el programa a mí lo que me interesa realmente es que se muestre otro ejercicio con un ciclo for donde se usen las TableItem para mostrar los datos eso es lo que me importa.

Solución

Veamos la solución al ejercicio pero antes se le va a poner una restricción.

Restricción

El lector dice:

“necesito ingresar aparte de y0, h, x0, la función y que NetBeans me lea dicha función”

Lo que pide, es que en un TextField se coloque una función, pero cualquier función si me explico? O sea no es una función fija, es cualquier función que se ingrese, puede ser la que se muestra en el ejemplo: f(x,y)=x^2+y o puede ser otra como: f(x,y)=x^3+y^2 + 1 u otra la que el usuario decida ingresar.

Mmmm que creen, esto que se menciona, créanme, es un tema para uno o dos post completos se requiere el manejo de cadenas (string), hay que recorrer la cadena con un ciclo for para sacar caracter por caracter y analizar cada caracter ver si hay un "^" y cambiarlo a potencia, un montón de cosas que se deben hacer. Por lo pronto lamento no complacer a mi lector :( , así que como restricción al ejercicio vamos a tomar la función fija solamente y vamos a usar la que él nos da de ejemplo, la función:

f(x,y)=x^2+y

Análisis del problema

Como primer paso se va a crear la interfaz de usuario. Tomando en cuenta que dice el lector:

"h es una constante" te lo dan al igual que el valor inicial de "y0";

Además también hay que agregar a la interfaz de usuario el valor que se desea de y como se ve en el enunciado del problema. Tres instancias de TextField y una de la clase TableItem resuelven el problema, entonces esto es lo que se requiere:

• Un objeto TextField para el valor de inicial y(0).
• Un objeto TextField para el valor de h.

• Un objeto TextField para el valor de y deseado.

• Un objeto TableItem para mostrar los resultados.

• Un objeto okCommand para realizar los cálculos necesarios.

La figura siguiente muestra como se veria parte de la interfaz de usuario para el problema:

el lector nos dice como obtener el número de iteraciones:

“…Los pasos me lo indica h osea seria 1/0.2=5pasos…”

El número de iteraciones es el valor deseado de y dividiéndolo con el valor de h.

El lector dice

"x0" varía dependiendo de h…”

El lector manda estos ejemplos:

“…En este caso mi x0=0 siguiendo 5 pasos o iteraciones hasta llegar a 1. O sea x0=0,x1=0.2,x2=0.4,x3=0.6,x4=0.8,x5=1 “

Ahí se observa que x0 = 0, el otro ejemplo es:

..”si me dieran como dato: y(1)=2 ,h=0.5 hallar y(4) , serian 4/0.5=8 pasos. Donde x0=1,x1=1.5,.....x8=4”

Aquí creo que el lector se equivoca ya que: x0 = 1, x1 = 1.5, x2= 2, X3=2.5, x4=3, x5=3.5, x6=4… ¿por que dice que x8=4? Para que suceda así x0 debe ser igual a 0. Conclusión a la que llego x0 debe ser siempre igual a 0.

Código

En cuanto al código se debe como primer punto obtener los valores que se ingresan de los TextField, esto ya se ha realizado muchas veces, se requiere un par de instrucciones como estas:

strH = textField1.getString();
h = Float.parseFloat(strH);

Se declaran dos variables strH de tipo String y h de tipo float, se aplica el método Float.ParseFloat para cambir el String a número float, este par de sentencias se usa también para los otros TextField.

Para obtener el número de iteraciones basta con dividir el valor deseado de y con h como se mencionaba en la parte de arriba, así:

pasosF = y / h;
pasos = (int) pasosF;

se declara pasosF como float, esto debido a que el valor de y además del valor de h son de tipo float, luego en la siguiente instrucciones se obtiene el número de iteraciones, usando el (int) para convertir a entero el valor de tipo float y así poder usarlo en el ciclo for.

El ciclo queda así entonces:

for (int i=0; i<=pasos; i++) {

Antes del ciclo se inicializa x0 = 0; Dentro del ciclo se obtienen los nuevos valores de y aplicando la formula: f(x,y)=x^2+y, en java quedaría así:

y = y0 + h * (x0*x0 + y0) ;

Con el valor de y se actualiza para el siguiente cálculo (siguiente iteración) el valor de y0 y x0 de la siguiente forma:

y0 = y;
x0 = x0+h;

Después de van las instrucciones para mostrar los datos en la tabla, la primera es:

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

la cual muestra en la columna 0 de la tabla los valores de: y1, y2, y3, etc..la otra columna nos muestra los resultados de aplicar la formula:

simpleTableModel.setValue(1, i, ""+y);

Si alguien se perdió en la explicación anterior, aquí les dejo el video tutorial con la solución completa, para este ejemplo, ahí se puede ver el código completo.

El programa fue realizado con la versión de NetBeans 6.7.1, vea los resultados se ingresaron las mismas variables que el lector pero las iteraciones y4 además de la y5 dan como resultado diferente a lo que se muestra en el enunciado del problema esto, debido a que, en y4 debió evaluar con una x de 0.6 y puso 0.8.

Por si lo desean dando clic aquí, pueden “bajar” el código de Java Micro Edition, y analizarlo, el archivo esta comprimido en formato RAR, contiene todas las carpetas generadas por Netbeans, el programa fue probado en un teléfono Sony Ericsson w595 con resultados iguales a los del video.

Como se usan los objetos de tipo TableItem

2009-09-27T12:06:00.000-07:00

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

Estructuras de repetición: “Ciclo For”

2009-09-24T10:23:00.000-07:00

Como su nombre lo indica estas estructuras permiten repetir una o varias instrucciones un número determinado de veces. Existen varios tipos de estructuras de repetición en java:

• Ciclo For

• Ciclo Whie

• Ciclo do-while

Vamos a analizar una por una, hoy se inicia con el ciclo For.

Ciclo For

Un ejemplo vale más que mil palabras, en la imagen siguiente se muestra la sintaxis del ciclo for. El ciclo for de la imagen se diseño para repetir las instrucciones que van en su cuerpo 10 veces.

Veamos como se construye, se usa la palabra reservada

for

Entre paréntesis va la llamada variable de control, esta es la que lleva la cuenta de las repeticiones, se acostumbre llamar a la variable i. La variable de control se debe inicializar en algún valor, se acostumbra el 0, por eso lleva el valor de:

i=0

Aunque puede ser cualquier valor, inclusive números negativos, lo que se requiere para la aplicación. Después sigue el ; seguido de la condición de finalización del ciclo, que en este caso es:

i <= 10

La condición de finalización me permite terminar el número de repeticiones, en el ejemplo el ciclo se va a repetir "desde i= 0 hasta que i sea menor que 10", al terminar las 10 repeticiones se continua con el flujo de programa.

Después de la condición de finalización sigue un ; para finalmente terminar, con el incremento de la variable de control, de la siguiente forma

i++

Ya se había visto el operador de incremento ++, le suma 1 a la variable i.

A continuación se muestra una animación del ciclo for que está definido en la imagen anterior. Simplemente dar clic en el botón de inicio. La animación muestra la ejecución del ciclo for como si se ejecutará paso a paso el programa usando el debugger. Ahí también se ven los valores que va tomando la variable i, se agrego también un stringItem en el cuerpo del for que también muestra el valor de la variable i.

Note como el ciclo se hace 10 veces inicia la i en 0 y termina en 10, solo que al llegar la i a 10 ya no se ejecuta el cuerpo del for, por eso es que la i llega a 10 mientras que el StingItem solo muestra hasta 9.

Se muestra a continuación una serie de ejemplos que se resuelven usando el ciclo for, esto para que el lector vea algunos ejemplos de la aplicación del ciclo. En los ejemplos solo se muestra el segmento de código para el ciclo, dejamos pendiente lo de la interfaz de usuario.

Problema #1

Realizar el segmento de código en Java que sume los primeros 50 números positivos, mostrar el resultado en un stringItem.

Solución.

Un ciclo for que vaya de 0 a 50, puede resolver este problema, la sintaxis es así:

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

}

Nótese que se uso el <= en la condición de terminación para que se incluya el 50. Ahora, para sumar los números, primero recordar que la variable i, toma los valores desde 0 hasta 50 (como se ve en la animación, la variable i, recorre desde el valor inicial hasta la condición de terminación), entonces basta con un enunciado como el siguiente para ir acumulando la suma de los 50 números:

suma = suma + i

Para mostrar el resultado de la suma, al finalizar las 50 repeticiones, se usa el stringItem, usando su método setText y agregando la variable suma, así:

stringItem.setText(“El resultado de sumar los números del 0 al 50 es de “ + suma);

Finalmente se muestra el segmento de código completo conm comentarios para la solución de este problema:

suma = 0; // se inicializa la variable suma en 0
for (i=0; i <= 50; i++) { //ciclo for de 0 a 50
   suma = suma  + i // se acumula la suma
}
stringItem.setText(“El resultado es de “ +  suma); // se muestra el resultado

Por supuesto que ahí no se ve la declaración de las variables, pero la i y la variable suma se deben declarar antes de ese código y deben declararse de tipo int, por cierto el resultado final es de 1275, por si algún lector desea intentar hacer el ejemplo completo en el NetBeans.

Para que el lector tenga confianza al código y sobre todo a la sentencia que acumula la suma se muestra en la siguiente tabla los valores de las variables involucradas para 5 repeticiones (o más comúnmente se les llama iteraciones).

           Suma     I    Suma = suma + i
             0      0          0
             0      1          1
             1      2          3
             3      3          6
             6      4         10
            10      5         15

Ejemplo #2

Escriba un segmento de código en java para calcular los valores de la llamada serie armónica que se define como sigue:

X = 1 + 1/2 + 1/3 + 1/4 + 1/5 + 1/6 +1/7 + … 1/N

El programa debe pedir que se ingrese el valor de N paraposterormente realizar el cálculo respectivo de la serie y mostrará el resultado final en un stringItem.

Solución

Se supone que la interfaz de usuario contiene un objeto TextField para ingresar el valor deseado de N, así que otra vez por enésima ocasión se repite el código para capturarlo y convertirlo a entero.

strN = textField.getText();

N = Integer.ParseInt(strN);

Las variables strN debe declarase String y N de tipo int, así el valor que ingresa el usuario para N se debe usar como terminación del ciclo, entonces la definición del ciclo queda así:

for (i=1; i <= N; i++) {
   
}

Note como se inicializa la variable en 1, contrario a los ejemplos de párrafos anteriores ¿Por qué?

Ahora vea la serie del enunciado del problema, vea la fracción siempre hay un 1 arriba en el numerador y abajo en el denominador parece que toma los valores de la variable i, puesto que se observa el denominador así 1, 2, 3, 4, 5, 6, etc… entonces como el ejemplo anterior basta con acumular la suma usando la sentencia siguiente:

Suma = suma + 1/i;

Por cierto, la serie inicia con un 1 por eso se inicializa la variable de control así con 1 (i=1).

El segmento de código completo para solucionar este problema quedaría así:

//**** Ciclo para la solución de la serie armónica ****
strN = textField.getText();
N = Integer.ParseInt(strN);
Suma = 0;
for (i=1; i <= N; i++) {
suma = suma + 1/i
}
stringItem.setText(“El resultado de calcular los valores de la serie es “ + suma);

En este caso la variable suma, hay que declararla de tipo float, por que va almacenar decimales ya que se hace una división (1/i), por cierto, la división 1/i, Java la detecta como una división de enteros y da como resultado un entero, con lo que la parte decimal se desaparece, lo que se hace es forzar la división a tipo float para que me de el resultado correcto, basta con agregar el operador (float) entonces esa sentencia queda asi:

suma = suma + (float) 1/i

Ejemplo #3

Realizar un segmento de código en java para calcular el factorial de un número introducido por el usuario.

Solución

Bueno el clásico programa que calcula el factorial no podía faltar en este blog y más si se está mostrando en el post el ciclo for. Bueno, el factorial de un número es simplemente la multiplicación de los números que van de 1 a dicho número, en matemáticas se dice que la definición de factorial es la siguiente:

n! = 1 * 2 * 3 * 4 * 5 * 6… * N

Bueno hay un caso especial que no cumple esta regla, que es el 0! (factorial de 0) el resultado es 1 por cierto. La interfaz de usuario es igual que el anterior un TextField para capturar el valor de N y un StringItem para mostrar el resultado. Así que la definición del ciclo queda de la siguiente forma:

for (i=1; i <= N; i++) {

}

Para realizar el factorial basta con ir acumulando pero multiplicaciones, ya se sabe que la variable i toma los valores de 1, 2, 3, 4… así que la sentencia puede quedar así:

Mult = mult * i;

El segmento completo para el factorial queda entonces así:

strN = textField.getText();
N = Integer.ParseInt(strN);
mult = 1; 
for (i=1; i <= N; i++) {
   mult = mult  * i
}
stringItem.setText(“El resultado del factorial es es “ +  factorial);

Vea como la variable que acumula los valores (mult) se inicializa en 1, como son multiplicaciones acumuladas es imposible inicializar en 0 por que entonces todo seria 0 siempre, además recuerde el factorial de 0 es 1, por cierto agregando un if al código anterior se puede determinar el caso especial que es cuando se ingresa un 0, entonces el código completo queda así:

strN = textField.getText();
N = Integer.ParseInt(strN);
If (N == 0) 
    stringItem.setText(“El resultado del factorial es 1”);
else {
    mult = 1; 
    for (i=1; i <= N; i++) {
        mult = mult  * i
     }
   stringItem.setText(“El resultado del factorial es “ +  factorial);
}

Bueno hasta aquí termina este post, para no variar, la próxima entrada mostrará un ejemplo completo con este ciclo, con su respectivo video como se acostumbra