GUIA DE INICIO RAPIDO Guía de Inicio Rápido en Desarrollo de Aplicaciones Java MIDP Aprender haciendo es mejor que aprender viendo o aprender escuchando, por lo que a continuación encontrarás un tutorial paso a paso de cómo hacer su primer programa hasta la instalación y ejecución en un celular. El propósito de esta guía es tener un primer acercamiento al desarrollo de software para dispositivos móviles y que mejor que hacerlo con una aplicación desarrollada rápidamente.
Fig. 1. Bosquejo de la aplicación.
Si realiza los pasos mencionados a continuación terminara desarrollando una aplicación que podrá ejecutar en cualquier celular que tenga soporte java.
Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO Bien en primer lugar tienes que abrir el programa Netbeans.
Fig. 2. Apertura de Netbeans Pasados unos segundos se abrirĂĄ el IDE(entorno integrado de desarrollo) Netbeans y tendremos una ventana como la siguiente:
Ing Alexander MontaĂąa Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO
Fig. 3 Pantalla Inicial de Netbeans. Comenzamos con la creaci贸n de un proyecto, haciendo clic sobre el men煤 Archivo(File) y sobre la opci贸n Nuevo Proyecto(New Project).
Ing Alexander Monta帽a Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO
Fig. 4 Creando el proyecto. Este paso nos ubicará en una ventana asistente para la creación del proyecto aquí seleccionamos la Categoria Java ME y en la parte derecha elegimos el tipo de proyecto Aplicación Móvil(Mobile Application).
Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO Hacemos luego clic en el botón Siguiente(Next) para continuar con el siguiente paso. En este momento el asistente nos pedirá el nombre para el proyecto y la ubicación donde se guardará. Le vamos a colocar por nombre primerEjercicio y quedará ubicado en la carpeta NetbeansProject de mis documentos que es la que por defecto almacena los proyectos de Netbeans.
Fig 6. Configuración de nombre y ubicación del proyecto. Vamos a desmarcar la opción Create Hello Midlet ya que en un paso próximo lo crearemos. En el próximo paso tendremos que establecer algo que se llama el perfil y la configuración que vamos a usar en nuestra aplicación. La configuración que elegiremos será CLDC 1.1 y el perfil MIDP 2.0, en realidad estos dependen del tipo de dispositivos a los que pretendemos orientar nuestra aplicación, por lo pronto solo asegúrate de que esté marcado las versiones de CLDC y MIDP señaladas, más adelante tocaremos el tema con mas profundidad.
Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO
Fig. 7 Seleccionando emulador, configuraci贸n y Perfil MIDP. En este momento ya tenemos configurado nuestro proyecto y procedemos a hacer clic sobre el bot贸n Finalizar(Finish) como se ve en la figura 8.
Fig. 8 Terminar la configuraci贸n del nuevo proyecto.
Ing Alexander Monta帽a Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO Con la creación del proyecto únicamente se crea una estructura de directorios y archivos de configuración. A continuación vamos a crear un MIDLet que no es otra cosa que un programa que se puede ejecutar en un celular, haciendo clic derecho sobre paquete de fuentes(source packages) y en el menú contextual seleccionamos Nuevo(New) y Midlet Visual(Visual Midlet).
Fig. 9 Creando el Visual Midlet Cargará un asistente que nos permite establecer el nombre del Midlet para el ejemplo le colocaremos Programa1 y haremos clic en el botón Finalizar(Finish) según puedes ver en la imagen 10.
Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO
Fig. 10 Creando un nuevo Midlet. El visual Midlet es una forma de trabajar midlets de una forma fácil y rápida. Quedaremos ubicados en una ventana como la que se muestra en la imagen siguiente
Explorador del proyecto
Paleta de Herramie ntas Espacio de Trabajo
Fig. 11 Descripción general del espacio de trabajo. Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO Bien aquí rápidamente miraremos como está organizado el espacio de trabajo.
En la parte izquierda tenemos 3 ventanas que nos permiten explorar el proyecto: proyectos(projects), Archivos(Files) y Servicios(Services). En Proyectos que es la vista que tenemos el árbol del proyecto, de aquí es importante identificar el paquete de fuentes (Source Package) en el que guardaremos nuestros MIDLets, imágenes, recursos multimedia, entre otros. Si cambiamos a la pestaña de Archivos miraremos la estructura de carpetas y de ficheros que forman el projecto.
Fig. 12 Explorador del proyecto.
Por otro lado tenemos un espacio sobre el que pasaremos la mayor cantidad de nuestro tiempo aquí tenemos nuestro midlet(Programa1) abierto y una herramienta visual que nos permite crear rapidamente la aplicación. Es de resaltar la existencia de las pestañas: Fuente(Source), Pantalla(Screen) y Flujo(Flow). En Fuente encontrarás el codigo fuente de la aplicación en lenguaje java, en pantalla si tenemos un formulario podemos diseñarlo agregandole componentes y en flujo que es la vista actual podemos establecer acciones a realizar de forma grafica como por ejemplo que al oprimir un boton de comando se cierre la aplicación. El cuadro que aparece en la imagen 13 llamado Mobile Device representa el dispositivo movil y las opciones que tiene Started significa que el punto de partida cuando se inicia la aplicación en el celular y la opcion resumed corresponde al punto en el cual se cierra la aplicación.
Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO
Fig. 13 Ventana de diseño del flujo del visual Midlet Finalmente en la parte derecha tenemos una paleta de herramientas que podemos usar cuando diseñamos una interfaz de usuario de nuestra aplicación. Acá temenos organizados por categorias los diferentes elementos de interfaz grafica de usuario que podemos usar en nuestro midlet(aplicación) en este ejercicio vamos a usar un Formulario(Form) de la categoria Visualizables(Displayables).
Fig. 14 Paleta de herramientas
Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO El paso siguiente consiste en agregar un formulario que será la ventana que contendrá nuestro botón y nuestro mensaje Ver fig. 1. Para ello nos ubicamos en el espacio de trabajo en la pestaña Flujo (Flow) y desde la paleta de herramientas arrastraremos un formulario (Form) y lo soltaremos en cualquier parte de nuestro flujo de aplicación como se ve en la figura 15. En este punto tenemos un formulario vacio que podemos usar, pero que si ejecutamos la aplicación no podremos verlo ya que el punto de start del dispositivo movil no esta enlazado con el formulario.
Fig. 15 Agregando un Form a la aplicación.
Bien el paso siguiente será personalizar nuestro form para ponerle un titulo y agregarle un texto. Pasamos a la pestaña Screen para diseñar nuestro Formulario por lo que nos aseguramos que este seleccionado en la lista desplegable nuestro form, para el
Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO caso no hay lio ya que solo tenemos un formulario pero si tuviésemos más de uno deberíamos seleccionarlo. Por defecto está vacío habrá que agregarle un elemento que nos permita desplegar el texto “Programa Creado por …” y reemplazar los 3 puntos por su nombre.
Fig. 16 Agregando un StringItem al formulario. Haciendo clic sostenido al objeto StringItem de la barra de herramientas arrastrándolo y soltándolo sobre el formulario se agregará y quedará como ves en la figura 16. Para cambiar el texto de título del formulario por “Bienvenidos” tendrá que hacer doble clic sobre el texto que tiene por defecto y escribir el nuevo texto y oprimir la tecla enter. De esta misma forma deberá cambiar el texto por defecto del StringItem por el texto Programa creado por <tu nombre>. Si en este momento se ejecuta el programa seguramente no podremos ver el Formulario ya que no lo hemos enlazado con el punto de inicio del aplicación con el formulario que queremos ver.
Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO
Aparece entonces la informaci贸n que expresa que la aplicaci贸n no usa ninguna pantalla y que corre en segundo plano. Hay que solucionarlo porque se requiere que se vea el formulario y para solucionarlo haremos lo siguiente: haciendo clic sostenido sobre Started de Mobile Device lo soltamos sobre form, con esto se debe formar un enlace entre estos dos.
Fig. 18 Haciendo form la pantalla inicial. Ing Alexander Monta帽a Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO
Fig. 19 Form establecido como pantalla inicial.
Hasta este momento la ejecución del proyecto quedaría como se ve en la imagen 20, va bastante bien pero aún falta poner un comando para cerrar la aplicación.
Fig. 20
De la paleta de herramientas arrastra el ExitCommand y lo suelta sobre el form.
Fig. 21 Agregando un comando de salir
Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO En el flujo de la aplicación arrastro del form el comando exitCommand y con clic sostenido lo llevo hasta el marco de Mobile Device.
Fig. 22 Configurando la acción de salida sobre el comando.
Fig 23 Ejecutando el proyecto Al hacer clic en el botón de ejecutar proyecto debería funcionar correctamente, pero ya que usamos el Diseñador visual para el midlet en cocaciones(como en este caso) la herramienta no agrega un pedacito de código que hace que el mismo midlet procese las acciones de los comandos.
Ing Alexander Montaña Bello amontana@areandina.edu.co
GUIA DE INICIO RAPIDO Revise en el código esta línea de código:
Y haga que se vea como en la imagen siguiente:
Fig 25. Implementando CommandListenner Escribiendo implements CommandListener programa sin ningún problema.
Ing Alexander Montaña Bello amontana@areandina.edu.co
, ahora podrá ejecutar el
GUIA DE INICIO RAPIDO
Fig. 26 Ejecuci贸n del proyecto
En un pr贸ximo documento miraremos como hacer la instalaci贸n en el dispositivo.
Ing Alexander Monta帽a Bello amontana@areandina.edu.co