Arxiu mensual: juny de 2013

COM FER UN SLIDE (sense la funció d’slide) per Clàudia Barberà

Primer de tot s’ha de crear un fons per la pantalla, un coslidep creat arrosseguem un canvas. Al canvas li posarem de fons la primera imatge que mostrarem a l’slide, mentre que les altres 3 només les carregarem (han de tenir noms successius: instruccio_1, instruccio_2…) al media.
Definirem la primera imatge com a imatge 1, per tal de posicionar-la a la llista d’imatges que es succeïran.
Arrastrarem l’opció de Canvas. Flung (per tal de poder crear successió d’imatges que estan dins d’aquest canvas).
Una vegada arrosegada aquesta opció, li aplicarem l’opció del condicionant “if else”. Ara posarem la condició inicial per desencadenar el canvi d’imatges: que la velocitat d’x (horitzontal) sigui menor a 0 (és a dir moviment cap a l’esquerra). Un cop amb la premisa marcada posarem què passara al fer aquest moviment:
- Si la imatge és major a 1 (és a dir, totes les imatges menys la primera), la llista serà inversa.
- Si la imatge és menor a 1 (totes les imatges menys l’última), la llista es succeïrà en ordre ascendent.
Finalment cal crear una llista on referenciar aquestes imatges (select lis titem>make a list)

MENÚ DESPLEGABLE – mediante la lógica visible/invisible. Autora: Laura Picallo

Este ejercicio se basa en la posibilidad de hacer visible o invisible tanto un botón como una image sprite para programar un menú desplegable.

Lo primero sería crear todos los apartados de los que constará el menú desplegable (esto es, poner sobre la pantalla el árbol entero).
Una vez hecho esto, y usando la opción a la derecha de la pantalla de decidir si el botón o la imagen es visible o invisible, hacemos los apartados desplegables invisibles.

En el block editor contamos con el bloque set ____.visible to, que nos permite, mediante la lógica true o false, llevar a invisibilidad o a visibilidad las distintas image sprites y botones.
En este menú se despliegan los apartados cuando tocas uno de los botones principales, y se pliegan cuando lo pulsas durante unos segundos. Es tan sencillo como:

Cuando tocas X botón, Y imágenes se hacen visibles, Z imágenes invisibles (jugando con que cuando aprietas, por ejemplo, cos, todo lo referente a cara y cap se hará invisible)
También puedes añadir condicionales para que solo se desplieguen ciertos apartados cuando su imagen raíz sea visible (algo útil cuando cuantas con muchas image sprite invisibles sobre el canvas que el usuario podría tocar sin querer)
PRIMERA

SEGUNDA

APP INVENTOR: Map Tour. Autor: Said El Hamoudi Bader

Para este tutorial se debe estar familiarizado con los conceptos básicos de App Inventor, ya que se utilizan los componentes ActivityStarter y ListPicker. Una respondería para el lanzamiento de aplicaciones Android, en este caso el arranque de Google Maps, y la otra para permitir al usuario elegir de una lista de ubicaciones.

Establecer la pantalla:

Creamos en la ventana de diseño una imagen estética del lugar de destino, el ListPiker que mostrará la lista de destino y por último el ActivityStarter que inicia la aplicación de mapas cuando se elige un destino.

designer

Habrá que configurar el ActivityStarter para iniciar la aplicación Maps con las siguientes propiedades:

Acción                                 android.intent.action.VIEW

ActivityPackage               com.google.android.apps.maps

ActivityClass                     com.google.android.maps.MapsActivity

 

Establecer la lista de destinos:

-         Debemos crear una variable con la lista de destinos para el Map Tour

-         Hacer make a list para agregar los elementos a la lista

-         Finalmente los textos con los destinos

destinationList

 

 

Establecer comportamientos a los componentes:

En Map Tour aplicamos dos comportamientos

-         Al iniciar la aplicación cargar destinos en ListPicker para que el usuario elija

-         Al seleccionar el destino la aplicación de mapas muestra el destino

 

Para que suceda definimos el comportamiento Screen1.Initialize

screenInit

 

 

Comportamiento al elegir destino:

