GamePlayArt

Iniciamos esta primera vez no sin antes saludarte y decirte que si lo que buscas es aprender junto a nosotros un poco acerca de lo que es la programación de aplicaciones para MOVIL, estás en el lugar indicado.

Antes de seguir revisa bién si tienes estos requisitos que son fundamentales y en cierto modo necesarios para que podamos continuar:

• Conocimiento aunque sea básica en la programación orientada a objetos (POO).
• Contar con el entorno de desarrollo de netbeans de preferencia la versión 6.0 (www.netbeans.org) correctamente instalado.
• Y lo que creo más importante… muchas ganas y deseos de aprender.

Empecemos entonces; siempre dije que los programadores nos encargamos de hacer algunas tareas se vuelvan más sencillas para el humano o lo que es igual  motivar a la humanidad a ser más floja, ahora me lo confirmo pues estos “señores”, los de netbeans, crearon ya en su entorno de desarrollo buenas utilidades para solucionar nuestro tedioso problema de escribir miles y miles de líneas de codigo (exagerando un poquito).  Y ahora nosotros haremos una calculadora que podrá ser implementada en tu movil: comodidad o tecnología, entiéndase como mejor se convenga.

Inicia netbeans y mientras carga vamos repasando algo de teoría que creo es útil lo sepas antes de seguir. Si esta es tu primera vez que crearás una aplicación para tu movil (una calculadora) te diré que lo que estás a punto de hacer es algo parecido a un applet pero de nombre MIDLET mira como lo describe el señor Alberto García Serrano (www.agserrano.com), él nos dice: ”Si estas familiarizado con la programación de applets, conoces las diferencias que tiene con respecto a una aplicación Java normal. La primera es que un applet se ejecuta sobre un navegador web. Otra importante es que, a diferencia de un programa Java estándar, un applet no tiene un método main(), además, un applet tiene que ser una subclase de la clase Applet, e implementar unos métodos concretos (init, start, stop, destroy). En este sentido, un MIDlet es más parecido a un applet que a una aplicación Java estándar. Un MIDlet tiene que ejecutarse en un entorno muy concreto (un dispositivo con soporte J2ME), y tampoco cuenta con un método main(). Un MIDlet tiene que heredar de la clase MIDlet e implementar una serie de métodos de dicha clase.”

Te preguntarás ¿qué es J2ME?, natural, en mi momento también lo hice; ésto no es mas que las iniciales de Java 2 Micro Edition  (Java 2 edición micro); si eres de los que les gusta leer aqui te pongo un link donde te empararás mas acerca de esto. Pero en resumidas palabras la plataforma J2ME es una familia de especificaciones que definen varias versiones minimizadas de la plataforma Java 2; estas versiones minimizadas pueden ser usadas para programar en dispositivos electrónicos; desde teléfonos móvil, en PDAs, hasta en tarjetas inteligentes, etc. Estos dispositivos presentan en común que no disponen de abundante memoria ni mucha potencia en el procesamiento, ni tampoco necesitan de todo el soporte que brinda el J2SE, (la plataforma estándar de Java usada en sistemas de escritorio y servidor) .  ¿Aún quieres conocer un poco de historia?, mirá que nos dicen en la ciberaula de java (dale click aqui).

Por el momento creo que esto es suficiente, vamos a crear ahora nuestra calculadora que por cierto en esta vez sólo hará operaciones básicas de suma, resta, multiplicación y división; en entradas posteriores te hablaré de algo más que esto. Vuelve a netbeans y crea un proyecto: File-> New Project; desplázate hasta llegar a Mobility y al seleccionar esto verás al lado derecho MIDP Aplication, seleccionado y dale siguiente. Pon el nombre que desees al proyecto, yo lo llame “CalculadoraBasica” es opcional que deshabilites el ‘Create Hello Midlet’ si no deseas que NetBeans cree automáticamente ya un midlet por nosotros, finaliza con esto la creación de un proyecto.

Empecemos a añadir un midlet, esto es, file->new file; ahi al vemos una ventana similar a la anterior (ver imagen arriba) y elejimos en la izquierda ’MIDP’ y a su derecha ‘Visual Midlet’ presiona siguiente y dale un nombre al nuevo midlet que estamos creando, ten en cuenta que este nombre es el que verás en el equipo móvil antes de  ejecutar. En mi caso le puse “CalculadorSimple”, presiona finish y apreciarás una ventana similar a la que te muestro.

A partir de eso podemos decir que en el lado derecho del IDE vemos varios componentes en la paleta: Displayables, Commands, Elements, Items, entre otros. En J2ME, un objeto Displayable contiene la información que va a ser visualizada, y son controlados por un objeto Display quien gestiona qué objeto Displayable se mostrará al usuario. En MIDP existen tres categorías de Displayable: Screen con estructura predefinida: Alert, List y TextBox, que encapsulan componentes de interfaz complejos y que las aplicaciones no pueden enriquecer con nuevos componentes. Screen genérica: Form, las aplicaciones pueden llenar este tipo de pantalla con texto, imágenes u otros componentes de interfaz de usuario. Canvas, las aplicaciones tienen control total sobre la aparición de componentes en el display y puede acceder directamente a eventos de bajo nivel. Por otro lado la clase Display proporciona los métodos que nos permiten controlar la visualización de los objetos Displayable y obtener propiedades del display (si soporta color o no, número de colores,…).

Agreguemos un ‘Displayable’ en nuestro midlet para esto arrastra un form desde la paleta al midlet o bien dentro del midlet dale clic derecho dentro de new/add elije form.

