Progress Nativescript UI es un conjunto de componentes que permiten implementar aplicaciones avanzadas para iOS y Android. Esta librería está construido por encima de componentes nativos de iOS y Android, por lo que el look and feel será igual que el nativo.
Contiene los siguientes componentes:
- Calendar: componente calendario que ofrece diversas vistas, animaciones y muchas opciones de configuración.
- Chart: componente muy versátil para gráficas que soporta la mayoría de tipos de gráficas.
- ListView: componente lista mucho más avanzado que el que trae Nativescript incluido. Tiene características como animación de items, pull para refrescar, layouts en los items, recarga on-demand, acciones al hacer swite, etc.
- DataForm: componente que permite editar las propiedades de un objeto en un formulario.
- SideDrawer: menú de opciones de navegación que está oculto y que puede desplegar el usuario cuando lo necesite.
- Gauges: componente que permite mostrar de forma gráfica un valor dentro de un rango (mínimo, máximo).
- AutoCompleteTextView: componente TextView avanzado que permite autocompletar según una serie de valores que tenga un data source.
Versiones
Progress Nativescript UI se distribuye en dos versiones:- Progress Nativescript UI: Gratuita
- Progress Nativescript UI Pro: De pago (aproximadamente 199$ por desarrollador, para toda la vida)
La versión gratuita incluye únicamente dos de los anteriores componentes:
- ListView
- SideDrawer
La versión Pro incluye todos los componentes.
Vamos a utilizar la librería
En este artículo vamos a modificar la mini-aplicación que hicimos en este artículo para sustituir la lista de ofertas por una nueva lista de la librería de Telerik. De esta forma, nos sirve gran parte de la aplicación y por otro lado, también nos sirve la librería gratuita (no tenemos que recurrir a versiones de evaluación...).
Como ya tenemos el proyecto creado, vamos a añadirle la librería de Telerik. Primero nos vamos al directorio del proyecto y:tns plugin add nativescript-telerik-ui
Este comando añade el plugin necesario para utilizar la librería.
Lo siguiente será ejecutar la aplicación:
tns run android
Esto no es necesario ahora, porque todavía no hemos modificado el código para que utilice el nuevo componente, pero podremos comprobar que todo ha ido bien (la primera compilación tardará bastante, así que paciencia...)
Nueva página next2
En lugar de cambiar la página next del proyecto donde teníamos el componente ListView que viene por defecto en Nativescript, vamos a crear una nueva página. De esta forma será sencillo volver a la versión anterior si así lo necesitamos después. Otra ventaja es que el modelo asociado al nuevo componente es igual al modelo de ListView básico.En app/main.ts cambiamos la página a la que navegamos al pulsar sobre el botón de próximas ofertas:
export function onNextDays() {
// navigate
frame.topmost().navigate('next2/next');
}
Creamos el directorio app/next2 para la nueva página.
Creamos el fichero app/next2/next-view-model.ts que contiene el modelo para la nueva página (este modelo es igual que el que teníamos en la página anterior):
import observable = require("data/observable");
import {ObservableArray} from 'data/observable-array';
export class NextViewModel extends observable.Observable {
public items:ObservableArray<object> = null;
constructor() {
super();
this.items = new ObservableArray();
this.items.push({date: 'Martes 28', offer: 'Portátil HP 400X' });
this.items.push({date: 'Miércoles 29', offer: 'Mochila Thule 3' });
this.items.push({date: 'Jueves 30', offer: 'iPhone 6S 32GB' });
this.set('items', this.items);
}
addItem(d:string, o:string) {
console.log('Add: ' + d + ',' + o);
if (o.length > 0) {
this.items.push({date:d, offer:o});
} else {
console.log("Empty string");
}
}
}
Ahora creamos el fichero XML de la nueva página app/next2/next.xml:
<Page xmlns="http://www.nativescript.org/tns.xsd"
xmlns:lv="nativescript-telerik-ui/listview"
navigatingTo="onPage">
<Page.actionBar>
<ActionBar title="Ofertas próximos días" class="header">
<NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="onBack" />
</ActionBar>
</Page.actionBar>
<DockLayout stretchLastChild="true">
<DockLayout dock="bottom">
<Button dock="right" text="Añadir" tap="onAdd" />
<TextField id="newText" class="input input-border" hint="New text" />
</DockLayout>
<ScrollView>
<lv:RadListView row="1" items="{{ items }}">
<lv:RadListView.itemTemplate>
<StackLayout class="itemStackLayout">
<Label text="{{ $value.date }}" class="date"/>
<Label text="{{ $value.offer }}" class="offer" />
<StackLayout height="2" backgroundColor="#FF0000"/>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
</ScrollView>
</DockLayout>
</Page>
Aquí sí que vemos algunas diferencias. En primer lugar, un nuevo namespace de XML: xmlns:lv. En segundo lugar, utilizamos el nuevo componente RadListView, en lugar de ListView. Por lo demás, todo es prácticamente igual.
Y para terminar, creamos el código de la página en el fichero app/next2/next.ts:
import { EventData } from "data/observable";
import { Page } from "ui/page";
import { NextViewModel } from "./next-view-model";
import frame = require('ui/frame');
import view = require("ui/core/view");
var page:Page = null;
var model:NextViewModel = null;
export function onPage(args: EventData) {
console.log('next.onPage');
page = <Page>args.object;
model = new NextViewModel();
page.bindingContext = model;
}
export function onBack() {
frame.topmost().goBack();
}
export function onAdd() {
let newTextTxt:any = view.getViewById(page, "newText");
console.log('Text=' + newTextTxt.text);
model.addItem('Hoy', newTextTxt.text);
newTextTxt.text = "";
}
Este fichero también es prácticamente igual al anterior.
Por último, el fichero de estilos: app/next2/next.css
.offer {
font-size: 25px;
font-weight: bold;
text-align: center;
}
.date {
font-size: 14px;
text-align: left;
}
.header {
background-color: #333;
color: #fff;
}
Ejecutemos la aplicación de nuevo:
tns run android
Pulsamos el botón de próximas ofertas.... y.... sorpresa! No vemos ningún cambio!!! La página es igual que antes.
Pero podemos estar seguros de que es el nuevo componente, no es el antiguo, ya que la navegación desde main se produce a la página next2/next. Además, he cambiado la línea que separa items a color rojo, para confirmar que es realmente la nueva página (para los incrédulos).
El componente RadListView
El componente RadListView tiene las siguientes características:- Animación de items
- Varios layouts y orientaciones
- Gestos: selección al hacer pulsación larga, lista de acciones al hacer swipe, reordenación y recolocación al hacer pulsación larga y arrastre
Selección
RadListView permite selección simple o múltiple de los items (hay que seleccionar unos de estos dos métodos). Para ello, tenemos el atributo multipleSelection, que puede valer true o false.
Además, el componente tiene un API para manejar las selecciones:
- selectAll()
- deselectAll()
- selectItemAt(index)
- deselectItemAt(index)
- isItemSelected(index)
- getSelectedItems()
Para activar la selección tenemos que añadir el atributo selectionBehavior al componente. Este atributo toma los siguientes valores:
- None: los items no pueden ser seleccionados
- Press: los items se seleccionan al hacer una pulsación sobre el item
- LongPress: los items se seleccionan al hacer una pulsación larga sobre el item
Cambiemos el componente RadListView en nuestro fichero app/next2/next.xml:
<lv:RadListView row="1" items="{{ items }}" multipleSelection="true" selectionBehavior="LongPress">
Ahora ya podemos ver algunos cambios en nuestra lista. Al hacer una pulsación larga sobre un item, éste queda seleccionado. Para deseleccionarlo, hacemos otra pulsación larga sobre él.
Por último, podemos recibir eventos relacionados con la selección de items:
- itemSelecting: se dispara antes de que un item sea seleccionado (se puede cancelar la selección)
- itemSelected: se dispara cuando se ha seleccionado un item
- itemDeselecting: se dispara antes de que un item sea deseleccionado (se puede cancelar la operación)
- itemDeselected: se dispara cuando se ha deseleccionado un item
Layouts
Aunque el uso típico de una lista es mostrar los items de una forma lineal (uno encima de otro), hay casos donde esto no es así.
RadListView soporta tres estrategias de layout:
RadListView soporta tres estrategias de layout:
- linear: los items se ponen uno encima del otro si el scroll es vertical (o bien uno al lado del otro si el scroll es horizontal). Los items se colocan uno a uno.
- grid: los items se ordenan en filas y columnas (según la orientación del scroll). Hay que especificar la cantidad de columnas (orientación vertical) o de filas (orientación horizontal).
- staggered grid: los items se ordenan en un grid escalonado (según la orientación del scroll).
- ListViewLinearLayout
- ListViewGridLayout
- ListViewStaggeredLayout
Ejemplo de linear layout:
<lv:RadListView row="1" items="{{ items }}" multipleSelection="true" selectionBehavior="LongPress">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical" />
</lv:RadListView.listViewLayout>
Ejemplo de grid layout:
<lv:RadListView.listViewLayout>
<lv:ListViewGridLayout scrollDirection="Vertical" itemHeight="200" spanCount="2"/>
</lv:RadListView.listViewLayout><lv:RadListView.listViewLayout>
<lv:ListViewStaggeredLayout scrollDirection="Vertical" spanCount="3"/>
</lv:RadListView.listViewLayout>
