NativeScript - обработка событий

В каждом приложении с графическим пользовательским интерфейсом события играют очень важную роль в обеспечении взаимодействия с пользователем. Каждый раз, когда пользователь взаимодействует с приложением, возникает событие и выполняется соответствующее действие.

Например, когда пользователь нажимает кнопку «Войти» на странице входа в приложение, запускается процесс входа в систему.

В событиях участвуют два участника -

• Event sender - объект, вызывающий собственно событие.

• Event listener - функция, которая прослушивает определенное событие, а затем выполняется, когда событие запускается.

Наблюдаемый класс

Это предопределенный класс для обработки событий. Это определено ниже -

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

В NativeScript почти каждый объект является производным от класса Observable, поэтому каждый объект поддерживает события.

Слушатель событий

Давайте разберемся, как создать объект и добавить прослушиватель событий к объекту в этой главе.

Шаг 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

Альтернативный способ прикрепить событие - через сам пользовательский интерфейс, как указано ниже -

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

Вот,

$ event имеет тип EventData. EventData содержит два свойства, и они следующие:

Object- Наблюдаемый экземпляр, который используется для создания события. В этом сценарии это объект Button.

EventName- Это название мероприятия. В этом сценарии это событие касания.

Шаг 6

Наконец, слушатель событий можно отсоединить / удалить в любое время, как указано ниже -

testButton.off(Button.onTap);

Вы также можете использовать другой формат, как показано ниже -

testButton.removeEventListener(Button.onTap);

Изменение BlankNgApp

Давайте изменим приложение BlankNgApp, чтобы лучше понимать события в NativeScript.

Шаг 1

Откройте пользовательский интерфейс домашнего компонента, 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>

Вот,

• Tap - это событие, а Button - это событие.

• 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