UI en Nativescript con Angular2
Como vimos en otro post, estuvimos creando una app en Nativescript con Angular2 (en typescript) y vimos como con su cliente crear una aplicación y como era la estructura de carpetas y el funcionamiento de las mismas…
Pero algo que tenemos que tener en cuenta, es la construcción de la UI, ya que esta va a ser diferente a la que hacemos en la web.
Los ejemplos los voy a poner y explicar con Typescript, ya que lo adopte para trabajar en Angular2 y en otros proyectos.
Repasando un poco, nuestro app.component.ts se veía de la siguiente forma:
Nosotros estabamos acostumbrados mas a usar html de la siguiente forma:
Pero en este caso, typescript hace algo conocido por los que trabajamos con Angular 1 , que es el bindeo de opciones por medio de variables.
Tal y como se ve acá en la captura, el valor del text fue adosado a un tipo de elemento Label.
Un buen punto a aclarar, es que los elementos de html como <div> <span> no sirven en Typescript
Pero tenemos una extensa lista de como trabajar con la UI con sus componentes, en la web de typescript, por lo tanto no se deberían preocupar, recuerden que vamos a terminar haciendo una aplicación nativa, por lo tanto nos tenemos que amoldar. Recuerden que cuando aprendimos otros frameworks o utilizamos alguna librería responsive, tuvimos que hacer cambios a nuestras costumbres…
Bien, sigamos con nuestra mini app…
El siguiente paso seria poner un login a la misma… muchas apps arrancan con un login, vamos a hacer la parte gráfica de la misma.
Y su impacto es:
Podemos ver, que utilize un StackLayout para contener todo mmmm layout me suena muy a android nativo, ahora vamos a verlos, pero analicemos un poco el código antes.
Tenemos un contenedor, que seria como un div.. Luego ponemos textField que nos sirven para poder escribir, con los atributos necesarios para hacer validaciones directo desde el elemento de la UI. Y luego de eso tenemos dos botones, a los cuales toma el formato en el caso de iOS como se ven en la imagen, y en el caso de Android con el boton mas definido.
Layouts
El AbsoluteLayout le permite posicionar los elementos que utilizan X explícita y las coordenadas Y. Esto es útil cuando se necesita para colocar elementos en localizaciones exactas, por ejemplo, que muestran un widget de indicador de actividad en la esquina superior izquierda de la aplicación.
El DockLayout es útil para la colocación de los elementos de interfaz de usuario en los bordes exteriores de su aplicación. Por ejemplo, un contenedor fijo en la parte inferior de la pantalla sería una buena ubicación para un anuncio.
El GridLayout le permite dividir la interfaz en una serie de filas y columnas, como un <table> en HTML.
El StackLayout le permite apilar los elementos de interfaz de usuario hijos, ya sea vertical u horizontalmente.
El WrapLayout permite elementos de la IU niño fluyen de una fila o columna a la siguiente cuando se llena el espacio.
Si quieren saber mas sobre los layouts les dejo la documentación (ejemplo) oficial de cada uno:
Bueno sigamos
CSS GLOBALES
Nativescript usa un “subset de CSS” para manejar los componentes visuales que creamos… y si pensamos ¿Por que un subset? y esto tiene una gran explicación, ellos nos cuentan que al ser aplicaciones nativas, se tienen que apegar a lo que existe en las plataformas (Android, iOS) por lo tanto no todos los css planteados existen para estas plataformas, entonces, hicieron un SubSet para poder obtener todas las necesarias para poder crear la aplicación nativa.
Para ver todos los css que existen puede ver esta web
Hay tres formas de utilizar css en Nativescript
- application-wide CSS
- page-specific CSS
- Inline CSS
Appication-wide CSS
Estos css se declaran en el archivo app.css, el cual Typescript cuando arranca la aplicación, chequea que este y los utiliza en todas las paginas/pantallas que existan en la app.
Page-specific CSS
Cuando se carga el archivo XML de declaración de la página, NativeScript busca un archivo CSS con el mismo nombre (si existe), lee cualquiera de los estilos CSS que encuentra y automáticamente las cargas y las aplica a la página.
Como todo CSS, al ser una cascada de estilos, el que esta mas abajo siempre gana, por lo tanto, podemos pisar estilos creados en el archivo global.
Inline CSS
Y por ultimo el viejo y conocido Inline, que tanto habremos usado alguna vez…
Volviendo a nuestra app, vamos a probar los css globales entonces..
Dentro de nuestra carpeta app, vamos a crear el archivo app.css (si seguiste el post anterior, ya existe el archivo)… y vamos a ingresar lo siguiente:
Wow , raro ver una app totalmente negra con letras blancas en los Textos no? pero bueno, ahora confirmaron que los que leyeron arriba era cierto.. vamos a unos css mas “comunes” para nuestra app.
Aunque a menudo queremos CSS que se aplican por igual a iOS y Android, de vez en cuando tiene sentido aplicar CSS a una sola plataforma. Por ejemplo, los campos de texto iOS con frecuencia tienen bordes alrededor de ellos, pero los campos de texto de Android no lo hacen.
Para esto Nativescript, nos da una forma de crear css expecificos por plataforma… como ? bueno veamos
Primero vamos a tener que indicarle a typescript, en nuestro css, que van a ser los globales para las plataformas… entonces vamos a hacer un import, si dentro del css.
Es muy importante que el import, este en la primera linea de nuestro app.css.
Luego en el caso de que no tengamos creados los archivos, vamos a crear un file llamado platform.ios.css y otro llamado platform.android.css.
Y al de iOS vamos a agregarle nuestros bordes negros de 1 pixel.
Bien, falta un poco mas de estilo, pero la idea era entender como hacerlo.
Component Specific CSS
Al igual que en la web, en las aplicaciones vamos a escribir CSS que se aplican a toda la aplicación, y a veces que vamos a crear CSS que se aplican a una parte específica de la interfaz. Ya vimos cómo utilizar el archivo de app.css NativeScript para escribir reglas globales, y ahora vamos a ver cómo utilizar la propiedad styleUrls de un componente para aplicar normas cuyo ámbito comprende a los componentes individuales.
Vamos a modificar nuestro app.component.ts
El cambio que hicimos fue darle a nuestro componente, el atributo styleUrls, el cual recibe un array, y vamos a darle dos files de css.
Dentro del archivo login-common.css, vamos a poner lo siguiente:
Luego vamos a impactar en nuestro botón “Sign in” poniendo nuestra clase.
Y ahora nuestra app se ve mucho mejor jeje
Imágenes
Ahora vamos a agregar un logo, en typescript, el tag de imagen es el mismo, y puede recibir imágenes desde internet, como locales.
O podemos utilizar todo el potencial para las imágenes que tenemos locales y utilizar la plataforma que nos brinda nativescript para esto… guardando la imagen dentro de app/App_Resources
Justo abajo de la creación del layout vamos a poner lo siguiente:
Ahora veamos que el src tiene una indicación “res://logo_login”, lo que va a hacer nativescript, es ir a la carpeta de App_Resources y dependiendo de la plataforma (iOS o Android) va a buscar en la sub-carpeta interna ese nombre de archivo
Y ahora nuestra app quedo de la siguiente forma:
Ya tenemos la visual del login del ejemplo que nos da la gente de Telerik.
Como siempre, espero que les guste lo compartido y cualquier duda dejo mis canales:
Saludos
JC
