Iniciación a J2ME Parte II

Interfaz de Usuario

Antes de empezar a desarrollar nuestro interfaz de usuario, hay ciertos conceptos que se hacen necesarios para poder adaptarnos más rápidamente a su desarrollo. A partir de este momento me referiré a “Interfaz de usuario” como UI. Para una referencia mejor a los métodos de cada componente es necesario mirar la especificación de J2ME, que viene generalmente con el SDK, o en java.sun.com.

Respecto a los programas que se encuentran en las diferentes partes del tutorial, algunos han sido recopilados de varios libros, siendo imposible ahora saber de donde vienen exactamente, otros sin embargo, son de desarrollo personal.

El UI de MIDP tiene APIs de alto nivel y de bajo nivel. Las clases de la API de alto nivel, como Alert, Form, List… son extensiones de la clase abstracta Screen. La API de bajo nivel se basa en la clase abstracta Canvas.

La API de alto nivel presenta clases que permite un alto grado de portabilidad entre los diferentes aparatos que soportan J2ME. La API de bajo nivel permite una manipulación más directa y por ello, mayor control del UI, ya que implementa varios eventos de la pulsación de las teclas y/o pantalla táctil. En este caso se pueden producir errores de portabilidad si los aparatos no tienen las mismas teclas, por ejemplo.

Display

Una aplicación puede tener un cierto número de displays, pero solo uno de ellos puede ser visible. En cualquier caso es muy fácil cambiar el display que se esta mostrando con el comando:

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

La clase Display implementa la Displayable y con los métodos getDisplay() para saber que display esta en pantalla en ese momento y setCurrent() para cambiar el Display.

Existen 3 tipos de displays:

• Genérico (Form) donde se pueden poner diferentes clases de alto nivel, texto, imágenes…
  
• Un componente de alto nivel ocupa toda el display (List, TextBox…)
  
• Bajo nivel display, subclase de la clase Canvas

Tipos de Pantallas (displays)

Comandos

Toda interacción entre el usuario y el programa se realiza a través de los comandos. Estos funcionan de forma parecida que J2SE., mediante un CommandListener que recibe el comando y la pantalla de donde viene. Para implementar un comando se usa el método addCommand().

Ejemplo:

Command OK_CMD = new Command(“Ok”, Command.OK, 1);

myDisplay.addCommand(OK_CMD);

La clase command posee tres parámetros:

• Etiqueta: se enseña al usuario como ayuda
  
• Tipo de comando
  
• Prioridad

Tipos de comando:

• EXIT: para salir de la aplicación.
  Llama el método destroyApp() instantáneamente, esto quiere decir que no es posible mostrar avisos del tipo “¿esta seguro?”, “¿quiere guardar la información?”
  
• SCREEN: son los mas comunes
  
• ITEM: en relación con el objeto seleccionado de la pantalla
  
• HELP: ayuda del display que esta en pantalla
  
• BACK: va al display previo al actual, y esta siempre en la tecla derecha
  
• OK/CANCEL: usado generalmente en diálogos de confirmación

APIs de Alto Nivel

List

Una lista de opciones. Es posible añadir, insertar en medio o borrar opciones. Las opciones pueden poseer texto y/o una imagen.

Hay 3 tipos de listas:

• EXCLUSIVE: solo se puede tener una opción seleccionada, ni más ni menos.
  
• IMPLICIT: no se puede modificar la opción seleccionada cuando se construye la lista
  
  
• MULTIPLE: cualquier opción se puede seleccionar

TextBox

Un TextBox que ocupa toda la pantalla, que puede incluir también un titulo. El textbox puede tener las siguientes restricciones:

• ANY: se puede introducir cualquier texto
  
• EMAILADDR: dirección de email
  
• NUMERIC: solo números enteros, positivos o negativos
  
• PHONENUMBER: incluye algún carácter alfanumérico
  
• URL: URLs

Algunos métodos a tener en cuenta son, delete(), insert(), setChars(), setString().

Form

Form es un display que se usa como base de una serie de elementos. Los elementos anteriores ocupan toda la pantalla del teléfono, sin embargo, usando la clase Form, podemos tener diferentes elementos, estos pueden ser:

• ChoiceGroup, como check boxes o radio buttons
  
• DateField, muestra fechas y tiempos, según que teléfonos incluso puede mostrar un calendario
  
• Gauge, para mostrar progreso o entrar datos dentro de un rango linear de valores
  
• Image, muestra .png en el form
  
• ListBox, una lista de valores
  
• TextField, como el TextBox anterior
  

Alerts

Muestra información al usuario en tipo de alerta

• ALERT
  
• CONFIRMATION
  
• ERROR
  
• INFO
  
