1

Tutorial para aplicaciones móviles J2ME con NetBeans y Mobility Pack

Arphean http://arphean.mirrorz.com anih@ozu.es Tutorial bajo licencia Creative Commons. Se permite copia y distribución siempre y cuando se cite la fuente de procedencia y su autor. No se permite, bajo ningún concepto, modificación o venta del presente trabajo. Licencia de Creative Commons.

2

Este tutorial presenta de una forma amena, gráfica y facil los pasos para la creación de una aplicación (juego, programa, etc…) en J2ME. Desde la instalación de los componentes necesarios, hasta la ejecución y trabajo con los mismos, en las siguientes lecciones aprenderás a moverte fácilmente por una herramienta de desarrollo Java como es NetBeans. Obviaremos lo que es y la explicación del profile MIDP para J2ME, puesto que existen multitud de artículos en Internet que lo explican claramente. Lo que no abundan son ejemplos concretos sobre una herramienta RAD para el desarrollo en J2ME, que es lo que vamos a tratar aquí. El fin es conseguir, en pocos pasos, la familiaridad con estas herramientas para que fácilmente puedas ir desarrollando tus propias aplicaciones. Como es habitual en todos mis tutoriales, nos apoyaremos sobre todo en imágenes, que es la forma mas visual, didáctica y fácil de aprender. Introducción Para conseguir trabajar en J2ME existen muchas formas, algunas muy simples, como la instalación de Toolkits Java. Sin embargo, si recurres a ese tipo de instalaciones, estarás bastante limitado para desarrollos posteriores y además no te darán una visión global del lenguaje Java. Por ello aquí vamos a instalar herramientas profesionales, algunas bastante complejas, pero tocando solamente los aspectos J2ME para facilitar su uso. Se necesita, por ello, la instalación de los siguientes componentes: El Java Standard Edition (J2SE), en su versión Java Development Kit (JDK), en su versión 4 o superior. Lo puedes descargar desde la web de Sun: www.sun.com Ojo con no confundir con el J2SE (Java Standard Edition), en su versión Java Runtime Environment (JRE), ya que este no nos serviría, pues es solo el entorno de ejecución, y nosotros lo que necesitamos es el entorno de desarrollo (Development). Después de descargarnos el entorno Java, procederemos a descargarnos la herramienta de desarrollo propiamente dicha (RAD). Para Java existen muchas RAD, una de las primeras con las que he trabajado, por ejemplo, ha sido Sun One Studio, que es gratuita. Otras son de pago, y bastante caras. Sin embargo existe un IDE completo, gratuito y muy bueno, cuyo nombre es NetBeans. NetBeans es un Open Source Integrated Development Environment, escrito en Java, usado como plataforma para desarrollar programas en Java. Es decir, con NetBeans no solo podremos desarrollar para J2ME, sino también programas complejos para diferentes entornos y sistemas operativos (Windows, Linux, Mac…) y aplicaciones servidor y cliente. Para descargar NetBeans acude a su web: www.netbeans.org La instalación de todos estos programas dependerá del entorno operativo que poseas. Aquí relataremos la instalación sobre Windows XP. Con NetBeans podrás: Crear un proyecto Ejecutar un proyecto Depurar un proyecto. Una vez tengas el NetBeans descargado (¡aún no hemos instalado nada, recuérdalo!), deberás descargarte, bien desde el propio site de NetBeans, desde SUN o desde el Forum Nokia, la extensión Mobility Pack. Con el NetBeans Mobility Pack tendrás capacidad para desarrollar aplicaciones para dispositivos móviles, con características de optimización para el Mobile Information Device Profile (MIDP), y para el Connected Limited Device Configuration (CLDC). Además, integra en nuestro NetBeans características de Visual Mobile Designer (diseño visual móvil); Wireles Connection Wizards: para acceder fácilmente a servicios vía servlets, con soporte para el estándar JSR-172; Fragmentación de Dispositivos: de

3

