You are on page 1of 29

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.

1
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

2
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:

3
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:

4
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.

5
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.

6
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”.

7
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:

8
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.

9
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.

10
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.

11
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.

12
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.

13
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.

14
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.

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

16
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.

17
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.

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

19
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.

20
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.

21
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.

22
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.

23
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’”.

24
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.

25
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”.

26
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”.

27
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.

28
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

29

You might also like