NativeScript-イベント処理

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

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

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

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

次に、以下に指定するように、tapイベントをonTap関数にアタッチします-

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

イベントリスナーを追加する別の方法は次のとおりです-

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

ステップ5

イベントを添付する別の方法は、以下に指定するUI自体を使用することです。

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

ここに、

$ eventのタイプはEventDataです。EventDataには2つのプロパティが含まれており、それらは次のとおりです。

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

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