Tutorial Appcelerator: botones y diálogos de alerta
Bienvenidos al tutorial 2 de Appcelerator en Geeky Theory. Hoy veremos cómo crear botones en una ventana y que, al hacer click sobre ellos, se muestre un diálogo de alerta que informe al usuario de algo que quiera decir el programador de la aplicación.
¡Vamos a ello!
Para comenzar, de la misma forma que en el tutorial 1: pestañas y ventanas, crearemos un nuevo proyecto. El proyecto estará en blanco, ya que, para aprender, siempre es mejor comenzar desde cero.
Recordando lo del tutorial anterior, voy a resumir los pasos a seguir para crear una buena aplicación:
- Crear un nuevo proyecto: File->New->Titanium Mobile Project
- Escoger un nombre para la aplicación y un identificador. En este tutorial será: proyecto2 y com.proyecto2.
- Configurar el archivo tiapp.xml.
El objetivo de este tutorial, como ya he mencionado anteriormente, es crear una aplicación Android (el que tenga MAC y un iPhone también la puede compilar para su teléfono) que conste de una ventana y dos botones. Cada vez que pulsemos un botón, nos aparecerá en la pantalla un mensaje de alerta que nos informará del botón que hayamos pulsado.
Para crear un botón, utilizaremos la siguiente función:
Ti.UI.createButton();
De un botón, podemos editar varias propiedades, aunque yo sólo voy a cambiar el título, top, anchura y altura. Podéis ver las propiedades aquí.
El primer botón, por tanto, lo configuraremos de la siguiente manera:
var boton1=Ti.UI.createButton({ title: "Botón 1", top:30, width:75, height:40 });
Una de las características principales que debe poseer el botón, es que esté escuchando por si alguien hace click sobre él. Esto lo haremos con un addEventListener. Dentro del addEventListener, tenemos que escribir la función que queremos que haga nuestro botón al ser pulsado. En este caso, lanzaremos un mensaje de alerta al usuario. El código será el siguiente: boton1.addEventListener('click', function(e){ alert("Ha pulsado el botón número 1"); });
Una vez configurado el botón, lo añadiremos a la ventana que tendremos que crear previamente. Recuerdo que eso lo expliqué en el Tutorial 1. Para añadir el botón a la ventana, escribiremos el código que viene a continuación: ventana.add(boton1);
Para el segundo botón haremos exactamente lo mismo, pero cambiando sus propiedades. Finalmente, el código quedará así:
/* * *Tutorial 2 programación Android con Appcelerator. * Autor: Geeky Theory * http://geekytheory.com * */ //Añado una ventana var ventana = Titanium.UI.createWindow({ Title : 'Ventana con botones', backgroundColor : 'white' }); //Creo un botón que muestre un diálogo de alerta al pulsarlo var boton1=Ti.UI.createButton({ title: "Botón 1", top:30, width:75, height:40 }); /* Creo un event listener para que cuando haga click sobre el botón, se ejecute el código que hay dentro de function(e){}. El diálogo de alerta se crea simplemente poniendo alert(mensaje deseado); */ boton1.addEventListener('click', function(e){ alert("Ha pulsado el botón número 1"); }); //Hago lo mismo para crear un segundo botón, el número 2 var boton2=Ti.UI.createButton({ title: "Botón 2", top:90, width:75, height:40 }); boton2.addEventListener('click', function(e){ alert("Ha pulsado el botón número 2"); }); //Añado los botones a la ventana ventana.add(boton1); ventana.add(boton2); //Abro la ventana ventana.open();
El resultado final lo podéis ver en las siguientes capturas de pantalla de mi teléfono:
[EasyGallery id='tutorial2appcelerator']
Supongo que los conceptos han quedado claros. Si tenéis cualquier duda, no dudéis en comentármela.
En el siguiente tutorial, aprenderemos a crear una tabla para que, cuando se haga click sobre algún ítem de la misma, se abra una ventana u otra.
Como ejercicio, os recomiendo que juntéis los tutoriales 1 y 2 y que, para cada pestaña, pongáis un botón, que informe del nombre de la pestaña en la que estamos. Si alguien lo hace y quiere mandar su resultado para que le eche un vistazo, que no dude en mandarlo a la dirección de correo: info@geekytheory.com// //