PDF de programación - Programación J2ME - Interfaz gráfico para el tetris

Programaci ón J2ME con
Netbeans

Interfaz gráfico para el tetris

Septiembre de 2006

Curso de Formación Continua de Programación de

dispositivos móviles con Java (4a edición)

Septiembre de 2006

Índice

1.

Introducci ón

2. Creaci ón del proyecto

2.1. Pasos iniciales de creación . . . . . . . . . . . . . . . . . .
2.2. Refactorización del código . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
2.3. Cambiar el nombre al MIDlet

3. Dise ñador de flujo

3.1. Creación de un screen alert . . . . . . . . . . . . . . . . . .
3.2. Conexión del screen alert con el flujo de la aplicación . . .

4. Visualizaci ón del c ódigo fuente generado por el IDE

5. Dise ñador de pantallas

5.1. Añadir nuevos componentes en una pantalla . . . . . . . .
5.2. Añadir componentes no visuales . . . . . . . . . . . . . . .
Inserción de imágenes en el proyecto . . . . . . . . . . . .
5.3.

6. Creaci ón de un Canvas como panel del juego

7. Asignaci ón de acciones a los comandos del Canvas y hello-

Form

8. Pintar el tablero de juego en el Canvas

9. Movimiento de la figura del tetris

10.Movimiento a izquierda y derecha y rotaci ón de la figura

11.Posibles mejoras del juego

5

6
6
7
8

9
10
11

11

12
13
14
16

17

21

22

24

26

27

Programación de dispositivos móviles con Java Interfaz gráfico para el tetris

5

Figura 1: Ventana inicial de Netbeans

1.

Introducci ón

Netbeans es un entorno de desarrollo integrado (IDE) que permite edi-
tar programas en java, compilarlos, ejecutarlos, depurarlos, construir rápi-
damente el interfaz gráfico de una aplicación eligiendo los componentes
de una paleta, etc.

La idea de este guión es que el alumno aprenda por sí sólo las princi-
pales utilidades que proporciona Netbeans para construir el interfaz gráfi-
co de una aplicación J2ME. Nosotros utilizaremos la versión 5.0 de Net-
beans junto con el Netbeans Mobility Pack 5.0. Esto nos facilitará enor-
memente la tarea de construir aplicaciones J2ME, sobre todo en cuanto
al interfaz gráfico.

Este software tanto para linux como para Windows, puede descargarse
gratuitamente de la página web http://www.netbeans.org/. En esa
página también pueden encontrarse diversos documentos para aprender
a usar Netbeans. Existe un libro sobre Netbeans que puede encontrarse
en pdf en la dirección
http://www.netbeans.org/download/books/definitive-guide/
index.html
aunque el libro está hecho para la versión 3.5 (la última versión estable es
la 5.0, aunque actualmente existe una versión beta2 de netbeans 5.5).

Netbeans 5.0 se encuentra instalado en las aulas de prácticas de la
ETSII en linux fedora core 4, en el directorio /usr/local/netbeans5.0. Pue-
des ejecutar netbeans abriendo un terminal y ejecutando el comando:

netbeans

5

Programación de dispositivos móviles con Java Interfaz gráfico para el tetris

6

Figura 2: Tetris funcionando en el emulador

Tras unos segundos, aparecerá una ventana similar a la de la figura 1.
En este guión construiremos un programa J2ME para jugar a una ver-
sión simple del juego del tetris. El aspecto que tendrá el programa en el
emulador una vez terminado es el que aparece en la figura 2.

2. Creaci ón del proyecto

2.1. Pasos iniciales de creaci ón

El primer paso consiste en crear el proyecto para el juego del tetris.
Después de iniciar el IDE de Netbeans, seleccionamos Men ú File → New
Project. En la primera página del wizard para New Project selecciona-
mos Mobile como categoría y Mobile Application como tipo de proyecto
(figura 3). Pulsamos ahora el botón Next.

En la siguiente ventana (figura 4) introducimos Tetris5.5 como nombre
del proyecto. En Project Location introduce el directorio (carpeta) donde
guardas tus proyectos Netbeans. Este directorio debe estar creado previa-
mente. En mi caso es el directorio /home/gte/acu/CursoJavaMobil/ProjectsNB.

Pulsa de nuevo el botón Next asegurándote antes de que las opciones
Set as Main Project y Create Hello Midlet están seleccionadas. Aparece
la siguiente ventana (figura 5) que nos permite seleccionar la platafor-
ma con la que queremos compilar nuestro programa (versión de MIDP y
CLDC). Dejaremos seleccionadas las opciones por defecto (CLDC-1.1 y
MIDP-2.0).

En la siguiente ventana (figura 6) pulsamos el botón Finish para ter-

minar de crear el proyecto, sin seleccionar ninguna opción.

Tras unos instantes, el IDE habrá creado un nuevo proyecto MIDP 2.0
que puede ser compilado y ejecutado desde el mismo entorno. Por ahora
el proyecto contiene únicamente la clase HelloMIDlet y el paquete hello

6

Programación de dispositivos móviles con Java Interfaz gráfico para el tetris

7

Figura 3: Creación de una nueva aplicación

Figura 4: Definiendo el nombre del proyecto

como puede observarse en el panel superior izquierda del IDE (panel de
proyectos), suponiendo que la solapa Projects está seleccionada (figura
7).

