Responsive Layouts এবং Components

Ember.js একটি শক্তিশালী জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক, যা ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়ক। এটি components এবং layouts ব্যবহারের মাধ্যমে ইন্টারঅ্যাকটিভ এবং রেসপনসিভ ইউজার ইন্টারফেস (UI) তৈরি করতে সাহায্য করে। এই নিবন্ধে আমরা Responsive Layouts এবং Components তৈরি করার প্রক্রিয়া আলোচনা করব এবং কিভাবে Ember.js-এ এইগুলি ইন্টিগ্রেট করা যায়, তাও দেখব।

Ember.js-এ Responsive Layouts তৈরি করা

Responsive Layouts হল এমন লেআউট যা বিভিন্ন ডিভাইস এবং স্ক্রীন সাইজ অনুযায়ী অভিযোজিত হয় (যেমন মোবাইল, ট্যাবলেট, ডেস্কটপ ইত্যাদি)। একটি রেসপন্সিভ লেআউট তৈরি করতে CSS মিডিয়া কুয়েরি (media queries) এবং Ember কম্পোনেন্ট ব্যবহার করা হয়।

১. Media Queries ব্যবহার করা

Ember.js-এ রেসপন্সিভ লেআউট তৈরি করতে প্রথমে আপনাকে CSS মিডিয়া কুয়েরি ব্যবহার করতে হবে। উদাহরণস্বরূপ, আপনি একটি app/styles/app.css ফাইলে মিডিয়া কুয়েরি ব্যবহার করতে পারেন।

/* app/styles/app.css */

/* মোবাইল ডিভাইসে */
@media screen and (max-width: 600px) {
  .header {
    background-color: blue;
  }
  .sidebar {
    display: none;
  }
}

/* ট্যাবলেট এবং ডেস্কটপের জন্য */
@media screen and (min-width: 601px) {
  .header {
    background-color: green;
  }
  .sidebar {
    display: block;
  }
}

এখানে, আপনি header এবং sidebar ক্লাসে মিডিয়া কুয়েরি ব্যবহার করে রেসপন্সিভ স্টাইলিং করেছেন। যখন স্ক্রীন সাইজ 600px বা তার নিচে থাকবে, তখন sidebar লুকানো থাকবে এবং header এর ব্যাকগ্রাউন্ড রঙ ব্লু হবে। আর যখন স্ক্রীন সাইজ 601px বা তার বেশি হবে, তখন sidebar দৃশ্যমান হবে এবং header এর ব্যাকগ্রাউন্ড রঙ সবুজ হবে।

২. Responsive Components ব্যবহার করা

Ember কম্পোনেন্টগুলি কাস্টম ইউজার ইন্টারফেস (UI) তৈরি করতে ব্যবহৃত হয় এবং এই কম্পোনেন্টগুলির মাধ্যমে রেসপন্সিভ ডিজাইন সহজভাবে করা যায়। উদাহরণস্বরূপ, একটি রেসপন্সিভ ন্যাভিগেশন কম্পোনেন্ট তৈরি করা যাক:

// app/components/responsive-nav.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class ResponsiveNavComponent extends Component {
  isMobile = false;

  @action
  toggleMenu() {
    this.isMobile = !this.isMobile;
  }
}

এখানে, ResponsiveNavComponent নামক একটি কম্পোনেন্ট তৈরি করা হয়েছে, যার মাধ্যমে আপনি isMobile প্রপার্টি টগল করতে পারবেন এবং toggleMenu অ্যাকশন ব্যবহার করে ন্যাভিগেশন মেনু পরিবর্তন করতে পারবেন।

৩. Responsive Nav কম্পোনেন্টের টেমপ্লেট

<!-- app/templates/components/responsive-nav.hbs -->
<nav>
  <button {{on "click" this.toggleMenu}}>☰</button>
  <ul class={{if this.isMobile "mobile-menu" "desktop-menu"}}>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

