Arxiu mensual: maig de 2013

Canvi d’imatges

Autora: Ariadna Santos

El fet que el programa no deixi modificar les imatges directament des de l’àrea de disseny ens obliga a preparar les imatges que volem canviar prèviament. En aquest cas, l’aplicació consisteix en fer explotar l’ocell quan l’usuari el toqui. Serà el moment en que les imatges de l’explosió que hem preparat prèviament apareguin en una seqüència.

Components de la interfície:

Component

Palette

Nom

Propietats

Canvas Basic MyCanvas Background.jpgWidth: Fill parentHeight: 380 pixels
ImageSprite Animation bird BirdBlue.pngInterval: 500
ImageSprite Animation boom BirdExplosion0.png*BirdExplosion1.pngBirdExplosion2.pngInterval: 100

Opció Visible desactivada

Label Basic score Text: Score
Clock Basic boomClock Interval: 100*TimerEnabled: desactivat
Sound Media boomSound BirdExplosionNoise0.wav

*És important que la imatge BirdExplosion0.png estigui seleccionada com a Picture en l’animació boom. Però també hem de pujar les imatges que la segueixen per tal que també apareguin just després de la primera. Situem l’explosió en el canvas a prop o a sobre de l’ocell i la desactivem.

*Si l’interval és més alt veurem més lentament el canvi d’imatges.

Block’s Editor:

Definicions: 

- Variable: BoomCounter

Captura de pantalla 2013-05-23 a la(s) 12.21.03

 

Utilitzem el Counter per crear els noms de les imatges. Inicialment el valor del boomCounter és 1, és perquè el nom de la segona explosió és BirdExplosion1.png, no BirdExplosion2.png

- Variable: puntuació

Captura de pantalla 2013-05-23 a la(s) 12.21.10

- Procedure: MoveBird

 

Captura de pantalla 2013-05-23 a la(s) 12.21.17

bird.Touched:

  • Una vegada toquem l’ocell, a partir d’una operació boleana (fals), desactivarem el seu valor i l’ocell no es veurà. (Bird.Enabled. Bird.Visible)
  • Ordenarem que la imatge boom es col·loqui a la posició actual de l’ocell.
  • Boom.Picture. Indiquem que mostri l’explosió 0 escrivint en un text el nom exacte de la imatge.
  • A partir d’una altre operació boleana (true) activem la imatge boom. (boom.Enable- Boo.visible).
  • Com que en l’àrea de disseny hem desactivat la opció Enabled del boom.Clock ara li hem de dir, amb una operació boleana, que ens l’activi (true).
  • Finalment que canviï la posició de l’ocell.
  • Sumar la puntuació.

Captura de pantalla 2013-05-23 a la(s) 12.21.43

BoomClock.Timer:

  • ifelse (control) comprova una condició donada. Si el resultat és verdader, duu a terme les accions de la seqüència then-do, si és fals duu a terme les accions de else-do.
  • BoomCounter > 2. Aquesta ordre compara els dos números, si el primer és més gran serà veritat (true), al contrari, l’operació serà falsa.
  • L’acció del else-do serà donar un valor a la imatge boom.picture. Ho farem amb la opció join que es troba al text blocks. Afegirà el text .png al resultat del text BirdExplosion i el global boomCounter.
  • Finalment en el valor global del boomCounter li sumem 1.

Captura de pantalla 2013-05-23 a la(s) 12.21.54

Com ampliar el tutorial:

  • Incloure el botó de reset.
  • Fer que l’ocell es mogui constantment, des del principi.

 

 

 

 

 

 

 

 

 

 

MAP TOUR – Elena Espiau

- ActivityStarter

ActivityStarter et permet obrir una altra aplicació sense sortir de la que estàs fent servir. Així pots consultar el GoogleMaps, clicar per tornar enrere, i trobar-te la app com estava abans de sortir. S’han d’especificar unes propietats, però no sé com es defineixen (si no és que te les donen).

Sin título

Sin título

- ListPicker

El ListPicker crea automàticament una llista d’opcions a escollir per a l’usuari. No es tracta de traslladar-te a una altra pantalla, sinó que aparegui una llista de possibilitats. Aquesta llista es defineix fàcilment a partir del Blocks Editor, podent afegir i treure elements amb molta facilitat. Si no m’equivoco, diria que el disseny d’aquesta llista no es pot modificar i manté el mateix disseny del tema del mòbil.

