App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Chat PHP MySQL. App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

___________________________

73B.- Cargar archivo CSV en visor de lista. Población en provincias.

p73B_csv_visordelista.aia

[Nota: en 73cargarcsv.htm y en 8Aarchivo_leer.htm, puedes encontrar tutoriales parecidos a este.]

- Tenemos una hoja de cálculo con información sobre la cantidad de personas que tienen cierta edad, clasificado por provincias.

- Queremos elegir una edad y luego una provincia y que nos muestra la cantidad de población que tienen esa edad.

- Partimos de esta hoja de cálculo: andalucia.csv

- Lo primero que voy hacer es eliminar la columna de Edad y la fila de provincias para tener solo los datos, es decir esto:

- Aquí está: andalucia_2.csv

- La podemos abrir con el Excel. La abrimos y veremos la información de la imagen anterior.

- Ahora la abrimos con el Wordpad de Windows. (o mejor con el Notepad++, más aconsejable). Veremos esto:

- Observa que el separador de campos es el punto y coma ;. Me interesaría que fuera la coma ,

- Para ello Reemplazo el punto y coma ; por la coma , según se ve en la imagen anterior.

- Obtengo el archivo andalucia_3.csv

- Ya lo tenemos preparado para trabajar con él en nuestra aplicación de App inventor.

_____________

- Diseño.

- Insertamos un DisposiciónHorizontal1 le pongo la Propiedad Ancho: Ajustar al contenedor.

- Dentro de ese DisposiciónHorizontal, ponemos dos DisposiciónVertical.

- Dentro de un DisposiciónVertical1 ponemos un VisorDeLista1. En su Propiedad Ancho: 150 pixel.

- Dentro del otro DisposiciónVertical2 ponemos un VisorDeLista2. En su Propiedad Ancho: 150 pixel.

- El Tamaño de Texto de los VisoresDeLista lo he puesto a 55.

- Ponemos un Archivo1.

- Subimos el archivo: andalucia_3.csv

_____________

- Bloques.

- Cuando inicie la pantalla se ha de cargar en los VisorDeLista los elementos elegibles (edad y provincia).

- Fíjate la manera en que se va creando los números de edad hasta el 85, se van acumulando en la variabla edad = 0, 1, 2, 3, 4,... 85

- Una vez que tengamos las 85 elementos edades se introducen en el VisorDeLista1.

- Observa cómo se introducen las provincias en el VisorDeLista2.

----------------------------------------------------------------------------------------------------

- Queremos que cuando elijamos una edad, se obtenga la lista de población en todas las provincias.

- Vamos a cargar los datos de andalucia_3.csv en una lista llamada poblacion.

- Cuando seleccionemos una edad en el VisorDeLista1, debe salir la fila de poblaciones seleccionada.

- Mira estos bloques:

- He tenido que poner VisorDeSelección + 1, para que no de error cuando pulso la edad 0.

- Cuando pulso una edad me muestra en la Etiqueta1, las poblaciones que tienen esa edad. Por ejemplo si pulso en 25 me saldrá:

(8.984 14.994 9.978 11.275 6.324 8.683 18.445 22.331 101.014)

- Vamos a la parte de Diseño y marcamos esto en las Propiedades de la Screen1: ShowListAsJson.

- Volvemos a pulsar en una edad y obtendremos:

["8.984","14.994","9.978","11.275","6.324","8.683","18.445","22.331","101.014"]

- Esta manera de presentar los datos se denomina formato JSON, es muy utilizado y es la manera que App inventor va a utilizar en el futuro, así que nos vamos acostumbrando.

- Vamos a dejarlo así y utilizar este formato JSON.

----------------------------------------------------------------------------------------------------

- Hemos obtenido la población de todas las provincias correspondiente a 25 años. Ahora mediante el VisorDeLista2, vamos a elegir una provincia.

- De los datos obtenidos anteriormente mediante el VisorDeLista1, vamos a presentar en la Etiqueta2 el correspondiente al índice pulsado en el VisorDeLista2.

- Observa que en el VisorDeLista1 al pulsar obtemos los datos seleccionados: ["8.984","14.994","9.978","11.275","6.324","8.683","18.445","22.331","101.014"]

- Si en el VisorDeLista2, pulsamos Granada, su índice es 4 ya que es la cuarta provincia, luego el elemento cuyo índice es 4 será: 11.275

_________________

- Comentarios.

- Mediante el código de bloques puedes modificar el Ancho de los VisorDeLista.

VisorDeLista1.Ancho = 0.25 X Screen1.Ancho

VisorDeLista2.Ancho = 0.75 X Screen1.Ancho

_________________

- Propuestas.

- Primero debemos elegir edad y luego la provincia. Modifica el código para que se pueda pulsar primero la provincia y luego la edad.

- Cambia el color de fondo y de las letra de los VisorDeLista.

- También puedes hacer que, en principio solo se muestren las provincias con el VisorDeLista2 y las edades con el VisorDeLista1 estén Visible=falso.

- Cuando elijas una provincia el VisorDeLista1 se pondrá Visible=cierto y podremos elegir una edad.

__________________________________