কাস্টম ইভেন্টস এবং কম্পোনেন্ট ইন্টারঅ্যাকশন

Aurelia ফ্রেমওয়ার্কে কাস্টম ইভেন্টস এবং কম্পোনেন্ট ইন্টারঅ্যাকশন খুবই গুরুত্বপূর্ণ, কারণ এগুলির মাধ্যমে আপনি বিভিন্ন কম্পোনেন্ট বা ভিউমডেলগুলোর মধ্যে যোগাযোগ করতে পারেন। আপনি যখন অ্যাপ্লিকেশনে একাধিক কম্পোনেন্ট ব্যবহার করছেন, তখন তাদের মধ্যে তথ্য শেয়ার বা ইভেন্টগুলির মাধ্যমে একটি কম্পোনেন্টের পরিবর্তন অন্য কম্পোনেন্টে প্রতিফলিত করতে পারেন।

এখানে আমরা কাস্টম ইভেন্টস এবং কম্পোনেন্ট ইন্টারঅ্যাকশন সম্পর্কে বিস্তারিত জানবো, যাতে আপনি আপনার অ্যাপ্লিকেশনে সঠিকভাবে এই ধারণাগুলি ব্যবহার করতে পারেন।

১. কাস্টম ইভেন্টস (Custom Events) ব্যবহার করা

Aurelia তে আপনি কাস্টম ইভেন্টস তৈরি করতে পারেন এবং সেগুলিকে এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে পাঠাতে পারেন। এটি সাধারণত UI ইন্টারঅ্যাকশন (যেমন বাটন ক্লিক বা ফর্ম সাবমিট) অথবা ডেটা পরিবর্তন হলে অন্য কম্পোনেন্টকে অবহিত করতে ব্যবহৃত হয়।

কাস্টম ইভেন্ট ডিফাইন করা

ধরা যাক, একটি Child Component থেকে একটি কাস্টম ইভেন্ট পাঠানোর উদাহরণ নিচে দেওয়া হলো।

১.১. Child Component (কাস্টম ইভেন্ট পাঠানো)

<template>
  <button click.delegate="sendGreeting()">Send Greeting</button>
</template>

<script>
export class Child {
  sendGreeting() {
    this.dispatchGreetingEvent(); // কাস্টম ইভেন্ট পাঠানো
  }

  dispatchGreetingEvent() {
    const event = new CustomEvent('greeting', { detail: 'Hello from Child Component!' });
    this.element.dispatchEvent(event);
  }
}
</script>

এখানে, sendGreeting() মেথডটি একটি কাস্টম ইভেন্ট greeting তৈরি করে এবং সেটি dispatchEvent মেথডের মাধ্যমে পাঠায়। detail প্রপার্টি ব্যবহার করে ইভেন্টের সাথে কিছু ডেটা (এখানে গ্রীটিং মেসেজ) পাঠানো হচ্ছে।

১.২. Parent Component (কাস্টম ইভেন্ট গ্রহণ করা)

<template>
  <child-element></child-element> <!-- Child Component -->
</template>

<script>
import { inject } from 'aurelia-framework';
import { Child } from './child';

export class Parent {
  constructor() {
    this.greetingMessage = '';
  }

  attached() {
    // Parent কম্পোনেন্টে কাস্টম ইভেন্ট লিসেন করা
    this.element.querySelector('child-element').addEventListener('greeting', this.handleGreetingEvent.bind(this));
  }

  handleGreetingEvent(event) {
    this.greetingMessage = event.detail; // কাস্টম ইভেন্টের ডেটা গ্রহণ
    console.log(this.greetingMessage);
  }
}
</script>

এখানে, Parent কম্পোনেন্ট Child কম্পোনেন্টের greeting ইভেন্ট লিসেন করছে। যখন ইভেন্টটি ট্রিগার হয়, তখন handleGreetingEvent() মেথডটি কল হয়ে ইভেন্টের ডেটা (এখানে, গ্রীটিং মেসেজ) গ্রহণ করে সেটি greetingMessage ভেরিয়েবলে সেট করে।

২. কম্পোনেন্ট ইন্টারঅ্যাকশন (Component Interaction)

কম্পোনেন্টগুলোর মধ্যে তথ্য আদান প্রদান এবং ইন্টারঅ্যাকশন খুবই গুরুত্বপূর্ণ, এবং Aurelia এই বিষয়টি খুব সহজে ম্যানেজ করতে পারে। সাধারণত প্যারেন্ট-চাইল্ড কম্পোনেন্টের মধ্যে ডেটা পাস করার জন্য properties এবং events ব্যবহার করা হয়।

২.১. Parent থেকে Child কম্পোনেন্টে ডেটা পাঠানো

Aurelia তে, প্যারেন্ট কম্পোনেন্ট সহজেই চাইল্ড কম্পোনেন্টে ডেটা পাস করতে পারে।

Parent Component (ডেটা পাঠানো):

<template>
  <child-element message.bind="parentMessage"></child-element> <!-- Child কম্পোনেন্টে ডেটা পাঠানো -->
</template>

<script>
export class Parent {
  constructor() {
    this.parentMessage = 'Hello from Parent Component';
  }
}
</script>

এখানে, parentMessage ভেরিয়েবলটি child-element কম্পোনেন্টের message প্রপার্টির মাধ্যমে bind করা হয়েছে।

Child Component (ডেটা গ্রহণ করা):

<template>
  <p>${message}</p> <!-- Parent কম্পোনেন্ট থেকে ডেটা প্রদর্শন -->
</template>

<script>
export class Child {
  message = ''; // প্যারেন্ট কম্পোনেন্ট থেকে ডেটা গ্রহণ করা
}
</script>

এখানে, Child কম্পোনেন্ট message প্রপার্টির মাধ্যমে প্যারেন্ট কম্পোনেন্ট থেকে পাঠানো ডেটা গ্রহণ করে সেটি টেমপ্লেটে প্রদর্শন করছে।

৩. ডেটা বাইন্ডিং এবং কাস্টম ইভেন্টসের মাধ্যমে কম্পোনেন্ট ইন্টারঅ্যাকশন

Aurelia তে ডেটা বাইন্ডিং এবং কাস্টম ইভেন্টস একসাথে ব্যবহার করে শক্তিশালী কম্পোনেন্ট ইন্টারঅ্যাকশন তৈরি করা সম্ভব।

৩.১. Parent থেকে Child কম্পোনেন্টে ডেটা পাঠানো এবং ইভেন্ট শোনানো

<template>
  <child-element message.bind="parentMessage" greeting.trigger="receiveGreeting($event)"></child-element>
  <p>${childGreeting}</p>
</template>

<script>
export class Parent {
  constructor() {
    this.parentMessage = 'Hello from Parent Component';
    this.childGreeting = '';
  }

  receiveGreeting(event) {
    this.childGreeting = event.detail; // Child থেকে গ্রীটিং গ্রহণ করা
  }
}
</script>

৩.২. Child কম্পোনেন্ট (ইভেন্ট পাঠানো)

<template>
  <button click.delegate="sendGreeting()">Send Greeting to Parent</button>
</template>

<script>
export class Child {
  sendGreeting() {
    const event = new CustomEvent('greeting', { detail: 'Hello from Child Component!' });
    this.element.dispatchEvent(event); // Parent কে কাস্টম ইভেন্ট পাঠানো
  }
}
</script>

এখানে, Parent কম্পোনেন্টে childGreeting প্রপার্টির মাধ্যমে চাইল্ড কম্পোনেন্ট থেকে পাঠানো গ্রীটিং মেসেজ দেখানো হয়। চাইল্ড কম্পোনেন্টের sendGreeting() মেথডটি একটি কাস্টম ইভেন্ট পাঠায়, যা প্যারেন্ট কম্পোনেন্টে receiveGreeting() মেথডের মাধ্যমে গ্রহন করা হয়।

৪. Aurelia একমাত্রা এবং পুনরায় ব্যবহারযোগ্য কম্পোনেন্ট তৈরি করা

Aurelia-তে কম্পোনেন্ট ইন্টারঅ্যাকশন এবং কাস্টম ইভেন্টস ব্যবহারের মাধ্যমে আপনি পুনরায় ব্যবহারযোগ্য কম্পোনেন্ট তৈরি করতে পারেন। এটি অ্যাপ্লিকেশনের কাঠামো এবং ডিজাইনকে আরও মডুলার এবং পরিষ্কার করে তোলে।

উপসংহার

Aurelia তে কাস্টম ইভেন্টস এবং কম্পোনেন্ট ইন্টারঅ্যাকশন খুবই শক্তিশালী টুলস, যা আপনাকে কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার এবং ইভেন্ট হ্যান্ডলিংয়ে সাহায্য করে। এই ফিচারগুলো ব্যবহারের মাধ্যমে আপনি আরও মডুলার, রিইউজেবল এবং কার্যকরী অ্যাপ্লিকেশন তৈরি করতে পারবেন। Aurelia-এর এই ক্ষমতা আপনি বিভিন্ন UI ইন্টারঅ্যাকশন, ডেটা বাইন্ডিং এবং কাস্টম ইভেন্টসের মাধ্যমে ব্যবহার করতে পারেন।

Aurelia একটি ইভেন্ট-ভিত্তিক ফ্রেমওয়ার্ক যা DOM ইভেন্ট এবং কাস্টম ইভেন্ট উভয়কেই সাপোর্ট করে। কাস্টম ইভেন্টগুলি তৈরি করা এবং ডিসপ্যাচ (trigger) করা খুবই সহজ, এবং এগুলো ডেটা অথবা অ্যাকশন শেয়ার করার জন্য অন্যান্য কম্পোনেন্ট বা মডিউলের মধ্যে যোগাযোগের এক কার্যকর উপায়। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে Aurelia-তে কাস্টম ইভেন্ট তৈরি এবং ডিসপ্যাচ করা যায়।

১. কাস্টম ইভেন্ট তৈরি করা