En la parte superior del midlet veremos tres fichas: Source, Screen, Flow y Analizer; nos interesa las tres primeras ya que al habilitar Source estaremos viendo todo el código que va generando el IDE, dentro de Screen vemos el displayable en su totalidad; y pues Flow es el estado en que vemos en la imagen y no es nada mas que como una visualización “resumida” de los diferentes displayables que estamos haciendo uso, en nuestro caso es solo uno pues el primero que viste solo es el midlet propiamente dicho.

Ok, ahora que ya tenemos un form dentro nuestro primer midlet solo debemos arrastar con el mouse desde el midlet el comando Started hasta nuestro form, con esta acción estamos diciendo que en cuanto arranque el midlet debe de ir directamente al form. Dirígete al form agregado y añade un Comand ( clic derecho sobre form new/add -> exitCommand) y realizamos la misma acción que inicimos con Started pero esta vez en sentido contrario, le diremos al form que cuando el usuario diga salir vaya directamente al inicio del midlet.  Por esta vez omitiré cuales son los estados en los que se encuentra un midlet pues al inicio dijimos que son como los applet’s pero no indicamos a detalles cuales son éstos pero ya vamos conociendo a dos estados (Started, Resumed).

Selecciona el form y habilita la pestaña Screen o simplemente dale doble clic a nuestro displayable form, te encontrarás con una pantalla similar a la que te muestro en la siguiente imagen.

Es aqui donde el usuario final vera y operará para poder realizar la tarea por la que iniciamos esta entrada.

A mi se me ocurre que el usuario solo tendrá dos operandos que nos dará como dato y nosotros le devolvemos en otro lado de la misma ventana el resultado de la operación, siempre y cuando no haya sucedido ningún error. Es asi que arrastraré tres componentes de la paleta que se llaman textField de la opción Items.

Ahora en la parte inferior de la paleta podemos ver las propiedades de cada componente según hayamos seleccionado, por ejemplo, cambiaré el título del form que el usuario verá; para esto me voy a su propiedad title y ahora procedo a cambiar algunas propiedades de los textfield como ser: label (titulo) y su propiedad Input Constraint pues le diremos que solo acepte números decimales y así controlamos posibles errores que como siempre el usuario aunque sea intencionalmente los comete (esto es: sumar dos letras, introducir nombres como dato, etc); hacemos todos los cambios a decimal de todos los textField excepto para el textField del resultado que lo dejaremos en su propiedad por defecto, ANY (ANY permite escribir cualquier dato sea número o letra). Ahora le pongamos opciones para que pueda hacer las 4 operaciones básicas pero de una en una, así que añádele 4 okCommand’s a nuestro form y cambiemosle a cada uno de ellos su propiedad label e Instance Name por Suma y sumaComando respectivamente; hazlo para cada comando que añadiste.

Si hiciste todo correctamente verás algo similar a la imagen que te muestro.

Hasta ahora lo único que hicimos fue arrastrar y soltar casi ni tocamos el teclado solo para algunas pequeñas cositas pero te preguntarás a que hora escribimos el código, pues veamos todo lo que ya hizo por nosotros el entorno de desarrollo. Habilita la ficha Source y revisa de arriba hacia abajo, ¿te parece mucho?.

Bien, ahora vámonos a escribir código nosotros mismos y programemos esos comandos que añadimos arriba. ¿Estas en Source verdad?, verás a tu izquierda todos los métodos implementados hasta el momento los que por su puesto los escribió NetBeans; existen ciertas líneas de código que no se nos permite modificar así que busquemos el método ‘commandAction(Command command, Displayable displayable)‘ dale doble click y te llevará directo al método que modificaremos para nuestra calculadora. Te muestro una imagen.

Antes que nada necesitamos dos variables en las cuales almacenar los operandos que nos de el usuario. Luego según sea el comando hacemos la operacion de suma, resta, multiplicación o división; no olvides programar también para cuando haya una división de controlar las excepciones pues puede que el usuario intente dividir entre cero (como generalmente sucede). Te muestro como quedo el mío:

double valor1= Double.parseDouble(this.textField.getString());
double valor2= Double.parseDouble(this.textField1.getString());
if (displayable == form) {

if (command == divideComando) {try { this.textField2.setString(String.valueOf(valor1/valor2)); }
catch (Exception io){ this.textField2.setString(io.getMessage());}}
else if (command == exitCommand) {exitMIDlet();}
else if (command == multiplicaComando) {textField2.setString(String.valueOf(valor1*valor2));}
else if (command == restaComando) {textField2.setString(String.valueOf(valor1-valor2));}
else if (command == sumaComando) {textField2.setString(String.valueOf(valor1+valor2));}
}

Esto fué todo compila el código (F9) si hay errores corrígelo luego ejecuta (F6) que ya todo está listo!! xD. Verifica todos los eventos que escribiste, esto lo lograrás intentando escribir letras por ejemplo, o caracteres especiales u otros como dato; verás que esto está controlado, así como también la división entre cero.

Ya finalizando esta entrada resumidos los siguiente (para mal o para bien):

1.  NetBeans y su IDE nos facilita muchas tareas a la hora de hacer aplicaciones para celular.
2. La programación sigue siendo un arte.
3. Los programadores hacemos floja a la humanidad.

Espero haber sido lo más claro posible en esta primera entrada, cualquier consulta acerca del contenido del mismo remítela a joseluiszelaya@gameplayart.com o déjame tu comentario en este post, te espero en la próxima!.

Aqui tienes el proyecto completito pero mejor si lo haces vos mismo. Descargar proyecto desde aqui calculadorabasica