2.2. Refactorizaci ón del c ódigo

A continuación cambiaremos el nombre de la clase principal y del pa-
quete usando otros nombres más adecuados para este proyecto. Usare-
mos como nombres de clase y paquete, TetrisMidlet y tetris respectiva-
mente. Esto puede hacerse pinchando con el botón derecho del ratón en
el nombre del paquete (en el panel de proyectos, donde aparece la estruc-
tura jerárquica de nuestro proyecto), y seleccionando Refactor → Rena-
me .... Aparecerá una ventana (figura 8) donde introduciremos tetris como
nuevo nombre para el paquete. Marcaremos la casilla Apply Rename on
Comments para que el cambio afecte también a los comentarios del códi-
go fuente, y pulsaremos el botón Next. Si en esa ventana teníamos selec-
cionado la casilla Preview All Changes, entonces será necesario pulsar el
botón Do Refactoring en el panel Output (panel de Salidas) que está en

7

Programación de dispositivos móviles con Java Interfaz gráfico para el tetris

8

Figura 5: Ventana de configuración de la plataforma para el proyecto

Figura 6: Ventana de creación de configuraciones de proyecto adicionales

la parte inferior izquierda del IDE (figura 9).

Repite la misma operación para el nombre de la clase (fichero HelloMiddlet.java)

usando ahora el nombre TetrisMidlet.

2.3. Cambiar el nombre al MIDlet

Ahora vamos a poner Tetris como nuevo nombre para el MIDlet. Pa-
ra ello selecciona Men ú File → Tetris Properties para que se muestre
el diálogo de propiedades del proyecto (10). Selecciona el item MIDlets
dentro del nodo Aplication Descriptor y cambia el nombre del MIDlet de
HelloMIDlet a Tetris. Finalmente, pulsa el botón Ok para aceptar los cam-
bios.

El código fuente J2ME generado por netbeans, puede verse si pincha-
mos en la solapa Source del panel de diseño (panel del lado derecho).
Aparece algo así como lo que muestra la figura 11.
Podemos ejecutar el proyecto mediante Men ú Run → Run Main Pro-
ject. Esto hará que se compile la aplicación y se lance el emulador J2ME.
La aplicación no hace mucho por ahora.

8

Programación de dispositivos móviles con Java Interfaz gráfico para el tetris

9

Figura 7: IDE tras crear el proyecto

Figura 8: Renombrar el paquete

3. Dise ñador de flujo

El diseñador de flujo (Flow Designer) nos muestra una representación
gráfica de alto nivel del flujo de la aplicación, esto es, de las relaciones
entre las diferentes pantallas (screens) del midlet incluyendo las transicio-
nes que comienzan y finalizan la aplicación. El IDE de Netbeans genera
automáticamente la mayoría del código fuente, lo que hace que sea una
forma muy simple y adecuada de desarrollar el interfaz de usuario de una
aplicación.

El diseñador de flujo aparece en la parte central del IDE de Netbeans.
Para ello, la solapa TetrisMidlet correspondiente a nuestro proyecto de-
be estar seleccionada. También debe estar seleccionada la solapa Flow
Designer (figura 12).

El siguiente paso que haremos será el de añadir una pantalla de pre-

9

Programación de dispositivos móviles con Java Interfaz gráfico para el tetris

10

Figura 9: Realizar la refactorización

Figura 10: Cambio de nombre al midlet

sentación a nuestro proyecto. Nos servirá para mostrar información sobre
la aplicación cuando ésta comience a ejecutarse. Nosotros emplearemos
para ello una alerta de MIDP (alert screen).

3.1. Creaci ón de un screen alert

Para añadir la alert screen a nuestra aplicación arrastramos el item
Alert de la paleta de componentes (situado a la izquierda de la ventana
Flow Designer, que está dentro de la categoría Screens) hacia el área
blanca del diseñador (figura 13).

Selecciona el nuevo screen alert en la ventana del diseñador de flujo
para modificar sus propiedades Title y String. En la ventana de propie-
dades (Properties) situada a la derecha del IDE, introduce el valor que
tú quieras en los campos Title y String. En mi caso he introducido Java
Tetris y Bienvenido al juego del Tetris respectivamente. En Timeout intro-
duce 2 segundos (valor 2000).

Finalmente, en el apartado Code Properties, renombra el item Instance
Name con el nombre splashAlert. Esto hará que en el código fuente de
TetrisMidlet, se cree una variable llamada splashAlert que representará la
nueva screen creada.

10

Programación de dispositivos móviles con Java Interfaz gráfico para el tetris

11

Figura 11: Código fuente

3.2. Conexi ón del screen alert con el flujo de la aplica-

ci ón

Conectemos ahora la alerta con el flujo de la aplicación. Pincha con el
botón derecho del ratón sobre el icono Mobile Device en la ventana Flow
Designer. Selecciona Properties en el menú, para abrir las propiedades
de diseño del Midlet (figura 14).

En el diálogo resultante pulsa el botón etiquetado con ... de la propie-
dad Start Point Action. Esto hace que se abra un nuevo diálogo para esta
propiedad (figura 15) . En este diálogo, modificar la pantalla destino (Tar-
get screen) a splashScreen y Alert Forward screen a helloForm. Pulsa el
botón Ok y cierra la ventana de prop