কাস্টম ডিরেক্টিভ এবং টেমপ্লেট বাউন্ডারি তৈরি

Aurelia একটি শক্তিশালী এবং ফ্লেক্সিবল ফ্রেমওয়ার্ক যা custom directives এবং template boundaries তৈরি করার মাধ্যমে আপনাকে আপনার অ্যাপ্লিকেশন কাস্টমাইজ করতে দেয়। Custom Directives এবং Template Boundaries আপনাকে আপনার অ্যাপ্লিকেশনে নতুন আচরণ, স্টাইল এবং কার্যকলাপ যুক্ত করতে সহায়তা করে।

এখানে আমরা custom directives এবং template boundaries তৈরি করার প্রক্রিয়া ব্যাখ্যা করবো।

কাস্টম ডিরেক্টিভ (Custom Directives)

Directives হল এমন উপাদান যা HTML টেমপ্লেটে কোনো নির্দিষ্ট আচরণ বা কার্যকলাপ যুক্ত করতে ব্যবহৃত হয়। Aurelia-তে, আপনি কাস্টম ডিরেক্টিভ তৈরি করতে পারেন যেগুলো HTML এলিমেন্টগুলোর আচরণ কাস্টমাইজ করে।

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

ধরা যাক, আমরা একটি কাস্টম ডিরেক্টিভ তৈরি করতে চাই যেটি একটি টেক্সট ইনপুট এলিমেন্টে uppercase কনভার্সন যোগ করবে।

Step 1: Create a Custom Attribute (Directives)

প্রথমে, uppercase ডিরেক্টিভটি তৈরি করতে একটি নতুন ফাইল তৈরি করুন, যেমন uppercase-attribute.js:

export class UppercaseAttribute {
  valueChanged(newValue, oldValue) {
    if (newValue) {
      this.element.value = newValue.toUpperCase();
    }
  }

  bind() {
    // Bind method is called when the element is attached
    this.element.value = this.value.toUpperCase();
  }
}

Step 2: Create the Template with the Custom Directive

এখন, uppercase ডিরেক্টিভটি টেমপ্লেটে ব্যবহার করতে হবে:

<template>
  <input value.bind="name | uppercase">
  <p>Your name in uppercase: ${name}</p>
</template>

এখানে, uppercase ডিরেক্টিভ ইনপুট ফিল্ডে ব্যবহার করা হয়েছে, যার মাধ্যমে ইনপুটের মান বড় হাতের অক্ষরে পরিণত হবে।

Step 3: Register the Custom Directive

এখন, uppercase ডিরেক্টিভটি aurelia.globalResources() দিয়ে গ্লোবালি রেজিস্টার করতে হবে।

import {UppercaseAttribute} from './uppercase-attribute';

export function configure(aurelia) {
  aurelia.globalResources(UppercaseAttribute);
}

কাস্টম টেমপ্লেট বাউন্ডারি (Custom Template Boundaries)

Template Boundaries হল সেই অংশ যেখানে আপনি কাস্টম ফিচার বা লজিক যুক্ত করতে চান, যাতে আপনি reusable components তৈরি করতে পারেন এবং সেগুলো অন্য টেমপ্লেটের মধ্যে ব্যবহার করতে পারেন।

২. কাস্টম টেমপ্লেট বাউন্ডারি তৈরি করা

ধরা যাক, আপনি একটি কাস্টম <my-button> কম্পোনেন্ট তৈরি করতে চান, যা একটি বাটন এলিমেন্টের আচরণ কাস্টমাইজ করবে।

Step 1: Create the Custom Element

প্রথমে my-button.js এবং my-button.html ফাইল তৈরি করুন।

my-button.js:

export class MyButton {
  buttonText = 'Click Me!';
}

my-button.html:

<template>
  <button>${buttonText}</button>
</template>

এটি একটি খুবই সাধারণ কাস্টম কম্পোনেন্ট যেটি একটি বাটন রেন্ডার করবে এবং বাটনের টেক্সট প্রদর্শন করবে।

Step 2: Using the Custom Element in Another Template

এখন আপনি এই কাস্টম কম্পোনেন্টটি অন্য টেমপ্লেটে ব্যবহার করতে পারেন:

<template>
  <my-button></my-button>
</template>

এখানে, <my-button> ট্যাগটি একটি কাস্টম কম্পোনেন্টের রেফারেন্স এবং এটি আপনার তৈরি করা MyButton এলিমেন্ট রেন্ডার করবে।

Step 3: Register the Custom Element

এই কাস্টম কম্পোনেন্টটি ব্যবহার করার জন্য আপনাকে aurelia.globalResources() দিয়ে রেজিস্টার করতে হবে।

import {MyButton} from './my-button';

export function configure(aurelia) {
  aurelia.globalResources(MyButton);
}

এখন, আপনি যেকোনো টেমপ্লেটে <my-button> কম্পোনেন্ট ব্যবহার করতে পারবেন।

কাস্টম ডিরেক্টিভ এবং টেমপ্লেট বাউন্ডারি সমন্বয়

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

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

ধরা যাক, আপনি MyButton কম্পোনেন্টে uppercase ডিরেক্টিভ যুক্ত করতে চান। এটি করার জন্য, আপনি my-button.html ফাইলে uppercase ডিরেক্টিভ ব্যবহার করতে পারেন:

<template>
  <button uppercase.bind="buttonText">${buttonText}</button>
</template>

এখন, buttonText প্রপার্টির মান যখন পরিবর্তিত হবে, তখন সেটি uppercase ডিরেক্টিভ দ্বারা বড় হাতের অক্ষরে পরিবর্তিত হবে।

উপসংহার

Aurelia তে custom directives এবং template boundaries আপনাকে শক্তিশালী, রিইউজেবল কম্পোনেন্ট এবং ডিরেক্টিভ তৈরি করতে সহায়তা করে। Directives আপনাকে HTML এলিমেন্টগুলোর আচরণ কাস্টমাইজ করার সুযোগ দেয়, যেখানে template boundaries ব্যবহার করে আপনি কাস্টম কম্পোনেন্ট তৈরি করতে পারেন এবং সেগুলোকে বিভিন্ন টেমপ্লেটে রিইউজ করতে পারেন।

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