NativeScript - Events Handling

Advertisements

Previous Page
Next Page  

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

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

Events involve two actors −

  • Event sender − object, which raise the actual event.

  • Event listener − function, which listen 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 listener 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 = "Click";

Step 3

Create a function, onTap as specified below −

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

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 listener 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="click" (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 listener 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 application 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 listener.

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 listener, onButtonTap.

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

Step 3

Run the application and tap the button. It prints the below line in the console.

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