Aplicaciones para móviles (J2ME)

http://www.eamobile.tk

1. Propósito de este documento

Este documento presenta y describe Street Guide 2, versión 2.5. Esta

aplicación interactiva se basa en un callejero electrónico diseñada
principalmente para móviles con soporte J2ME (Java 2 Micro Edition).

2. Historial de versiones
Street Guide es una aplicación que nació, hace más de un año, en su
primera versión para móviles con soporte MIDP1 (Mobile Information
Device Profile), especialmente diseñado para Sony Ericsson T628,
T630, Z600, Z608 y series T610 (T610, T616, T618). Aunque
también fue probado con éxito en otros modelos superiores de Sony
Ericsson y en diferentes dispositivos Nokia y Siemens.

Su primera versión se basaba en un callejero sencillo, el cuál permitía

realizar búsquedas múltiples de direcciones.

Imágenes del callejero de Barcelona en un móvil SE T610 :

La primera versión también se podía descargar gratuitamente y era

pública para poderla testear en diferentes modelos de móvil. La
aplicación tuvo mucho éxito y es muy conocida por los principales
foros de discusión de telefonía móvil de España.

2
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

3. Descripción de la aplicación Street Guide 2

Su predecesor Street Guide 1, descrito brevemente en el anterior

punto, sólo se podían hacer búsquedas de calles y navegar por el
mapa. El mapa no era una sola imagen, sino que estaba compuesto
por diferentes imágenes con una resolución de 128 x 127 píxeles.
Esta resolución era la que usaba los modelos Sony Ericsson T610 y
Z600. Si que quería usar en otros móviles, por la sencillez de la
aplicación, obligaba a redimensionar todas las imágenes que
componían el mapa. Pero esto ya no ocurre en Street Guide 2
debido a su principal función ‘screen adaptive’, que permite
adaptarse a cualquier resolución de pantalla. Así de esta forma,
cualquier callejero diseñado funciona en cualquier dispositivo móvil.
Street Guide 2 incorpora por una parte el mapa del callejero, y por
otra un listado de las direcciones del callejero y un listado de PDI
(Puntos De Interés). En la lista de PDI, se definen monumentos,
farmacias, restaurantes, centros comerciales, parques, y cualquier
otro punto de la ciudad que puede ser interesante para su
localización. A través de la función Buscar podemos localizar tanto
PDI como direcciones del mapa.

Street Guide 2 está orientado a móviles no Smarthphone (teléfonos

inteligentes provistos de un sistema operativo como puede ser
Symbian). En teléfonos con Symbian nos podemos encontrar
aplicaciones GPS que se pueden usar como callejeros, como es el
caso del TomTom Mobile y Navigator. Aplicaciones mucho más
potentes debidas para la plataforma para las que están diseñadas.
En cambio J2ME es una plataforma mucho más limitada y un entorno
de programación donde los recursos son menores. Street Guide 2 se
dirige a estos móviles sin sistema operativo, los cuáles sólo disponen
de Java para la ejecución de juegos y aplicaciones.

Existen dos versiones de Street Guide 2:

? Versión MIDP1.0: versión que funciona en todos los móviles

(midp1 y midp2). La aplicación requiere una resolución mínima
de pantalla de 128 x 128 px.
Por las características de MIDP versión 1, el mapa no se puede
mostrar usando toda la pantalla, siempre queda una parte
reservada por el móvil.
? Versión MIDP2.0: versión para móviles con soporte MIDP
versión 2. Una de las características de esta tecnología,
compatible con todos los móviles, es que se puede utilizar toda
el área de la pantalla para mostrar el mapa. La resolución
máxima soportada es 640 x 640 píxeles.

3
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

4. Funcionamiento de la aplicación

A continuación se presenta el funcionamiento de la aplicación con el

ejemplo Metro de Barcelona.

Una vez instalada la aplicación en el dispositivo móvil, nos aparecerá

en la lista de aplicaciones en la sección Java correspondiente.

Seleccionamos la aplicación y elegimos la opción Ejecutar o Abrir. Nos

aparece el splash del programa. Pulsamos cualquier tecla o dirección
del joystick del móvil para continuar y entrar en el menú principal de
la aplicación.

El menú principal y todas las pantallas en las que la aplicación no

tiene que mostrar gráficos son iguales, tanto en la versión midp1.0
como en la versión midp2.0.
En el menú principal del callejero nos encontramos con las siguientes
opciones:

4
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

Opción Mapa: nos muestra el contenido del mapa del callejero.

Versión midp1.0 Versión midp2.0

Dentro de la navegación por el mapa, disponemos del joystick para

movernos poco a poco con un efecto suave de movimiento, y
disponemos de las teclas 2, 4, 6 y 8 para movernos saltos más
grandes por el mapa para un rápido movimiento.

