NativeScript - Events Handpng

In every GUI apppcation, events play a very important role of enabpng user interaction. Whenever user interact with the apppcation, an event fires and a corresponding action will be executed.

For example, when user cpcks the Login button in the login page of an apppcation, it triggers the login process.

Events involve two actors −

Event sender − object, which raise the actual event.

Event pstener − function, which psten for a particular event and then executed when an event is fired.

Observable Class

It is a pre-defined class to handle events. It is defined below −

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

In NativeScript, almost every object derives from Observable class and so every object support events.

Event Listener

Let us understand how to create an object and add an event pstener to the object in this chapter.

Step 1

Create a button that is used to generate an event as specified below −

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

Step 2

Next add text to the button as specified below −

testButton.text = "Cpck";

Step 3

Create a function, onTap as specified below −

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

Step 4

Now attach tap event to the onTap function as specified below −

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

An alternate way to add an event pstener is as follows −

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

Step 5

An alternative way to attach event is through UI itself as specified below −

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

Here,

$event is of type EventData. EventData contains two property and they are follows −

Object − Observable instance that is used to raise an event. In this scenario, it is Button object.

EventName − It is the event name. In this scenario, it is tap event.

Step 6

Finally, an event pstener can be detached / removed at any time as specified below −

testButton.off(Button.onTap);

You can also use another format as shown below −

testButton.removeEventListener(Button.onTap);

Modifying BlankNgApp

Let us modify the BlankNgApp apppcation to better understand the events in NativeScript.

Step 1

Open the home component’s UI, src/app/home/home.component.html and add below code −

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

Here,

tap is the event and Button is event raiser.

onButtonTap is the event pstener.

Step 2

Open the home component’s code, ‘src/app/home/home.component.ts’ and update the below code −

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

Here,

Added new event pstener, onButtonTap.

Print the event name, tap and button text, Fire an event in the console.

Step 3

Run the apppcation and tap the button. It prints the below pne in the console.

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