এখানে, ul ট্যাগে একটি class দেওয়া হয়েছে, যেটি isMobile প্রপার্টি অনুযায়ী পরিবর্তিত হবে। যদি isMobile সত্যি হয়, তাহলে এটি mobile-menu ক্লাস নেবে, আর না হলে desktop-menu ক্লাস নেবে।

৪. CSS ব্যবহার করা

এখন, app/styles/app.css ফাইলে রেসপন্সিভ CSS স্টাইলিং তৈরি করা যাক:

/* app/styles/app.css */

/* মোবাইল মেনু */
.mobile-menu {
  display: block;
}

/* ডেস্কটপ মেনু */
.desktop-menu {
  display: none;
}

/* মোবাইল স্ক্রীন সাইজে ন্যাভিগেশন মেনু */
@media screen and (max-width: 600px) {
  .mobile-menu {
    display: block;
  }
  .desktop-menu {
    display: none;
  }
}

/* ডেস্কটপ স্ক্রীনে ন্যাভিগেশন মেনু */
@media screen and (min-width: 601px) {
  .mobile-menu {
    display: none;
  }
  .desktop-menu {
    display: block;
  }
}

এখানে, মিডিয়া কুয়েরি ব্যবহার করে mobile-menu এবং desktop-menu কাস্টম ক্লাসগুলির জন্য আলাদা স্টাইল দেওয়া হয়েছে।

Ember.js-এ Components তৈরি করা

Ember Components হল UI এর পুনঃব্যবহারযোগ্য অংশ যা অ্যাপ্লিকেশন ফ্রন্টএন্ডের বিভিন্ন জায়গায় ব্যবহার করা যায়। Ember-এ কম্পোনেন্ট তৈরি করার পদ্ধতি কিছুটা ভিন্ন এবং এটি মূলত দুটি অংশে বিভক্ত:

1. JavaScript কোড: কম্পোনেন্টের লজিক।
2. Handlebars টেমপ্লেট: কম্পোনেন্টের UI।

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

Ember CLI ব্যবহার করে একটি নতুন কম্পোনেন্ট তৈরি করা যায়:

ember generate component my-component

এটি দুটি ফাইল তৈরি করবে:

1. app/components/my-component.js (কম্পোনেন্টের লজিক)
2. app/templates/components/my-component.hbs (কম্পোনেন্টের টেমপ্লেট)

JavaScript কোড (my-component.js)

// app/components/my-component.js
import Component from '@glimmer/component';

export default class MyComponent extends Component {
  greeting = 'Hello, Ember!';

  changeGreeting() {
    this.greeting = 'Hello, World!';
  }
}

এখানে, greeting একটি প্রপার্টি এবং changeGreeting একটি মেথড, যা কম্পোনেন্টের ভিতরের ডেটা পরিবর্তন করবে।

Handlebars টেমপ্লেট (my-component.hbs)

<!-- app/templates/components/my-component.hbs -->
<h1>{{this.greeting}}</h1>
<button {{on "click" this.changeGreeting}}>Change Greeting</button>

এখানে, greeting কম্পোনেন্টের প্রপার্টি এবং changeGreeting মেথডটি টেমপ্লেটের সাথে ইন্টারঅ্যাক্ট করবে।

Responsive Layouts এবং Components Ember.js-এ অত্যন্ত গুরুত্বপূর্ণ ফিচার যা অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) তৈরি করার সময় ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। Components পুনঃব্যবহারযোগ্য UI উপাদান তৈরি করার জন্য ব্যবহৃত হয় এবং Responsive Layouts ব্যবহার করে অ্যাপ্লিকেশন বিভিন্ন ডিভাইসের স্ক্রীন সাইজ অনুযায়ী অভিযোজিত হয়। Ember.js-এ এই দুটি ফিচার ব্যবহার করে আপনি আরও মডুলার এবং ডাইনামিক অ্যাপ্লিকেশন তৈরি করতে পারবেন।