modo que puedas desarrollar aplicaciones para ejecutarlas en un dispositivo en concreto; Integración con el J2ME Wireles Toolkit: la herramienta de certificación y desarrollo J2ME, que integra emulación OTA (Over-The-Air), mensaje inalámbrico y APIs multimedia, y WMA emulación para mensajes SMS y CBS. Además, integra un ofuscador (criptógrafo de código), y OTA Download Testing, que emula dicha capacidad sobre un móvil real. Como ves, todas estas cualidades hacen que el Mobility Pack sea una herramienta potente y completa para desarrollar aplicaciones en J2ME. Instalación Primeramente, procederemos a instalar el SDK de Java como tal, ya que es la máquina que las demás herramientas van a utilizar. Cabe reseñar aquí que todas estas herramientas son bastante pesadas, y que requieren de un ordenador medianamente potente para funcionar, con un mínimo de RAM de, por lo menos, 512 Kbs. La instalación se realiza clickeando sobre el archivo .exe que te has descargado, y siguiendo todos los pasos que en él se relatan. Dejemos todo tal como nos lo pone por defecto, incluidas las rutas, para que después no tengamos que poner nada manualmente. Tras unos minutos tendremos el JSE instalado. Ahora procederemos a instalar el IDE NetBeans, ya que el Pack va sobre éste. Dependiendo de nuestra versión (si tenemos el IDE 4 instalaremos el Pack 4, si es el IDE 5, el Mobility Pack 5, y así sucesivamente. A menos que no exista un pack superior, en cuyo caso nos descargaremos el último que haya salido) nos aparecerá un mensaje como el siguiente. Le damos a Next:

4

Aquí nos va a pedir que le indiquemos dónde tenemos instalado el JSE JDK, caso de que no lo hayamos instalado en el directorio por defecto, deberemos ponerlo nosotros. De lo contrario, el propio instalador nos encuentra él la ruta, por lo que le daremos a Next sin más:

Al final de toda la instalación, si todo ha ido correctamente, nos informará de las rutas en las que está localizable. Pulsaremos en Finish para salir del instalador.

Ahora procederemos a instalar el Mobility Pack propimamente dicho. Clickearemos doblemente sobre el ejecutable y, tras verificar la existencia del JDK, nos saldrá algo como esto:

5

Debemos reseñar que esta ventana es diferente según las versiones del Mobility Pack que instalemos. Esta es para el Mobility Pack en su versión 4.1. Pulsaremos en Next. Esta es la versión en el Mobility Pack 5.0:

Aquí nos dice, como ya sabemos, que requiere el IDE NetBeans, cosa que buscará. Caso de haber instalado NetBeans en las rutas por defecto, él mismo lo encontrará. De lo contrario puede que sea necesario que se lo busquemos nosotros. Pulsamos en Next. Todo lo que viene a continuación es bastante fácil, por lo que seguiremos aceptando hasta finalizar la instalación. Una vez lo tengamos completado, veremos en el escritorio un nuevo icono con el acceso directo al RAD NetBeans.

6

Esta es la ventana del IDE nada mas instalarlo, en donde podemos ver una pequeña guía de iniciación, que integra también ayuda para el Mobility Pack que acabamos de instalar:

Bien, empecemos ahora la parte seria: comencemos a hacer una aplicación.

7

El primer Midlet J2ME en NetBeans Lo primero, cabe apuntar que, a los programas escritos en J2ME para teléfonos móviles se les denomina “Midlets Java”. Esta aplicación, que tocará varias partes de código Java y trabajos con el RAD NetBeans, consiste en un midlet que, de manera aleatoria, mostrará una imagen en la pantalla. De esta forma trabajaremos con variedad de componentes sin liar excesivamente al principiante.

Tras abrir el IDE, seleccionaremos la opción “File/New Project”.

Nos aparecerá una ventana parecida a esta, en la que podremos seleccionar diferentes tipos de aplicaciones. Nosotros comenzaremos por un Midlet completo, de modo que elegiremos Mobile, y en la parte de Projects seleccionaremos “Mobile Application”.

8

Aquí nos pide un nombre para el proyecto, pondremos “verono”. También lo elegiremos como proyecto maestro, por lo que activaremos el check de “Set as Main Project”. NetBeans nos ofrece la oportunidad de crear un Midlet de ejemplo, un tipo “Hola Mundo”. No lo necesitamos, por lo que desactivaremos el check “Create Hello Midlet”. Le damos a Next:

