Guía 1 – La primera aplicación (3)
- Ahora nos paramos en el paquete view, damos clic derecho, seleccionamos New >> Java Class… (Figura 11), y nombramos la nueva clase (Figura 12) yo la llame IntroForm.
Figura 11. Nueva Clase
Figura 12. Nombre de la Clase
De igual forma creamos una nueva clase llamada ItemsForm.
Figura 13. Estructura General
Al final de crear la MIDlet como las clases, la estructura general se vera como la figura 13, con cada uno de sus archivos en sus paquetes respectivos, en el paquete res añadí unas imágenes en formato png, las cuales serán desplegadas en algunos de los screens de la aplicación, las imágenes tienen que ser pequeñas, por ejemplo la más grande que tengo es de unos 200x140 pixeles aprox. Las imágenes las puedes añadir directamente a la carpeta res desde el Explorer de Windows.
- Ahora el código genérico para las clase será el siguiente (IntroForm.java, ItemsForm.java):
package view;
import javax.microedition.lcdui.Command;
import javax.microedition.lcdui.CommandListener;
import javax.microedition.lcdui.Displayable;
import javax.microedition.lcdui.Form;
public class IntemsForm extends Form implements CommandListener{
public ItemsForm() {
super(" Items Menu");
initForm();
}
private void initForm() {
}
public void commandAction(Command command, Displayable displayable) {
}
}
Ambas clases parten del mismo código genérico, solamente debes cambiar el nombre que se encuentra subrayado y en negrita (ItemsForm -> ItensForm.java) para cada una de las clases (IntroForm -> IntroForm.java). Este tipo de clase son heredan la clase Form que se utilizan como, formas de visualización para el dispositivo, en ellas se pueden manejar ciertos Ítems que se adicionan a estas formas como, Imágenes, StringItem, Comandos, ChoceeGroup, TextField, etc. Todo esto para formar la interfaz grafica que visualizara el usuario, también hay que trasformar la clase para que maneje eventos, como por ejemplo al pulsar la tecla select del dispositivo en algún item de la forma se debe ejecutar cierta acción como salir de la aplicación o pasar a la siguiente visualización esto se hace mediante la implementación de la interfaz CommandListener.
En el constructor aparece la línea de código super(" Items Menu"); esta línea de código es necesaria ya que se requiere por heredar de la clase Form, y es el nombre de nuestra forman, la función initForm se utilizara para inicializar todos los ítems y comandos que manejara nuestra forma, y la función commandAction se utiliza para desarrollar el código necesario cuando ocurre algún evento por parte del usuario o el dispositivo.
- Ahora comenzaremos a construir nuestra primera forma IntroForm, lo que se realizara es crear una pantalla de bienvenida, solamente clocaremos algunos ítems como un StrinItem que sirve para desplegar texto, y una imagen, algunos comandos y listo ya tenemos nuestra primera forma el código esta en la figura 14.
Se adicionaron 3 nuevos imports que manejan a los Ítems como Image (línea 20), ImageItem (línea 21), StringItem (línea 22), se crearon los atributos respectivos y dos atributos tipo Command que servirán para ver la siguiente pantalla o salir de la aplicación (linaes de la 32 a 34 y 39 a 40).
En la función InitForm Se inicializan los atributos sItMensaje que será el mensaje que se desplegara en pantalla para esto al constructor se le pasan 2 parámetros, el primero es el nombre de label o del Ítems y el segundo el mensaje que queremos desplegar (línea 51 y 52). Después viene la inicialización de la imagen para esto primero inicializamos un atributo tipo Image img1 con la función Image.createImage(“ruta del archivo”), en este caso la ruta la tome comenzando desde el directorio del proyecto, después el paquete res y por ultimo el nombre de la imagen png “/res/helloword.png” (línea 55) , una recomendación es que siempre que se intente cargar una imagen se realice dentro de un try y catch como se ve en el código, para evitar ejecución erróneas de la aplicación, después se inicializa el atributo imgItem1 el cual sea el que se desplegara en pantalla, el constructor recibe 3 parámetros, el primero es el nombre que se desplegara antes de la imagen, en este caso coloque puros saltos de línea para que la imagen “aparezca” casi en el centro de la pantalla del dispositivo, el segundo parámetro es la imagen que la cual ya la hemos cargado en el atributo img1, y el tercer parámetro es su distribución si se quiere que la imagen aparezca al lado izquierdo de la pantalla, en el centro, o a la derecha, en este caso se dejo que apareciera en el centro (línea 56).
Ahora inicializaremos los comandos, por ejemplo el comando que nombramos cmdExit se utilizara para finalizar la aplicación, para inicializar un comando se necesita pasar 3 atributos al constructor, el primero es el nombre con el cual aparecerá en el dispositivo, el segundo es el tipo de comando, en este caso un comando de salida y el tercero es la prioridad del comando (líneas 61 y 62), el tipo de comando Command.Exit es para salir de la aplicación, Command.Screen se utiliza para cambiar la pantalla hacia otra Forma o Lista, Command.Back para retornar a una visualización anterior, etc. Puedes ver todos los tipos de comandos con la ayuda del IDE de netbeans hay como unos 8 tipos de comandos.
Figura 14. Código IntroForm.java
Luego de inicializar los Ítems como los comandos, estos se deben adicionar a la forma, los ítems se adicionan con la función append(“nombre item”), y los comandos con addCommand(“nombre comando”) (líneas 64, 65 y 67, 68), por ultimo activos el detector de eventos llamando a la función setCommandListener(“forma o lista”), a esta hay que pasarle como parámetro un objeto en este caso la forma initForm la cual también la nombramos internamente como this (línea 73).
Ahora veremos como capturamos los eventos, esto se realiza dentro de la función commandAction (Command command, Displayable displayable), el parámetro de entrada importante en este caso es command, ya que este es el comando que se activara en el momento, el parámetro command de entrada se comparará con alguno de los dos comandos que creamos (cmdExit o cmdItems), si este comando es igual a alguno de nuestros comandos, se procederá a ejecutar cierta acción, en el caso de que sea igual al comando cmdExit se ejecutan las líneas 78 y 79 que finalizan la aplicación, y si es igual cmdItems, se ejecuta la línea 82 la cual llama a nuestra otra forma ItemsForm para que se visualice en pantalla. Una aclaración en este código y que todavía no he explicado, es la forma en como se llaman estas funciones, primero hacemos referencia a la midlet, y luego ejecutamos una función, por ejemplo en la línea 82 tenemos GuiaMidlet.midlet.getDisplay().setCurrent(GuiaMidlet.itemsForm); con lo cual queremos decir que al despliegue de nuestra midlet lo actualicemos con nuestra forma itemsForm para que se vea en pantalla, a continuación aclarare un poco esto.
- En la explicación anterior, vimos como inicializar una forma o interfaz de usuario la cual se vera en el dispositivo, también como se capturan eventos, tal vez esta parte no se haya entendido bien pero con el código de la midlet quedara un poco más claro, el código de la midlet esta en la figura 15.
Lo que realizaremos aquí es, realizar el import respectivo del paquete en donde creamos nuestras formas el paquete view (línea 11), luego creamos un objeto de la MIDlet que sea genérico y el mismo para toda la aplicación (línea 20), luego creamos dos atributos que manejaremos de manera global de nuestras formas (introForm y itemsForm) (líneas 23 y 24).
En la función inicializar, inicializaremos nuestra MIDlet, en este caso cargaremos en memoria apenas inicia nuestra aplicación, las dos formas (líneas 31 y 32) y la aplicación la inicializaremos para que despliegue en pantalla una forma predeterminada en este caso introForm, esto se hace por medio de la función getDisplay().setCurrent(introForm) (línea 34), getDisplay obtiene el despliegue actual y setCurrent establece el despliegue actual con alguna forma o lista que pasemos como parámetro, en nuestro caso introForm.
La función startApp se ejecuta cuando la aplicación inicia, este lugar será apropiado para establecer nuestro objeto global de la MIDlet, el cual lo hemos llamado midlet (línea 45), ya que cuando se ejecuta esta función ya se ha realizado el proceso de inicialización de la MIDlet.
La función destroyApp se ejecuta cuando deseamos finalizar la aplicación, aquí colocamos a nuestra dos formas (introForm y itemsForm) en nulo (líneas 52 y 53) y llamamos a recolector de basura para que libere memoria del dispositivo (línea 54).
Espero que con esto ya que de más clara la explicación que realice de la clase introForm.java
Figura 15. Código GuiaMidlet.java
- Ahora el código de la forma ItemsForm.java figura 16. En este código no hay nada raro, solamente se añadió un comando el cual se utilizara para salir de la aplicación.
Figura 16. Código ItemsForm.java
- Después de haber realizado la respectiva codificación de los archivos, podremos ver ahora lo que se ha creado ejecutando el proyecto, primeros colocamos el cursor del Mouse en el proyecto, presionamos el clic derecho del Mouse, seleccionamos Build Project (figura 17.), luego de nuevo damos click derecho en el proyecto y seleccionamos Run Project
Luego se ejecuta automáticamente el emulador (Figura 19.), seleccionamos el nombre de la aplicación y corremos la aplicación.
Figura 19.
Ahora nos aparece esto (figura 20), si seleccionamos entrar nos pasara a la siguiente forma (figura 21), y si seleccionamos Salir cerraremos la aplicación, en la siguiente pantalla que visualizamos (figura 21) solo hay un comando, Salir, lo seleccionamos y finalizamos nuestra aplicación:
Espero que con esta pequeña introducción a desarrollo de aplicaciones móviles, haya aumentado su motivación, la aplicación no realiza gran cosa, pero lo que si funciona es lo que va de fondo, trate de presentarles un código funcional y genérico que puedan reutilizar para sus aplicaciones, en una siguiente guía tratare de presentar como manejar algunos de los Ítems que se pueden adicionar a la interfaz de usuario y algunas otras cosas más
Cualquier comentario pueden hacerlo a:
