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