Aurelia-তে কাস্টম ইভেন্ট তৈরি করতে সাধারণত DOM Event এর মতোই Event কন্সট্রাক্টর ব্যবহার করা হয়। তবে, কাস্টম ইভেন্টে আপনি আপনার প্রয়োজনীয় ডেটা পাস করতে পারেন।

উদাহরণ: একটি কাস্টম ইভেন্ট তৈরি করা

export class App {
  constructor() {
    this.message = 'Hello from Aurelia!';
  }

  triggerCustomEvent() {
    const event = new CustomEvent('myCustomEvent', {
      bubbles: true,           // এই ইভেন্টটি বব্লিং করবে
      cancelable: true,        // ইভেন্টটি ক্যানসেল করা যাবে
      detail: { message: this.message }  // ইভেন্টের সাথে ডেটা পাস করা হচ্ছে
    });

    this.element.dispatchEvent(event);  // ইভেন্টটি ডিসপ্যাচ করা হচ্ছে
  }
}

এখানে:

• new CustomEvent দিয়ে একটি নতুন কাস্টম ইভেন্ট তৈরি করা হয়েছে।
• bubbles প্যারামিটারটি ইভেন্টের বব্লিং (propagation) সক্ষম করে।
• cancelable প্যারামিটারটি ইভেন্টটি ক্যানসেল করার সুযোগ দেয়।
• detail প্যারামিটারটি ইভেন্টের সাথে যে ডেটা পাঠানো হবে তা নির্ধারণ করে (এখানে একটি message পাস করা হয়েছে)।

এটি triggerCustomEvent() ফাংশনের মাধ্যমে ইভেন্টটি ডিসপ্যাচ করে।

২. কাস্টম ইভেন্টে ডেটা পাঠানো

Aurelia কাস্টম ইভেন্টের মাধ্যমে ডেটা পাঠানোর জন্য detail প্যারামিটারটি ব্যবহার করা হয়। এর মাধ্যমে, আপনি ইভেন্টের সাথে একটি অবজেক্ট, অ্যারে বা যেকোনো ডেটা পাস করতে পারেন।

উদাহরণ: কাস্টম ইভেন্টের মাধ্যমে ডেটা পাঠানো

export class App {
  constructor() {
    this.message = 'Hello from Aurelia!';
  }

  triggerCustomEvent() {
    const event = new CustomEvent('messageEvent', {
      bubbles: true,
      cancelable: true,
      detail: { message: this.message }
    });

    this.element.dispatchEvent(event);
  }
}

এখানে detail প্যারামিটার ব্যবহার করে message ডেটা পাঠানো হয়েছে, যা অন্য কম্পোনেন্ট বা ইভেন্ট লিসেনারের মাধ্যমে এক্সেস করা যাবে।

৩. কাস্টম ইভেন্ট লিসেনিং

কাস্টম ইভেন্ট ডিসপ্যাচ করার পর, আপনাকে সেই ইভেন্টটি শোনার জন্য (listen) একটি event listener সেট করতে হবে, যা ইভেন্টটি শোনা এবং প্রক্রিয়া করবে। Aurelia-তে, আপনি এটি সহজে করতে পারেন।

উদাহরণ: কাস্টম ইভেন্টে লিসেন করা

<template>
  <button click.delegate="triggerCustomEvent()">Trigger Event</button>
  <p>${eventMessage}</p>
</template>

<script>
export class App {
  constructor() {
    this.eventMessage = '';
  }

  attached() {
    // কাস্টম ইভেন্ট 'messageEvent' শোনার জন্য event listener যোগ করা হচ্ছে
    this.element.addEventListener('messageEvent', (event) => {
      this.eventMessage = event.detail.message;  // ইভেন্টের সাথে প্রাপ্ত ডেটা ব্যবহার
    });
  }

  triggerCustomEvent() {
    const event = new CustomEvent('messageEvent', {
      bubbles: true,
      cancelable: true,
      detail: { message: 'Hello from Aurelia Event!' }
    });

    this.element.dispatchEvent(event); // ইভেন্টটি ডিসপ্যাচ করা হচ্ছে
  }
}
</script>

এখানে:

• attached() লাইফসাইকেল হুক ব্যবহার করা হয়েছে যাতে messageEvent ইভেন্টটি শোনা শুরু হয় যখন কম্পোনেন্ট DOM-এ অ্যাটাচড হয়।
• addEventListener() ব্যবহার করে কাস্টম ইভেন্ট messageEvent শোনা হচ্ছে এবং ইভেন্টের ডেটা event.detail.message দিয়ে অ্যাক্সেস করা হচ্ছে।

এটি কাস্টম ইভেন্ট ডিসপ্যাচ করার পর, ইভেন্টের ডেটা অ্যাক্সেস করে UI তে দেখাবে।

৪. Aurelia-তে কাস্টম ইভেন্ট ডিরেকটিভ ব্যবহার করা

Aurelia আপনাকে কাস্টম ইভেন্ট ডিসপ্যাচ এবং লিসেন করার জন্য Aurelia event delegation এর সুবিধা দেয়। আপনি এটি click.delegate বা trigger.delegate ইত্যাদি ডিরেকটিভ ব্যবহার করে সহজেই করতে পারেন।