listpicker

Tal i com es mostra a la captura de pantalla anterior, així es defineix la llista de ListPicker. No entenc què és Screen1.Initialize.

- Obrir Maps amb una cerca

Tal i com esmentava, l’ActivityStarter ens permet iniciar una altra aplicació sense sortir de la que tenim oberta. Un cop definit que l’aplicació que s’activarà sigui el GoogleMaps, cal definir què volem obrir.
Així, quan l’usuari clica una de les opcions de la ListPicker1, s’obre el Maps cercant les paraules que haguem definit en les destinacions. Per a què això passi cal definir-ho mitjançant el ListPicker1.AfterPicking.

listpickerafter1

L’ActivityStarter1.DataUri defineix què ha d’obrir el Maps. En aquest cas, se li demana que obri el cercador i que insereixi la destinació seleccionada de la llista. Per això fa una combinació entre “http://maps.google.com/?q=” i l’opció seleccionada. Així si l’usuari escull “Tour Eiffel”, el DataUri es dirigeix a “http://maps.google.com/?q=Tour Eiffel.”

 

VideoWall

APP INVENTOR: Canviar el tamany del reproductor de vídeo
Autor/a: Patricia Ruiz

Introducció:

Aquest tutorial mostra com podem controlar el tamany d’un vídeo a una aplicació. El VideoWall utilitza els recursos multimèdia (vídeos emmagatzemats a la pròpia app), però també podem fer servir la app per mostrar vídeos d’Internet.

Comencem:

  1. Creem un nou projecte i li donem el nom de VideoWall.
  2. Canviem la orientació de la pantalla a Landscape i, de pas, el BackgroundColor a Black.
  3. Ens baixem els tres vídeos que farem servir a continuació:http://appinventor.mit.edu/explore/content/videowall.html

Un cop finalitzem l’aplicació VideoWall, se’ns mostrarà una pantalla amb els tres vídeos, que podrem ampliar fins assolir el seu tamany real, i després tornar a encongir. L’aplicació també ens permetrà visualitzar els vídeos en pantalla completa.

Establim els components:

A continuació, farem servir el dissenyador de components per crear la interfície de VideoWall. Havent acabat, hauria de tenir el següent aspecte:

1

Per aconseguir-ho, primer hem de carregar els arxius de vídeo que ens hem baixat. Farem click al botó Add i seleccionarem els vídeos un per un.

Ara, crearem la interfície arrossegant els següents components de la Palette al Viewer:

Tipus de component Grup de la Palette Com l’anomenarem Propòsit del component Comentaris
HorizontalArrangement ScreenArrangement HorizontalArrangement1 Alinea els components horitzontalment  Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement1 Alinea el vídeo de l’esquerra i els controls corresponents Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement2 Alinea el vídeo del mig i els controls corresponents Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement3 Alinea el vídeo de la dreta i els controls corresponents Posarem el Width a Fill parent
VideoPlayer Media VideoPlayer1 Mostra el BigBuckBunny video Triem el vídeo Bigbuckbunny.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
VideoPlayer Media VideoPlayer2 Mostra el NASA video Triem el vídeo Nasa.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
VideoPlayer Media VideoPlayer3 Mostra el Sintelvideo Triem el vídeo Sintel.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
Button Basic ResizeButton1 Canvia el tamany del VideoPlayer1 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic ResizeButton2 Canvia el tamany del VideoPlayer2 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic ResizeButton3 Canvia el tamany del VideoPlayer3 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic FullScreenButton1 Mostra el VideoPlayer1 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent
Button Basic FullScreenButton2 Mostra el VideoPlayer2 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent
Button Basic FullScreenButton3 Mostra el VideoPlayer3 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent

Assignar comportaments als components:

 Ara la interfície està completa, però els botons encara no canvien el tamany dels vídeos. Per això, obrirem el Blocks Editor, per assignar comportament als botons. Primer de tot, definirem tres blocs de variables per poder modificar el tamany dels VideoPlayers.

3Ara crearem el bloc de resizeVideoPlayer. Hi ha tres Videoplayers a l’aplicació, però utilitzarem només un sol bloc de procediment per canviar el tamany dels tres. Per fer-ho, anirem al component Advanced, i clicarem sobre el bloc Any VideoPlayer.

