En esta actividad, procederemos a introducir un componente un poco más avanzado para mostrar información que es el Listview de NativeScript, aquà estamos mostrando iterativamente información de un "array" estamos usando a lo que viene ya de Angular que es la directiva "ngFor", pero mejor aún si usamos un Listview. Para eso vamos a reemplazar esta lÃnea que tenÃa "ngFor" por el siguiente código. Este código, nos está presentando un Listview que ya viene estilado con una clase del tema, del "theme" de NativeScript. Estamos indicándole a este control de NativeScript que los items es un "array", una colección, es el siguiente, buscar, que es el "array" de strings que tenÃamos antes y le estamos poniendo una altura por defecto de 1250 pixeles. Este contenido es un "array", por ende, tenemos que especificar un "template" anidado a este Listview para indicar cómo queremos que se vea cada uno de los Ãtems de la lista. Para eso usamos el "ng-template" de Angular. Cada uno de los Ãtems que se iteran de este array se itera con el nombre, con una variable llamada "item" y en el "ng-template" la podemos redefinir con esta sintaxis "let-x", donde el nuevo nombre de la variable "item" será "x" para el resto del código, del resto del "template". Aquà vemos que usamos "x", aquÃ, como "input" valor de tipo "input" para un "label" que tendremos adentro de nuestro listado. FÃjense que adentro de cada uno de estos Ãtems cambiamos el "layout", dentro de cada uno de los Ãtem del listado usamos un "FlexboxLayout" y podrÃamos usar cualquier otro. PodrÃamos usar un "grid", etcétera y darle la forma del "layout" que quisiésemos a cada uno de los Ãtems del listado que vamos a mostrar. Más aún, en este "Flexbox", mostramos todo en una misma lÃnea, primero mostramos una imagen y luego el "label" con 60 % por ciento de ancho, por ende el resto lo va a usar la imagen y alineado en el centro verticalmente. Si esto lo guardamos, asà antes de seguir analizando esto en profundidad vamos a ver como se ve, recompiló, nos mandó al "home" y entramos a ver el "search". Fijense que aquà tenemos un listado, ya cada uno de los Ãtems con un tipo del "layout" distinto, customizado, distinto al que tenemos el control por encima del "listview" que era un "StackLayout" y estamos mostrando imágenes. Bueno, regresemos al código. La imagen, el componente tipo imagen, el "source" que tiene es un "res icon" esto que, ya en el código se ve por varios lados, analizamos qué significa. Es en principio, el "source", es decir el origen, una ruta o una URL o ruta local del dispositivo "mobile", en donde el control de tipo imagen va a tener que sacar el "asset" o el archivo, para dibujarlo. En este caso con esta sintaxis, que es como una URL, pero el protocolo RES significa que es un "resource", un recurso que está nativo/local dentro de la aplicación, es decir, en el mismo dispositivo "mobile". Esto dónde lo vemos nosotros que parece ser que está en la raÃz de donde sea que se guarden los recursos, porque dice "res://icon", este archivo "icon", ¿dónde está? Bien, estos recursos son customizados en "App_Resources". Entonces como estamos trabajando aquà en mi máquina con Android adentro de "src", "main", "res" de "resource", esta es la raÃz donde va a estar "res://". Ahora bien, tenemos muchas carpetas dentro de esto; más adelante veremos en detalle cómo funciona el tema de las imágenes, pero la idea era, a grandes rasgos, es que es para distintos tipos de pantalla. Dentro de una de ellas podemos ingresar. Vamos a ver que tenemos varios "PNG", varias imágenes y uno de ellos, yo elegà puntualmente "Icon.png", es el icono de NativeScript, de ahà está saliendo la imagen. Por último el Listview tiene un evento "ItemTap", es decir cuando le hacen "tap", clic digamos, a un Ãtem y ahà llamamos a un evento nuestro que es "OnItemTap($event)". Éste aún no lo creamos, asà que vamos a crearlo. Lo vamos a hacer sencillo recibimos un "X" y vamos a "loguearlo"; "console.dir(x)". Vamos a ver esto. La aplicación está cargando. Luego de cargar, vamos a dirigirnos al "search", aquà están y vamos a hacerle "tap", le hicimos "tap" y fÃjense que lo que pasó es que cuando se ejecuta el evento "ItemTap" de cualquiera de los Ãtems se ejecuta este pequeño código TypeScript. Lo que estamos haciendo es llamar a una función llamada "onItemTa2 en el "code behind it" , en el TypeScript de nuestro componente y le estamos pasando, haciendo un puente, un "bridge" del objeto que representa a la información del evento, eso es una variable llamada "$Event" y la estamos pasando tal cual al "OnItemTap" y lo que estamos haciendo aquà es "loguearlo" con dir, con console.dir. Entonces vemos que este objeto tiene tres propiedades, cuatro propiedades. "EventName: ItemTap", un objeto que es el Listview, que es el objeto que disparó el evento y una vista que es la que fue cliqueada, qué Ãtem fue cliqueado. Es un "FlexboxLayout" porque dentro del "ng.template", el primer control que aparece es el "FlexboxLayout", es decir, se le hizo clic sobre el "FlexboxLayout" que es el de Ãndice cero del objeto Listview que tiene tres elementos. Bueno, vamos a hacer una prueba más, vamos a ir al "home" y vamos a volver. Como ven, esto ya tiene un "scroll" sólo para el Listview porque supera la altura que tenÃamos definida. Y si yo me voy, esto obviamente es porque, de las lecciones anteriores, dejé configurado la inyección de dependencias en el módulo "raÃz" en "app.module", entonces, tiene esta memoria de que se acuerda todo lo que fue agregando. Hacemos clic a este ante último y vemos que dice "Ãndice siete", es decir, el octavo elemento, porque los indices empiezan en cero; está bien porque nos fuimos y vinimos tres veces, asà que en total son nueve, el indice que va ante último es el octavo. Por ende el Ãndice siete.
