Introducció al ListPicker
En aquest apartat veureu com afegir un objecte listpicker a la vostra app i personalitzar-lo amb contingut.
En aquest apartat es pretén donar resposta a les preguntes següents:
- Quina diferència hi ha entre un listpicker i un botó?
- Com puc consultar elements d’un listpicker?
- Com inicialitzo i consulto variables de tipus llista?
Per exemplificar una utilitat d’aquest objecte proposem una app que ens permeti triar diferents ubicacions d'una llista ubicada dins un listpicker i mostrar-les en un mapa.
Dissenyem la interfície
El ListPicker
El component ListPicker d’App Inventor s’incorpora a l’app durant la fase de disseny i es pot farcir de contingut tant en aquesta fase com en la de programació.
Arrossegeu un component ListPicker des del calaix UserInterface al visor i anomeneu-lo LPPunts.
A primer cop d’ull és igual que un botó, però si us fixeu en les propietats veureu que incorpora dos camps més:
A la propietat ElementsFromString incorporem la llista de punts d’interès, que seran les capitals de província de Catalunya separades per comes.
- Barcelona, Tarragona, Girona, Lleida.
La propoetat Selection contindrà l'element que l'usuari triï quan se li mostri la llista d'elements.
Canviarem la propietat Text d’aquest objecte a “Punts d’interès”.
Incorporem la resta d’objectes necessaris
Per organitzar els objectes arrosseguem al visor un objecte Horizontal Arrangement. Hi farem els següents canvis:
- Li canviem la propietat AlignHorizontal a Center3.
- Li canviem la propietat Width a FillParent
Un cop fet això, arrosseguem el listpicker dins l’horizontal arrangement on ens quedarà centrat.
Incorporem al visor, dins l’horizontal arrangement, un altre botó que anomenarem BNeteja i que ens permetrà netejar el mapa on mostrarem les ubicacions. A la propietat Text, li assignarem el valor “Neteja el plànol”.
L'aspecte que per ara tindrà l'app hauria de ser semblant al següent:
A sota dels objecte anterior incorporem un objecte Mapa que configurem com segueix:
- Centrem el plànol a les coordenades “41.7249800, 1.8265600” incorporant-les a la propietat CenterFromString de l'objecte Mapa. Aquestes coordenades corresponen a Manresa que queda força centrada a nivell de Catalunya.
- Fixem la propietat Zoom a 7 per permetre que es visualitzi tota Catalunya.
- Fixem l’amplada i l’alçada del mapa a Fill Parent. Això permetrà aprofitar tota la pantalla que ens quedi lliure per mostrar el plànol.
Des del calaix Maps, sobre el mapa arrosseguem també un objecte Marker (marcador) que ocultem canviant-ne la propietat Visible a fals. Aquest objecte ens permetrà ubicar els punts que ens interessi sobre el plànol.
La interfície de l’app quedarà com segueix:
Programem els components
Definim les variables necessàries
Al listpicker LPPunts hi tenim el nom de les ubicacions que podrem mostrar al plànol però no les seves coordenades, que ens faran falta per poder ubicar el marcador en el punt triat. Per aquesta raó ens caldran un parell de variables en les quals emmagatzemarem les coordenades de latitud i longitud dels diferents punts d’interès com a llistes.
Creem la variable coord_lat tal com segueix:
i semblantment la variable coord_long:
Programem el comportament del listpicker
Quan l’usuari cliqui sobre el ListPicker se li mostrarà la llista d’elements que li hem carregat inicialment, dels quals n’haurà de triar un. Veurà una pantalla semblant a la següent:
Quan l’usuari vegi aquesta pantalla podrà triar un dels elements de la llista. En fer-ho, tornarà a la pantalla principal de l’app i vàries propietats del listPicker hauran estat modificades.
En cas que trii per exemple el segon element, Tarragona, les propietat modificades seran les següents:
- Selection: Contindrà el valor de l’element seleccionat, en aquest cas Tarragona.
- SelectionIndex: contindrà la posició numérica de l’elemen seleccionat, en aquest cas 2.
Per gestionar aquesta tria utilitzarem el bloc de control d’esdeveniments when LPPunts.AfterPicking. Aquest bloc s’executarà quan l’usuari hagi triat un element de la llista i el listpicker es tanqui. Ho programarem com segueix:
- Incorporem el nom de l’objecte triat a la descripció del marcador:
- Aprofitant que tenim la posició numérica de l’element dins la llista del listpicker LPPuntss i que la llista de coordenades tenen el mateix ordre, incorporem les coordenades que tenim desades a coord_lat i coord_long al marcador.
- Fem visible el marcador. El bloc complet quedarà com segueix:
Amb aquesta programació aconseguirem que en triar un element de la llista es mostri el marcador centrat en el punt triat.
I per acabar, tan sols ens falta programar el botó BNeteja mitjançant el control d’esdeveniements when BNeteja.Click per tal que amagui el marcador.