4

Creació dels blocs de Click:

Els blocs que crearem responen als clicks sobre els botons ResizeButton.

5

La majoria de blocs a l’App Inventor requereixen que coneguem exactament quin component manipularà la nostra aplicació en el moment en que l’estem dissenyant. Per algunes apps, tindrem bastants components del mateix tipus, i voldrem programar un mateix comportament per tots els components similars (com és el cas dels blocs de VideoPlayer en aquesta app).

Nota: La appVideoWallpodría haver-se dissenyat amb una redimensió específica per a cada VideoPlayer. Utilitzant el bloc Advanced en un sol procediment de redimensió, la app és molt més simple.

 Com funcionen els blocs:

Configurar les propietats d’amplada i alçada per a un VideoPlayer, funciona exactament de la mateixa manera que configurar l’amplada i alçada d’un botó. Per qualsevol número positiu que establim, el vídeo que es reprodueixi redimensionarà la seva aparença per a encaixar en aquell valor. Hi ha dos valors que són excepcions de la norma d’utilitzar valors positius: el -1 i el -2.  Configurar el VideoPlayer.Width o VideoPlayer.Height a -1 és com configurar l’alçada o l’amplada a Fill Parent en el designer. Configurar el VideoPlayer.Width o VideoPlayer.Height a  -2 és com configurar l’alçada o l’amplada a Automatic al designer.

Cal tenir en compte que, en alguns dispositius, el tamany no es canvia correctament i, per tant, el resultat és impredictible.

Full screen:

El  VideoPlayer.FullScreen bloc, agafa un valor positiu/negatiu (anomenat també Boolean), per dir si el vídeo s’ha de posar en full screen o no. Configurar un bloc VideoPlayer.FullScreen  a true, farà que el vídeo es reprodueixi en fullscreen. Si hi ha un altre video en fullscreen, el valor es posarà a fals i serà remplaçat per l’actual videoplayer. Si el VideoPlayer.FullScreen  es true, configurar el bloc com a falsa causa que es tanqui el fullscreen.

6

Location Sensor i Activity Starter

Autor/a: Elsa Reig Ambrojo

Ambdós elements,Location Sensor i ActivityStarter,formen part dels “no visibles” dins la interfície del Mit App Inventor. El primer,serveix per a que el dispositiu detecti les coordenades de latitud i longitud on es troba el dispositiu, així com l’adreça. En les seves propietats podem escollir l’interval de temps o distancia en què volem que es vagi refrescant la informació.

1

ActivityStarter, en canvi, és un component que serveix per a obrir una altre aplicació, com GoogleMaps, fent que l’usuari pugui visualitzar un mapa quan ho necessiti.Per als mapes, hem d’utilitzar la URL del que vulguem que l’usuari vegi en la propietat DataUri d’aquest element. Si volem mostrar direccions, la URL ha de tenir una forma com http://maps.google.com/maps/?saddr=0.1,0.1&daddr=0.2,0.2on els números són les coordenades de GPS. Per a aquest component necessitem omplir-ne tres propietats:

  • Action (android.intent.action.VIEW)
  • Activity Package (com.google.android.apps.maps)
  • Activity Class (com.google.android.maps.MapsActivity)

 2

En l’editor de blocs, utilitzem el LocationSensor1.LocationChanged per a fer que el dispositiu vagi refrescant les coordenades a mesura que canviem de posició. Cada cop que canviï, farà que CurrentAdressDataLabelpugui mostrar l’adreça actual (on en la imatge posa unknown), mentre que a sota, on posa GPS, se’ns mostrin en números les coordenades de localització.

34

Tot i això, necessitem el botó “Remembermycurrentlocation” per a indicar-li al dispositiu que volem que ens mostri aquella adreça concreta (fent ús de la TinyDB). I en l’editor de blocs necessitarem el següent:

5

Per a mostrar el mapa, utilitzarem el boto “Show Directions”. Per a això, en el blocs editor, farem servir DirectionsButton.Click, que iniciarà l’ActivitStarter1.DataUri. És a dir, quan l’usuari piqui en el botó de Show Directions, es generarà una URL per al mapa i l’ActivityStarter carregarà el mapa des del googlemaps.