উদাহরণ: কাস্টম ইভেন্ট ডিসপ্যাচ এবং লিসেনিং ডিরেকটিভ ব্যবহার করে

<template>
  <button click.delegate="triggerCustomEvent()">Trigger Event</button>
  <p>${eventMessage}</p>
</template>

<script>
export class App {
  constructor() {
    this.eventMessage = '';
  }

  triggerCustomEvent() {
    const event = new CustomEvent('messageEvent', {
      bubbles: true,
      cancelable: true,
      detail: { message: 'Hello from Aurelia!' }
    });

    this.element.dispatchEvent(event); // ইভেন্টটি ডিসপ্যাচ করা হচ্ছে
  }

  attached() {
    this.element.addEventListener('messageEvent', (event) => {
      this.eventMessage = event.detail.message;
    });
  }
}
</script>

এখানে, click.delegate ডিরেকটিভ ব্যবহার করে কাস্টম ইভেন্ট ট্রিগার করা হচ্ছে। এটি আপনাকে ফাংশন কল করতে সাহায্য করে যখন একটি DOM ইভেন্ট (যেমন, ক্লিক) ঘটে।

উপসংহার

Aurelia-তে কাস্টম ইভেন্ট তৈরি এবং ডিসপ্যাচ করা খুবই সহজ এবং সুবিধাজনক। CustomEvent এর মাধ্যমে আপনি কাস্টম ইভেন্ট তৈরি করতে পারেন এবং detail প্যারামিটার ব্যবহার করে ডেটা পাস করতে পারেন। এছাড়া, addEventListener() ব্যবহার করে ইভেন্ট শোনা এবং ডেটা প্রক্রিয়া করা যায়। এর মাধ্যমে, আপনি সহজে বিভিন্ন কম্পোনেন্ট বা ভিউগুলোর মধ্যে যোগাযোগ এবং তথ্য শেয়ার করতে পারবেন।

Aurelia ফ্রেমওয়ার্কে Parent-Child কম্পোনেন্ট কমিউনিকেশন খুবই সহজ এবং কার্যকরী। একটি Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে ডেটা প্রেরণ, অথবা Child কম্পোনেন্ট থেকে Parent কম্পোনেন্টে ডেটা প্রেরণ করার জন্য ডাটাবাইন্ডিং, ইভেন্ট হ্যান্ডলিং, এবং Custom Events ব্যবহৃত হয়।

এখানে আমরা দেখবো কিভাবে Parent এবং Child কম্পোনেন্টের মধ্যে ডেটা শেয়ার করা যায়।

১. Parent থেকে Child কম্পোনেন্টে ডেটা পাঠানো

Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে ডেটা পাঠানোর জন্য ডাটাবাইন্ডিং ব্যবহার করা হয়। Parent কম্পোনেন্টের ভ্যালু Child কম্পোনেন্টের প্রোপার্টির সাথে বাইন্ড করা হয়।

উদাহরণ: Parent থেকে Child কম্পোনেন্টে ডেটা পাঠানো

1. Child কম্পোনেন্ট (child.js)

export class Child {
  message = '';  // Parent থেকে প্রাপ্ত ডেটা এখানে সেট হবে
}

2. Child কম্পোনেন্টের HTML (child.html)

<template>
  <p>${message}</p> <!-- Parent থেকে প্রাপ্ত ডেটা দেখানো হবে -->
</template>

3. Parent কম্পোনেন্ট (parent.js)

export class Parent {
  greeting = 'Hello from Parent!';
}

4. Parent কম্পোনেন্টের HTML (parent.html)

<template>
  <child message.bind="greeting"></child> <!-- Parent থেকে Child এ ডেটা পাঠানো -->
</template>

এখানে, message.bind="greeting" ব্যবহার করে Parent কম্পোনেন্টের greeting ভ্যালু Child কম্পোনেন্টের message প্রোপার্টির সাথে বাইন্ড করা হয়েছে। ফলে, Parent কম্পোনেন্টের greeting পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে Child কম্পোনেন্টের message-এ আপডেট হবে।

২. Child থেকে Parent কম্পোনেন্টে ডেটা পাঠানো

Child কম্পোনেন্ট থেকে Parent কম্পোনেন্টে ডেটা পাঠানোর জন্য Custom Event ব্যবহার করা হয়। Child কম্পোনেন্টে একটি কাস্টম ইভেন্ট তৈরি করা হয় এবং Parent কম্পোনেন্টে সেই ইভেন্ট হ্যান্ডল করা হয়।

উদাহরণ: Child থেকে Parent কম্পোনেন্টে ডেটা পাঠানো

1. Child কম্পোনেন্ট (child.js)

export class Child {
  constructor() {
    this.message = 'Hello from Child!';
  }

  sendToParent() {
    this.fire('message-sent', this.message); // কাস্টম ইভেন্ট ট্রিগার করা
  }

  fire(eventName, data) {
    const event = new CustomEvent(eventName, { detail: data });
    this.element.dispatchEvent(event);
  }
}

2. Child কম্পোনেন্টের HTML (child.html)

<template>
  <button click.delegate="sendToParent()">Send Message to Parent</button>
