Saltar al contenido

WheelSelector Ionic – Úsalo cómo un profesional

WheelSelector Ionic

¿Pensando en realizar una implementación de la librería WheelSelector Ionic en tu aplicación? O, quizás ya sabes cómo se hace, pero aún te falta conocer algún detalles sobre alguna función o campo de clase para terminar de echarla a andar ¿verdad?

Si la respuesta ha sido sí al alguna de las cuestiones anteriores, o cuestiones que puedan estar relacionadas con ellas, déjame decirte que no eres el único, ni serás el último, que pasa por aquí. Es más, hasta los más experimentados acudimos a este tipo de artículo con bastante frecuencia, aunque creas que no.

Por si no me conoces, mi nombre es Aitor Sánchez y soy desarrollador de apps desde el año 2014 y en este artículo te enseñaré a realizar, de manera práctica y aplicable, la integración de este componente.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

Pero, qué es WheelSelector Ionic

En sí, se trata de un picker, o select, que nos permitirá agregar varias columnas de selección y luego recuperar esto datos. Veamos un pequeño vídeo que he sacado del curso para que veáis a que me refiero si es que no lo conocéis:

 

Instalación de WheelSelector en Ionic

Cómo todos los componentes que están desacoplados del core del sistema, necesitamos instalarlo. Para ello vamos a utilizar las dos siguientes líneas de consola:

 

$ ionic cordova plugin add cordova-wheel-selector-plugin
$ npm install --save @ionic-native/[email protected]

 

La primera instalará el plugin de Cordova para la comunicación con la parte nativa del sistema donde se esté ejecutando nuestra app.

La segunda será el código que hará de puente entre el plugin y el código de nuestra app.

 

Configuración del módulo

Para que podamos utilizar este componente en nuestra app, necesitamos agregarlo a los providers de nuestro componente. Lo haremos de la siguiente manera:

 

providers: [

…,

WheelSelector,

…

]

 

Recuerda que no será necesario agregarlo a los providers globales que están en “AppModule.ts”. Es mejor opción ponerlos en el módulo del componente que los vaya a usar.

De esta manera incurrimos en buenas prácticas de desarrollo y en un mejor rendimiento de nuestra app.

 

Plataformas que soporta WheelSelector

Las plataformas soportadas por este módulo, aunque obvias, serán las siguientes:

  • Android
  • iOS

Al tratarse de un selector móvil, lo normal es que solo se pueda usar en el móvil.

 

Cómo se usa WheelSelector en Ionic

Vamos a pasar a lo que interesa, sabes cómo rula esto del WheelSelector. Pero antes, y cómo os tengo acostumbrados, veamos previamente un ejemplo de código y luego lo comentamos.

 

import { WheelSelector } from '@ionic-native/wheel-selector';


constructor(private selector: WheelSelector) { }

...

const jsonData = {
  numbers: [
   { description: "1" },
    { description: "2" },
    { description: "3" }
  ],
  fruits: [
    { description: "Pera" },
    { description: "Plátano" },
    { description: "Mandarina" }
  ],
  firstNames: [
    { name: "Aitor", id: '1' },
    { name: "Mari", id: '2' },
    { name: "Lorena", id: '3' },
    { name: "Manolo", id: '4' },
    { name: "Jose", id: '5' }
  ],
  lastNames: [
    { name: "Martínez", id: '100' },
    { name: "Pérez", id: '101' },
    { name: "Sánchez", id: '102' },
    { name: "García", id: '103' },
    { name: "Jiménez", id: '104' }
  ]
};

...

// Una selección de número básica, el índice será lo que se capture desde el resultado.
 selectANumber() {
   this.selector.show({
     title: "¿Cuantos?",
     items: [
       this.jsonData.numbers
     ],
   }).then(
     result => {
       console.log(result[0].description + ' at index: ' + result[0].index);
     },
     err => console.log('Error: ', err)
     );
 }

 ...

 // Una selección básica, Los valores por defecto serán: '3' 'Plátano'
 selectFruit() {
   this.selector.show({
     title: "¿Cuanta?",
     items: [
       this.jsonData.numbers, this.jsonData.fruits
     ],
     positiveButtonText: "Ok",
     negativeButtonText: "Nope",
     defaultItems: [
       {index:0, value: this.jsonData.numbers[2].description},
       {index: 1, value: this.jsonData.fruits[3].description}
     ]
   }).then(
     result => {
       console.log(result[0].description + ' ' + result[1].description);
     },
     err => console.log('Error: ' + JSON.stringify(err))
     );
 }

 ...

