Nested Routes এবং Views ব্যবস্থাপনা

Framework7 এর Nested Routes এবং Views ফিচার ডেভেলপারদের একটি অ্যাপ্লিকেশনের পৃষ্ঠাগুলোর মধ্যে সহজে নেভিগেশন এবং কন্টেন্ট ব্যবস্থা করতে সহায়তা করে। Nested Routes মূলত এমন রাউটিং সিস্টেম যেখানে একটি পৃষ্ঠার ভিতরে অন্য পৃষ্ঠার রাউটিং ব্যবস্থাপনা করা যায়। Views ব্যবহৃত হয় অ্যাপ্লিকেশনে বিভিন্ন UI ভিউ ব্যবস্থাপনার জন্য।

Nested Routes কি?

Nested Routes হলো এমন একটি রাউটিং সিস্টেম যেখানে একাধিক স্তরের রাউটিং ব্যবস্থাপনা করা যায়। উদাহরণস্বরূপ, একটি "Settings" পৃষ্ঠার মধ্যে "Profile" এবং "Notifications" সাব-পৃষ্ঠাগুলো থাকতে পারে। Framework7 Nested Routes ব্যবহারের মাধ্যমে এটি সহজেই পরিচালনা করা যায়।

Nested Routes এর সুবিধা:

1. জটিল রাউটিং সিস্টেম পরিচালনা সহজ হয়।
2. কোড আরও গঠনমূলক এবং পুনর্ব্যবহারযোগ্য হয়।
3. প্রতিটি সাব-পেজ আলাদা ফাংশনালিটি নিয়ে কাজ করতে পারে।

Nested Routes কনফিগারেশন

Framework7 এ Nested Routes কনফিগার করতে routes অ্যারের মধ্যে সাব-রাউটস যোগ করতে হয়। নিচে একটি উদাহরণ দেওয়া হলো:

রাউট কনফিগার:

var app = new Framework7({
  root: '#app',
  routes: [
    {
      path: '/settings/',
      component: SettingsPage,
      routes: [
        {
          path: 'profile/',
          component: ProfilePage,
        },
        {
          path: 'notifications/',
          component: NotificationsPage,
        },
      ],
    },
  ],
});

ব্যাখ্যা:

1. /settings/ হলো মূল রাউট। এটি একটি প্যারেন্ট রাউট।
2. এর মধ্যে profile/ এবং notifications/ হলো সাব-রাউট।

Views ব্যবস্থাপনা

Framework7 এ Views হলো অ্যাপ্লিকেশনের বিভিন্ন অংশের জন্য আলাদা UI প্রদর্শনের ব্যবস্থা। প্রতিটি View আলাদা রাউট এবং কনটেন্ট পরিচালনা করতে পারে।

Views ব্যবহারের সুবিধা:

1. অ্যাপ্লিকেশনের বিভিন্ন সেকশন আলাদাভাবে পরিচালনা করা যায়।
2. আলাদা UI কনটেন্ট এবং লজিক সহজে হ্যান্ডেল করা যায়।
3. Multi-panel অ্যাপ্লিকেশনে Views বিশেষভাবে কার্যকর।

Views সেটআপ

Framework7 এ Views ব্যবহারের জন্য HTML এবং JavaScript কোড ব্যবহার করতে হয়।

HTML এ Views তৈরি:

<div id="app">
  <!-- Main View -->
  <div class="view view-main">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Main View</div>
        </div>
      </div>
      <div class="page-content">
        <p>Welcome to Main View!</p>
      </div>
    </div>
  </div>

  <!-- Secondary View -->
  <div class="view" id="secondary-view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Secondary View</div>
        </div>
      </div>
      <div class="page-content">
        <p>Welcome to Secondary View!</p>
      </div>
    </div>
  </div>
</div>

JavaScript এ Views কনফিগার করা:

var app = new Framework7({
  root: '#app',
  view: {
    pushState: true, // ব্রাউজার নেভিগেশন সমর্থন
  },
});

var mainView = app.views.create('.view-main', {
  url: '/',
});

var secondaryView = app.views.create('#secondary-view', {
  url: '/secondary/',
});

ব্যাখ্যা:

1. view-main: এটি প্রধান ভিউ। অ্যাপ্লিকেশনের মূল কনটেন্ট এখানে থাকে।
2. secondary-view: এটি একটি সেকেন্ডারি ভিউ, যেখানে আলাদা কনটেন্ট বা রাউট দেখা যাবে।

Nested Routes এবং Views একসাথে ব্যবহারের উদাহরণ

Nested Routes এবং Views একত্রে ব্যবহার করে আপনি একটি উন্নত অ্যাপ্লিকেশন তৈরি করতে পারেন। উদাহরণস্বরূপ:

HTML:

<div id="app">
  <div class="view view-main"></div>
  <div class="view" id="settings-view"></div>
</div>

JavaScript:

var app = new Framework7({
  root: '#app',
  routes: [
    {
      path: '/',
      component: HomePage,
    },
    {
      path: '/settings/',
      component: SettingsPage,
      routes: [
        {
          path: 'profile/',
          component: ProfilePage,
        },
        {
          path: 'notifications/',
          component: NotificationsPage,
        },
      ],
    },
  ],
});

var mainView = app.views.create('.view-main', {
  url: '/',
});

var settingsView = app.views.create('#settings-view', {
  url: '/settings/',
});

Nested Routes এবং Views Framework7 এর অন্যতম শক্তিশালী ফিচার যা জটিল অ্যাপ্লিকেশন গঠনের জন্য ব্যবহার করা যায়। Nested Routes দিয়ে একাধিক স্তরের রাউট পরিচালনা করা যায়, যেখানে Views বিভিন্ন UI এবং ফাংশনালিটি আলাদাভাবে হ্যান্ডেল করে। এগুলো ব্যবহার করে আপনি সহজে একটি মাল্টি-পেজ, মাল্টি-ভিউ অ্যাপ্লিকেশন তৈরি করতে পারবেন।