NativeScript-イベント処理

すべてのGUIアプリケーションで、イベントはユーザーとの対話を可能にする非常に重要な役割を果たします。ユーザーがアプリケーションと対話するたびにイベントが発生し、対応するアクションが実行されます。

たとえば、ユーザーがアプリケーションのログインページで[ログイン]ボタンをクリックすると、ログインプロセスがトリガーされます。

イベントには2人の俳優が関与します-

イベント送信者-実際のイベントを発生させるオブジェクト。
イベントリスナー-特定のイベントをリッスンし、イベントが発生したときに実行される関数。

観察可能なクラス

イベントを処理するための事前定義されたクラスです。以下に定義されています-

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

イベントを添付する別の方法は、以下に指定されているようにUI自体を介してです-

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

ここに、

$ eventはタイプEventDataです。 EventDataは2つのプロパティを含み、それらは以下の通りです-

オブジェクト-イベントを発生させるために使用される監視可能なインスタンス。このシナリオでは、ボタンオブジェクトです。

*EventName* -イベント名です。 このシナリオでは、タップイベントです。

ステップ6

最後に、イベントリスナーは、以下に指定されているようにいつでも切り離したり削除したりできます-

testButton.off(Button.onTap);

以下に示すように、別のフォーマットを使用することもできます-

testButton.removeEventListener(Button.onTap);

BlankNgAppの変更

BlankNgAppアプリケーションを変更して、NativeScriptのイベントをよりよく理解しましょう。

ステップ1

ホームコンポーネントのUI、 src/app/home/home.componentl を開き、以下のコードを追加します-

<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.componentl"
})
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

Nativescript-events-handling

NativeScript-イベント処理

観察可能なクラス

イベントリスナー

ステップ1

ステップ2

ステップ3

ステップ4

ステップ5

ステップ6

BlankNgAppの変更

ステップ1

ステップ2

ステップ3

目次