</template>

3. Parent কম্পোনেন্ট (parent.js)

export class Parent {
  constructor() {
    this.receivedMessage = '';
  }

  attached() {
    this.childElement.addEventListener('message-sent', (e) => {
      this.receivedMessage = e.detail;  // Child থেকে পাঠানো ডেটা গ্রহন
    });
  }
}

4. Parent কম্পোনেন্টের HTML (parent.html)

<template>
  <child ref="childElement"></child> <!-- Child কম্পোনেন্টের রেফারেন্স -->
  <p>Message from Child: ${receivedMessage}</p> <!-- Parent-এ প্রাপ্ত ডেটা -->
</template>

এখানে, Child কম্পোনেন্টে sendToParent() মেথডটি কল করা হলে, একটি কাস্টম ইভেন্ট message-sent ট্রিগার হবে এবং Parent কম্পোনেন্টে সেই ইভেন্টটি লিসেন করা হবে। Parent কম্পোনেন্টে ইভেন্টের detail প্রোপার্টি থেকে ডেটা গ্রহণ করা হবে।

৩. Two-Way Communication (Parent-Child এর মধ্যে ডেটা পরিবর্তন করা)

আপনি যখন চান যে Parent এবং Child কম্পোনেন্ট একে অপরের মধ্যে ডেটা শেয়ার করুক এবং উভয়েই সেই ডেটা পরিবর্তন করতে পারুক, তখন Two-Way Binding ব্যবহার করতে হবে।

উদাহরণ: Two-Way Communication

1. Child কম্পোনেন্ট (child.js)

export class Child {
  @bindable message = '';  // message প্রোপার্টি Parent থেকে বাইন্ড করা হবে
}

2. Child কম্পোনেন্টের HTML (child.html)

<template>
  <input type="text" value.bind="message" />  <!-- Child-এ ইনপুট ফিল্ড -->
  <p>Message in Child: ${message}</p>  <!-- Child-এ প্রাপ্ত ডেটা -->
</template>

3. Parent কম্পোনেন্ট (parent.js)

export class Parent {
  message = 'Hello from Parent to Child!';  // Parent থেকে Child-এ পাঠানো ডেটা
}

4. Parent কম্পোনেন্টের HTML (parent.html)

<template>
  <child message.bind="message"></child> <!-- Two-way Binding -->
  <p>Message in Parent: ${message}</p>  <!-- Parent-এ প্রাপ্ত ডেটা -->
</template>

এখানে, message.bind="message" দ্বারা Parent কম্পোনেন্টের message ভ্যারিয়েবল এবং Child কম্পোনেন্টের message প্রোপার্টি একে অপরের সাথে বাইন্ড করা হয়েছে। এখন যখন Parent বা Child কোনো একটি ভ্যালু পরিবর্তন করবে, তা অপর কম্পোনেন্টে স্বয়ংক্রিয়ভাবে আপডেট হবে।

উপসংহার

Aurelia তে Parent-Child কম্পোনেন্ট কমিউনিকেশন খুবই সহজ এবং শক্তিশালী। ডাটাবাইন্ডিং এবং Custom Events ব্যবহার করে আপনি খুব সহজেই ডেটা শেয়ার করতে পারেন। Aurelia-র two-way data binding সুবিধা, custom event এবং injectable services এর মাধ্যমে Parent এবং Child কম্পোনেন্টগুলোর মধ্যে যোগাযোগকে আরও সহজ এবং কার্যকরী করা সম্ভব।

Aurelia-তে Event Aggregator একটি শক্তিশালী প্যাটার্ন যা বিভিন্ন কম্পোনেন্টের মধ্যে ইভেন্ট-বেসড কমিউনিকেশন তৈরি করতে সহায়তা করে। এটি কম্পোনেন্টগুলোর মধ্যে ডিকপ্লেপড (decoupled) ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়, যাতে এক কম্পোনেন্ট অন্য কম্পোনেন্টের সরাসরি রেফারেন্স না নিয়ে সহজেই তথ্য বা ইভেন্ট শেয়ার করতে পারে।

Event Aggregator কী?

Event Aggregator হল একটি প্যাটার্ন যা এক বা একাধিক কম্পোনেন্টের মধ্যে ইভেন্ট বা ডেটা শেয়ার করার জন্য ব্যবহৃত হয়। এটি মূলত একটি পাবলিশ-সাবস্ক্রাইব মেকানিজম ব্যবহার করে, যেখানে এক কম্পোনেন্ট (পাবলিশার) একটি ইভেন্ট বা ডেটা প্রকাশ করে এবং অন্য কম্পোনেন্ট (সাবস্ক্রাইবার) সেই ইভেন্টে সাড়া দেয়।

Aurelia-তে, EventAggregator ক্লাস দিয়ে আমরা ইভেন্টগুলি ম্যানেজ করি এবং বিভিন্ন কম্পোনেন্টে তা পাঠাতে বা গ্রহণ করতে পারি।

১. Event Aggregator সেটআপ এবং ব্যবহার

Step 1: Event Aggregator ইনস্টল করা

