কাস্টম HTML এলিমেন্ট এবং অ্যাট্রিবিউটস তৈরি করা

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

কাস্টম HTML এলিমেন্ট তৈরি করা

Aurelia-তে কাস্টম HTML এলিমেন্ট তৈরি করা অত্যন্ত সহজ। কাস্টম এলিমেন্ট তৈরি করতে, আপনি সাধারণত একটি <template> ট্যাগের মধ্যে HTML কন্টেন্ট এবং একটি JavaScript ক্লাস ব্যবহার করবেন যা সেই কাস্টম এলিমেন্টের কার্যক্রম (লজিক) ধারণ করবে।

কাস্টম HTML এলিমেন্ট তৈরি করার ধাপ

1. কাস্টম এলিমেন্টের জন্য একটি নতুন ফাইল তৈরি করুন:

   উদাহরণস্বরূপ, my-element.html এবং my-element.js ফাইল তৈরি করুন।

2. HTML টেমপ্লেট তৈরি করুন (my-element.html):

   <template>
     <h2>Welcome to my custom element!</h2>
     <p>This is a custom element in Aurelia.</p>
     <button click.delegate="changeMessage()">Click me</button>
   </template>
   

3. JavaScript ক্লাস তৈরি করুন (my-element.js):

   export class MyElement {
     changeMessage() {
       alert("Button clicked in custom element!");
     }
   }
   

4. কাস্টম এলিমেন্টটি অ্যাপ্লিকেশনে ব্যবহার করুন:

   <template>
     <my-element></my-element>
   </template>
   

   এখন, আপনার কাস্টম এলিমেন্ট <my-element> আপনার অ্যাপ্লিকেশনে কাজ করবে এবং আপনি changeMessage() মেথড কল করে এলিমেন্টের বাটনে ক্লিক করলে এলার্ট দেখতে পাবেন।

কাস্টম HTML অ্যাট্রিবিউট তৈরি করা

Aurelia এর কাস্টম অ্যাট্রিবিউটসের মাধ্যমে, আপনি HTML এলিমেন্টের বৈশিষ্ট্য এবং আচরণ পরিবর্তন করতে পারেন। কাস্টম অ্যাট্রিবিউট তৈরি করতে আপনাকে একটি @bindable ডেকোরেটর ব্যবহার করতে হবে, যা অ্যাট্রিবিউটের সাথে সংযুক্ত ডেটাকে বাইন্ড করতে সাহায্য করবে।

কাস্টম অ্যাট্রিবিউট তৈরি করার ধাপ

1. কাস্টম অ্যাট্রিবিউটের জন্য একটি নতুন ফাইল তৈরি করুন:

   উদাহরণস্বরূপ, color-change.js এবং color-change.html ফাইল তৈরি করুন।

2. JavaScript ক্লাস তৈরি করুন (color-change.js):

   import {bindable} from 'aurelia-framework';
   
   export class ColorChange {
     @bindable color = 'red';  // default color
   
     changeColor() {
       document.body.style.backgroundColor = this.color;
     }
   }
   

3. HTML টেমপ্লেট তৈরি করুন (color-change.html):

   <template>
     <button click.delegate="changeColor()">Change Background Color</button>
     <input type="text" value.bind="color" placeholder="Enter a color">
   </template>
   

4. এটি অ্যাপ্লিকেশনে ব্যবহার করুন:

   আপনার অ্যাপ্লিকেশনে <color-change> এলিমেন্ট ব্যবহার করতে পারেন:

   <template>
     <color-change color="blue"></color-change>
   </template>
   

   এখন, আপনি যখন color="blue" অ্যাট্রিবিউটটি সেট করবেন, তখন ক্লিক করলে পেজের ব্যাকগ্রাউন্ড ব্লু হয়ে যাবে। আপনি ইনপুট ফিল্ডে অন্য কোনো রঙের নাম লিখে তা পরিবর্তন করতে পারবেন।

কাস্টম অ্যাট্রিবিউট এবং এলিমেন্টে ডেটা বাইন্ডিং

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

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

ধরা যাক, আপনি একটি কাস্টম এলিমেন্ট তৈরি করেছেন যা কোনো সাপোর্ট ম্যাসেজ দেখায় এবং সেটি বাইন্ড করা হয়।

<template>
  <h3>${message}</h3>
  <button click.delegate="changeMessage()">Change Message</button>
</template>

export class MessageBox {
  message = "Welcome to Aurelia";

  changeMessage() {
    this.message = "Message has been changed!";
  }
}

এখানে, message ভ্যারিয়েবলটি UI-তে বাইন্ড করা হয়েছে এবং button ক্লিক করলে changeMessage() ফাংশন কল হবে, যা message ভ্যালু পরিবর্তন করবে।

কাস্টম অ্যাট্রিবিউটের কনফিগারেশন

Aurelia এর কাস্টম অ্যাট্রিবিউট বা কাস্টম এলিমেন্টগুলোর জন্য bindable ডেকোরেটরের মাধ্যমে ইনপুট প্যারামিটার নির্ধারণ করা হয়। আপনি অ্যাট্রিবিউটের মাধ্যমে অ্যাপ্লিকেশনের আচরণ নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: কাস্টম অ্যাট্রিবিউটের মাধ্যমে স্টাইল পরিবর্তন

import {bindable} from 'aurelia-framework';

export class StyleChange {
  @bindable color = 'green';
  @bindable size = '16px';

  changeStyle() {
    document.body.style.color = this.color;
    document.body.style.fontSize = this.size;
  }
}

<template>
  <button click.delegate="changeStyle()">Change Text Style</button>
  <input type="text" value.bind="color" placeholder="Enter text color">
  <input type="text" value.bind="size" placeholder="Enter font size">
</template>

এখন আপনি কাস্টম অ্যাট্রিবিউট দিয়ে টেক্সটের রঙ এবং ফন্ট সাইজ পরিবর্তন করতে পারবেন। color এবং size অ্যাট্রিবিউটগুলি bindable হয়ে উঠেছে, এবং আপনি যখন ইনপুটের মান পরিবর্তন করবেন, তখন সেই পরিবর্তন UI তে প্রতিফলিত হবে।

উপসংহার

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