ListView en Nativescript

En este tutorial vamos a crear una pequeña aplicación utilizando el potente control ListView de Nativescript. El objetivo no es entender todo el código al 100%, sino ver las posibilidades que ofrece este framework. En posteriores tutoriales iremos creando aplicaciones donde se comprenderá perfectamente todo el código, pero no es el objetivo ahora.

En primer lugar, creamos el proyecto Nativescript:

    tns create MyListView --appid es.indra.nativescript.listview

La opción --appid permite poner un identificador a la aplicación que se utilizará posteriormente en las tiendas de aplicaciones: Play store y App store. Se puede cambiar después de creado el proyecto, pero entonces habría que quitar y volver a añadir las plataformas Android e iOS.

A partir de ahora y para simplificar, me referiré a los ficheros a partir del root del proyecto. Por ejemplo, me referiré al fichero MyListView/app/app.js como app/app.js

Partir de un proyecto vacío

El esqueleto que crea el CLI de Nativescript incluye código y ficheros que no necesitamos en un proyecto nuevo. Vamos a vaciar este esqueleto y lo dejamos preparado para empezar.

Borrar el fichero app/bundle-config.js (no es necesario salvo que se utilice Angular con Nativescript).

Borrar el fichero app/main-view-model.js (crearemos el modelo directamente en la página, ya que es un ejemplo muy sencillo).

Abrir el fichero app/app.js y quitar la línea:

    require("./bundle-config");

Vaciar el fichero app/main-page.js y dejarlo así:

    exports.onLoaded = function(args) {

        var page = args.object;

        page.bindingContext = {};

    }

Vaciar el fichero app/main-page.xml y dejarlo así:

    <Page loaded="onLoaded" class="page">

    </Page>

Ya tenemos un proyecto vacío, listo para empezar a trabajar. Ejecutemos el proyecto vacío para comprobar que todo ha ido bien:

    cd MyListView

    tns platform add android 

    tns platform add ios              (esto sólo es posible en un ordenador con MacOS)

    (si queremos ejecutar en genymotion, hay que arrancarlo ahora, antes del comando run)

    tns run android --emulator

    tns run ios --emulator

La primera vez que lo ejecutemos puede tardar incluso varios minutos en lanzarse la aplicación en el emulador, pero las siguientes modificaciones que vayamos haciendo refrescarán la aplicación rápidamente. Cuando veamos la aplicación en el emulador, veremos una pantalla en blanco (en el caso de Android veremos el nombre de la aplicación en la parte superior de la pantalla).

Lo primero que vamos a hacer es crear el modelo para la página. En el fichero app/main-view.js modificamos la línea donde se crea el bindingContext para dejarla así:

    page.bindingContext = {
        elements: [
            { 'name':'Indra', 'website':'http://www.indra.es' },
            { 'name':'Telefonica', 'website':'http://www.telefonica.com' }
        ]
    };

page.bindingContext es el modelo de datos al que accede la vista en el xml, como ahora veremos.

Situemos el control ListView en el fichero app/main-view.xml:

    <Page loaded="onLoaded" class="page">

        <ListView id="list" items="{{ elements }}">

            <ListView.itemTemplate>

                <StackLayout>

                    <Label text="{{ name || 'unknown name' }}" class="itemName" />

                    <Label text="{{ website || 'unknown website' }}" class="itemWebsite" />

                </StackLayout>

            </ListView.itemTemplate>

        </ListView>

    </Page>

Ya sólo nos resta poner estilos, utilizando las clases itemName e itemWebsite que hemos utilizado en la vista. Para ello, creamos un nuevo fichero: main-page.css, donde meteremos los estilos de esta vista:

    StackLayout {

        padding: 20

    }

    .itemName {

        font-weight: bold

    }

    .itemWebsite {

        font-size: 11

    }

Y con esto queda completada esta pequeña aplicación para demostrar el uso de ListView.