Aurelia-তে EventAggregator ক্লাসটি aurelia-event-aggregator প্যাকেজের অংশ। এটি Aurelia CLI দ্বারা ডিফল্টভাবে ইনস্টল করা হয়। তবে যদি এটি আপনার প্রজেক্টে ইনস্টল না থাকে, তবে আপনি এটি npm এর মাধ্যমে ইনস্টল করতে পারেন:

npm install aurelia-event-aggregator

Step 2: EventAggregator ক্লাস ইনজেক্ট করা

আপনি যেকোনো কম্পোনেন্টে EventAggregator ক্লাস ইনজেক্ট করে তা ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি কম্পোনেন্টের মধ্যে এটি ইনজেক্ট করা যেতে পারে:

import { inject } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class Sender {
  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
  }

  sendMessage() {
    this.eventAggregator.publish('message-sent', 'Hello from Sender!');
  }
}

এখানে, Sender কম্পোনেন্টে eventAggregator.publish() ব্যবহার করে একটি ইভেন্ট প্রকাশ করা হচ্ছে যার নাম message-sent এবং সাথে একটি বার্তা পাঠানো হচ্ছে।

Step 3: Event শুনতে (Subscribe)

এখন, যে কম্পোনেন্টটি ইভেন্টটি গ্রহণ করবে, সে কম্পোনেন্টে eventAggregator.subscribe() ব্যবহার করা হয়।

import { inject } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class Receiver {
  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
    this.message = '';
  }

  attached() {
    this.subscription = this.eventAggregator.subscribe('message-sent', message => {
      this.message = message;
    });
  }

  detached() {
    this.subscription.dispose(); // সাবস্ক্রিপশনটি বন্ধ করা
  }
}

এখানে, Receiver কম্পোনেন্টে message-sent ইভেন্ট সাবস্ক্রাইব করা হয়েছে এবং যখন এই ইভেন্টটি ট্রিগার হয়, তখন এটি message ভেরিয়েবলে ডেটা আপডেট করবে। attached() মেথডে ইভেন্ট সাবস্ক্রাইব করা হয় এবং detached() মেথডে সাবস্ক্রিপশনটি ক্লিনআপ করা হয়।

২. কম্পোনেন্ট ইন্টারঅ্যাকশন উদাহরণ

ধরা যাক, আমাদের একটি Sender কম্পোনেন্ট আছে যা একটি বার্তা পাঠায় এবং Receiver কম্পোনেন্ট রয়েছে যা সেই বার্তা গ্রহণ করে এবং প্রদর্শন করে।

Sender কম্পোনেন্ট (ফর্মে একটি বার্তা পাঠানো)

sender.html:

<template>
  <h2>Send Message</h2>
  <button click.delegate="sendMessage()">Send Message</button>
</template>

sender.js:

import { inject } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class Sender {
  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
  }

  sendMessage() {
    this.eventAggregator.publish('message-sent', 'Hello, this is a message from Sender!');
  }
}

Receiver কম্পোনেন্ট (বার্তা গ্রহণ করা)

receiver.html:

<template>
  <h2>Received Message:</h2>
  <p>${message}</p>
</template>

receiver.js:

import { inject } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class Receiver {
  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
    this.message = '';
  }

  attached() {
    this.subscription = this.eventAggregator.subscribe('message-sent', message => {
      this.message = message;
    });
  }

  detached() {
    this.subscription.dispose();
  }
}

Main View (প্রধান ভিউ যাতে দুটি কম্পোনেন্ট দেখানো হয়)

app.html:

<template>
  <require from="sender"></require>
  <require from="receiver"></require>

  <sender></sender>
  <receiver></receiver>
</template>

এখানে, Sender কম্পোনেন্টে বাটন ক্লিক করলে message-sent ইভেন্ট পাবলিশ হবে এবং Receiver কম্পোনেন্টে সেই ইভেন্ট সাবস্ক্রাইব করে বার্তা গ্রহণ করে দেখাবে।

৩. ইভেন্ট এগ্রিগেটরের শক্তিশালী ব্যবহার

Aurelia-তে EventAggregator এর মাধ্যমে আপনি একাধিক কম্পোনেন্টের মধ্যে ইভেন্ট শেয়ার করতে পারেন এবং এতে একে অপরের উপর নির্ভর না হয়ে কম্পোনেন্টগুলোর মধ্যে কার্যকরী যোগাযোগ স্থাপন করতে পারেন।

এটি বিশেষ করে ব্যবহারকারী ইন্টারফেসের বিভিন্ন অংশের মধ্যে ইন্টারঅ্যাকশন পরিচালনা করতে খুবই উপকারী। উদাহরণস্বরূপ:

• এক কম্পোনেন্টের ইনপুট অন্য কম্পোনেন্টে প্রভাব ফেলবে।
• একটি কম্পোনেন্টে একটি পরিবর্তন ঘটলে অন্য কম্পোনেন্ট তা গ্রহণ করবে এবং UI আপডেট হবে।
• একটি কম্পোনেন্টে একাধিক সাবস্ক্রিপশন এবং পাবলিশিং হতে পারে।

৪. বিশেষ ব্যবহার পরিস্থিতি