9

Aquí seleccionaremos la plataforma de emulación, y demás opciones secundarias. Dejaremos todo tal cual vemos en la imagen. Cabe reseñar algo importante. NetBeans puede trabajar con el profile anterior (versión 1.0) o con el actual (versión 2.0). Nosotros seleccionaremos el último (el 2.0), aunque si tenemos que trabajar para móviles antiguos, probablemente no acepten esta versión del MIDP. En el código, una vez estemos trabajando con la aplicación, se podrá ver que alguna parte del mismo NetBeans la conserva de la versión antigua, solamente para cuestiones de compatibilidad. No obstante, siempre que podamos trabajaremos sobre el 2.0.

En esta pantalla podemos seleccionar diferentes templates de colores y aspectos. Dejamos todo tal como vemos en la imagen, sin seleccionar nada, y pulsamos el botón “Finish” para que nos realice el midlet. Tras unos instantes, que dependerá de las opciones elegidas, aparecerá el proyecto en la ventana principal del RAD.

10

Aquí, como se puede ver, no aparece gran cosa. Si en nuestro IDE no aparece algunos de los campos o barras que vemos, podremos activarla desde el menú Window.

Vamos al tree de la parte izquierda, en “Projects”, y seleccionamos el nuestro. Veremos que aparece ya un package, denominado “Default package”. Pulsamos sobre él con el botón derecho del ratón, y seleccionamos “New/Visual Midlet”, para que nos realice el esqueleto de un Midlet en el cual podremos trabajar visualmente. Si activásemos el Midlet a secas, solamente podremos trabajar en código con él, algo que no es muy acertado en el IDE de NetBeans, pues parte de su código no es modificable por el usuario.

11

Aquí le pondremos un nombre al Midlet, y un nombre al nuevo Package, que se creará junto a él. En todo ello pondremos “verono”, y pulsaremos en “Finish”. Trabajo visual con formularios

Ahora ya vamos viendo mas cosas, ¿verdad? Bien. Pinchamos en el botón “Screen Design”, para comenzar a diseñar el Midlet visualmente. Por ahora tendremos que escribir poco código, todo será visual.

12

Lo primero que deberemos crear es un formulario, que es un contenedor sobre el que J2ME nos permite incorporar diferentes componentes, con sus clases. Para ello, en la parte de la derecha, “Palette”, seleccionaremos el componente “Form”, y lo arrastraremos, sin soltarlo, hasta la zona del “Screen Design”, justo donde está la zona sombreada de la pantalla del display, en donde lo soltaremos.

