NativeScript - การจัดการเหตุการณ์

ในทุกแอปพลิเคชัน GUI เหตุการณ์มีบทบาทสำคัญมากในการเปิดใช้งานการโต้ตอบกับผู้ใช้ เมื่อใดก็ตามที่ผู้ใช้โต้ตอบกับแอปพลิเคชันเหตุการณ์จะเริ่มทำงานและการดำเนินการที่เกี่ยวข้องจะดำเนินการ

ตัวอย่างเช่นเมื่อผู้ใช้คลิกปุ่มเข้าสู่ระบบในหน้าเข้าสู่ระบบของแอปพลิเคชันจะเรียกกระบวนการเข้าสู่ระบบ

เหตุการณ์เกี่ยวข้องกับนักแสดงสองคน -

• Event sender - วัตถุที่เพิ่มเหตุการณ์จริง

• Event listener - ฟังก์ชั่นที่รับฟังเหตุการณ์เฉพาะและดำเนินการเมื่อเหตุการณ์เริ่มทำงาน

ระดับที่สังเกตได้

เป็นคลาสที่กำหนดไว้ล่วงหน้าเพื่อจัดการกับเหตุการณ์ต่างๆ มีการกำหนดไว้ด้านล่าง -

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

ใน NativeScript เกือบทุกอ็อบเจ็กต์มาจากคลาส Observable และอ็อบเจ็กต์ทุกตัวรองรับเหตุการณ์

Listener เหตุการณ์

ให้เราเข้าใจวิธีการสร้างวัตถุและเพิ่มตัวฟังเหตุการณ์ให้กับวัตถุในบทนี้

ขั้นตอนที่ 1

สร้างปุ่มที่ใช้สร้างเหตุการณ์ตามที่ระบุด้านล่าง -

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

ขั้นตอนที่ 2

ถัดไปเพิ่มข้อความลงในปุ่มตามที่ระบุด้านล่าง -

testButton.text = "Click";

ขั้นตอนที่ 3

สร้างฟังก์ชัน onTap ตามที่ระบุด้านล่าง -

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

ขั้นตอนที่ 4

ตอนนี้แนบเหตุการณ์การแตะเข้ากับฟังก์ชัน onTap ตามที่ระบุด้านล่าง -

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

วิธีอื่นในการเพิ่มผู้ฟังเหตุการณ์มีดังนี้ -

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

ขั้นตอนที่ 5

อีกวิธีหนึ่งในการแนบเหตุการณ์คือผ่าน UI ตามที่ระบุด้านล่าง -

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

ที่นี่

$ event เป็นประเภท EventData EventData มีคุณสมบัติสองอย่างและมีดังต่อไปนี้ -

Object- อินสแตนซ์ที่สังเกตได้ซึ่งใช้เพื่อเพิ่มเหตุการณ์ ในสถานการณ์นี้เป็นวัตถุปุ่ม

EventName- เป็นชื่อเหตุการณ์ ในสถานการณ์นี้เป็นเหตุการณ์การแตะ

ขั้นตอนที่ 6

ในที่สุดผู้ฟังเหตุการณ์สามารถถอด / ลบออกได้ตลอดเวลาตามที่ระบุด้านล่าง -

testButton.off(Button.onTap);

คุณยังสามารถใช้รูปแบบอื่นได้ตามที่แสดงด้านล่าง -

testButton.removeEventListener(Button.onTap);

การแก้ไข BlankNgApp

ให้เราแก้ไขแอปพลิเคชัน BlankNgApp เพื่อให้เข้าใจเหตุการณ์ใน NativeScript ได้ดีขึ้น

ขั้นตอนที่ 1

เปิด UI ของส่วนประกอบภายในบ้าน src/app/home/home.component.html และเพิ่มรหัสด้านล่าง -

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

ที่นี่

• แตะคือเหตุการณ์และปุ่มคือตัวเพิ่มเหตุการณ์

• onButtonTap เป็นตัวฟังเหตุการณ์

ขั้นตอนที่ 2

เปิดรหัสของส่วนประกอบบ้าน ‘src/app/home/home.component.ts’ และอัปเดตรหัสด้านล่าง -

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

ที่นี่

• เพิ่มตัวฟังเหตุการณ์ใหม่ onButtonTap

• พิมพ์ชื่อเหตุการณ์แตะและปุ่มข้อความเริ่มเหตุการณ์ในคอนโซล

ขั้นตอนที่ 3

เรียกใช้แอปพลิเคชันและแตะปุ่ม มันพิมพ์บรรทัดด้านล่างในคอนโซล

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