//Algo un poco más elaborado, pruébalo
 selectNamesUsingDisplayKey() {
   this.selector.show({
     title: "Who?",
     items: [
       this.jsonData.firstNames, this.jsonData.lastNames
     ],
     displayKey: 'name',
     defaultItems: [
       {index:0, value: this.jsonData.firstNames[2].name},
       {index: 0, value: this.jsonData.lastNames[3].name}
     ]
   }).then(
     result => {
       console.log(result[0].name + ' (id= ' + this.jsonData.firstNames[result[0].index].id + '), ' +
         result[1].name + ' (id=' + this.jsonData.lastNames[result[1].index].id + ')');
     },
     err => console.log('Error: ' + JSON.stringify(err))
     );
 }

 

  1. Importamos la clase WheelSelector del paquete “@ionic-native/wheel-selector”.
  2. Inyectamos una instancia a través del constructor de nuestra clase.
  3. Creamos la estructura de datos que se mostrarán en el picker.
  4. Creamos las funciones correspondientes que serán llamadas desde la vista HTML. (Podrán ser llamadas, por ejemplo, desde el clic de un botón)
    1. selectANumber()
    2. selectFruit()
    3. selectNameUsingDisplayKey()
  5. Controlaremos la promesa ya que en ella llegarán los datos que el usuario ha seleccionado y listo. Ya lo tenemos funcionando.

Este es un ejemplo de código muy sencillo, pero totalmente funcional y útil en caso de que le cambies los datos por los que tú quieras.

 

Funciones y campos de clase de WheelSelector Ionic

Ahora vamos a pasar a profundizar un poco más, para que puedas extender su funcionalidad tanto cómo necesites, y nos permita el sistema. Aunque siempre podemos extenderla nosotros un poco más.

En este caso solo contamos con dos funciones y una interfaz. Recuerda que solo mostraré funciones propias. Si alguna está en el padre, aquí no aparecerá.

 

show(options)

  • Parámetros:
    • options : WheelSelectorOptions -> Será la configuración que queremos dar al selector. Un poco más abajo veremos los campos que tiene.
  • Retorna una promesa que hay que controlar. En caso de que todo haya ido bien se resolverá y con ella llegarán los datos.
    • Los datos llegan en una interfaz llamada: WheelSelectorData que ahora veremos sus campos más abajo también.

Básicamente, hace que se muestre el selector en nuestro dispositivo con los datos que le hemos facilitado.

 

hideSelector()

  • Solo está disponibles para iOS.
  • No recibe parámetros.
  • Retorna una promesa que tendremos que controlar.

Fuerza que el selector se esconda. En Android no será necesario ya que pulsaremos fuera y se esconderá. En iOS será necesario hacerlo explícitamente en algunas ocasiones.

 

WheelSelectorOptions

Cómo hemos visto arriba, veamos los campos que tiene:

  • title: string -> Será el nombre que tomará el selector cuando esté abierto.
  • items: WheelSelectorItem[][] -> Cómo hemos visto en el ejemplo, será un array con el contenido que queremos que muestre el selector. (WheelSelectorItem, será una interfaz construida por nosotros)
  • defaultItems: DefaultItem[] (opcional) -> Serán los objetos que serán mostrados por defecto. (DefaultItem, será una interfaz construida por nosotros)
  • positiveButtonText: string (opcional) -> Será el texto que tome el botón positivo a la hora de mostrarse.
  • negativeButtonText: string (opcional) -> Será el texto que tome el botón negativo a la hora de mostrarse.
  • theme: string (opciona) -> Será un enumerado en el que ahora veremos los posibles. Solo estará disponible para Android.
    • light
    • dark
  • wrapWheelText: boolean (opcional) -> Solo estará disponible para Android y nos permitirá cambiar la estética de este para que se parezca más al de iOS. Por defecto: false.
  • displayKey: boolean (opcional) -> En caso de que sea verdadero, mostrará la key de los pares asignados cómo valores.

 

WheelSelectorData

Cómo he dicho antes, vamos a ver los campos que aquí llegan. Aunque en realidad solo tenemos uno y llegará con los datos de las interfaces que nosotros hemos creado y enviado a través del options del método show().

  • data: WheelSelectorItem -> El objeto que el usuario a seleccionado que nosotros hemos creado y enviado cómo parámetro.

 

Más contenido del curso

 

Y el tutorial en vídeo para los más ganduletes


 

Pues eso ha sido todo compañero. Si te ha gustado, te invito de nuevo a que te pases por “El Círculo” aquí. Allí tendrás toda la información.

Y sin nada más que agregar, me despido ya. Nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!