১. গ্লোবাল ইভেন্ট শেয়ার করা

Aurelia EventAggregator একটি গ্লোবাল ইভেন্ট বাস হিসাবে কাজ করে, যা পুরো অ্যাপ্লিকেশনে ইভেন্ট শেয়ার করতে সহায়তা করে। উদাহরণস্বরূপ, আপনি একটি এক্সেসযোগ্য notification system বা global state শেয়ার করার জন্য এটি ব্যবহার করতে পারেন।

২. কম্পোনেন্ট-ভিত্তিক ইভেন্ট শেয়ারিং

Aurelia-তে EventAggregator ব্যবহার করে আপনি খুব সহজেই কম্পোনেন্টগুলোর মধ্যে ডেটা শেয়ার এবং ম্যানেজ করতে পারবেন, যেখানে একটি কম্পোনেন্ট একটি ইভেন্ট পাবলিশ করে এবং অন্য কম্পোনেন্ট সেই ইভেন্ট সাবস্ক্রাইব করে তথ্য গ্রহণ করবে।

উপসংহার

Aurelia-তে Event Aggregator ব্যবহার করে আপনি কম্পোনেন্ট ইন্টারঅ্যাকশন সহজে এবং শক্তিশালীভাবে পরিচালনা করতে পারেন। এটি পাবলিশ-সাবস্ক্রাইব প্যাটার্ন ব্যবহার করে কম্পোনেন্টগুলোর মধ্যে যোগাযোগ সক্ষম করে, যেখানে এক কম্পোনেন্ট অন্য কম্পোনেন্টের রেফারেন্স ছাড়াই তথ্য বা ইভেন্ট শেয়ার করতে পারে। Aurelia-তে Event Aggregator ব্যবহার করার মাধ্যমে আপনার অ্যাপ্লিকেশনে ডিকপ্লেপড এবং সুন্দর কোড লেখা সম্ভব হয়, যা বড় অ্যাপ্লিকেশনগুলোর জন্য বিশেষভাবে কার্যকর।

Aurelia একটি শক্তিশালী এবং ইউজার-ফ্রেন্ডলি ইভেন্ট ব্যবস্থাপনা সিস্টেম সরবরাহ করে, যা ডেভেলপারদের জন্য ওয়েব অ্যাপ্লিকেশনে ইভেন্ট হ্যান্ডলিং সহজ এবং কার্যকরী করে তোলে। Aurelia ইভেন্ট ম্যানেজমেন্টের জন্য ডাটাবাইন্ডিং, ডিরেকটিভস, এবং কম্পোনেন্ট ভিউ এর মধ্যে ইন্টিগ্রেটেড সিস্টেম ব্যবহার করে।

Aurelia-তে ইভেন্ট হ্যান্ডলিং মূলত DOM (Document Object Model) এর ইভেন্টগুলোর মাধ্যমে ঘটে, কিন্তু এর সাথে কম্পোনেন্ট-ভিত্তিক ইভেন্ট ম্যানেজমেন্টও সহজভাবে ইন্টিগ্রেট করা যায়। নিচে আমরা Aurelia এর ইভেন্ট ব্যবস্থাপনা পদ্ধতি এবং ইভেন্ট হ্যান্ডলিং সম্পর্কে বিস্তারিত আলোচনা করব।

১. এটি কীভাবে কাজ করে?

Aurelia ইভেন্ট ম্যানেজমেন্টের জন্য DOM ইভেন্ট (যেমন, ক্লিক, কিপ্রেস, মাউস মুভ ইত্যাদি) এবং কম্পোনেন্ট ইভেন্ট দুটি ব্যবহৃত হয়। এটি DOM ইভেন্টগুলোকে সঠিকভাবে মডেল বা ভিউতে বাইন্ড করার জন্য ডাটাবাইন্ডিং ব্যবহার করে।

২. DOM ইভেন্ট হ্যান্ডলিং

Aurelia আপনাকে খুব সহজেই HTML টেমপ্লেটে DOM ইভেন্টগুলো হ্যান্ডেল করতে দেয়। আপনি click.delegate, keydown.delegate অথবা mouseenter.delegate ইত্যাদি ব্যবহার করে ইভেন্ট হ্যান্ডলিং করতে পারেন।

উদাহরণ ১: ক্লিক ইভেন্ট হ্যান্ডলিং

app.html

<template>
  <button click.delegate="showMessage()">Click Me</button>
</template>

app.js

export class App {
  showMessage() {
    alert('Button clicked!');
  }
}

এখানে, click.delegate ডিরেকটিভটি বাটনের ক্লিক ইভেন্টে showMessage মেথডটি কল করবে। delegate ডিরেকটিভটি ব্যবহার করলে ইভেন্টটি ডম এলিমেন্টের উপরই শোনা হবে।

উদাহরণ ২: কিপ্রেস ইভেন্ট হ্যান্ডলিং

app.html

<template>
  <input type="text" keydown.delegate="handleKeyDown($event)" placeholder="Press any key">
</template>

app.js

export class App {
  handleKeyDown(event) {
    console.log('Key pressed:', event.key);
  }
}