• WARNING

Es necesario especificar que display se va a mostrar después de la alerta

Display.getDisplay(this).setCurrent(alerta, display_de _despues);

Timers

Permite realizar la ejecución de código en intervalos de tiempo.

• Timer.schedule( TimerTask, Date )
  
• Timer.schedule( TimerTask, Date, period )
  
• Timer.schedule( TimerTask, long delay, long period )

Ejemplos

• AlertTest
  (alert & image): Implementa una alerta y una imagen
  
• DisplayTest
  (Display): Dos displays en la misma aplicación  
• FormTest
  (form, image, text, choice, date, gauge)
  
• ListTest
  (list, checkbox): ejemplo de listas
  
• TimerMIDlet:
  ejemplo de timer
  
• MIDletProps:
  muestra las propiedades del MIDlet
  
• UIEjemplo
  ejemplo de UI de una aplicación

APIs bajo nivel

Canvas

Para realizar un juego o una aplicación con cierta movilidad, no podemos usar los componentes antes mencionados. Para ello haremos uso del Canvas. Canvas posee un submetodo paint() que es llamado cuando el Canvas tiene que ser dibujado.

También posee los métodos getHeigh() y getWidth() para saber el tamaño del canvas y poder adaptar nuestras aplicación a distintos teléfonos.

Algo muy común al empezar el método paint() es limpiar la pantalla para no dibujar sobre el anterior grafico, el siguiente código produce el efecto deseado, si el fondo es blanco:

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

Nokia posee una versión especial, llamada FullCanvas que ocupa toda la pantalla, mientras que Canvas, deja la barra de titulo y otras partes de la aplicación visibles.

Además de paint(), canvas posee otros métodos, como getGameAction(int keyCode) que registra el uso de las teclas por parte del usuario. Otros métodos que canvas facilita al programador cuando suceden ciertos eventos son:

• showNotify() cuando se muestra el canvas
  
• hideNotify() cuando se oculta el canvas
  
• keyPressed() para el control de pulsación de teclas
  
• keyRepeated() para el control de pulsación de teclas
  
• keyReleased() para el control de pulsación de teclas
  
• pointerPressed() para el control de la pantalla tactil
  
• pointerDragged() para el control de la pantalla táctil
  
• pointerReleased() para el control de la pantalla táctil

En el método paint, la clase Graphics proporciona los siguientes métodos para dibujar:

• drawImage (Image image, int x, int y, int align)
  
• drawString (String text, int x, int y, int align)
  
• drawRect (int x, int y, int w, int h)
  
• drawRoundRect (int x, int y, int w, int h, int r)
  
• drawLine (int x0, int y0, int x1, int y1)
  
• drawArc (int x, int y, int w, int h, int startAng, int arcArc)
  
• fillRect (int x, int y, int w, int h)
  
• fillRoundRect (int x, int y, int w, int h, int startAng, int endAng)
  
• fillArc (int x, int y, int w, int h, int startAng, int endAng)

Para más información, mirar la documentación sobre J2ME.

Coordenadas

El sistema de coordenadas no apunta a un pixel en concreto, sino al espacio entre dos pixels, por este motivo, un rectángulo es un pixel mas alto y ancho que un rectángulo relleno.

El punto 0,0 se refiere a la esquina superior izquierda, entonces los números negativos indican hacia arriba e izquierda. Un buen ejemplo es el ClipCanvas

Font

En canvas no es posible escribir, en este caso hay que ”dibujar” el texto. Los métodos más importantes son:

• drawstring()
  
• createFont()
  
• setFont()

Simple animación

Canvas permite realizar animaciones sincronizando la aplicación para que repinte el canvas usando serviceRepaints() o callSerially(Runnable)

Canvas.callSerially() hace que se llame el método run() y puede ser utilizada desde diferentes threads

Ejemplos de canvas

• CanvasTest,
  ejemplo de canvas
  
• ClipCanvas,
  ejemplo de clipping en un canvas, solo una parte del canvas cambian
  
• FontTest,
  ejemplo de fuentes
  
• ImageTest,
  ejemplo de imagen
  
• KeyTest,
  ejemplo de control de teclas
  
• PointerTest,
  ejemplo de pantalla táctil, probar con emulador de P800, por ejemplo

Ejemplos de animaciones sencillas

• AnimationTest,
  pequeña animación
  
• FlickerTest,
  la misma animación usando un dubblebuffer para evitar parpadeo de pantalla
  
• ImageAnimation,
  mueve una imagen
  
• Game1,
  pequeño ejemplo de juego, simple, para hacer una idea
  
• Game2,
  juego de laberinto, más complicado, pero todavía simple
  
• Javagochi,
  juego parecido al tamagochi