app-route এবং iron-pages ব্যবহার করে Routing তৈরি

Polymer Framework-এ app-route এবং iron-pages ব্যবহার করে Routing তৈরি করা একটি সহজ এবং কার্যকর পদ্ধতি। Polymer একটি Single Page Application (SPA) তৈরির জন্য এই কম্পোনেন্টগুলি প্রদান করে, যেখানে ব্যবহারকারীরা এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় যেতে পারেন, এবং পুরো অ্যাপ্লিকেশনটি এক্সপেরিয়েন্সের মধ্যে থাকে।

এখানে app-route এবং iron-pages ব্যবহার করে ওয়েব অ্যাপ্লিকেশনে Routing তৈরি করার পদ্ধতি দেওয়া হলো।

1. app-route:

app-route কম্পোনেন্টটি Polymer অ্যাপ্লিকেশনের রাউটিং লজিক পরিচালনা করে। এটি URL পাথ এবং কোয়েরি প্যারামিটারগুলি ট্র্যাক করে এবং উপযুক্ত কন্টেন্ট প্রদর্শন করার জন্য কম্পোনেন্ট বা ভিউ নির্বাচন করে।

2. iron-pages:

iron-pages কম্পোনেন্টটি Polymer-এর জন্য একটি পেজ ম্যানেজার হিসাবে কাজ করে, যা সঠিক পৃষ্ঠা (পেজ) রেন্ডার করতে ব্যবহৃত হয়। এটি একটি কনটেইনার উপাদান হিসেবে কাজ করে এবং তার ভিতরে বিভিন্ন পৃষ্ঠা থাকতে পারে, যেখানে প্রতিটি পৃষ্ঠা রাউটিংয়ের মাধ্যমে প্রদর্শিত হবে।

উদাহরণ:

ধরা যাক, একটি Polymer অ্যাপ্লিকেশনে তিনটি পৃষ্ঠা (Home, About, Contact) রয়েছে এবং আমাদের app-route এবং iron-pages ব্যবহার করে এগুলোর মধ্যে রাউটিং করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো:

<dom-module id="routing-example">
  <template>
    <!-- app-location is used to manage the app's URL -->
    <app-location route="{{route}}"></app-location>

    <!-- app-route handles routing based on URL changes -->
    <app-route 
      route="{{route}}" 
      pattern="/:page" 
      data="{{routeData}}" 
      tail="{{tail}}"></app-route>

    <!-- iron-pages is used to display the right page based on the route -->
    <iron-pages selected="[[currentPage]]">
      <div id="home">Home Page</div>
      <div id="about">About Page</div>
      <div id="contact">Contact Page</div>
    </iron-pages>
  </template>

  <script>
    Polymer({
      is: 'routing-example',

      properties: {
        route: Object, // Holds the current route
        routeData: Object, // Holds the data from the current route
        tail: String, // Holds the remaining part of the URL
        currentPage: {
          type: String,
          value: 'home', // Default page to be displayed
          observer: '_routeChanged'
        }
      },

      _routeChanged: function() {
        // This observer listens to changes in the current route data
        const page = this.routeData.page;
        if (page === 'about') {
          this.currentPage = 'about';
        } else if (page === 'contact') {
          this.currentPage = 'contact';
        } else {
          this.currentPage = 'home';
        }
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

1. app-location: এই কম্পোনেন্টটি অ্যাপ্লিকেশনের URL ট্র্যাক করে এবং route ডেটা বাইন্ডিংয়ের মাধ্যমে পেজ রাউটিং পরিচালনা করে।
2. app-route: এটি রাউটিং লজিক পরিচালনা করে। pattern="/:page" দিয়ে আমরা URL পাথের মধ্যে একটি প্যারামিটার (যেমন /home, /about, /contact) ধারণ করছি। যখন ব্যবহারকারী URL পরিবর্তন করে, তখন এটি routeData ডেটা আপডেট করে এবং _routeChanged মেথডে পাঠায়।
3. iron-pages: এটি পেজ কন্টেন্টটি ম্যানেজ করে। selected="[[currentPage]]" প্রপার্টি দিয়ে, এটি সঠিক পৃষ্ঠা নির্বাচন করে, যেমন home, about, বা contact। currentPage মান অনুযায়ী এটি সঠিক কন্টেন্ট প্রদর্শন করবে।
4. _routeChanged(): এই ফাংশনটি URL পাথের উপর ভিত্তি করে কনটেন্ট পরিবর্তন করতে ব্যবহার করা হয়। এটি routeData.page (যেমন: /home, /about, /contact) এর ভিত্তিতে currentPage আপডেট করে, যা পরে iron-pages দ্বারা ব্যবহৃত হয়।

URL পাথ উদাহরণ:

• /home: হোম পৃষ্ঠা প্রদর্শন করবে।
• /about: অ্যাবাউট পৃষ্ঠা প্রদর্শন করবে।
• /contact: কন্টাক্ট পৃষ্ঠা প্রদর্শন করবে।

app-route এবং iron-pages ব্যবহার করে Polymer ফ্রেমওয়ার্কে একটি রেসপন্সিভ রাউটিং সিস্টেম তৈরি করা সম্ভব। এই কম্পোনেন্টগুলি একত্রে কাজ করে অ্যাপ্লিকেশনের বিভিন্ন পেজের মধ্যে সঠিক রাউটিং এবং ভিউ পরিবর্তন করার জন্য। Polymer দিয়ে SPA (Single Page Application) তৈরি করার সময় এই ধরনের রাউটিং ব্যবহার করলে কোড আরও মডুলার এবং কার্যকরী হয়।