এখানে, keydown.delegate ব্যবহার করা হয়েছে, যা কিপ্রেস ইভেন্টকে handleKeyDown মেথডে পাঠাবে। $event এর মাধ্যমে কিপ্রেস ইভেন্টের ডিটেইলস পাওয়া যাবে।

৩. বাইন্ডিং এবং ইভেন্ট হ্যান্ডলিং

Aurelia এর ডাটাবাইন্ডিং সিস্টেম ব্যবহার করে আপনি মডেল-ভিউ ডেটা এবং ইভেন্টগুলো খুব সহজে ম্যানেজ করতে পারেন। এটি ডেভেলপারদের জন্য UI এবং ডেটার মধ্যে সমন্বয় রাখা সহজ করে তোলে।

উদাহরণ ৩: বাইন্ডিং এবং ইভেন্ট হ্যান্ডলিং একসাথে

app.html

<template>
  <input type="text" value.bind="name" placeholder="Enter your name">
  <button click.delegate="showMessage()">Submit</button>
  <p>Hello, ${name}!</p>
</template>

app.js

export class App {
  name = '';

  showMessage() {
    alert(`Hello, ${this.name}`);
  }
}

এখানে, value.bind="name" দিয়ে ইনপুটের মানকে name প্রপার্টির সাথে বাইন্ড করা হয়েছে এবং click.delegate="showMessage()" বাটনের ক্লিক ইভেন্টে showMessage ফাংশন কল করা হচ্ছে। name প্রপার্টি পরিবর্তিত হলে তা UI-তে অটোমেটিক্যালি রিফ্রেশ হবে।

৪. কম্পোনেন্ট ইভেন্ট হ্যান্ডলিং

Aurelia এর কম্পোনেন্ট ইভেন্ট ম্যানেজমেন্ট আরও উন্নত, যেখানে আপনি পিতামাতার কম্পোনেন্ট (parent component) থেকে সন্তানের কম্পোনেন্ট (child component) এর ইভেন্ট হ্যান্ডল করতে পারেন।

উদাহরণ ৪: Parent-Child কম্পোনেন্ট ইভেন্ট হ্যান্ডলিং

parent.html (পিতামাতার কম্পোনেন্ট)

<template>
  <child-component activate.delegate="onActivate($event)"></child-component>
</template>

parent.js (পিতামাতার কম্পোনেন্ট)

export class Parent {
  onActivate(event) {
    alert('Child component activated');
  }
}

child.html (সন্তানের কম্পোনেন্ট)

<template>
  <button click.delegate="activate()">Activate</button>
</template>

child.js (সন্তানের কম্পোনেন্ট)

export class Child {
  activate() {
    this.trigger('activate');
  }

  trigger(eventName) {
    this.element.dispatchEvent(new CustomEvent(eventName, { bubbles: true }));
  }
}

এখানে, trigger() মেথড ব্যবহার করে সন্তানের কম্পোনেন্ট থেকে একটি কাস্টম ইভেন্ট activate তৈরি করা হচ্ছে। পিতামাতার কম্পোনেন্টে activate.delegate ডিরেকটিভ ব্যবহার করে সেই ইভেন্ট হ্যান্ডেল করা হচ্ছে।

৫. Custom Events এবং Event Bubbling

Aurelia Custom Event তৈরি করতে এবং ইভেন্ট বাবলিং (event bubbling) ব্যবহার করতে দেয়। আপনি কাস্টম ইভেন্ট তৈরি করে এবং এগুলোকে পিতামাতা বা অন্যান্য কম্পোনেন্টে পাঠাতে পারেন।

উদাহরণ ৫: কাস্টম ইভেন্ট তৈরি করা

child.js (সন্তান কম্পোনেন্ট)

export class Child {
  activate() {
    const event = new CustomEvent('customActivate', { detail: 'Some Data' });
    this.element.dispatchEvent(event);
  }
}

parent.js (পিতামাতা কম্পোনেন্ট)

export class Parent {
  attached() {
    this.element.addEventListener('customActivate', (e) => {
      console.log('Custom event received:', e.detail);
    });
  }
}

এখানে, CustomEvent ব্যবহার করে একটি কাস্টম ইভেন্ট তৈরি করা হয়েছে এবং পিতামাতার কম্পোনেন্টে সেই কাস্টম ইভেন্টটি গ্রহণ করা হচ্ছে।

উপসংহার

Aurelia ইভেন্ট ব্যবস্থাপনা সিস্টেম খুবই শক্তিশালী এবং ডেভেলপারদের জন্য সহজ। এটি DOM ইভেন্ট, কম্পোনেন্ট ইভেন্টস, কাস্টম ইভেন্টস এবং ডেটাবাইন্ডিং এর মাধ্যমে ইভেন্ট হ্যান্ডলিংকে সহজ এবং পরিষ্কার করে তোলে। Aurelia এর ইভেন্ট সিস্টেম দিয়ে আপনি দ্রুত এবং কার্যকরীভাবে অ্যাপ্লিকেশনের ইন্টারঅ্যাকশন ম্যানেজ করতে পারবেন।