NativeScript es uno de los frameworks de desarrollo de aplicaciones mas fuertes y poderosos de la industria del desarrollo de aplicaciones móviles para Android y iOS utilizando el lenguaje de programación JavaScript y derivados.
Sin embargo, sus limitantes en base a ciertas formas de acceder a elementos de la vista es algo limitada cuando queremos acceder a algún objeto como es el caso de cuando queremos utilizar como selector el nombre de alguna clase, así como en JavaScript puro que con el método querySelector() podemos hacerlo.
Para poder hacer esto en NativeScript he ideado un par de funciones simples las cuales en conjunto nos regresarán las vistas que deseamos con el nombre de la clase CSS que tengan.
Lo primero es crear una función la cual será la función principal y la cual llamaremos desde alguna parte de nuestro código para obtener las vistas, a esta función la llamaremos getViewsByClass() y a la cual le mandaremos dos parámetros:
- className: nombre de la clase CSS con la cual identificaremos los objetos.
- baseView: vista base de la cual queremos obtener las vistas.
Esta función nos devolverá un arreglo con las vistas que haya encontrado y llamará a un método getChildrenViewsByClass() que obtendrá todos los objetos de vista que encuentre y los irá agregando al arreglo.
Entonces nuestra función getViewsByClass() quedará así:
/* Get elements by class */
getViewsByClass(className, baseView) {
const foundViews = [];
this.getChildrenViewsByClass(baseView, className, foundViews);
return foundViews;
}Ahora haremos el método getChildrenViewsByClass() que recibirá tres parámetros:
- baseView: vista base de la cual queremos obtener las vistas.
- className: nombre de la clase CSS con la cual identificaremos los objetos.
- arr: arreglo en el cual se irán agregando los objetos de vista encontrados.
La función trabaja de forma recursiva recorriendo todos los objetos y sus objetos hijos hasta ya no encontrar más, conforme vaya encontrando objetos que tengan la clase CSS que deseamos los irá agregando al arreglo que le estamos pasando.
Así queda la función getChildrenViewsByClass():
/* Get children views by class */
getChildrenViewsByClass(baseView, className, arr) {
if (baseView.cssClasses.has(className))
arr.push(v);
v.eachChild(vb => {
getChildrenViewsByClass(baseView, className, arr);
});
}Pero ahora, ¿cómo se utiliza?
Ejemplo de como utilizar este código para obtener las vistas que tengan la clase “btn”:
export function onLoaded(args) {
let page = args.object;
// Llamamos a nuestra función
let buttons = getViewsByClass("btn", page);
console.log(buttons);
}¡Listo! Ahora tenemos un arreglo con todos los objetos que queremos.
