Programando para diversas plataformas y tamaños

Aunque Nativescript es un framework multiplataforma y el objetivo es que una aplicación Android e iOS compartan el máximo de código, la realidad es que en ocasiones queremos que la UI sea algo diferente en cada plataforma, e incluso que la lógica de la aplicación sea específica para una plataforma. Un ejemplo podría ser el uso de touch-id: en iOS podríamos autenticar al usuario con touch-id, pero en Android pediríamos usuario y password.

Nativescript proporciona varios mecanismos para hacer UI y lógica de aplicación específicos para cada plataforma y para cada tamaño.

Código específico de cada plataforma

XML específico de una plataforma

La primera forma de definir un UI específico para cada plataforma es separar el fichero.xml de una página en dos ficheros, uno para el UI de Android y otro para el UI de iOS. Para diferenciar los dos ficheros, añadimos .android o .ios al nombre del fichero:

• main-page.android.xml
• main-page.ios.xml

Esta aproximación es sencilla, pero obliga a duplicar el UI de la página para cada plataforma. Esto es bastante engorroso si sólo queremos un pequeño cambio de un UI a otro, ya que tendremos que duplicar casi todo el layout de la página. En este caso en que sólo queremos un pequeño cambio, tenemos una solución mucho mejor: mantener un fichero común y poner markup específico de cada plataforma:

    <StackLayout>

        <Button text="Este botón sale en ambas plataformas" />

        <android>

            <Button text="este texto sólo se muestra en android" />

        </android>

        <ios>

            <Button text="este texto sólo se muestra en ios" />

        </ios>

    </StackLayout>

Javascript específico de una plataforma

Al igual que ocurre con los fichero xml, también podemos utilizar la notacion .android y .ios en los ficheros javascript. Pero además, disponemos de la notación .common:

• main-page.common.js
• main-page.android.js
• main-page.ios.js

En primer lugar, se carga el fichero .common y después se carga el fichero específico de la plataforma.

Además, Nativescript nos proporciona dos variables globales javascript: 'android' e 'ios', que nos indican la plataforma en la que estamos ejecutando. Utilizando estas variables podemos evitar partir el código javascript en 3 ficheros diferentes:

    if (android) {

        ......

    }

    if (ios) {

        ........

    }

Estilos específicos por plataforma

Para separar estilos por plataforma se utiliza el mismo criterio utilizado en XML:

• main-page.android.css
• main-page.ios.css

Código específico de cada tamaño

Device independent pixels

Los device independent pixels, o dp, son una forma de describir el tamaño físico de un dispositivo (ancho y alto) de la pantalla del dispositivo, sin decir el número de pixels que tiene.

En general, Android e iOS clasifican sus pantallas como si tuvieran 160 dp por pulgada (esto es aproximado, cada plataforma tiene un valor distinto). Así, podemos asumir que si un dispositivo tiene un ancho mayor de 600 dp, entonces es una tablet, ya que 600/160=3.75 pulgadas=9.5 cm. Si tiene un ancho menor de 600 dp entonces es un teléfono. En general, los dp son una forma de medir el tamaño físico de la pantalla.

Convención de nombres de fichero para distintos tamaños

Para utilizar ficheros específicos para distintos tamaños, se añaden los siguientes sufijos al nombre del fichero:

• .minWxxx : si el ancho del dispositivo es al menos xxx dp
• .minHxxx : si el alto del dispositivo es al menos xxx dp
• .minWHxxx : si la más pequeña de las dimensiones del dispositivo es al menos xxx dp

Por ejemplo, si tenemos los ficheros main-page.xml y main-page.minWH600.xml, éste último se mostraría en una tablet y el primero en un teléfono, ya que la dimensión menor de una tablet es superior a 600 dp, como hemos  dicho antes.

Orientación del dispositivo

Otra necesidad muy común cuando se desarrollan aplicaciones es tener un UI distinto en función de la orientación del dispositivo. Para ello Nativescript nos ofrece la siguiente convención de nombres:

• .land : para orientación landscape u horizontal
• .port : para orientación portrait o vertical

Encadenando restricciones

Hasta ahora hemos visto cómo aplicar una única restricción en la convención de nombres de fichero: plataforma, tamaño mínimo, orientación. ¿Cómo podemos aplicar varias restricciones a la vez? En Nativescript esto es tan sencillo como encadenar. Por ejemplo, main-page.android.land.xml se aplica a la plataforma android en orientación landscape. El orden de las restricciones no importa, Nativescript aplicará lo que corresponda sin importar el orden.