6

Brick Breaker

Autor/a: Queralt Pons

Les principals característiques d’aquesta APP són:

  • Diferents pantalles com a menú principal, tria de nivell, resultat final,…
  • Un submenú amagat dins d’una pantalla a partir de la possibilitat de mostrar i amagar elements segons l’evolució del joc.
  • La possibilitat de crear tants nivells de dificultat com es vulguin (cada un en una pantalla nova) i que en cada nivell canviïn el nombre de blocs, la velocitat de la pilota i la barra, el nombre de vides,…
  • Creació d’una base de dades del resultat ja que sinó al tancar la APP perdríem tota la informació del joc. Aquesta info es mostrarà a la pantalla de Total Score.

 

Determinació de paràmetres:

El primer que farem al Blocks Editor serà configurar tots els paràmetres del joc com ara nombre de vides, velocitat i mides de la pilota, què és el que veiem i el què no a l’inici del joc,…

Això ho farem a partir de determinar diferents procedures que configuraran les diferents respostes a les diferents accions.

El mostrat a continuació es tracta del Set up central dels paràmetres del joc:

Sin título-1

Configuració d’accions:

Hem creat tots els procedures anteriors per a poder configurar totes les accions del joc que principalment es basaran en atorgar una funció a cada botó de la pantalla i a evolució dels paràmetres anteriors segons si el jugador guanya o perd.

A continuació veiem la programació del bloc del temps (Timer) i de la pilota (Ball). També la de cadascún dels blocs de la pantalla que aniràn desapareixent.

Sin título-3Sin título-2

És una aplicació que agrupa les principals funcions bàsiques de l’App Inventor i està bé per practicar-les de cara a la nostre aplicació personal.

 

cómo crear una panorámica arrastrando la imagen.

http://puravidaapps.com/snippets.php#stopCannibalism

Autora:  Haizea Galarreta Fernández

FLUNG

flung 2

(number x, number y, number speed, number heading, number xvel, number yvel, boolean flungSprite).

Utilidades:

  • Permite  visualizar toda la panorámica sin que tengas que reducir la anchura de la imagen.
  • Permite la opción de pasar de una imagen a otra con el gesto de arrastrar.

A tener en cuenta:

  • No equivocar con la opción drag.

Introducción

Para que al hacer un gesto de arrastrar una imagen funcione hay que crear un canvas para obtener una posición inicial (x,y). Además, se obtiene la velocidad y el punto de partida del gesto, al igual que componente de la velocidad X e Y del vector de arrastre.

ejes

En screen 1 los componentes que necesitamos son screen uno (screenorientation<landscape) y un canvas con la imagen de la habitación en background image.

 1.      Definimos dos variables con dos nombres diferentes:

  • A una se le asigna un número.
  • A la otra le añadimos una lista donde subiremos las fotos que compongan la panorámica (en este caso serían dos).

variables

2.      Para que al tocar con el dedo la pantalla podamos arrastrar la imagen hacia la izquierda y derecha necesitamos canvas.flung.

  • Necesitamos condiciones if else.
    • If  la velocidad de la coordenada X es menor a 0. Se cumplirá la función de que se pase de la primera variable a la variable con la lista (es decir, algo así a rotarla) hacia la izquierda.
    • If  la velocidad de la coordenada X es mayor a 0. Se cumplirá la función de que se pase de la primera variable a la variable con la lista (es decir, algo así a rotarla) hacia la derecha.
  • Hay que añadir la opción canvas. Background image y le agregaremos la lista de las dos variables (de número y de lista) con las que hemos estado trabajando. 

Este tutorial también sirve con el gesto de arrastrar queremos que se den transiciones de imágenes. Para ello, añadiríamos las imágenes con las que se quiere intercambiar a la lista.

todo

Problemas:

  • No consigo averiguar si existe la opción de poder conseguir una panorámica con una sola imagen. Es decir sin tener que dividirla y dotarle de izquierda o derecha a cada lado.
  • en el caso de que utilice el emulador, la pantalla no permite la opción de girarla horizontalmente.

 

QuizMe: Treball amb varies llistes de variables relacionades mitjançant la variable índex.

http://beta.appinventor.mit.edu/learn/tutorials/quizme/quizme.html
Autor: Isaac Rodríguez Ramos

