martes, 26 de octubre de 2010

TUTORIAL: Desarrollo de aplicaciones para bada (III)

Ahora que ya tenemos instalado el bada SDK, vamos a hacer nuestra primera aplicación. 
Básicamente seguiremos los pasos indicados en el libro Introduction to bada: A Developer's guide.
Como se suele hacer en los cursos de programación, nuestra primera aplicación será un "Hola mundo". En nuestro caso será una aplicación que mostrará el texto "¡ Hola bada !" y un botón que, al hacer clic en él, mostrará un texto por el visor de logs. Empecemos.

Ejecuta el badaIDE. Está basado en Eclipse IDE, por lo que si has trabajado con este entorno verás que se parecen mucho. El badaIDE incluye un editor visual de interfícies gráficas que facilita mucho el desarrollo de aplicaciones.

Ahora selecciona "File > New > bada Application Project". Pon un nombre a tu aplicación en "Project name:" (por ejemplo "HolaBada") y selecciona "Application > bada Form Based Application" en el panel "Project type" (haz clic en las imágenes para ampliarlas):


Haz clic en "Next" y acepta la ruta por defecto del bada SDK (es decir, dónde se encuentran las librerías y cabeceras más comunes, si tienes otro SDK puedes indicar la ruta aquí). Haz clic en "Next".

Finalmente, selecciona el modelo de teléfono para el que deseas desarrollar la aplicación. Para empezar, esto es todo lo que necesitamos, por lo que ya puedes hacer clic en "Finish".

Se generará automáticamente el esqueleto de la aplicación, lo que nos ahorrará mucho trabajo.
Si te fijas en el panel "Project Explorer", verás las carpetas que componen la estructura de la aplicación: código fuente (src), recursos (Res), cabeceras (inc), los iconos de la aplicación (Icons), etc. Para abrir cualquier elemento basta con hacer doble clic en él.


Los ficheros "application.xml" y "manifest.xml" contienen metadatos de la aplicación:
- "application.xml" es utilizado por las herramientas de empaquetado de la aplicación para crear un paquete instalable. Declara el nombre de la aplicación, la descripción, el creador y la versión.
- "manifest.xml": utilizado para comprobación de privilegios y por el proceso de certificación. Declara propiedades de la aplciación mediante claves e identificadores: tamaño de pantalla, tipo de CPU, sensores utilizados, etc.

Sólo con el código generado por defecto, ya podemos compilar y ejecutar el proyecto.
Para compilar y enlazar el proyecto, selecciona "Project > Build Project" de la barra de menús.
Cuando finalice el proceso, selecciona "Run > Run as > 1 bada Simulator Application" para ejecutar la aplicación en el simulador.

En unos momentos se iniciará el sistema operativo y finalmente la aplicación.
Simplemente muestra el texto "Hello bada!" y un botón "OK", que al ser presionado genera un evento que escribe un texto en la terminal.
Para cerrar la aplicación, haz clic en el botón "Stop" de la pestaña "Console".


Ahora vamos a modificar un poco la aplicación para que se muestre el texto "¡ Hola bada !" y se cierre la aplicación cuando se haga clic en el botón "OK" (nosotros le llamaremos "Aceptar").

Abre el "Resource Explorer" haciendo clic en la raíz del proyecto en el "Project Explorer":


Una vez hecho esto, verás lo siguiente en el panel inferior izquierdo ("Resource Explorer"):


Haz doble clic en "240x400 > Forms > IDF_FORM1" para abrir el editor gráfico. En el formulario que aparece en el editor, haz clic en el botón "OK":


Ahora selecciona la pestaña "Properties" del panel inferior para ver el editor de propiedades del elemento seleccionado. En el campo "Text" sustituye el valor "OK" por "Aceptar":


Haz intro y verás que el botón se ha actualizado y ahora pone "Aceptar":


De nuevo en el formulario, haz clic en el texto "Hello bada" para seleccionar toda la ventana:


En la pestaña "Properties", sustituye el valor de la propiedad "Properties > Title Text" (que será "Hello bada!") por "¡ Hola bada !".


