नेटिवस्क्रिप्ट - ईवेंट्स हैंडलिंग

प्रत्येक GUI एप्लिकेशन में, ईवेंट्स उपयोगकर्ता सहभागिता को सक्षम करने में बहुत महत्वपूर्ण भूमिका निभाते हैं। जब भी उपयोगकर्ता एप्लिकेशन के साथ इंटरैक्ट करता है, एक ईवेंट फायर हो जाता है और एक संबंधित कार्रवाई निष्पादित की जाएगी।

उदाहरण के लिए, जब उपयोगकर्ता किसी एप्लिकेशन के लॉगिन पृष्ठ में लॉगिन बटन पर क्लिक करता है, तो यह लॉगिन प्रक्रिया को ट्रिगर करता है।

घटनाओं में दो कलाकार शामिल हैं -

• Event sender - वस्तु, जो वास्तविक घटना को बढ़ाती है।

• Event listener - फ़ंक्शन, जो किसी विशेष घटना के लिए सुनते हैं और फिर किसी घटना को निकाल दिए जाने पर निष्पादित होते हैं।

अवलोकनीय वर्ग

यह घटनाओं को संभालने के लिए एक पूर्व-परिभाषित वर्ग है। यह नीचे परिभाषित किया गया है -

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

NativeScript में, लगभग हर ऑब्जेक्ट ऑब्जर्वेबल क्लास से निकलता है और इसलिए हर ऑब्जेक्ट इवेंट को सपोर्ट करता है।

घटना श्रोता

आइए हम समझते हैं कि एक ऑब्जेक्ट कैसे बनाया जाए और इस अध्याय में ऑब्जेक्ट में एक ईवेंट श्रोता को कैसे जोड़ा जाए।

चरण 1

एक बटन बनाएँ जो नीचे निर्दिष्ट के रूप में एक घटना उत्पन्न करने के लिए उपयोग किया जाता है -

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

चरण 2

नीचे दिए गए अनुसार बटन पर अगला टेक्स्ट जोड़ें -

testButton.text = "Click";

चरण 3

एक फ़ंक्शन बनाएं, नीचे दिए गए अनुसार ऑन करें -

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

चरण 4

अब नीचे दिए गए अनुसार टाॅप इवेंट को ऑन टाॅप फंक्शन से अटैच करें

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

इवेंट श्रोता को जोड़ने का एक वैकल्पिक तरीका इस प्रकार है -

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

चरण 5

घटना को संलग्न करने का एक वैकल्पिक तरीका यूआई के माध्यम से नीचे निर्दिष्ट के रूप में है -

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

यहाँ,

$ घटना प्रकार है EventData। EventData में दो गुण होते हैं और वे निम्न हैं -

Object- अवलोकन योग्य उदाहरण जो किसी घटना को बढ़ाने के लिए उपयोग किया जाता है। इस परिदृश्य में, यह बटन ऑब्जेक्ट है।

EventName- यह इवेंट का नाम है। इस परिदृश्य में, यह टैप ईवेंट है।

चरण 6

अंत में, किसी घटना श्रोता को नीचे बताए अनुसार किसी भी समय अलग किया जा सकता है / हटाया जा सकता है -

testButton.off(Button.onTap);

आप नीचे दिखाए गए अनुसार एक अन्य प्रारूप का भी उपयोग कर सकते हैं -

testButton.removeEventListener(Button.onTap);

BlankNgApp को संशोधित करना

NativeScript की घटनाओं को बेहतर ढंग से समझने के लिए BlankNgApp एप्लिकेशन को संशोधित करते हैं।

चरण 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