آموزش مدیریت رویدادها در NativeScript

آموزش مدیریت رویدادها در NativeScript

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش مدیریت رویدادها در NativeScript خواهیم پرداخت.

در هر برنامه GUI ، رویدادها نقش بسیار مهمی در ایجاد امکان تعامل با کاربر دارند. هر زمان که کاربر با برنامه ارتباط برقرار کند ، یک رویداد خاموش می شود و عملکرد مربوطه اجرا می شود.

به عنوان مثال، هنگامی که کاربر دکمه ورود به سیستم را در صفحه ورود یک برنامه کلیک می کند، فرآیند ورود به سیستم را آغاز می کند.

رویداد شامل دو بازیگر است –

• فرستنده رویداد – شی، که واقعه واقعی را افزایش می دهد.
• شنونده رویداد – عملکردی که برای یک رویداد خاص گوش می دهد و سپس هنگام شلیک یک رویداد اجرا می شود.

کلاس قابل مشاهده

این یک کلاس از قبل تعریف شده برای رسیدگی به رویداد است. در زیر تعریف شده است –

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

در NativeScript ، تقریباً هر شی از کلاس Observable ناشی می شود و بنابراین هر شی object از رویدادها پشتیبانی می کند.

شنونده رویداد

بگذارید نحوه ایجاد یک شی object را بفهمیم و یک شنونده رویداد را به شی object موجود در این فصل اضافه کنیم.

مرحله ۱

یک دکمه ایجاد کنید که برای تولید یک رویداد همانطور که در زیر مشخص شده استفاده می شود –

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

مرحله ۲

متن را به صورت مشخص شده در زیر به دکمه اضافه کنید –

testButton.text = "Click";

مرحله ۳

همانطور که در زیر مشخص شده، یک تابع ایجاد کنید، روی آن ضربه بزنید –

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

مرحله ۴

همانطور که در زیر مشخص شده است ، رویداد tap را به تابع onTap وصل کنید –

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

یک روش جایگزین برای اضافه کردن یک شنونده رویداد به شرح زیر است –

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

مرحله ۵

یک روش جایگزین برای پیوستن رویداد از طریق UI است که در زیر مشخص شده است –

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

event$ از نوع EventData است. EventData شامل دو ویژگی است و آنها به شرح زیر است –

• Object  – نمونه قابل مشاهده ای که برای ایجاد یک رویداد استفاده می شود. در این سناریو ، آن شی Button است.
• EventName – این نام رویداد است. در این سناریو ، tap event است.

مرحله ۶

سرانجام، شنونده رویداد می تواند در هر زمان جدا شود / حذف شود به شرح زیر –

testButton.off (Button.onTap) ؛

همانطور که در زیر نشان داده شده است می توانید از قالب دیگری استفاده کنید –

testButton.removeEventListener(Button.onTap);

اصلاح BlankNgApp

اجازه دهید برنامه BlankNgApp را اصلاح کنیم تا وقایع موجود در NativeScript را بهتر درک کنیم.

مرحله ۱

در 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>

• Tap رویداد است و دکمه افزایش دهنده رویداد است.
• onButtonTap شنونده رویداد است.

مرحله ۲

کد مولفه خانه ، 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 اضافه شده است.
• نام رویداد را چاپ کنید، روی متن ضربه بزنید و دکمه بزنید ، یک رویداد را در کنسول روشن کنید.

مرحله ۳

برنامه را اجرا کنید و روی دکمه ضربه بزنید. خط زیر را در کنسول چاپ می کند.

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

منبع.

لیست جلسات قبل آموزش NativeScript

1. آموزش NativeScript
2. معرفی NativeScript
3. آموزش نصب NativeScript
4. آموزش معماری NativeScript
5. آموزش برنامه Angular در NativeScript
6. آموزش تمپلیت ها در NativeScript
7. آموزش ویجت ها در NativeScript
8. آموزش ظروف طرح بندی در NativeScript
9. آموزش پیمایش در NativeScript