Ahora vamos a especificar la acción que queremos que se ejecute cuando presionemos el botón "Aceptar":
1- Haz clic en el botón "Aceptar" del formulario
2- Haz clic, en la pestaña "Properties", en la fila "Event Handler > IActionEventListener"
3- Haz clic en el botón "Edit" que se encuentra a la derecha de la fila

(haz clic para ampliar)

Con esto, abriremos el editor de código justo en la función que se encarga de gestionar el evento que se genera cuando hacemos clic en el botón "Aceptar".
Aquí, sustituye el texto por defecto de la función AppLog() por "¡ Se ha hecho clic en el botón Aceptar ! \n", por ejemplo. Así, cada vez que se haga clic en ese botón se mostrará este texto por la pestaña "Output" (visor de logs). La función debe quedar así:


Ahora puedes volver a compilar y ejecutar la aplicación y ver los cambios realizados:


¡ Ya has hecho tu primer programa para bada !

14 comentarios:

Javier dijo...

¡¡¡Gracias!!!

carlos dijo...

A mi no me aparece la opción event handling al presionar el botón de aceptar.

http://i52.tinypic.com/2w69umb.png

deberías ser un poco más concreto.

Te ha faltado explicar que hay que abrir la ventana del resource explorer para poder trabajar con el IDE_form1.xml

Patxi dijo...

enhorabuena por lo que estas haciendo, ayudaremos en lo posible

Adrian dijo...

Podrias explicar como pasar la aplicacion al movil?

Byron dijo...

@Javier: de nada

@carlos: Si tengo tiempo, mañana lo explico más en detalle y añado lo que comentas

@Patxi: gracias, a ver si entre todos hacemos un buen tutorial !!

@Adrian: lo explicaré uno de los siguientes posts

Arturo dijo...

Muchas gracias!! esto es lo que buscaba :D ayudaré en lo que pueda y me permitan.. gracias :)

Diego dijo...

Tengo un problema al ejecutar la aplicacion, empieza a inicializar el sistema y de repente sale un proble de que el simulator.exe dejo de funcionar....

Diego dijo...

no se que seria pero al desinstalar y volverlo a instalar el entorno volvio a funcionar

Byron dijo...

Perfecto!

Davide dijo...

Buenas, tengo el SDK 2.0.3 y al hacer este ejercicio me salen estos errores:

Error launching external scanner info generator (g++ -E -P -v -dD C:/bada/2.0.3/IDE/workspace/.metadata/.plugins/org.eclipse.cdt.make.core/specs.cpp) HolaBada Unknown C/C++ Problem

Error launching external scanner info generator (g++ -E -P -v -dD C:/bada/2.0.3/IDE/workspace/.metadata/.plugins/org.eclipse.cdt.make.core/specs.c)

Error launching external scanner info generator (g++ -E -P -v -dD C:/bada/2.0.3/IDE/workspace/.metadata/.plugins/org.eclipse.cdt.make.core/specs.c)

El segundo sale repetido.

Y al abrir otro proyecto, también me salen.

Byron dijo...

Hola,
Prueba esto:

- Ir a "Window > Preferences"
- Ir a "C/C++ > Build > Environment"
- Comprobar que está seleccionado "Append variables to native environment"
- Añadir variable haciendo clic en "Add" y poniendo:

Name: PATH
Value: C:\bada\2.0.3\Tools\Toolchains\ARM\arm-bada-eabi\bin

Saludos!

Davide dijo...

Lo siento, pero sigue sin funcionar :(

Byron dijo...

Comprueba que la ruta es correcta, es decir, que tengas bada 2.0.3 instalado en C:\bada\2.0.3

Sinó, no se me ocurre ninguna solución más...

John Joseph Pretel Ballena dijo...

Tengo un problema :S cuando le dy en Target App, se exporta y too, se me reinicia el smart y me sale en el Ouput Instalacion Completa
Luego cuando carga el smart busco la app lo ejecuto y solo me aparece la imagen, se cierra y el icono de la MEMORY CARD late :S y alli nomas queda, en el emulador corre OK:

Publicar un comentario