ActivityStarter debe lanzar los mapas al seleccionar destino, por ello será necesario programar el componente Listpicker que activará el ListPicker.AfterPicking, necesario para configurar el DataURI del componente ActivityStarter.

afterPicking

 

Existe un segundo uso más sofisticado del ActivityStarter y del componente Listpicker que se encuentra en la segunda parte del tutorial de la web.

ParisMapTour.ZIP

Activity Starter

El componente Activity Starter permite combinar aplicaciones permitiendo a una aplicación arrancar otras aplicaciones.

Las aplicaciones iniciadas pueden otras aplicaciones de App Inventor creadas por nosotros o aplicaciones tales como la que gestiona la cámara o mapas pre-instalados en el mismo.

Para iniciar otra aplicación, debe proporcionar cierta información de control para el sistema operativo Android. Para ello, se deben establecer varias propiedades de Activity Starter antes de invocar la aplicación que deseamos iniciar.

Se puede probar con el siguiente proyecto: 1

Se trata de una aplicación que proporciona al usuario toda la información deseada sobre un programa de televisión por internet. Existen 5 botones los cuales enlazan con la página web del programa, con su facebook, con los vídeos colgados de youtube, posibilita enviar directamente un correo a los editores, establece su ubicación y a modo de explicación del activity starter podemos lanzar la cámara del dispositivo.

 Abrir el navegador a una página Web

 

2 3

Reproducir un vídeo de YouTube

Para ello se necesita saber la dirección URI del vídeo de YouTube. 8

Enviar un email a una dirección de destinatario ya especificada 6

Mostrar el mapa de un lugar

Si se conoce el código postal, se pueden establecer las propiedades de  Activity Starter  de la siguiente manera:7

Inicio de la cámara

 4

Multiusuari

Un exemple senzill d’APP multiusuari. Carregueu xatBasic.zip a APP Inventor i instal·leu-lo a dues tauletes o telèfons diferents per veure com establir comunicació entre dispositius.

Mitjançant el component TinyWebDB es pot enviar i rebre informació a una base de dades per tal de recuperar-la des d’una altra APP i, així, estrablir connexió entre diferents usuaris.

El codi és molt senzill. Per una banda, es guarda allò que ha escrit l’usuari (en la imatge, l’usuari 1). De l’altra, es llegeix el que ha escrit l’altre (usuari 2).

xat

En aquest cas, per evitar estar constantment tocant un botó per llegir el que ha escrit l’altre usuari, s’ha implementat un temporitzador que va demanant el resultat del que ha s’ha entrat a la base de dades.

Duplicar pantalles

Per tal de duplicar pantalles amb APP Inventor cal seguir els passos següents:

Nota: El mateix procés serveix per ajuntar diferents projectes. Només caldrà tenir en compte ajuntar també els arxius de les carpetes assets si aquestes formen part d’aquest.

1.- Baixar l’App on volem fer el duplicat, mitjançant la llista de “My Projects”. Cal seleccionar el projecte que volem baixar i fer servir la opció More actions –> Download Source

un

 

2.- Descomprimir l’arxiu a una carpeta local.

3.- Navegar a la carpeta src –> appintentor –> ai_[nom d'usuari] –> [nom del projecte]

4.- Duplicar, mitjançant l’acció copiar/enganxar, els arxius d’extensió .blk i .scm corresponents a la pantalla que volem tenir dues vegades. Ambdós arxius es diran igual que la pantalla, amb l’extensió corresponent.

5.- Canviar el nom dels arxius al que volem que tingui la pantalla nova.

6.- Tornar a comprimir els arxius en un .zip i anomenar-lo tal com volem que s’anomeni el nou projecte. ATENCIÓ: L’arxiu ZIP ha de tenir com a primer nivell les carpetes src, youngandriodproject i, si hem pujat arxius multimèdia, també la carpeta assets.

Untitled-2

 

És a dir, cal comprimir directament aquestes carpetes. No una carpeta amb el nom del projecte que les contingui. Si no es fa així, APP Inventor no reconeixerà l’arxiu com a projecte.

7.- Pujar l’arxiu a APP Inventor mitjançant el menú More actions –> Upload Source que trobarem a My Projects.

8.- Obrir el nou projecte. Si tot ha anat bé, hi trobarem dues pantalles idèntiques amb noms diferents.