Definición de la aplicación
Esta sencilla aplicación consta de dos páginas:
- home
- about
La página home será la primera página que vean los usuarios al lanzar la aplicación. La página about mostrará información textual sobre la aplicación.
Creación del proyecto vacío
Para crear el proyecto utilizamos el CLI de Nativescript, como siempre:
tns create TechnoShop --appid com.joseanquiles.technoshop
Ahora vaciamos el proyecto, para empezar desde cero:
Borrar el fichero app/bundle-config.js
Borrar el fichero app/bundle-config.js
Borrar el fichero app/main-view-model.js
Borrar el fichero app/main-page.xml
Borrar el fichero app/main-page.js
Abrir el fichero app/app.js y dejarlo como sigue:
var application = require("application");
application.cssFile = "./app.css";
application.start({ moduleName: "views/home-page" });
Crear carpeta app/views
Crear fichero app/views/home-page.xml y rellenarla con lo siguiente:
<Page>
</Page>
Page es un contenedor de todos los elementos de la página. Es el elemento padre de todos los demás elementos de la página.
Ejecutar el proyecto:
cd TechnoShop
tns platform add android
tns run android --emulator
Si todo ha ido bien, tendremos una aplicación vacía ejecutándose en el emulador.
Añadir contenido a la página home
Vamos a poner una etiqueta de bienvenida en home-page.xml:
<Page>
<StackLayout>
<Label text="Bienvenido a TechnoShop!" />
</StackLayout>
</Page>
StackLayout es un contenedor que sitúa a sus elementos hijos uno encima de otro. Los contenedores se llaman layouts en Nativescript. En otros artículos veremos otros tipos de layouts que permiten organizar a sus hijos de otras formas.
Label es una etiqueta de texto. El atributo text define el texto que muestra la etiqueta.
Crear la página about
Crear fichero app/views/about-page.xml y rellenarla con lo siguiente:
<Page>
<StackLayout>
<Label text="TechnoShop, la tienda de tecnología online. Tenemos todo tipo de dispositivos y accesorios para ti" />
<Label text="Madrid (España)" />
</StackLayout>
</Page>
Si ejecutamos la aplicación ahora, nos daremos cuenta de que no hay forma de ver la nueva página que hemos creado.
Podríamos cambiar la página de arranque en app.js para que apunte a home-page, así podremos ver la nueva página:
application.start({ moduleName: "views/about-page" });
Ahora sí podemos ver la página About. Lo primero que vemos es que el texto de la primera etiqueta está recortado, porque no cabe en el ancho del móvil. Para resolver este problema, utilizamos el atributo textWrap de Label.
<Label textWrap="true" text="TechnoShop, la tienda de tecnología online. Tenemos todo tipo de dispositivos y accesorios para ti" />
Gracias a poner textWrap="true" el texto que no cabe en una línea pasará a la siguiente línea.
Y ahora, vamos a volver a poner home-page como página de inicio:
application.start({ moduleName: "views/home-page" });
Implementemos la navegación entre páginas...
Navegación entre páginas
Hasta ahora hemos ido construyendo páginas en su correspondiente fichero xml, pero no hemos añadido ninguna lógica a estas paginas. La lógica de las páginas va en el fichero .js asociado a cada página.
La navegación entre páginas ocurre en respuesta a una acción sobre un elemento de la página (por ejemplo, pulsando un botón). La acción asociada está en el fichero .js de la página.
Añadir un botón a la página home
La etiqueta Button inserta un botón en la página Home:
<Page>
<StackLayout>
<Label text="Bienvenido a TechnoShop!" />
<Button text="Acerca de..." tap="onAbout" />
</StackLayout>
</Page>
El atributo text de Button especifica el texto que mostrará el botón.
El atributo tap de Button especifica la función javascript que se ejecutará cuando se pulse el botón.
Tratar el evento tap
El evento tap de Button se produce al pulsar el botón. La función que hemos especificado para tratar este evento se llama onAbout y hay que definirla en el fichero javascript asociado a la página. El fichero que tenemos que crear es app/views/home-page.js
var frame = require("ui/frame");
function onAbout() {
frame.topmost().navigate("views/about-page");
}
exports.onAbout = onAbout;
El módulo ui/frame se utiliza para navegar entre páginas. Este módulo se incluye en los core-modules de Nativescript.
La función onAbout() se ejecutará cuando se produzca el evento tap en el Button.
Por último, tenemos que exportar la función añadiéndola al objeto exports.
Una forma más breve de hacer lo mismo sería:
var frame = require("ui/frame");
exports.onAbout = function() {
frame.topmost().navigate("views/about-page");
}
Si ejecutamos la aplicación veremos el botón debajo del texto de bienvenida. Si pulsamos el botón, pasaremos a la página About.
Aplicar transiciones
Una transición es una animación que ocurre cuando se navega de una página a otra.
Nativescript nos ofrece una serie de transiciones predefinidas que podemos utilizar tanto en iOS como en Android:
- fade
- flipRight
- flipLeft
- slideLeft
- slideRight
- slideTop
- slideBottom
Para aplicar la transición, cambiaremos home-page.js de la siguiente forma:
var frame = require("ui/frame");
exports.onAbout = function() {
var nav = {
moduleName : "views/about-page",
transition : {
name : "slideBottom",
duration : 2000
}
};
frame.topmost().navigate(nav);
}
En este caso, hemos creado un objeto llamado nav que incluye la página a la que se navega (moduleName) y un objeto transition que define la transición (name y duration en milisegundos).
