Desarrollo de apps para móviles:Mi primera app: los componentes

Flor Palomares, PatriciaHuertas Fernández, José IgnacioMoreno León, Jesús Moriana Coronel, María

Septiembre 2012

1

Programamos Videojuegos y Apps

Estas diapositivas son una obra derivada del tutorial“Hello Purr”

disponible en http://appinventor.mit.edu/explore/content/hellopurr.html

©Programamos, Septiembre de 2013Algunos derechos reservados.

Este artículo se distribuye bajo la licencia“Reconocimiento-CompartirIgual 3.0 España" de CreativeCommons, disponible en

http://creativecommons.org/licenses/by-sa/3.0/es/deed.esEste documento (o uno muy similar)

está disponible en (o enlazado desde)http://programamos.es

Licencia

Nuestra primera app: HolaRonroneo

● En informática la primera aplicación que se desarrolla con un lenguaje suele llamarse HolaMundo.

● En este caso le daremos otro enfoque y la llamaremos Hola Ronroneo

● El objetivo de esta app será sencillo: al presionar sobre un gatito escucharemos cómo maulla.

Conceptos básicos: los componentes

● Los componentes son los elementos básicos que forman las apps en Android

● Son como los ingredientes de una receta

● Algunos son muy sencillos, como un botón o una etiqueta de texto

● Otros más complejos, como un tapiz o un acelerómetro

Conceptos básicos: las propiedades

● Los componentes tienen propiedades que pueden ajustarse para modificar su comportamiento o apariencia.

● Seleccionando un componente se pueden ver y cambiar sus propiedades.

HolaRonroneo: paso 1● ¡Vamos a crear nuestra app HolaRonroneo!● Desde la paleta arrastramos el componente 'Botón' a la pantalla1.● Como queremos que el botón tenga la imagen de un gato, en el panel de

propiedades, en 'Imagen' subiremos nuestra foto.

HolaRonroneo: paso 2

● En la propiedad 'Texto' del botón, borramos el texto para que solo se vea la cara de nuestro gato.

● Si no se muestra tu foto entera puedes modificar las propiedades alto y ancho con el valor “Fill Parent”

HolaRonroneo: paso 3

● Arrastramos el elemento label de la paleta al visor de la pantalla● En las propiedades de la etiqueta modificamos el texto para

escribir el mensaje: “Acaricia al gatito” (Pet the kitty)● Personaliza el color de fondo la etiqueta

HolaRonroneo: paso 4

● En la paleta, en la pestaña Media, arrastramos el componente Sonido al visor de la pantalla. Aparecerá en la parte de abajo del visor marcado como “componente no visible”

● En la propiedad Source del sonido debemos cargar el audio de un maullido

HolaRonroneo: ¡ya tenemos los componentes!

● ¡Buen trabajo!● Ya tenemos colocados los componentes de nuestra app y su

apariencia bien definida.● En la siguiente sesión aprenderemos a programar su

comportamiento.