NativeScript - tratamento de eventos

Em todos os aplicativos GUI, os eventos desempenham uma função muito importante para permitir a interação do usuário. Sempre que o usuário interagir com o aplicativo, um evento é disparado e uma ação correspondente será executada.

Por exemplo, quando o usuário clica no botão Login na página de login de um aplicativo, ele aciona o processo de login.

Os eventos envolvem dois atores -

  • Event sender - objeto, que gera o evento real.

  • Event listener - função, que escuta um determinado evento e, em seguida, é executada quando um evento é disparado.

Classe Observável

É uma classe pré-definida para lidar com eventos. É definido abaixo -

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

Em NativeScript, quase todo objeto deriva da classe Observable e, portanto, todo objeto oferece suporte a eventos.

Listener de eventos

Vamos entender como criar um objeto e adicionar um ouvinte de evento ao objeto neste capítulo.

Passo 1

Crie um botão que é usado para gerar um evento conforme especificado abaixo -

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

Passo 2

Em seguida, adicione texto ao botão conforme especificado abaixo -

testButton.text = "Click";

etapa 3

Crie uma função, onTap conforme especificado abaixo -

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

Passo 4

Agora anexe o evento tap à função onTap conforme especificado abaixo -

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

Uma maneira alternativa de adicionar um ouvinte de evento é a seguinte -

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

Etapa 5

Uma maneira alternativa de anexar eventos é por meio da própria IU, conforme especificado abaixo -

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

Aqui,

$ event é do tipo EventData. EventData contém duas propriedades e são as seguintes -

Object- Instância observável que é usada para gerar um evento. Nesse cenário, é o objeto Botão.

EventName- É o nome do evento. Neste cenário, é um evento de torneira.

Etapa 6

Finalmente, um ouvinte de evento pode ser desanexado / removido a qualquer momento, conforme especificado abaixo -

testButton.off(Button.onTap);

Você também pode usar outro formato, conforme mostrado abaixo -

testButton.removeEventListener(Button.onTap);

Modificando BlankNgApp

Vamos modificar o aplicativo BlankNgApp para entender melhor os eventos em NativeScript.

Passo 1

Abra a IU do componente inicial, src/app/home/home.component.html e adicione o código abaixo -

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

Aqui,

  • tap é o evento e Button é o gerador de eventos.

  • onButtonTap é o ouvinte de eventos.

Passo 2

Abra o código do componente inicial, ‘src/app/home/home.component.ts’ e atualize o código abaixo -

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

Aqui,

  • Adicionado novo ouvinte de evento, onButtonTap.

  • Imprima o nome do evento, toque e texto do botão, Dispare um evento no console.

etapa 3

Execute o aplicativo e toque no botão. Ele imprime a linha abaixo no console.

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