NativeScript - Penanganan Peristiwa

Di setiap aplikasi GUI, peristiwa memainkan peran yang sangat penting untuk memungkinkan interaksi pengguna. Setiap kali pengguna berinteraksi dengan aplikasi, sebuah peristiwa diaktifkan dan tindakan terkait akan dijalankan.

Misalnya, ketika pengguna mengklik tombol Login di halaman login suatu aplikasi, itu memicu proses login.

Acara melibatkan dua aktor -

  • Event sender - objek, yang memunculkan acara sebenarnya.

  • Event listener - Fungsi, yang mendengarkan peristiwa tertentu dan kemudian dieksekusi ketika suatu peristiwa dipicu.

Kelas Observable

Ini adalah kelas yang ditentukan sebelumnya untuk menangani acara. Ini didefinisikan di bawah -

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

Di NativeScript, hampir setiap objek berasal dari kelas Observable sehingga setiap objek mendukung peristiwa.

Pendengar Acara

Mari kita pahami cara membuat objek dan menambahkan event listener ke objek di bab ini.

Langkah 1

Buat tombol yang digunakan untuk menghasilkan acara seperti yang ditentukan di bawah ini -

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

Langkah 2

Selanjutnya tambahkan teks ke tombol seperti yang ditentukan di bawah ini -

testButton.text = "Click";

LANGKAH 3

Buat fungsi, onTap seperti yang ditentukan di bawah ini -

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

LANGKAH 4

Sekarang lampirkan acara tap ke fungsi onTap seperti yang ditentukan di bawah ini -

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

Cara alternatif untuk menambahkan pendengar acara adalah sebagai berikut -

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

LANGKAH 5

Cara alternatif untuk melampirkan acara adalah melalui UI itu sendiri seperti yang ditentukan di bawah ini -

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

Sini,

$ event berjenis EventData. EventData berisi dua properti dan mereka adalah sebagai berikut -

Object- Contoh teramati yang digunakan untuk menaikkan suatu acara. Dalam skenario ini, itu adalah objek Button.

EventName- Itu adalah nama acara. Dalam skenario ini, itu adalah acara ketuk.

LANGKAH 6

Terakhir, event listener dapat dilepaskan / dihapus kapan saja seperti yang ditentukan di bawah ini -

testButton.off(Button.onTap);

Anda juga dapat menggunakan format lain seperti yang ditunjukkan di bawah ini -

testButton.removeEventListener(Button.onTap);

Mengubah BlankNgApp

Mari kita memodifikasi aplikasi BlankNgApp untuk lebih memahami kejadian di NativeScript.

Langkah 1

Buka UI komponen rumah, src/app/home/home.component.html dan tambahkan kode di bawah ini -

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

Sini,

  • tap adalah acara dan Tombol adalah acara penggalang.

  • onButtonTap adalah pendengar acara.

Langkah 2

Buka kode komponen rumah, ‘src/app/home/home.component.ts’ dan perbarui kode di bawah ini -

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

Sini,

  • Menambahkan pendengar acara baru, onButtonTap.

  • Cetak nama acara, ketuk dan teks tombol, Aktifkan acara di konsol.

LANGKAH 3

Jalankan aplikasi dan ketuk tombolnya. Ini mencetak baris di bawah ini di konsol.

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