NativeScript - Gestione degli eventi

In ogni applicazione GUI, gli eventi svolgono un ruolo molto importante nell'abilitare l'interazione dell'utente. Ogni volta che l'utente interagisce con l'applicazione, viene generato un evento e verrà eseguita un'azione corrispondente.

Ad esempio, quando l'utente fa clic sul pulsante Accedi nella pagina di accesso di un'applicazione, attiva il processo di accesso.

Gli eventi coinvolgono due attori:

  • Event sender - oggetto, che solleva l'evento reale.

  • Event listener - funzione, che ascolta un evento particolare e quindi viene eseguita quando viene attivato un evento.

Classe osservabile

È una classe predefinita per gestire gli eventi. È definito di seguito:

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

In NativeScript, quasi tutti gli oggetti derivano dalla classe Observable e quindi ogni oggetto supporta eventi.

Listener di eventi

Comprendiamo come creare un oggetto e aggiungere un listener di eventi all'oggetto in questo capitolo.

Passo 1

Crea un pulsante che viene utilizzato per generare un evento come specificato di seguito -

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

Passo 2

Quindi aggiungi del testo al pulsante come specificato di seguito -

testButton.text = "Click";

Passaggio 3

Crea una funzione, onTap come specificato di seguito -

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

Passaggio 4

Ora allega l'evento tap alla funzione onTap come specificato di seguito -

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

Un modo alternativo per aggiungere un listener di eventi è il seguente:

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

Passaggio 5

Un modo alternativo per allegare un evento è tramite l'interfaccia utente stessa come specificato di seguito:

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

Qui,

$ event è di tipo EventData. EventData contiene due proprietà e sono le seguenti:

Object- Istanza osservabile utilizzata per generare un evento. In questo scenario, è l'oggetto Button.

EventName- È il nome dell'evento. In questo scenario, è l'evento tap.

Passaggio 6

Infine, un listener di eventi può essere scollegato / rimosso in qualsiasi momento come specificato di seguito -

testButton.off(Button.onTap);

Puoi anche utilizzare un altro formato come mostrato di seguito:

testButton.removeEventListener(Button.onTap);

Modifica di BlankNgApp

Modifichiamo l'applicazione BlankNgApp per comprendere meglio gli eventi in NativeScript.

Passo 1

Apri l'interfaccia utente del componente Home, src/app/home/home.component.html e aggiungi sotto il codice -

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

Qui,

  • tap è l'evento e Button è il raiser di eventi.

  • onButtonTap è il listener di eventi.

Passo 2

Apri il codice del componente home, ‘src/app/home/home.component.ts’ e aggiorna il codice seguente -

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); 
   } 
}

Qui,

  • Aggiunto nuovo listener di eventi, onButtonTap.

  • Stampa il nome dell'evento, tocca e il testo del pulsante, attiva un evento nella console.

Passaggio 3

Esegui l'applicazione e tocca il pulsante. Stampa la riga sottostante nella console.

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