Polymer Framework-এর জন্য Client-side Routing এমন একটি পদ্ধতি যা আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে (UI) পৃষ্ঠাগুলি (pages) লোড করার জন্য ক্লায়েন্ট সাইডে শুধুমাত্র জাভাস্ক্রিপ্ট এবং HTML ব্যবহার করে URL হ্যান্ডলিং এবং নেভিগেশন পরিচালনা করে। এর মাধ্যমে ওয়েব অ্যাপ্লিকেশনের নেভিগেশন দ্রুত হয় এবং সারা পৃষ্ঠা পুনঃলোড না করে কেবল প্রয়োজনীয় উপাদানগুলি পরিবর্তন করা হয়।
Polymer Framework মূলত একটি UI ফ্রেমওয়ার্ক হলেও, ক্লায়েন্ট-সাইড রাউটিং পরিচালনার জন্য আপনি সাধারণত <iron-router> বা @polymer/app-layout লাইব্রেরি ব্যবহার করতে পারেন। Polymer নিজেই ডিফল্টভাবে কোনো রাউটিং সিস্টেম অফার না করলেও, রাউটিংয়ের জন্য সঠিক টুলস ব্যবহৃত হলে খুব সহজেই এটি সম্পাদন করা সম্ভব।
১. Polymer-এর জন্য রাউটিং ব্যবস্থাপনা:
Polymer Framework এ ক্লায়েন্ট সাইড রাউটিং পরিচালনার জন্য কয়েকটি লাইব্রেরি এবং টুলস রয়েছে। এখানে কয়েকটি জনপ্রিয় পদ্ধতি তুলে ধরা হল:
১.১ Iron Router:
Polymer-এ Iron Router একটি জনপ্রিয় রাউটিং লাইব্রেরি যা URL পাথ অনুযায়ী পেজ এবং উপাদান রেন্ডার করতে সাহায্য করে। এটি Polymer অ্যাপ্লিকেশনগুলির জন্য ইন্টারনাল রাউটিং হ্যান্ডল করতে ব্যবহৃত হয়।
Iron Router ব্যবহার করার জন্য আপনাকে প্রথমে লাইব্রেরিটি ইনস্টল করতে হবে:
<head>
<script src="https://cdn.jsdelivr.net/npm/@polymer/iron-router/iron-router.js"></script>
</head>
এরপর আপনি রাউটার কনফিগার করতে পারেন:
<dom-module id="app-router">
<template>
<iron-router id="router">
<iron-route path="/" page="home-page"></iron-route>
<iron-route path="/about" page="about-page"></iron-route>
<iron-route path="/contact" page="contact-page"></iron-route>
</iron-router>
</template>
<script>
class AppRouter extends Polymer.Element {
static get is() { return 'app-router'; }
}
customElements.define(AppRouter.is, AppRouter);
</script>
</dom-module>
এখানে, <iron-router> ট্যাগটি তিনটি রাউট কনফিগার করেছে: /, /about, এবং /contact, যেগুলি যথাক্রমে home-page, about-page, এবং contact-page উপাদানগুলিকে রেন্ডার করবে।
২. URL প্যারামিটার ব্যবহার:
আপনি রাউটিংয়ের সাথে URL প্যারামিটারও ব্যবহার করতে পারেন। যেমন, একটি নির্দিষ্ট পৃষ্ঠায় ডাইনামিক কনটেন্ট লোড করার জন্য URL প্যারামিটার হ্যান্ডেল করা যেতে পারে।
<iron-route path="/product/:productId" page="product-page"></iron-route>
এখানে, :productId হল একটি প্যারামিটার যা URL থেকে গ্রহন করা হবে। আপনি এই প্যারামিটারকে পরবর্তী পেজে ব্যবহার করতে পারেন।
connectedCallback() {
super.connectedCallback();
let productId = this._router.currentRoute.params.productId;
console.log('Product ID:', productId);
}
৩. App Layout:
Polymer-এ @polymer/app-layout প্যাকেজটি একাধিক পেজ এবং অ্যাপ্লিকেশন লেআউট তৈরির জন্য সাহায্য করে। এটি একটি হালকা ও সহজ পদ্ধতি যা আপনার অ্যাপ্লিকেশনে কনটেন্ট এবং নেভিগেশন লেআউট তৈরি করতে সহায়তা করে।
@polymer/app-layout ব্যবহারের জন্য প্রথমে লাইব্রেরি ইনস্টল করতে হবে:
<head>
<script src="https://cdn.jsdelivr.net/npm/@polymer/app-layout/app-layout.js"></script>
</head>
এরপর একটি সিম্পল লেআউট তৈরি করা যেতে পারে যেখানে নেভিগেশন এবং পেজ কন্টেন্ট আলাদা থাকে:
<dom-module id="main-app">
<template>
<app-drawer-layout>
<app-drawer>
<paper-listbox>
<paper-item on-click="_navigateHome">Home</paper-item>
<paper-item on-click="_navigateAbout">About</paper-item>
<paper-item on-click="_navigateContact">Contact</paper-item>
</paper-listbox>
</app-drawer>
<app-drawer-main>
<iron-router>
<iron-route path="/" page="home-page"></iron-route>
<iron-route path="/about" page="about-page"></iron-route>
<iron-route path="/contact" page="contact-page"></iron-route>
</iron-router>
</app-drawer-main>
</app-drawer-layout>
</template>
<script>
class MainApp extends Polymer.Element {
static get is() { return 'main-app'; }
_navigateHome() {
this.$.router.setRoute('/home');
}
_navigateAbout() {
this.$.router.setRoute('/about');
}
_navigateContact() {
this.$.router.setRoute('/contact');
}
}
customElements.define(MainApp.is, MainApp);
</script>
</dom-module>
এখানে, একটি ড্রয়ার লেআউট তৈরি করা হয়েছে যা ইউজারকে ভিন্ন পেজের মধ্যে নেভিগেট করতে সহায়তা করবে। iron-router রাউটিং লাইব্রেরি ব্যবহার করা হয়েছে এবং প্রতিটি নেভিগেশন আইটেমে _navigate মেথড কল করা হচ্ছে।
৪. History Management:
Polymer ক্লায়েন্ট সাইড রাউটিং ব্যবস্থায় History API ব্যবহারের মাধ্যমে ব্রাউজারের ইতিহাস (back, forward, reload) পরিচালনা করা যেতে পারে। Polymer এবং iron-router এর সাথে আপনি URL পরিবর্তনের পর ব্রাউজারের ইতিহাস অ্যাক্সেস করতে পারবেন।
this._router.history.pushState({}, 'New Page', '/newpage');
এটি URL পরিবর্তন করে এবং ব্রাউজার ইতিহাসে নতুন স্টেট অ্যাড করে।
Polymer Framework-এ Client-side Routing পরিচালনা করার জন্য iron-router এবং @polymer/app-layout একটি শক্তিশালী সমাধান প্রদান করে। এগুলি ক্লায়েন্ট সাইড নেভিগেশন সহজতর করে এবং অ্যাপ্লিকেশনকে এক পৃষ্ঠা অ্যাপ্লিকেশন (SPA) হিসাবে তৈরি করতে সহায়তা করে। Polymer Framework-এ এই রাউটিং সিস্টেমটি সহজে ইন্টিগ্রেট করা যায় এবং এটি অ্যাপ্লিকেশনের ইউজার অভিজ্ঞতা উন্নত করতে সাহায্য করে।
Read more
