NativeScript - Manejo de eventos

En cada aplicación de GUI, los eventos juegan un papel muy importante para permitir la interacción del usuario. Siempre que el usuario interactúe con la aplicación, se activará un evento y se ejecutará la acción correspondiente.

Por ejemplo, cuando el usuario hace clic en el botón Iniciar sesión en la página de inicio de sesión de una aplicación, se activa el proceso de inicio de sesión.

Los eventos involucran a dos actores:

  • Event sender - objeto, que plantea el evento real.

  • Event listener - función, que escucha un evento en particular y luego se ejecuta cuando se dispara un evento.

Clase observable

Es una clase predefinida para manejar eventos. Se define a continuación:

const Observable = require("tns-core-modules/data/observable").Observable;

En NativeScript, casi todos los objetos se derivan de la clase Observable y, por lo tanto, todos los objetos admiten eventos.

Oyente de eventos

Entendamos cómo crear un objeto y agregar un detector de eventos al objeto en este capítulo.

Paso 1

Cree un botón que se utilice para generar un evento como se especifica a continuación:

const Button = require("tns-core-modules/ui/button").Button; 
const testButton = new Button();

Paso 2

A continuación, agregue texto al botón como se especifica a continuación:

testButton.text = "Click";

Paso 3

Cree una función, onTap como se especifica a continuación:

let onTap = function(args) {
   console.log("you clicked!"); 
};

Etapa 4

Ahora adjunte el evento tap a la función onTap como se especifica a continuación:

testButton.on("tap", onTap, this);

Una forma alternativa de agregar un detector de eventos es la siguiente:

testButton.addEventListener("tap", onTap, this);

Paso 5

Una forma alternativa de adjuntar eventos es a través de la interfaz de usuario como se especifica a continuación:

<Button text="click" (tap)="onTap($event)"></Button>

Aquí,

$ evento es de tipo EventData. EventData contiene dos propiedades y son las siguientes:

Object- Instancia observable que se usa para generar un evento. En este escenario, es un objeto Botón.

EventName- Es el nombre del evento. En este escenario, es un evento de tap.

Paso 6

Finalmente, un detector de eventos se puede desconectar / eliminar en cualquier momento como se especifica a continuación:

testButton.off(Button.onTap);

También puede utilizar otro formato como se muestra a continuación:

testButton.removeEventListener(Button.onTap);

Modificación de BlankNgApp

Modifiquemos la aplicación BlankNgApp para comprender mejor los eventos en NativeScript.

Paso 1

Abra la interfaz de usuario del componente de inicio, src/app/home/home.component.html y agregue el siguiente código -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar>
<StackLayout> 
   <Button text='Fire an event' class="-primary" color='gray' (tap)='onButtonTap($event)'></Button>
</StackLayout>

Aquí,

  • tap es el evento y Button es el evento de recaudación.

  • onButtonTap es el detector de eventos.

Paso 2

Abra el código del componente de inicio, ‘src/app/home/home.component.ts’ y actualice el siguiente código -

import { Component, OnInit } from "@angular/core"; 
import { EventData } from "tns-core-modules/data/observable"; 
import { Button } from "tns-core-modules/ui/button" 
@Component({ 
   selector: "Home", 
   templateUrl: "./home.component.html" 
}) 
export class HomeComponent implements OnInit { 
   constructor() { 
      // Use the component constructor to inject providers. 
   } 
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
   onButtonTap(args: EventData): void { 
      console.log(args.eventName); 
      const button = <Button>args.object; 
      console.log(button.text); 
   } 
}

Aquí,

  • Se agregó un nuevo detector de eventos, onButtonTap.

  • Imprima el nombre del evento, toque y presione el texto del botón, active un evento en la consola.

Paso 3

Ejecute la aplicación y toque el botón. Imprime la siguiente línea en la consola.

LOG from device <device name>: tap 
LOG from device <device name>: Fire an event