এনিমেশন লাইফসাইকেল এবং ইভেন্ট হ্যান্ডলিং

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

১. এনিমেশন লাইফসাইকেল

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

এনিমেশন লাইফসাইকেল: মূল স্টেপ

1. enter: কোনো এলিমেন্ট যখন DOM-এ যুক্ত হয়, তখন এটি enter স্টেপে চলে আসে।
2. leave: যখন কোনো এলিমেন্ট DOM থেকে সরিয়ে নেওয়া হয়, তখন এটি leave স্টেপে চলে আসে।
3. animate: এনিমেশন চলাকালীন সময়ে DOM উপাদানটি যেসব পরিবর্তন শাখা করে, তা animate স্টেপে চলে আসে।

এগুলো অটোমেটিকভাবে কাজ করতে পারে যদি আপনি Aurelia এর animation প্লাগইন ব্যবহার করেন।

উদাহরণ: এনিমেশন ব্যবহার

app.html (HTML টেমপ্লেট)

<template>
  <div class="box" click.delegate="animateBox()">Click to animate</div>
</template>

app.js (জাভাস্ক্রিপ্ট)

import { inject } from 'aurelia-framework';

export class App {
  animateBox() {
    const box = document.querySelector('.box');
    box.style.transition = 'all 1s ease';
    box.style.transform = 'scale(1.5)';
  }
}

এখানে, animateBox() ফাংশনটি একটি বাটনে ক্লিক করার সময় box ক্লাসের জন্য scale এনিমেশন প্রয়োগ করছে।

এনিমেশন লাইফসাইকেল কাস্টমাইজ করা:

Aurelia এনিমেশন লাইফসাইকেল কাস্টমাইজ করতে animation ডিরেকটিভ ব্যবহার করে।

<template>
  <div class="box" animation="fade" click.delegate="animateBox()">Click me</div>
</template>

এখানে fade এনিমেশন প্রিসেট হিসেবে প্রয়োগ হচ্ছে, যা ক্লিক করার সময় একটি ধীরে ধীরে অদৃশ্য হওয়া বা দৃশ্যমান হওয়ার প্রভাব তৈরি করবে।

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

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

১. এনিমেশন ইভেন্ট হ্যান্ডলিং

Aurelia-তে ইভেন্ট হ্যান্ডলিং করতে, আপনি সাধারণত .delegate বা .trigger ডিরেকটিভ ব্যবহার করতে পারেন।

• click.delegate: ক্লিক করার ইভেন্ট হ্যান্ডলার ব্যবহার করে।

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

app.html (HTML টেমপ্লেট)

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

app.js (জাভাস্ক্রিপ্ট)

export class App {
  handleClick() {
    alert("Button clicked!");
  }
}

এখানে, বাটনে ক্লিক করার সময় handleClick() ফাংশনটি কল হবে এবং একটি এলার্ট দেখাবে।

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

Aurelia আপনাকে DOM ইভেন্টের জন্য অন্যান্য ডিরেকটিভও ব্যবহার করতে দেয়, যেমন:

• .input.delegate: ইনপুট ফিল্ডের পরিবর্তন হ্যান্ডলিং।
• .keyup.delegate: কী বোর্ডে কোনো কী চাপলে।
• .submit.delegate: ফর্ম সাবমিট ইভেন্ট।

উদাহরণ: ইনপুট পরিবর্তন ইভেন্ট হ্যান্ডলিং

app.html (HTML টেমপ্লেট)

<template>
  <input type="text" value.bind="userInput" input.delegate="handleInputChange()">
  <p>Your input: ${userInput}</p>
</template>

app.js (জাভাস্ক্রিপ্ট)

export class App {
  userInput = '';

  handleInputChange() {
    console.log("Input changed: ", this.userInput);
  }
}

এখানে, input.delegate ডিরেকটিভ ব্যবহার করা হয়েছে যা ইনপুটের মান পরিবর্তন হলে handleInputChange() ফাংশনটি কল করবে।

৩. ইভেন্ট ডেলিগেশন

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

উদাহরণ: ইভেন্ট ডেলিগেশন

app.html (HTML টেমপ্লেট)

<template>
  <ul click.delegate="handleClick($event)">
    <li repeat.for="item of items">${item}</li>
  </ul>
</template>

app.js (জাভাস্ক্রিপ্ট)

export class App {
  items = ['Item 1', 'Item 2', 'Item 3'];

  handleClick(event) {
    console.log("Clicked item:", event.target.innerText);
  }
}

এখানে, click.delegate প্যারেন্ট ul এলিমেন্টে ব্যবহার করা হয়েছে, এবং ইভেন্টটি li উপাদানে প্রপাগেট হবে। এতে যেকোনো li আইটেম ক্লিক করলে, সংশ্লিষ্ট আইটেমের নাম কনসোলে দেখাবে।

উপসংহার

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