ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

T6 paris maptour

•
•
T
tecnovicent
1 of 10
Download to read offline
TEMA 6 1/10 Paris Map Tour En aquest tema, construiràs una aplicació que et permet crear la teua pròpia guia personalitzada per a un viatge de somni a París. I ja que alguns dels seus amics no poden unir-se, crearem una aplicació que els permet fer un recorregut virtual de París també. La creació d'una aplicació amb un mapa complet pot semblar molt complicat, però App Inventor li permet utilitzar el component ActivityStarter per llançar Google Maps per a cada ubicació virtual. En primer lloc, construiràs una aplicació que llança mapes de la Torre Eiffel, el Louvre i Notre Dame amb un sol clic. A continuació, podràs modificar l'aplicació per crear una visita virtual de mapes de satèl·lit que també estan disponibles a partir de Google Maps. El que aprendràs Aquest tema presenta els següents components i conceptes d'App Inventor: • El component d'iniciació d'activitats per al llançament d'altres aplicacions d'Android des de la seua aplicació. Anem a utilitzar aquest component per llançar Google Maps amb diferents paràmetres. • El component ListPicker per permetre a l'usuari triar d'una llista d'ubicacions. Disseny dels components Crear un nou projecte en el App Inventor anomenat "ParisMapTour". La interfície d'usuari de l'aplicació té un component d'imatge amb una foto de Paris, un component Label amb text, un component ListPicker que ve amb un botó associat, i un component ActivityStarter (no visible). Pots dissenyar els components utilitzant la instantània a la Figura 6-1. Els components enumerats en la Taula 6-1 es van utilitzar per crear la finestra de disseny. Arrossega cada component a la paleta en el visor i deixa el nom com s'especifica. Figura 6-1. La aplicació Paris Map Tour en l'emulador
TEMA 6 2/10 Taula 6-1. Components per a Paris Map Tour Component Paleta Nom assignat Objectiu Image Basic Image1 Mostra una imatge estàtica d'un mapa de París a la pantalla. Label Basic Label1 Mostra el text "Descobrir París amb el seu Android!" ListPicker Basic ListPicker1 Obriu la llista d'opcions de destinació. ActivityStarter Other stuff ActivityStarter1 Inicieu l'aplicació Mapes en un destí que es triï. Definir les propietats de ActivityStarter ActivityStarter és un component que et permet llançar qualsevol aplicació d'Android, un navegador, Google Maps, o fins i tot una altra de les teues pròpies aplicacions. Quan un usuari inicia una altra aplicació de la seva aplicació, pot fer clic al botó Enrere per tornar a l'aplicació. Vas a construir ParisMapTour perquè l'aplicació Mapes es llança per mostrar mapes particulars basades en l'elecció de l'usuari. L'usuari pot prémer el botó de nou per tornar a l'aplicació i triar una destinació diferent. ActivityStarter és un component relativament de baix nivell en què hauràs d'establir algunes propietats amb la informació familiar a un Java SDK d'Android programador, però aliè als altres 99,999% del món. Per aquesta aplicació, especifiqui les propietats que s'especifiquen a la Taula 6-2, i anar amb compte, fins i tot les lletres majúscules/minúscules són importants. Taula 6-2. Propietats ActivityStarter per al llançament de Google Maps Propietat Valor Action android.intent.action.VIEW ActivityClass com.google.android.maps.MapsActivity ActivityPackage com.google.android.apps.maps En l'Editor de Blocs, hauràs de definir una propietat més, DataUri, que li permet llançar un mapa específic a Google Maps. Aquesta propietat s'ha d'establir en l'Editor de Blocs en lloc del Dissenyador de components, ja que ha de ser dinàmica, que canviarà en funció de si l'usuari decideix visitar la Torre Eiffel, el Louvre o la catedral de Notre Dame. Arribarem a l'Editor de Blocs en un moment, però hi ha un parell de detalls a tindre en compte abans de poder passar a programar el comportament dels seus components: 1. Baixeu el fitxer metro.jpg des de la Carpeta Recursos6 del tema 6 en l'equip i, a continuació seleccioneu Add a la secció Media per a carregar en el seu projecte. A continuació, hauràs de configurar-lo com la propietat Picture d'Image1. 2. El component ListPicker ve amb un botó, quan l'usuari fa clic, les opcions s'enumeren. Estableixi el text d'aquest botó per a canviar la propietat Text de ListPicker1 a "Triar destinació París".
TEMA 6 3/10 Afegir comportaments als Components En l'Editor de Blocs, haurà de definir una llista de destinacions i dues comportaments: • Quan l'aplicació s'inicia, l'aplicació càrrega les destinacions al component ListPicker per a que l'usuari en pugui triar un. • Quan l'usuari selecciona una destinació de la ListPicker, l'aplicació Maps s'inicia i mostra un mapa d'aquest destí. En aquesta primera versió de l'aplicació, acabes d'obrir mapes i dir-li que s'executi una recerca de la destinació triada. Creació d'una llista de destinacions Obriu l'Editor de Blocs i crear una variable amb la llista de les destinacions de París utilitzant els blocs que figuren a la Taula 6-3. Taula 6-3. Blocs per crear una variable de destinacions Tipus de Bloc Calaix Objectiu def variable ("Destinacions") Definitions Crear una llista de les destinacions. make a list Lists Afegiu els elements a la llista. text ("Tour Eiffel") Text El primer destí. text ("Musée du Louvre") Text El segon destí. text ("Cathédrale Notre Dame") Text El tercer destí. La variable destinacions cridarà la funció make a list, en la qual es pot connectar els valors de text per a les tres destinacions de la seva gira, com es mostra a la Figura 6-2. Figura 6-2. Creació d'una llista és fàcil en App Inventor
TEMA 6 4/10 Deixar que l'usuari triï una destinació El propòsit del component ListPicker és per mostrar una llista d'elements per a que l'usuari trie. Precarregaràs les opcions al ListPicker mitjançant l'establiment de la propietat Elements to a list. Per aquesta aplicació, que desitja establir la propietat ListPicker els elements a la llista de destinacions que acabeu de crear. Com que vol mostrar la llista quan l'aplicació s'inicia, podràs definir aquest comportament en Screen1.Initialize. Necessitaràs els elements que figuren a la Taula 6-4. Taula 6-4. Blocs per al llançament de la ListPicker quan s'inicia l'aplicació Tipus de Bloc Calaix Objectiu Screen1.Initialize Screen1 Aquest esdeveniment s'activa quan s'inicia l'aplicació. set ListPicker1.Elements to ListPicker1 Establiu aquesta propietat a la llista que voleu que aparegui. global destinations My Definitions La llista de destinacions. Com funcionen els blocs Screen1.Initialize s'activa quan l'aplicació s'inicia. Com es mostra a la Figura 6-3, el controlador d'esdeveniments estableix la propietat Elements de ListPicker de manera que els tres destins apareixeran. Figura 6-3. Posa el que vulguis que succeeixi quan l'aplicació s'inicia en un controlador d'esdeveniments Screen1.Initialize Posa a prova la teva app. En primer lloc, hauràs de reiniciar l'aplicació fent clic a "Connect to Device ..." de l'Editor de Blocs. Després, al telèfon, feu clic al botó "Triar destinació París". El selector de llista ha d'aparèixer amb els tres punts.
TEMA 6 5/10 Mapes d'obertura amb una recerca A continuació, podràs programar l'aplicació perquè quan l'usuari tria una de les destinacions, la ActivityStarter llança Google Maps i la recerca de la ubicació seleccionada. Quan l'usuari tria un element del component ListPicker, l'esdeveniment ListPicker.AfterPicking es dispara. Al controlador d'esdeveniments per AfterPicking, cal establir el DataUri del component ActivityStarter de manera que sàpiga quin mapa ha d'obrir, i llavors necessites posar en marxa Google Maps utilitzant ActivityStarter.StartActivity. Els blocs d'aquesta funcionalitat s'enumeren a la Taula 6-5. Taula 6-5. Blocs de llançar Google Maps amb el Starter Activitat Tipus de Bloc Calaix Objectiu ListPicker1.AfterPicking ListPicker1 Aquest esdeveniment s'activa quan l'usuari tria de ListPicker. set ActivityStarter1.DataUri to ActivityStarter1 El DataUri crida a Maps que assignarà quin mapa obrir en el llançament. make text Text Construir el DataUri a partir de dos fragments de text. text ("geo:0,0?q=") Text La primera part de la DataUri espera per Maps. ListPicker1.Selection ListPicker1 L'element que l'usuari triï. ActivityStarter1.StartActivity ActivityStarter1 Inicieu Maps. Com funcionen els blocs Quan l'usuari tria a partir de la ListPicker, l'element seleccionat s'emmagatzema en ListPicker.Selection i l'esdeveniment AfterPicking es dispara. Com es mostra a la Figura 6-4, la propietat DataUri s'estableix en un objecte de text que combina "http://maps.google.com/?q =" amb l'element triat. Per tant, si l'usuari va triar la primera opció, "Tour Eiffel", el DataUri s'estableix en "http://maps.google.com/? q=Tour Eiffel". Figura 6-4. Ajustament de la DataURI per llançar el mapa seleccionat Ja que ja has configurat les altres propietats de la ActivityStarter perquè sàpigues obrir Maps, el bloc ActivityStarter1.StartActivity inicia l'aplicació Maps i invoca la recerca proscrita per la DataUri. Posa a prova la teva app. Reinicieu l'aplicació i feu clic a "Triar destinació París" de nou. En triar una de les destinacions, és el mapa de destinació que apareix? Google Maps també ha de proporcionar un botó de retrocés per tornar a la seva aplicació per triar de nou, funciona això? (És possible que hagi de fer clic al botó de nou un parell de vegades.)
TEMA 6 6/10 Configuració d'un Tour Virtual Ara anem a donar-li vida a l'aplicació i que obri algunes magnífiques vistes zoom al carrer i dels monuments de París perquè els seus amics a casa poden seguir endavant mentre que estàs absent. Per això, primer explorarem Google Maps per obtenir la URL d'alguns mapes específics. Encara utilitzes els mateixos punts de referència de París per les destinacions, però quan l'usuari escull una, s'utilitzarà l'índex (la posició en la llista) de la seva elecció per seleccionar i obrir un mapa específic o zoom a la vista del carrer. Abans de continuar, és possible que vulgueu desar el projecte (utilitzant desa) perquè tingui una còpia del que has creat fins ara. D'aquesta manera, si fas alguna cosa que causa problemes en la seva aplicació, sempre pot tornar a aquesta versió de treball i torni a intentar-ho. Trobar el DataUri de mapes específics El primer pas és obrir Google Maps al vostre ordinador per trobar els mapes específics que desitja llançar per a cada destinació: 1. En l'ordinador, aneu a http://maps.google.com. 2. Recerca d'un punt de referència (per exemple, la Torre Eiffel). 3. Apropar al nivell que desitgi. 4. Trieu el tipus de vista que desitja (per exemple, Adreça, satèl·lit, o Street View). 5. Feu clic al botó de vincle prop de la part superior dreta de la finestra de mapes i copiar la URL per al mapa. Anem a utilitzar aquesta URL (o part d'ella) per llançar el mapa des de la seva aplicació. Utilitzant aquest esquema, la taula 6-6 mostra les URL que farem servir. Taula 6-6. Visita virtual URL de Google Maps Marca Maps URL Tour Eiffel http://map s .g o o g l e . c om/maps?f=q&sou r c e=s_q&hl=en&ge o c o de=&q=eiffel+ t o w er&sll=37.0625,-95.677068&sspn=48.909425,72.333984&ie=UTF8&hq= T our+Eiffel &hnear= T our+Eiffe l ,+ Q u ai+B r anl y ,+75007+ P ari s ,+Il e - d e - F r an ce ,+ F r an c e&ll=48.85 7942,2.294748&spn=0.001249,0.002207&t=h&z=19 Musée du Louvre http://map s .g o o g l e . c om/maps?f=q&sou r c e=s_q&hl=en&q=louv r e&sll=48.86096 , 2.335421&sspn=0.002499,0.004415&ie=UTF8&t=h&split=1&fil t er=0& r q=1&ev=zi & r adius=0.12&hq=louv r e&hnear=&ll=48.86096,2.335421&spn=0.002499,0.00441 5&z=18 Cathédrale Notre Dame (Street View) http://map s .g o o g l e . c om/maps?f=q&sou r c e=s_q&hl=en&q= f r ench+landmarks&sll =48.853252,2.349111&sspn=0.002411,0.004415&ie=UTF8&t=h& r adius=0.12&split =1&fil t er=0& r q=1&ev=zi&hq=f r ench+landmarks&hnear=&ll=48.853252,2.349111 &spn=0,0.004415&z=18&la y er=c&cbll=48.853046,2.348861&panoid=74f L T qe Y dgk P Y j6KKLl q gQ&cbp=12,63.75,,0,-35.58
TEMA 6 7/10 Per veure qualsevol d'aquests mapes, enganxeu l'URL de la Taula 6-6 en un navegador. Els dos primers s'aplica el zoom en imatges de satèl·lit, mentre que la tercera és una vista del carrer. Podeu utilitzar aquestes URL directament per posar en marxa els mapes que desitja, o pot definir netejador URL usant els protocols descrits a Google Maps http://mapki.com. Per exemple, pot mostrar el mapa de la Torre Eiffel utilitzant únicament les coordenades del GPS que es troba en l'adreça URL llarga a la Taula 6- 6 i la Maps geo: protocol: geo: 48.857942,2.294748 t = h&z = 19 Fent ús d'aquest DataUri, obtindrà essencialment el mateix mapa que el mapa en funció de l'adreça URL completa de la qual les coordenades GPS van ser extrets. El t = h especifica que els mapes han de mostrar un mapa híbrid per satèl·lit i vistes d'adreces, i el z = 19 especifica el nivell de zoom. Si estàs interessat en els detalls de configuració dels paràmetres per als diferents tipus de mapes, fes un cop d'ull a la documentació en http://mapki.com. Per fer-ho més agradable amb dos tipus d'adreces URL, utilitzarem la geo: format per els primers dos ajustaments DataUri a la nostra llista, i l'adreça URL completa per al tercer. Definició de la Llista dataURIs Necessitaràs una llista anomenada dataURIs, que conté una DataURI per a cada mapa que voleu mostrar. Crear aquesta llista, com es mostra a la Figura 6-5 per que els elements corresponen als elements de la llista de destinacions (és a dir, la primera dataURI ha de correspondre al primer destí, la Torre Eiffel). Figura 6-5. La llista de mapes per a la seua tour virtual Els dos primers elements que es mostren són DataURIs de la Torre Eiffel i el Louvre. Tots dos utilitzen la geo: protocol. La tercera DataURI no es mostra del tot perquè el bloc és massa llarg per a aquesta pàgina, has de copiar aquesta URL de l'entrada de "Notre Dame, Street View" a la Taula 6-6 i posar-lo a un bloc de text.
TEMA 6 8/10 Modificar el comportament ListPicker.AfterPicking En la primera versió d'aquesta aplicació, el comportament ListPicker.AfterPicking estableix el DataUri a la concatenació (o una combinació) de "http://maps.google.com/?q =" i la destinació que l'usuari va escollir de la llista (per exemple, Tour Eiffel). En aquesta segona versió, el comportament AfterPicking ha de ser més sofisticats, perquè l'usuari està seleccionant una llista (destinacions), però el DataUri ha de ser seleccionat d'una altra llista (dataURIs). En concret, quan l'usuari tria un element de la ListPicker, cal conèixer l'índex de la seva elecció perquè pugui utilitzar per seleccionar el DataUri correcte de la llista dataURIs. Hi ha molt pocs blocs necessàris per a aquesta funció, tots els quals estan llistats a la Taula 6-7. Taula 6-7. Blocs per a l'elecció d'un element de la llista en base a la selecció de l'usuari Tipus de Bloc Calaix Objectiu def variable ("index") Definitions Aquesta variable contindrà l'índex de l'elecció de l'usuari. number (1) Math Inicialitzeu la variable índex a 1 ListPicker1.AfterPicking ListPicker1 Aquest esdeveniment s'activa quan l'usuari tria un element. set global index to My Definitions Estableixi aquesta variable en la posició de l'element seleccionat. position in list Lists Obtenir la posició (índex) d'un element seleccionat. ListPicker1.Selection ListPicker1 El tema seleccionat per exemple, "Tour Eiffel". Connecteu això en la ranura de position in list. global destinations My DefinitionsConnecteu està en la "llista" ranura de posició en la llista. set ActivityStarter.DataUri ActivityStarterEstablir això abans de començar l'activitat per obrir el mapa. select list item Lists Seleccioneu un element de la llista dataURIs. global DataURIs My Definitions La llista de DataURIs. global index My DefinitionsSostingui la posició de l'element seleccionat. ActivityStarter.StartActivity ActivityStarterInicieu l'aplicació Maps.
TEMA 6 9/10 Com funcionen els blocs Quan l'usuari tria un element de la ListPicker, l'esdeveniment AfterPicking s'activa, com es mostra a la Figura 6-6. El tema triat, per exemple "Tour Eiffel", és a ListPicker.Selection. El controlador d'esdeveniments utilitza això per trobar la posició de l'element seleccionat, o el valor de l'índex, a la llista de destinacions. L'índex correspon a la posició de la destinació a la llista. Així que si "Tour Eiffel" es triï, l'índex serà 1, si "Musée du Louvre" és elegit, serà 2, i si la "Catedral de Notre Dame de París" que es triï, l'índex serà 3. Figura 6-6. L'elecció d'un element de la llista en base a la selecció de l'usuari L'índex pot ser utilitzat per seleccionar un element d'una altra llista, en aquest cas data URIs, i per establir que l'entrada com la ActivityStarter de DataUri. Un cop configurat, el mapa es pot iniciar amb ActivityStarter.StartActivity. Posa a prova la teva app. Al telèfon, feu clic al botó "Triar destinació París". La llista ha d'aparèixer amb els tres punts. Trieu un dels elements i veure quin mapa apareix.
TEMA 6 10/10 Variacions Aquí hi ha algunes variacions suggerides per intentar: • Crear una visita virtual d'algun altre destí exòtic, o del seu lloc de treball o escola. • Crear una aplicació personalitzable Tour Virtual que permet a l'usuari crear una guia per a una ubicació de la seua elecció mitjançant la introducció del nom de cada destinació juntament amb la URL d'un mapa corresponent. Hauràs de emmagatzemar les dades en una base de dades TinyWebDB i crear una aplicació Tour Virtual que treballa amb les dades introduïdes. Resum Aquestes són algunes de les idees que hem tractat en aquest tema: • Les variables de llista es poden utilitzar per emmagatzemar dades com destinacions del mapa i les adreces URL. • El component ListPicker permet a l'usuari triar d'una llista d'elements. La propietat Elements de ListPicker conté la llista, la propietat Selection ocupa l'element seleccionat, i l'esdeveniment AfterPicking s'activa quan l'usuari selecciona un element de la llista. • El component ActivityStarter permet la seva aplicació per llançar altres aplicacions. En aquest tema s'ha demostrat el seu ús amb l'aplicació Nokia Maps, però es pot llançar un navegador o qualsevol altra aplicació Android també, fins i tot un altre que et va crear. • Podeu començar una ruta en particular a Google Maps mitjançant l'establiment de la propietat DataUri. Pots trobar URI mitjançant la configuració d'un mapa en particular en el navegador i després triar el botó d'enllaç per trobar l'URI. Pots col·locar un URI directament al DataUri del seu ActivityStarter, o construir el seu propi URI utilitzant els protocols definits en http://mapki.com. • Pot identificar l'índex d'un element de la llista amb la posició en la llista de bloqueig. Amb ListPicker, pot utilitzar la posició llista per trobar l'índex de l'element que triï l'usuari. Això és important quan, com en aquest tema, necessites l'índex per triar un element d'una segona llista, relacionada