Fent el tutorialQuizMe, que ofereix la web oficial de App Inventor, es poden aprendrevaries funcions noves d’aquest programa, tals com:

  • Fer una variable que sigui una llista d’elements i que aquests siguin seleccionats.
  • Crear una variable que unifiqui totes les variables que continguin una llista d’elements, fent així que si hi ha una llista de preguntes, respostes i fotografies, tota pregunta vagi amb la seva corresponent fotografia i resposta.

Creació de llista de variables

Per a crear una variable que sigui una llista es tant simple com crear la variable, adjuntar-li un “make a list” i en els diferents items anar especificant els elements que vulguem incloure, sempre amb la funció “text”.

 1

Crida de variables

Així doncs, tenim una variable que inclou al mateix temps molts items o subvariables. Per a poder-les ‘cridar’ s’ha de seleccionar quan la volem (per exemple quan inicies la aplicació), on han de ser traslladades (per exemple a un “Label”), quina llista (en aquest cas “QuestionList”) i quina variable (com en tenim tres en la “QuestionList”, del 1 al 3). És important veure que la numeració a les llistes de variables a App Inventor comença al 1, a diferencia del Processing que començava al 0, creant confusions entre programes.

Per tant, per dur a terme aquesta ‘crida’ de, posem per cas, la subvariable 1, haurem de agafar la funció “Screen1.Initialize”, incloure en aquesta “QuestionLabel.Text”, posteriorment “selectlistitem” i a “list” triar la llista en qüestió i a “index”, mitjançant “number”, indicar quina variable, en aquest cas “1”.

2

Variable Índex o Guia

No obstant, en aquest cas, sempre que s’obri la pantalla apareixerà la subvariable 1. Si volem que, al clicar un botó cada cop aparegui una subvariable diferent, en crearem una altre anomenada en el tutorial com a “currentQuestionIndex”. Aquesta servirà  com a guia a totes les llistes; la variable índex.

3

Col·locarem la variable índex com a “index” en el “selectlistitem”. Llavors, quan cliquem un botó, abans de seleccionar cap item, indiquem que la variable “currentQuestionIndex” augmenti x de valor (normalment 1, en el cas de que vulguem que surtin per ordre) o col·loquem un “randominteger” from “1” to “lenght of list” juntament amb la llista corresponent, en el cas de que vulguem que les subvariables surtin saltejades atzarosament.

4

Com veiem en la captura de pantalla, cada cop que es cliqui al botó, apareixerà la variable següent a la llista “QuestionList”

Aquest sistema, si ho volem fer sempre per ordre de la llista, crea un problema. Quan s’arriba al final de la llista i no queden subvariables, la app es bloqueja. Per tant, haurem de crear una funció com a retorn a la primera subvariable. Ho farem mitjançant un “if” quan cliquem el botó, fent que si la variable “currentQuestionIndex” arriba al final de la llista, aquesta retorni al valor “0”.

9

Coordinació de llistes

Així doncs, mitjançant una variable guia oíndex com la “currentQuestionIndex” podem fer que moltes llistes vagin coordinades. En aquest tutotial, per exemple, les preguntes han d’anar coordinades amb la seva corresponent fotografia. Així doncs, es crea el següent esquema:

6

Amb tot això, haurem pogut crear un “Label” i una “Image” que aniran canviant conjuntament  a mida que es cliqui un botó gràcies a les llistes de variables i les seves corresponents funcions. A més, mitjançant una variable guia o índex, farem que cada element d’una llista correspongui a un d’una altre llista.

A més, si agafes aquesta variable guia i, en el Blocks Editor, la cliques amb el botó dret i selecciones “watch” al mateix moment que tens l’aplicació connectada amb el dispositiu mòbil, et permet veure quin valor té en aquell moment. Aquesta funció et permet trobar errors.

7

Donar resposta correcte o incorrecte

Pel que fa les respostes, es fa mitjançant un “ifelse”, doncs si la solució que dóna l’usuari correspon en exactitud a la variable de la llista de solucions, serà correcte i, sinó, incorrecte. Veiem com també a cada pregunta correspon la seva solució intervenint la variable “currentQuestionIndex”.

8

Inconvenients de la app QuizMe