Mediante los botones de función, en la versión midp 1.0, podemos

acceder al Menú principal y a la función Buscar.
En la versión midp 2.0 podemos observar que estas funciones no
aparecen. Para visualizarlas y poder seleccionarlas debemos
previamente apretar el botón del medio del joystick o bien la tecla 5 y
de este modo aparecen en la parte inferior de la pantalla. Si
volvemos apretar estas teclas, volverán a desaparecer las funciones.
Si pulsando las teclas de función, no te responde el programa,
usa la tecla * para Buscar y la tecla # para Menú (sólo en la
versión midp2).

5
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

Versión midp2.0

Opción Buscar: pantalla que permite localizar una dirección y/o un

Punto De Interés.

En Opciones podemos activar y desactivar las casillas dependiendo

del tipo de búsqueda que deseemos realizar.
En la casilla donde se introduce el nombre de la dirección sólo
hace falta 3 caracteres para realizar la búsqueda. La
aplicación mostrará un máximo de 20 coincidencias.
La tecla de función Atrás nos lleva a la pantalla anterior desde la cual
hemos accedido a la función Buscar.
Una vez introducido el nombre pulsamos la tecla de función Aceptar
para comenzar la búsqueda.

6
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

En este caso el resultado es múltiple. Si pulsamos sobre una de las

opciones, nos aparecerá la calle o el PDI seleccionado en el mapa.

Opción Lista de calles: muestra una lista completa de las

direcciones del callejero. La lista de calles puede estar en orden
alfabético si se define así en el fichero correspondiente, y puede
constar hasta un máximo de 3000 calles.

Opción Lista de PDI: muestra una lista completa de todos los

Puntos De Interés que se registren del callejero. Permite hasta un
máximo de 3000 puntos.

7
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

Opción Acerca de: muestra una pantalla con información general de

la aplicación y del autor. Puede contener publicidad.

Opción Salir: cerramos y abandonamos la aplicación.

5. Otras informaciones y datos de interés

La resolución, escala y calidad del mapa pueden variar dependiendo

del tamaño del conjunto del callejero, o sea de las dimensiones
globales del mapa. No es lo mismo el callejero de Barcelona que el de
una ciudad o población más pequeña como puede ser la de Vilassar
de Mar. El tamaño real de la aplicación (código, imágenes del menú y
logos) es de 27KBytes, lo que realmente engorda la aplicación es el
mapa.

Street Guide 2 se puede convertir en todo un mapa turístico, o en

todo un plano de la red de transportes de una ciudad: buses, metro,
RENFE, etc. Conteniendo informaciones o puntos de interés de
museos, monumentos, restaurantes, hoteles, salones, etc.

Street Guide 2 es un callejero electrónico portátil al alcance de

todo el mundo.

8
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

6. Herramientas y ficheros

Los ficheros que contiene el paquete descargable ZIP son:

? Street Guide.jad --- Java Application Descripter

? Street Guide.jar --- Java Archive, contiene el midlet de la
aplicación.

Software necesario para la edición del callejero:

? Compresor IZArc o WINRAR.

? Software edición de imagen, recomendado PhotoShop.

7. Estructura del midlet

NOTA: En esta versión sólo se permite un callejero por midlet.

Con el compresor IZArc abrimos el archivo .jar y descubrimos su

estructura:
? callejero
? icons
? META-INF
? res
? sg

Antes de nada debemos descomprimir todo el contenido del archivo

Street Guide.jar a un directorio cualquiera que esté vacío. El
directorio callejero será el que editaremos. Dentro de ella
descubrimos otro directorio llamado mapas, en el cuál están
guardadas las imágenes que componen el callejero, en formato PNG.

En este mismo directorio callejero, nos encontramos con 3 ficheros:

? config.txt: contiene el nombre, el nº de plano de comienzo a

navegar por el mapa y el número de filas y columnas que
componen el plano del callejero.
? dir.txt: se especifica la situación dentro del plano de las calles.
? pdi.txt: se especifica la situación dentro del plano de los puntos
de interés.

9
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

Directorio mapa: contiene todas las imágenes (en formato .png)

que componen el plano. El tamaño o la resolución de las
imágenes debe ser 128x128 píxeles, independientemente del
móvil que usemos. Por supuesto al cortar las imágenes a esta
resolución, la última fila y la última columna pueden tener
dimensiones diferentes.
Los nombres de las imágenes contiene la coordenada fila y la
coordenada columna separados por ”_”. Posibles valores entre 00
y 99, 100 columnas x 100 líneas, resolución máxima
12800x12800 píxeles.

Ejemplo: plano con 4 líneas y 5 columnas.

00_00 00_01 00_02 00_03 00_04

01_00 01_01 01_02 01_03 01_04
02_00 02_01 02_02 02_03 02_04
03_00 03_01 03_02 03_03 03_04

