NativeScript - Xử lý sự kiện

Trong mọi ứng dụng GUI, các sự kiện đóng một vai trò rất quan trọng trong việc cho phép người dùng tương tác. Bất cứ khi nào người dùng tương tác với ứng dụng, một sự kiện sẽ kích hoạt và một hành động tương ứng sẽ được thực thi.

Ví dụ: khi người dùng nhấp vào nút Đăng nhập trong trang đăng nhập của ứng dụng, nó sẽ kích hoạt quá trình đăng nhập.

Sự kiện có sự tham gia của hai diễn viên -

Event sender - đối tượng, nêu lên sự kiện thực tế.
Event listener - hàm, lắng nghe một sự kiện cụ thể và sau đó thực thi khi một sự kiện được kích hoạt.

Lớp có thể quan sát

Nó là một lớp được xác định trước để xử lý các sự kiện. Nó được định nghĩa dưới đây -

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

Trong NativeScript, hầu hết mọi đối tượng đều bắt nguồn từ lớp Observable và vì vậy mọi đối tượng đều hỗ trợ các sự kiện.

Trình nghe sự kiện

Hãy để chúng tôi hiểu cách tạo một đối tượng và thêm trình xử lý sự kiện vào đối tượng trong chương này.

Bước 1

Tạo một nút được sử dụng để tạo sự kiện như được chỉ định bên dưới -

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

Bước 2

Tiếp theo, thêm văn bản vào nút như được chỉ định bên dưới -

testButton.text = "Click";

Bước 3

Tạo một hàm, onTap như được chỉ định bên dưới -

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

Bước 4

Bây giờ hãy đính kèm sự kiện chạm vào chức năng onTap như được chỉ định bên dưới -

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

Một cách thay thế để thêm trình nghe sự kiện như sau:

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

Bước 5

Một cách thay thế để đính kèm sự kiện là thông qua chính giao diện người dùng như được chỉ định bên dưới:

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

Đây,

$ event thuộc loại EventData. EventData chứa hai thuộc tính và chúng như sau:

Object- Cá thể có thể quan sát được dùng để nâng cao một sự kiện. Trong trường hợp này, nó là đối tượng Nút.

EventName- Đó là tên sự kiện. Trong trường hợp này, đó là sự kiện chạm.

Bước 6

Cuối cùng, trình nghe sự kiện có thể được tách ra / xóa bất kỳ lúc nào như được chỉ định bên dưới:

testButton.off(Button.onTap);

Bạn cũng có thể sử dụng một định dạng khác như hình dưới đây -

testButton.removeEventListener(Button.onTap);

Sửa đổi BlankNgApp

Hãy để chúng tôi sửa đổi ứng dụng BlankNgApp để hiểu rõ hơn về các sự kiện trong NativeScript.

Bước 1

Mở giao diện người dùng của thành phần chính, src/app/home/home.component.html và thêm mã bên dưới -

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

Đây,

nhấn là sự kiện và Nút là người tăng sự kiện.
onButtonTap là trình nghe sự kiện.

Bước 2

Mở mã của thành phần chính, ‘src/app/home/home.component.ts’ và cập nhật mã bên dưới -

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

Đây,

Đã thêm trình nghe sự kiện mới, onButtonTap.
In tên sự kiện, nhấn và nút văn bản, Kích hoạt sự kiện trong bảng điều khiển.

Bước 3

Chạy ứng dụng và nhấn vào nút. Nó in dòng dưới đây trong bảng điều khiển.

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