Com a coses negatives a aquesta aplicació, no es molt viable el fet de que s’hagi descriure idènticament la solució com està a la llista, doncs el fet de que escriguis una lletra majúscula o minúscula diferent ja et dóna error. Això es podria solucionar donant varies opcions de resposta o fent una llista dins de la llista donant les varies alternatives a la resposta (amb majúscules, minúscules, accents…)

Per altra banda, no m’ha acabat de funcionar a la perfecció en el meu dispositiu mòbil, però aquest fet pot ser degut a problemes de format o incompatibilitat…

Tutorial: Treball amb múltiples pantalles (+ Drag & Drop)

[Us podeu descarregar aquí l'App d'exemple que conté també l'exemple de Drag & Drop: Drag_and_Drop_3pantalles]

Treballar amb múltiples pantalles amb APP Inventor és molt senzill, però cal tenir en compte el següent:

  • Cada pantalla tindrà els seus propis components i el seu propi Blocks Editor
  • Crear, esborrar i navegar entre pantalles es fa mitjançant la pàgina de Disseny.
  • No podem canviar el nom de la primera pantalla (de les altres sí) però sí el text que apareix a dalt de tot de l’App a la tauleta o telèfon, al camp TITTLE de les propietats de la pantalla.
  • Podem esborrar totes les pantalles excepte la primera.
  • Quan treballem amb varies pantalles a l’APP Inventor, quan canviem de pantalla mitjançant la part de disseny hem d’esperar que el Blocks Editors carregui els blocs corresponents a la pantalla que hem seleccionat abans de tocar res. Si no ho fem, es poden produir errors irreversibles amb els blocs.
  • Ni amb l’emulador ni amb el telèfon o tauleta es pot provar el canvi de pantalles en la connexió a temps real. Caldrà sempre finalitzar l’APP i passar-la al telèfon o emulador per a provar-ho.

Crear pantalles:

A la interfície de disseny, cal clicar ADD SCREEN. Un cop tinguem varies pantalles, ens apareixeran a la dreta de Screen1 per a poder navegar entre elles durant la creació de l’App.

AI_Multiples_Pantalles_01

Duplicar pantalles:

A vegades ens podem trobar amb la necessitat de duplicar una pantalla (per crear-ne una altra de molt semblant dins la mateixa APP, per exemple).

App inventor no contempla aquesta possibilitat, però hi ha una manera de fer-ho:

  1. Baixar el projecte en format ZIP (des de my projects: More options/Upload Source amb l’App que voleu baixar seleccionada)
  2. Descomprimir-lo
  3. Navegar a src/appinventor/ai_[el_vostre_nom]/[nom de l’APP]
  4. Duplicar els arxius .blk i .smc i canviar-los el nom (el mateix a tots dos)
  5. Tornar a comprimir els arxiu en un ZIP, de nom diferent al que heu baixat, i pujar-lo a APP Inventor (des de my projects: More options/Upload Source)
  6. Si l’obriu, haurien d’aparèixer dues pantalles idèntiques amb el nom original i el que heu posat vosaltres

Font: https://groups.google.com/forum/?fromgroups=#!topic/programming-with-app-inventor/b9neMJXBJ2A [obriu el primer missatge]

 

Navegació entre pantalles dins l’App:

Per fer la navegació entre pantalla en codi, és a dir, dins l’APP finalitzada, heu d’utilitzar el bloc open another screen que trobareu a l’apartat de blocs Built-in/Control.

Aquesta acció de crida l’haureu de posar en el context necessari. A la imatge, dins l’esdeveniment Click d’un botó anomenat Football.

Finalment, la pantalla on voleu navegar no us apareixerà com a component al menú de blocs, sinó que haureu de fer servir un bloc de text i escriure el nom exacte de la pantalla a la que voleu navegar.

AI_Multiples_Pantalles_02

A l’aplicació Drag_and_DropV5_3pantalles.zip [a l’aula global], ho podeu veure.

Recordeu que això només es pot provar un cop l’APP s’ha finalitzat i passat al telèfon, tauleta o emulador.

 

Canvi de pantalla

Per afegir un canvi de pantalles a la nostra aplicació s’ha de pensar de la mateixa manera que ho fem per crear vàries screens independents, només afegint el fet que s’envien missatges entre elles. El canvi de pantalles és, al cap i a la fi, enviar un missatge d’una pantalla autònoma a l’altra.

Tan és així que, quan dissenyem, cada pantalla té el seu espai i els seus components propis, i igual en el Blocks Editor, on només podrem veure els components corresponents a la pantalla que tinguem activa, i cap element d’alguna altra pantalla de l’app. És important recordar que cap component o variable que definim en una pantalla serà accessible des d’una altra, i que per tant els blocs del codi vinculats a una pantalla no es poden referir al blocs del codi d’una altra pantalla.

És important recordar que quan creem un projecte, per defecte, App Inventor anomena la primera pantalla com a Screen 1, i que tot i que li podem canviar el nom al menú de propietats, l’opció de reanomenar-la del tot no hi és, i quan es treballi al Blocks Editor s’haurà de tenir en compte.

Quan s’afegeix una altra pantalla, des de l’opció Add Screen, a la part superior del Design Editor, sí que se’ns permet donar-li un nom, i si es treballa amb vàries pantalles, és important donar-li un nom significatiu per evitar problemes a posteriori.

Treballar amb vàries pantalles, com s’ha dit, és fàcil: es canvia d’una a l’altra, s’afegeixen els elements que siguin necessaris i s’editen com es vulguin.

Una vegada obert el Blocks Editor, ens adonem que només apareix l’editor de la pantalla que tenim oberta al Design Editor, i reiterant el que s’ha avisat abans, els elements d’una no apareixen a l’altre.

Canviar d’una pantalla a l’altre mitjançant un botó

Una vegada en el Blocks Editor, i en la primera pantalla (Screen 1), per fer el pas a la pantalla del menú principal (menu), farem servir l’opció, dins Built-in/Control, de open another screen with quan cliquem un botó. En aquest cas, en pseudocodi, seria “quan cliquem el botó de maria (mariabutton), s’obre la pantalla menú”. Aquest seria el pas que comentàvem de l’espai introductori al menú principal.

Com hem dit, la pantalla menú no apareix com a elements, ja que pertany a una altra pantalla. El que s’ha de fer és cridar a un component de text i anomenar-lo exactament igual que la pantalla on volem anar. Aquesta dinàmica funciona per totes les pantalles de la mateixa manera, i així un sol botó o n’hi hagi més, com a l’exemple següent, on es mostren els quatre canvis de pantalla des del menú principal, als quatre espais que construeixen el joc.

És important recordar que quan creem un projecte, per defecte, App Inventor anomena la primera pantalla com a Screen 1, i que tot i que li podem canviar el nom al menú de propietats, l’opció de reanomenar-la del tot no hi és, i quan es treballi al Blocks Editor s’haurà de tenir en compte.

Quan s’afegeix una altra pantalla, des de l’opció Add Screen, a la part superior del Design Editor, sí que se’ns permet donar-li un nom, i si es treballa amb vàries pantalles, és important donar-li un nom significatiu per evitar problemes a posteriori.

Treballar amb vàries pantalles, com s’ha dit, és fàcil: es canvia d’una a l’altra, s’afegeixen els elements que siguin necessaris i s’editen com es vulguin.

Una vegada obert el Blocks Editor, ens adonem que només apareix l’editor de la pantalla que tenim oberta al Design Editor, i reiterant el que s’ha avisat abans, els elements d’una no apareixen a l’altre.

Canviar d’una pantalla a l’altre mitjançant un botó

Una vegada en el Blocks Editor, i en la primera pantalla (Screen 1), per fer el pas a la pantalla del menú principal (menu), farem servir l’opció, dins Built-in/Control, de open another screen with quan cliquem un botó. En aquest cas, en pseudocodi, seria “quan cliquem el botó de maria (mariabutton), s’obre la pantalla menú”. Aquest seria el pas que comentàvem de l’espai introductori al menú principal.

canvidepantalla

Com hem dit, la pantalla menú no apareix com a elements, ja que pertany a una altra pantalla. El que s’ha de fer és cridar a un component de text i anomenar-lo exactament igual que la pantalla on volem anar. Aquesta dinàmica funciona per totes les pantalles de la mateixa manera, i així un sol botó o n’hi hagi més.

El canvi de pantalles es podrà comprovar un cop, el joc sigui passat a un mòbil o tauleta.