কম্পোনেন্ট কম্পোজিশন এবং ইন্ট্রোডাকশন টু টেমপ্লেটস

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

এছাড়া, Aurelia Templates হল HTML টেমপ্লেটস, যা ডেটা বাইন্ডিং এবং UI কম্পোনেন্টের কার্যক্রমের সাথে ইন্টিগ্রেট করে অ্যাপ্লিকেশনের ভিউ তৈরি করে। টেমপ্লেটস এবং কম্পোনেন্ট কম্পোজিশন ব্যবহার করে আপনি অর্গানাইজড এবং ইফিশিয়েন্ট অ্যাপ্লিকেশন তৈরি করতে পারবেন।

১. কম্পোনেন্ট কম্পোজিশন (Component Composition)

Aurelia এর কম্পোনেন্ট কম্পোজিশন আপনাকে একাধিক কম্পোনেন্টকে একত্রিত করতে দেয়, যাতে একটি বড় অ্যাপ্লিকেশন তৈরি করা যায়। কম্পোনেন্ট সাধারণত একটি HTML টেমপ্লেট (UI), একটি জাভাস্ক্রিপ্ট/টাইপস্ক্রিপ্ট ফাইল (ভিউমডেল) এবং স্টাইলশিট (CSS বা SCSS) নিয়ে গঠিত হয়।

কম্পোনেন্ট তৈরি করা

Aurelia CLI এর মাধ্যমে নতুন কম্পোনেন্ট তৈরি করতে, কমান্ডটি ব্যবহার করুন:

au generate component component-name

এটি আপনার জন্য একটি নতুন কম্পোনেন্ট ফোল্ডার তৈরি করবে এবং এতে প্রয়োজনীয় HTML, CSS এবং JavaScript/TypeScript ফাইলগুলো তৈরি করবে।

কম্পোনেন্টের গঠন

একটি সাধারণ Aurelia কম্পোনেন্টের গঠন হল:

• component-name.html: কম্পোনেন্টের HTML টেমপ্লেট।
• component-name.js: কম্পোনেন্টের ভিউমডেল (যেখানে ফাংশন এবং ডেটা থাকে)।
• component-name.css: কম্পোনেন্টের জন্য কাস্টম স্টাইল।

কম্পোনেন্টে ডেটা বাইন্ডিং

Aurelia টেমপ্লেটের মাধ্যমে ডেটা বাইন্ডিং সাপোর্ট করে। উদাহরণস্বরূপ, যদি আপনি একটি ডেটা মডেলকে UI-তে বাইন্ড করতে চান, তবে টেমপ্লেটে {} ব্যবহার করে ডেটা দেখাতে পারেন:

<template>
  <h1>${message}</h1>
</template>

এবং component-name.js ফাইলে, এই message ভ্যারিয়েবলটি ডিফাইন করতে হবে:

export class ComponentName {
  message = 'Hello from Aurelia!';
}

কম্পোনেন্ট ব্যবহার করা

Aurelia এর component composition এর মাধ্যমে আপনি একটি কম্পোনেন্টের ভিতরে অন্য কম্পোনেন্ট ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

app.html:

<template>
  <require from="./components/my-component"></require>
  <my-component></my-component>
</template>

এখানে <require> ট্যাগটি অন্য কম্পোনেন্টে রেফারেন্স করে এবং <my-component> ট্যাগটি সেই কম্পোনেন্টকে অ্যাপ্লিকেশনে অন্তর্ভুক্ত করে।

২. টেমপ্লেটস (Templates)

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

ডেটা বাইন্ডিং টেমপ্লেটের মাধ্যমে

Aurelia-তে ডেটা বাইন্ডিং খুবই শক্তিশালী। এটি two-way binding, one-way binding, এবং event binding সাপোর্ট করে।

• One-Way Data Binding: ডেটা একদিকে ভিউতে প্রবাহিত হয়। উদাহরণ:

  <template>
    <h1>${message}</h1>
  </template>
  

  এখানে, message ভ্যারিয়েবলটি one-wayভাবে h1 ট্যাগে প্রদর্শিত হবে।

• Two-Way Data Binding: যখন ভিউতে ডেটা পরিবর্তিত হয়, তখন সেটি মডেলেও আপডেট হবে। এবং যখন মডেলে ডেটা পরিবর্তিত হয়, তখন ভিউও আপডেট হবে। উদাহরণ:

  <template>
    <input value.bind="name" />
    <h1>Hello, ${name}</h1>
  </template>
  

  এখানে, আপনি ইনপুট ফিল্ডে যে নাম লিখবেন তা সোজা name ভ্যারিয়েবলে প্রবাহিত হবে, এবং সেই নামটি h1 ট্যাগে প্রদর্শিত হবে।

• Event Binding: আপনি HTML এলিমেন্টে বিভিন্ন ইভেন্টের সাথে ফাংশন অ্যাসাইন করতে পারেন। উদাহরণ:

  <template>
    <button click.delegate="sayHello()">Say Hello</button>
  </template>
  

  component-name.js:

  export class ComponentName {
    sayHello() {
      alert('Hello, Aurelia!');
    }
  }
  

  এখানে, বাটন ক্লিক করলে sayHello() ফাংশনটি কল হবে এবং একটি এলার্ট দেখাবে।

৩. লুপিং এবং কন্ডিশনাল রেন্ডারিং

Aurelia টেমপ্লেট আপনাকে লুপিং এবং কন্ডিশনাল রেন্ডারিং করতে সাহায্য করে।

• অ্যারেতে লুপিং:

  <template>
    <ul>
      <li repeat.for="item of items">${item}</li>
    </ul>
  </template>
  

  component-name.js:

  export class ComponentName {
    items = ['Apple', 'Banana', 'Orange'];
  }
  

  এখানে, items অ্যারের প্রতিটি আইটেমের জন্য একটি li এলিমেন্ট রেন্ডার হবে।

• কন্ডিশনাল রেন্ডারিং:

  <template>
    <div if.bind="isVisible">This is visible only if isVisible is true.</div>
  </template>
  

  component-name.js:

  export class ComponentName {
    isVisible = true;
  }
  

  এখানে, isVisible যদি true হয়, তবে <div> ট্যাগটি রেন্ডার হবে।

৪. কম্পোনেন্ট স্টাইলিং

Aurelia ফ্রেমওয়ার্কে কম্পোনেন্ট স্তরে স্টাইলিং করা সম্ভব। আপনি প্রতিটি কম্পোনেন্টের জন্য আলাদা CSS বা SCSS ফাইল তৈরি করতে পারেন।

উদাহরণস্বরূপ, component-name.css ফাইলে আপনি কম্পোনেন্টের জন্য স্টাইল লিখতে পারেন:

h1 {
  color: blue;
}

উপসংহার

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