NOTA: Las imágenes, deben ser .PNG no sirve JPG ni BMP ni

otro formato.

Fichero config.txt: en la primera línea se define el nombre del

callejero, lo que pongamos será lo que aparezca en el menú principal.
En la segunda fila se define el plano que aparecerá cuando entremos
en el mapa.
También se define el número de filas y columnas de imágenes que
componen el mapa de la ciudad. Si lo editáis, veréis algo parecido a
lo siguiente:

Metro Barcelona
start=04_04
lineas=7
columnas=10
//para el buen funcionamiento no añadir más líneas ni espacios.
//INCORRECTO --> lineas 5 <-- no dejar espacios
//CORRECTO --> lineas=5

Fichero dir.txt: en este fichero de deben añadir los nombres de las

calles, avenidas, plazas, etc.. La estructura de cada línea es la
siguiente:

C. Murcia=06_08
Avda. Meridiana=05_12
Sagrada Familia=02_06

10
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

Se especifica el nombre del lugar a buscar + signo “=” + plano donde

se encuentra.
No importa mayúsculas o minúsculas en el nombre de las calles, el
software hará bien la búsqueda pero no colocar acentos ya que el
software sí que los distingue.
Número máximo de líneas (calles) = 3000

Fichero pdi.txt: en este fichero de deben añadir los puntos de

interes del callejero.

Sagrada Familia=03_05
Teleferic de Montjuic=05_04
Teatre Nacional=04_07
Tibidabo=01_06

Se especifica el nombre del PDI a buscar + signo “=” + plano donde

se encuentra.
No importa mayúsculas o minúsculas en el nombre de las calles, el
software hará bien la búsqueda pero no colocar acentos ya que el
software sí que los distingue.
Número máximo de puntos de interés = 3000

NOTA: Dentro de la estructura descrita anteriormente, nos

encontramos con un fichero llamado MANIFEST.MF en el directorio
META-INF. Este fichero describe características, iconos y enlaces a la
classe madre. Debemos abrirlo con un editor de textos (notepad) y
buscamos las siguientes líneas:

MIDlet-Name: Street Guide 2

MIDlet-1: Metro Barcelona, /icons/icono.png, sg.c

La primera parte antes de la coma es editable, o sea, Metro

Barcelona. Si realizamos un callejero de Valencia, donde pone Metro
Barcelona pondremos por ejemplo Callejero Valencia ó simplemente
Mapa Valencia. De esta forma nos queda:

MIDlet-Name: Mapa Valencia

MIDlet-1: Mapa Valencia, /icons/icono.png, sg.c

El texto que indiquemos es el nombre con el cuál nos

aparecerá Street Guide 2 en la lista de aplicaciones en nuestro
móvil.

11
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

8. Carpeta mapa: método para cortar y preparar la

matriz del callejero

Primero necesitamos Photoshop e ImageReady instalado en nuestro

PC. Con otros programas se puede realizar el corte en secciones, pero
vamos a explicar un método sencillo paso a paso con Adobe
Photoshop.

Pasos para completar el corte del mapa:

1. Abrimos el ImageReady y cargamos la imagen del mapa, que

esta debe ser RGB 8 bits.

2. Pulsamos en el menú Select – All como se muestra en la

imagen.

12
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

3. Seleccionamos menú Slices – Divide Slice…

4. Nos aparece la siguiente pantalla:

Debemos indicar 128 píxeles tanto en horizontal como en

vertical, independientemente del modelo de teléfono móvil que
usemos.

13
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

5. El resultado en pantalla es el siguiente:

6. Una vez dividida la imagen debemos seleccionar File – Edit in

Photoshop

14
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

7. Una vez cargada la imagen en el Photoshop, seleccionamos el

menú File – Save for Web…

8. Debemos con el ratón elegir todo el mapa hasta que aparezca

seleccionado en amarillo. En el panel derecho, debemos indicar
formato PNG-8, Adaptative, No dither. Si en el número de
colores seleccionamos 256, los archivos ocuparán bastante.
Debemos bajar el nº de colores hasta llegar a un equilibrio
entre calidad y tamaño.

15
 Aplicaciones para móviles (J2ME)
http://www.eamobile.tk

9. Creación y encapsulado del midlet

Una vez que tengáis todo completo, seleccionáis las 5 carpetas que
anteriormente habéis descomprimido, le dais al botón derecho y
elegís la opción Añadir a comprimido al Archivo mediante IZArc.

Aparece el siguiente dialogo:

Las opciones deben ser las siguientes y no otras:

? Nombre: Street Guide
? Tipo de archivo destino: .jar
? Compresión: Normal
? Método: Deflate

El resultado es un archivo totalmente compatible llamado

Street Guide.jar.

16