Una vez tengamos el form (en la parte de arriba nos saldrá “form1[Form]”, vamos a incorporar un botón. Podríamos seleccionar un Command habitual, pero vamos a elegir uno de los prediseñados. Los “botones”, o comandos, los arrastraremos de la misma forma sobre el form. Elegiremos por tanto el “Exit Command”, y lo pondremos sobre el form1.

13

Como vemos, el botón exit no posee ninguna acción asociada. Pondremos el puntero de nuestro ratón sobre la parte de la derecha, en la zona del “Screen Design”, y pulsaremos sobre “Edit”.

Aquí podemos ver que se pueden elegir diferentes acciones prefijadas, así como el código que cada una de ellas autogenera sobre el Midlet. Seleccionaremos “Exit application”, y pulsaremos sobre OK.

14

Vemos que, en la parte de edición, ya aparece la nueva acción para el comando.

Ahora incorporaremos un contenedor de imagen. Lo que haremos será incorporar el propio Item, sobre la imagen trabajaremos después. Seleccionaremos el ImageItem, tal como aparece en la figura, y lo arrastraremos sobre el Form.

Este es el aspecto que nos quedará tras la introducción del ImageItem.

15

Ahora iremos a la zona del “Inspector”, en la parte izquierda inferior de la pantalla. En Ítems, seleccionaremos el ImageItem que acabamos de incorporar, y pulsaremos sobre “Properties”.

Cabe reseñar que si desplegamos el ImageItem, podremos incorporarle también el Command que ya tenemos en el form.

16

Bien, una vez hemos pulsado sobre “Properties” del ImageItem, nos aparece un cuadro como el que vemos.

17

Lo que tenemos que hacer es crear la imagen del contenedor. Para ello, desplegaremos el List que hay en Image, y elegiremos “New Image Resource” (nuevo recurso de imagen). Le daremos a “Close” y cerraremos el cuadro.

18

Observaremos que, en la zona del Inspector, bajo el tree de Resources, ya tenemos el nuevo Image1 que acabamos de incorporar. Con el botón derecho lo seleccionamos y pulsamos en “Properties”.

Aquí nos muestra la ruta para incorporar la imagen propiamente dicha. Como vemos, no tenemos ninguna imagen aún, así que clikearemos sobre la zona punteada de “Resource Path”.

Cabe destacar que previamente deberíamos tener una imagen en la carpeta del proyecto. Para ello la abriremos e introduciremos aquí la imagen. Como se puede ver, nosotros hemos puesto una imagen en png (también puede ser jpg o gif), y cuyo tamaño es de 188 x 138. Aunque en la imagen que se ve hemos puesto el “imagen1.png” sobre el archivo raíz del proyecto, lo suyo es que vaya directamente dentro del directorio de recursos, en la carpeta src (sources). Aunque esto es indiferente, solamente debemos destacar una ruta que nos sea cómoda y trabajar siempre sobre ella con las imágenes.

19

Una vez hayamos pinchado sobre el botón punteado con “…”, elegiremos la imagen que queremos y pulsamos en Ok.

20

Este es el aspecto que debe mostrar el cuadro de diálogo una vez hayamos seleccionado la imagen.

Ahora, como se puede observar en la zona de diseño, el Label de la imagen muestra simplemente su nombre. Vamos a modificarlo. Iremos a sus propiedades (listado de la derecha), y en Label escribiremos “Ver o No”. Lo mismo que esto podemos hacer en el resto de componentes que integremos, muy parecido a otros IDEs de otros lenguajes de programación.

21

Escribiendo código

Ahora vamos a empezar a mirar algo de código Java. Para ello, pulsaremos sobre el botón “Source”, en la zona de diseño del Midlet.

Este es el aspecto del código Java. Como se puede ver, está todo perfectamente ordenado, indicado y comentado. Nosotros vamos a incorporar el código necesario para: - Visualizar el Form que acabamos de crear. - Incorporar la visibilidad o no de la imagen, según se de el caso. Ya que, aunque ahora la ejecutemos (menú Run), el midlet no hará nada. Aunque sí podremos depurarlo (menú Build).

Bajo la línea del import lcdui que vemos, escribiremos: import java.util.Random; Tal como vemos en la imagen.

22

En la zona de declaraciones, como vemos en la imagen, pondremos una variable de tipo Integer y cuyo nombre será “uno”. Como vemos, al incorporar la variable ya nos aparece en la zona de Properties del IDE algunas de sus características, que podemos modificar, e incluso comentarios que podremos añadir para la documentación Javadoc.

Ahora vamos a escribir, tal como aparece en la imagen, el código para Randomizar un número. Esto lo usaremos para obtener un número al azar al que recurriremos para ocultar o visualizar la imagen, según sea el número. La línea random.nextInt () % 10 tiene como significado la extensión del número. Es decir, sería lo mismo que: numb = Math.abs( random.nextInt() % BOUND); Con un Bound igual a 10 lo que le estamos diciendo es que nos devuelva un número del 1 al 10.

23

Aquí incorporaremos el código propiamente dicho para visualizar el formulario y para ver o no la imagen. Todo ello lo realizaremos en el método de inicialización de la aplicación (initialize() ) Primeramente, le daremos a la variable integer “uno”, un valor de 5. Después, con getDisplay().setCurrent(get_form1()); le estamos diciendo al Midlet que visualice actualmente el form1, cargándolo con get. El nombre de “form1” es el nombre del form, obtenido al principio del código, en la línea que nos pone: private Form form1; El resto del código es una simple comprobación, y con ello logramos que, si el random devuelto es mayor que el 5, que hemos metido en la variable “uno” (podríamos obviar la variable y poner el 5 directamente, pero para fines didácticos no lo hemos hecho), no carge ninguna imagen en el imageItem1.

24

Ahora ya podremos comprobar el funcionamiento del Midlet. Mediante “Run/Run main Project” podremos ejecutarlo en un entorno virtual. Saliendo y entrando del midlet (sin necesidad de cerrar el simulador) podremos ver que se oculta y aparece la imagen, indistintamente. Por su parte, si quisieramos compilarlo, bien para comprobar errores o para distribuir el archivo a teléfonos móviles, solamente tendremos que ir al menú “Build/Compile ‘nuestroarchivo.java’”.

25

Este es el aspecto de nuestro primer Midlet en ejecución. Algo tremendamente sencillo pero que nos hace ver la forma de trabajo con J2ME en NetBeans. La etiqueta que vemos de “Ver o No” es la propia etiqueta que hemos puesto nosotros en el Image Item. Últimas notas

Si volvemos al IDE, veremos que en nuestro proyecto hay dos packages. Uno, por defecto, y el otro que hemos creado a partir del mismo.

26

En una aplicación podremos tener diferentes packages, al que llamará el usuario y activará, mediante el menú del propio Midlet. Sin embargo, si quisiéramos crear el Midlet sobre el mismo package, sin crear nada mas que uno, en lugar de seleccionar el Package propiamente dicho, seleccionaremos el proyecto, es decir, el primer ítem del tree, es decir: “verono”, como se ve en la imagen. Una vez sobre el,con el botón derecho del ratón seleccionaremos “VisualMidlet”. También podremos cambiarle el nombre del package en cuestión, realizando un doble clic sobre él. Lo veremos a continuación, en el siguiente capítulo.

Aquí puede verse el menú que aparecería en el móvil, con diferentes packages. Huelga decir que el menú se puede generar mediante código Java, ya que existe un ítem para ello, que es la clase “List”.

27

Nos falta también explicar dónde tendremos el archivo que distribuiremos al teléfono móvil. Dentro de la carpeta “verono”, existe una carpeta, denominada “dist” (distribution).

Dentro de dicha carpeta, podremos encontrar el archivo de recursos .jad, y el archivo de código .jar, que son los que pasaremos al móvil. Cambiándole el nombre a un package Para modificar el nombre a un package (de forma similar se procede con el resto de archivos), se procede de la siguiente manera:

Seleccionamos el package a modificar, y, con el botón derecho, seleccionamos “Refactor/Rename”.

28

Nos aparecerá una ventana para cambiar el nombre, en cuyo título nos informará del nombre actual del package. Ponemos el nombre que deseemos y pulsamos en Next.

NetBeants nos indicará los archivos, en cascada, que incluye ese package y que se verán afectados. El cambio se realizará, pues, a todos. Si deseamos anular la acción, pulsaremos en Cancel, y el nombre no se modificará. Para realizar el cambio, pulsaremos en “Do Refactoring”, y, tras unos instantes de trabajo, NetBeans cambiará el nombre.

Una vez hecho esto, el nuevo nombre del package figurará en el tree del listado, en Projects.

Cabe señalar, no obstante, que todos los archivos y recursos del Package, o que afecten al archivo al que le hemos cambiado el nombre, se verán afectados. Por ejemplo, la ruta de la imagen deberá ser modificada para darle la ruta del nuevo nombre. Esto puede hacerse desde código, o en modo visual, seleccionando la imagen, yendo a Properties y eligiendo “Resource Path”, en donde le indicaremos la nueva ruta. De lo contrario, el Midlet no funcionará correctamente.

29

Aquí puede verse la nueva ruta especificada por el cambio de package a “visual1”. Epílogo Confío en que este sencillo tutorial te resulte muy útil a la hora de realizar tus Midlets en un entorno gráfico como es NetBeans. También espero que te haya ayudado para familiarizarte con el IDE. A partir de aquí lo demás es cuestión de que lo vayas probando tú mismo, y de que experimentes y codifiques directamente con el código Java. Gracias por tu atención. Arphean Nih