More Related Content

T6 paris maptour

  • 1. TEMA 6 1/10 Paris Map Tour En aquest tema, construiràs una aplicació que et permet crear la teua pròpia guia personalitzada per a un viatge de somni a París. I ja que alguns dels seus amics no poden unir-se, crearem una aplicació que els permet fer un recorregut virtual de París també. La creació d'una aplicació amb un mapa complet pot semblar molt complicat, però App Inventor li permet utilitzar el component ActivityStarter per llançar Google Maps per a cada ubicació virtual. En primer lloc, construiràs una aplicació que llança mapes de la Torre Eiffel, el Louvre i Notre Dame amb un sol clic. A continuació, podràs modificar l'aplicació per crear una visita virtual de mapes de satèl·lit que també estan disponibles a partir de Google Maps. El que aprendràs Aquest tema presenta els següents components i conceptes d'App Inventor: • El component d'iniciació d'activitats per al llançament d'altres aplicacions d'Android des de la seua aplicació. Anem a utilitzar aquest component per llançar Google Maps amb diferents paràmetres. • El component ListPicker per permetre a l'usuari triar d'una llista d'ubicacions. Disseny dels components Crear un nou projecte en el App Inventor anomenat "ParisMapTour". La interfície d'usuari de l'aplicació té un component d'imatge amb una foto de Paris, un component Label amb text, un component ListPicker que ve amb un botó associat, i un component ActivityStarter (no visible). Pots dissenyar els components utilitzant la instantània a la Figura 6-1. Els components enumerats en la Taula 6-1 es van utilitzar per crear la finestra de disseny. Arrossega cada component a la paleta en el visor i deixa el nom com s'especifica. Figura 6-1. La aplicació Paris Map Tour en l'emulador
  • 2. TEMA 6 2/10 Taula 6-1. Components per a Paris Map Tour Component Paleta Nom assignat Objectiu Image Basic Image1 Mostra una imatge estàtica d'un mapa de París a la pantalla. Label Basic Label1 Mostra el text "Descobrir París amb el seu Android!" ListPicker Basic ListPicker1 Obriu la llista d'opcions de destinació. ActivityStarter Other stuff ActivityStarter1 Inicieu l'aplicació Mapes en un destí que es triï. Definir les propietats de ActivityStarter ActivityStarter és un component que et permet llançar qualsevol aplicació d'Android, un navegador, Google Maps, o fins i tot una altra de les teues pròpies aplicacions. Quan un usuari inicia una altra aplicació de la seva aplicació, pot fer clic al botó Enrere per tornar a l'aplicació. Vas a construir ParisMapTour perquè l'aplicació Mapes es llança per mostrar mapes particulars basades en l'elecció de l'usuari. L'usuari pot prémer el botó de nou per tornar a l'aplicació i triar una destinació diferent. ActivityStarter és un component relativament de baix nivell en què hauràs d'establir algunes propietats amb la informació familiar a un Java SDK d'Android programador, però aliè als altres 99,999% del món. Per aquesta aplicació, especifiqui les propietats que s'especifiquen a la Taula 6-2, i anar amb compte, fins i tot les lletres majúscules/minúscules són importants. Taula 6-2. Propietats ActivityStarter per al llançament de Google Maps Propietat Valor Action android.intent.action.VIEW ActivityClass com.google.android.maps.MapsActivity ActivityPackage com.google.android.apps.maps En l'Editor de Blocs, hauràs de definir una propietat més, DataUri, que li permet llançar un mapa específic a Google Maps. Aquesta propietat s'ha d'establir en l'Editor de Blocs en lloc del Dissenyador de components, ja que ha de ser dinàmica, que canviarà en funció de si l'usuari decideix visitar la Torre Eiffel, el Louvre o la catedral de Notre Dame. Arribarem a l'Editor de Blocs en un moment, però hi ha un parell de detalls a tindre en compte abans de poder passar a programar el comportament dels seus components: 1. Baixeu el fitxer metro.jpg des de la Carpeta Recursos6 del tema 6 en l'equip i, a continuació seleccioneu Add a la secció Media per a carregar en el seu projecte. A continuació, hauràs de configurar-lo com la propietat Picture d'Image1. 2. El component ListPicker ve amb un botó, quan l'usuari fa clic, les opcions s'enumeren. Estableixi el text d'aquest botó per a canviar la propietat Text de ListPicker1 a "Triar destinació París".
  • 3. TEMA 6 3/10 Afegir comportaments als Components En l'Editor de Blocs, haurà de definir una llista de destinacions i dues comportaments: • Quan l'aplicació s'inicia, l'aplicació càrrega les destinacions al component ListPicker per a que l'usuari en pugui triar un. • Quan l'usuari selecciona una destinació de la ListPicker, l'aplicació Maps s'inicia i mostra un mapa d'aquest destí. En aquesta primera versió de l'aplicació, acabes d'obrir mapes i dir-li que s'executi una recerca de la destinació triada. Creació d'una llista de destinacions Obriu l'Editor de Blocs i crear una variable amb la llista de les destinacions de París utilitzant els blocs que figuren a la Taula 6-3. Taula 6-3. Blocs per crear una variable de destinacions Tipus de Bloc Calaix Objectiu def variable ("Destinacions") Definitions Crear una llista de les destinacions. make a list Lists Afegiu els elements a la llista. text ("Tour Eiffel") Text El primer destí. text ("Musée du Louvre") Text El segon destí. text ("Cathédrale Notre Dame") Text El tercer destí. La variable destinacions cridarà la funció make a list, en la qual es pot connectar els valors de text per a les tres destinacions de la seva gira, com es mostra a la Figura 6-2. Figura 6-2. Creació d'una llista és fàcil en App Inventor
  • 4. TEMA 6 4/10 Deixar que l'usuari triï una destinació El propòsit del component ListPicker és per mostrar una llista d'elements per a que l'usuari trie. Precarregaràs les opcions al ListPicker mitjançant l'establiment de la propietat Elements to a list. Per aquesta aplicació, que desitja establir la propietat ListPicker els elements a la llista de destinacions que acabeu de crear. Com que vol mostrar la llista quan l'aplicació s'inicia, podràs definir aquest comportament en Screen1.Initialize. Necessitaràs els elements que figuren a la Taula 6-4. Taula 6-4. Blocs per al llançament de la ListPicker quan s'inicia l'aplicació Tipus de Bloc Calaix Objectiu Screen1.Initialize Screen1 Aquest esdeveniment s'activa quan s'inicia l'aplicació. set ListPicker1.Elements to ListPicker1 Establiu aquesta propietat a la llista que voleu que aparegui. global destinations My Definitions La llista de destinacions. Com funcionen els blocs Screen1.Initialize s'activa quan l'aplicació s'inicia. Com es mostra a la Figura 6-3, el controlador d'esdeveniments estableix la propietat Elements de ListPicker de manera que els tres destins apareixeran. Figura 6-3. Posa el que vulguis que succeeixi quan l'aplicació s'inicia en un controlador d'esdeveniments Screen1.Initialize Posa a prova la teva app. En primer lloc, hauràs de reiniciar l'aplicació fent clic a "Connect to Device ..." de l'Editor de Blocs. Després, al telèfon, feu clic al botó "Triar destinació París". El selector de llista ha d'aparèixer amb els tres punts.
  • 5. TEMA 6 5/10 Mapes d'obertura amb una recerca A continuació, podràs programar l'aplicació perquè quan l'usuari tria una de les destinacions, la ActivityStarter llança Google Maps i la recerca de la ubicació seleccionada. Quan l'usuari tria un element del component ListPicker, l'esdeveniment ListPicker.AfterPicking es dispara. Al controlador d'esdeveniments per AfterPicking, cal establir el DataUri del component ActivityStarter de manera que sàpiga quin mapa ha d'obrir, i llavors necessites posar en marxa Google Maps utilitzant ActivityStarter.StartActivity. Els blocs d'aquesta funcionalitat s'enumeren a la Taula 6-5. Taula 6-5. Blocs de llançar Google Maps amb el Starter Activitat Tipus de Bloc Calaix Objectiu ListPicker1.AfterPicking ListPicker1 Aquest esdeveniment s'activa quan l'usuari tria de ListPicker. set ActivityStarter1.DataUri to ActivityStarter1 El DataUri crida a Maps que assignarà quin mapa obrir en el llançament. make text Text Construir el DataUri a partir de dos fragments de text. text ("geo:0,0?q=") Text La primera part de la DataUri espera per Maps. ListPicker1.Selection ListPicker1 L'element que l'usuari triï. ActivityStarter1.StartActivity ActivityStarter1 Inicieu Maps. Com funcionen els blocs Quan l'usuari tria a partir de la ListPicker, l'element seleccionat s'emmagatzema en ListPicker.Selection i l'esdeveniment AfterPicking es dispara. Com es mostra a la Figura 6-4, la propietat DataUri s'estableix en un objecte de text que combina "http://maps.google.com/?q =" amb l'element triat. Per tant, si l'usuari va triar la primera opció, "Tour Eiffel", el DataUri s'estableix en "http://maps.google.com/? q=Tour Eiffel". Figura 6-4. Ajustament de la DataURI per llançar el mapa seleccionat Ja que ja has configurat les altres propietats de la ActivityStarter perquè sàpigues obrir Maps, el bloc ActivityStarter1.StartActivity inicia l'aplicació Maps i invoca la recerca proscrita per la DataUri. Posa a prova la teva app. Reinicieu l'aplicació i feu clic a "Triar destinació París" de nou. En triar una de les destinacions, és el mapa de destinació que apareix? Google Maps també ha de proporcionar un botó de retrocés per tornar a la seva aplicació per triar de nou, funciona això? (És possible que hagi de fer clic al botó de nou un parell de vegades.)
  • 6. TEMA 6 6/10 Configuració d'un Tour Virtual Ara anem a donar-li vida a l'aplicació i que obri algunes magnífiques vistes zoom al carrer i dels monuments de París perquè els seus amics a casa poden seguir endavant mentre que estàs absent. Per això, primer explorarem Google Maps per obtenir la URL d'alguns mapes específics. Encara utilitzes els mateixos punts de referència de París per les destinacions, però quan l'usuari escull una, s'utilitzarà l'índex (la posició en la llista) de la seva elecció per seleccionar i obrir un mapa específic o zoom a la vista del carrer. Abans de continuar, és possible que vulgueu desar el projecte (utilitzant desa) perquè tingui una còpia del que has creat fins ara. D'aquesta manera, si fas alguna cosa que causa problemes en la seva aplicació, sempre pot tornar a aquesta versió de treball i torni a intentar-ho. Trobar el DataUri de mapes específics El primer pas és obrir Google Maps al vostre ordinador per trobar els mapes específics que desitja llançar per a cada destinació: 1. En l'ordinador, aneu a http://maps.google.com. 2. Recerca d'un punt de referència (per exemple, la Torre Eiffel). 3. Apropar al nivell que desitgi. 4. Trieu el tipus de vista que desitja (per exemple, Adreça, satèl·lit, o Street View). 5. Feu clic al botó de vincle prop de la part superior dreta de la finestra de mapes i copiar la URL per al mapa. Anem a utilitzar aquesta URL (o part d'ella) per llançar el mapa des de la seva aplicació. Utilitzant aquest esquema, la taula 6-6 mostra les URL que farem servir. Taula 6-6. Visita virtual URL de Google Maps Marca Maps URL Tour Eiffel http://map s .g o o g l e . c om/maps?f=q&sou r c e=s_q&hl=en&ge o c o de=&q=eiffel+ t o w er&sll=37.0625,-95.677068&sspn=48.909425,72.333984&ie=UTF8&hq= T our+Eiffel &hnear= T our+Eiffe l ,+ Q u ai+B r anl y ,+75007+ P ari s ,+Il e - d e - F r an ce ,+ F r an c e&ll=48.85 7942,2.294748&spn=0.001249,0.002207&t=h&z=19 Musée du Louvre http://map s .g o o g l e . c om/maps?f=q&sou r c e=s_q&hl=en&q=louv r e&sll=48.86096 , 2.335421&sspn=0.002499,0.004415&ie=UTF8&t=h&split=1&fil t er=0& r q=1&ev=zi & r adius=0.12&hq=louv r e&hnear=&ll=48.86096,2.335421&spn=0.002499,0.00441 5&z=18 Cathédrale Notre Dame (Street View) http://map s .g o o g l e . c om/maps?f=q&sou r c e=s_q&hl=en&q= f r ench+landmarks&sll =48.853252,2.349111&sspn=0.002411,0.004415&ie=UTF8&t=h& r adius=0.12&split =1&fil t er=0& r q=1&ev=zi&hq=f r ench+landmarks&hnear=&ll=48.853252,2.349111 &spn=0,0.004415&z=18&la y er=c&cbll=48.853046,2.348861&panoid=74f L T qe Y dgk P Y j6KKLl q gQ&cbp=12,63.75,,0,-35.58
  • 7. TEMA 6 7/10 Per veure qualsevol d'aquests mapes, enganxeu l'URL de la Taula 6-6 en un navegador. Els dos primers s'aplica el zoom en imatges de satèl·lit, mentre que la tercera és una vista del carrer. Podeu utilitzar aquestes URL directament per posar en marxa els mapes que desitja, o pot definir netejador URL usant els protocols descrits a Google Maps http://mapki.com. Per exemple, pot mostrar el mapa de la Torre Eiffel utilitzant únicament les coordenades del GPS que es troba en l'adreça URL llarga a la Taula 6- 6 i la Maps geo: protocol: geo: 48.857942,2.294748 t = h&z = 19 Fent ús d'aquest DataUri, obtindrà essencialment el mateix mapa que el mapa en funció de l'adreça URL completa de la qual les coordenades GPS van ser extrets. El t = h especifica que els mapes han de mostrar un mapa híbrid per satèl·lit i vistes d'adreces, i el z = 19 especifica el nivell de zoom. Si estàs interessat en els detalls de configuració dels paràmetres per als diferents tipus de mapes, fes un cop d'ull a la documentació en http://mapki.com. Per fer-ho més agradable amb dos tipus d'adreces URL, utilitzarem la geo: format per els primers dos ajustaments DataUri a la nostra llista, i l'adreça URL completa per al tercer. Definició de la Llista dataURIs Necessitaràs una llista anomenada dataURIs, que conté una DataURI per a cada mapa que voleu mostrar. Crear aquesta llista, com es mostra a la Figura 6-5 per que els elements corresponen als elements de la llista de destinacions (és a dir, la primera dataURI ha de correspondre al primer destí, la Torre Eiffel). Figura 6-5. La llista de mapes per a la seua tour virtual Els dos primers elements que es mostren són DataURIs de la Torre Eiffel i el Louvre. Tots dos utilitzen la geo: protocol. La tercera DataURI no es mostra del tot perquè el bloc és massa llarg per a aquesta pàgina, has de copiar aquesta URL de l'entrada de "Notre Dame, Street View" a la Taula 6-6 i posar-lo a un bloc de text.
  • 8. TEMA 6 8/10 Modificar el comportament ListPicker.AfterPicking En la primera versió d'aquesta aplicació, el comportament ListPicker.AfterPicking estableix el DataUri a la concatenació (o una combinació) de "http://maps.google.com/?q =" i la destinació que l'usuari va escollir de la llista (per exemple, Tour Eiffel). En aquesta segona versió, el comportament AfterPicking ha de ser més sofisticats, perquè l'usuari està seleccionant una llista (destinacions), però el DataUri ha de ser seleccionat d'una altra llista (dataURIs). En concret, quan l'usuari tria un element de la ListPicker, cal conèixer l'índex de la seva elecció perquè pugui utilitzar per seleccionar el DataUri correcte de la llista dataURIs. Hi ha molt pocs blocs necessàris per a aquesta funció, tots els quals estan llistats a la Taula 6-7. Taula 6-7. Blocs per a l'elecció d'un element de la llista en base a la selecció de l'usuari Tipus de Bloc Calaix Objectiu def variable ("index") Definitions Aquesta variable contindrà l'índex de l'elecció de l'usuari. number (1) Math Inicialitzeu la variable índex a 1 ListPicker1.AfterPicking ListPicker1 Aquest esdeveniment s'activa quan l'usuari tria un element. set global index to My Definitions Estableixi aquesta variable en la posició de l'element seleccionat. position in list Lists Obtenir la posició (índex) d'un element seleccionat. ListPicker1.Selection ListPicker1 El tema seleccionat per exemple, "Tour Eiffel". Connecteu això en la ranura de position in list. global destinations My DefinitionsConnecteu està en la "llista" ranura de posició en la llista. set ActivityStarter.DataUri ActivityStarterEstablir això abans de començar l'activitat per obrir el mapa. select list item Lists Seleccioneu un element de la llista dataURIs. global DataURIs My Definitions La llista de DataURIs. global index My DefinitionsSostingui la posició de l'element seleccionat. ActivityStarter.StartActivity ActivityStarterInicieu l'aplicació Maps.
  • 9. TEMA 6 9/10 Com funcionen els blocs Quan l'usuari tria un element de la ListPicker, l'esdeveniment AfterPicking s'activa, com es mostra a la Figura 6-6. El tema triat, per exemple "Tour Eiffel", és a ListPicker.Selection. El controlador d'esdeveniments utilitza això per trobar la posició de l'element seleccionat, o el valor de l'índex, a la llista de destinacions. L'índex correspon a la posició de la destinació a la llista. Així que si "Tour Eiffel" es triï, l'índex serà 1, si "Musée du Louvre" és elegit, serà 2, i si la "Catedral de Notre Dame de París" que es triï, l'índex serà 3. Figura 6-6. L'elecció d'un element de la llista en base a la selecció de l'usuari L'índex pot ser utilitzat per seleccionar un element d'una altra llista, en aquest cas data URIs, i per establir que l'entrada com la ActivityStarter de DataUri. Un cop configurat, el mapa es pot iniciar amb ActivityStarter.StartActivity. Posa a prova la teva app. Al telèfon, feu clic al botó "Triar destinació París". La llista ha d'aparèixer amb els tres punts. Trieu un dels elements i veure quin mapa apareix.
  • 10. TEMA 6 10/10 Variacions Aquí hi ha algunes variacions suggerides per intentar: • Crear una visita virtual d'algun altre destí exòtic, o del seu lloc de treball o escola. • Crear una aplicació personalitzable Tour Virtual que permet a l'usuari crear una guia per a una ubicació de la seua elecció mitjançant la introducció del nom de cada destinació juntament amb la URL d'un mapa corresponent. Hauràs de emmagatzemar les dades en una base de dades TinyWebDB i crear una aplicació Tour Virtual que treballa amb les dades introduïdes. Resum Aquestes són algunes de les idees que hem tractat en aquest tema: • Les variables de llista es poden utilitzar per emmagatzemar dades com destinacions del mapa i les adreces URL. • El component ListPicker permet a l'usuari triar d'una llista d'elements. La propietat Elements de ListPicker conté la llista, la propietat Selection ocupa l'element seleccionat, i l'esdeveniment AfterPicking s'activa quan l'usuari selecciona un element de la llista. • El component ActivityStarter permet la seva aplicació per llançar altres aplicacions. En aquest tema s'ha demostrat el seu ús amb l'aplicació Nokia Maps, però es pot llançar un navegador o qualsevol altra aplicació Android també, fins i tot un altre que et va crear. • Podeu començar una ruta en particular a Google Maps mitjançant l'establiment de la propietat DataUri. Pots trobar URI mitjançant la configuració d'un mapa en particular en el navegador i després triar el botó d'enllaç per trobar l'URI. Pots col·locar un URI directament al DataUri del seu ActivityStarter, o construir el seu propi URI utilitzant els protocols definits en http://mapki.com. • Pot identificar l'índex d'un element de la llista amb la posició en la llista de bloqueig. Amb ListPicker, pot utilitzar la posició llista per trobar l'índex de l'element que triï l'usuari. Això és important quan, com en aquest tema, necessites l'índex per triar un element d'una segona llista, relacionada