Web Development Framework7 Routes এবং Navigation গাইড ও নোট

Framework7 অ্যাপ্লিকেশনের মধ্যে Routes এবং Navigation পরিচালনার জন্য একটি শক্তিশালী রাউটিং সিস্টেম সরবরাহ করে। এটি আপনাকে অ্যাপ্লিকেশনের বিভিন্ন পৃষ্ঠা এবং উপাদানগুলোর মধ্যে সহজে নেভিগেশন তৈরি করতে সাহায্য করে। Framework7 রাউটিং সিস্টেম SPA (Single Page Application) তৈরির জন্য আদর্শ।

Routes কী?

Routes হলো একটি পথ নির্দেশিকা (Path Mapping), যা URL এবং পৃষ্ঠার মধ্যে সম্পর্ক নির্ধারণ করে। Framework7 এ, রাউটিং ব্যবস্থাপনার মাধ্যমে আপনি পৃষ্ঠার ডেটা লোড করা, টেমপ্লেট ব্যবহার করা, বা নির্দিষ্ট কার্যক্রম সম্পাদন করতে পারেন।

Routes এর মূল বৈশিষ্ট্য:

1. ডায়নামিক রাউটিং: ডায়নামিক প্যারামিটার পাস করা যায়।
2. টেমপ্লেট রাউটিং: পৃষ্ঠাগুলোর জন্য টেমপ্লেট ব্যবহার করা।
3. AJAX রাউটিং: এক্সটার্নাল ফাইল বা ডেটা লোড করা।
4. মডুলার রাউটিং: অ্যাপ্লিকেশনের প্রতিটি অংশে আলাদা রাউট সেট করা।

Routes কনফিগারেশন

Framework7 এ Routes কনফিগার করা সহজ। পৃষ্ঠাগুলোর জন্য Routes ডিফাইন করতে হবে routes অ্যারে ব্যবহার করে।

Routes ডিফাইন করার উদাহরণ:

var app = new Framework7({
  root: '#app', // অ্যাপের মূল ডিভ
  routes: [
    {
      path: '/home/', // রুটের পাথ
      url: './pages/home.html', // পৃষ্ঠার ফাইল
    },
    {
      path: '/about/',
      url: './pages/about.html',
    },
    {
      path: '/contact/',
      url: './pages/contact.html',
    },
  ],
});

উপরে, /home/, /about/ এবং /contact/ রুটগুলো ডিফাইন করা হয়েছে। প্রতিটি রুট নির্দিষ্ট HTML ফাইল লোড করবে।

Navigation

Framework7 এর Navigation সিস্টেম পৃষ্ঠাগুলোর মধ্যে মসৃণ নেভিগেশন তৈরি করে। এটি ব্যবহারকারীকে অ্যাপের বিভিন্ন অংশ এক্সপ্লোর করতে দেয়।

Navigation তৈরি করা

Navigation তৈরি করতে Link ব্যবহার করতে হবে, যেখানে href অ্যাট্রিবিউটে রুট পাথ উল্লেখ করতে হবে।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <a href="/home/" class="item-link">Home</a>
    </li>
    <li>
      <a href="/about/" class="item-link">About</a>
    </li>
    <li>
      <a href="/contact/" class="item-link">Contact</a>
    </li>
  </ul>
</div>

উপরের লিস্টে প্রতিটি লিংক পাথ অনুযায়ী পৃষ্ঠায় নেভিগেট করবে।

ডায়নামিক Routes

ডায়নামিক Routes ব্যবহার করে URL থেকে প্যারামিটার পাস করা যায় এবং পৃষ্ঠায় ডেটা লোড করা সম্ভব।

ডায়নামিক Route এর উদাহরণ:

routes: [
  {
    path: '/user/:userId/',
    url: './pages/user.html',
  },
],

এখানে :userId হলো ডায়নামিক প্যারামিটার। /user/123/ পাথ ব্যবহার করলে 123 পৃষ্ঠায় পাঠানো হবে।

ডায়নামিক ডেটা অ্যাক্সেস:

page অবজেক্টের মাধ্যমে ডায়নামিক ডেটা অ্যাক্সেস করা যায়।

উদাহরণ:

on: {
  pageInit: function (e, page) {
    console.log(page.route.params.userId); // ডায়নামিক প্যারামিটার
  },
}

টেমপ্লেট রাউটিং

Framework7 এ টেমপ্লেট রাউটিং ব্যবহার করে পৃষ্ঠা লোড করা সম্ভব। এটি ডাইনামিক কন্টেন্ট লোড করার জন্য কার্যকর।

টেমপ্লেট রাউটিং উদাহরণ:

routes: [
  {
    path: '/profile/',
    template: `
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">Profile</div>
          </div>
        </div>
        <div class="page-content">
          <p>Welcome to the Profile Page!</p>
        </div>
      </div>
    `,
  },
],

এখানে template ব্যবহার করে সরাসরি HTML কোড পৃষ্ঠায় লোড করা হয়েছে।

AJAX Routes

AJAX ব্যবহার করে এক্সটার্নাল ডেটা বা HTML ফাইল লোড করা সম্ভব।

AJAX Routes উদাহরণ:

routes: [
  {
    path: '/data/',
    async: function (routeTo, routeFrom, resolve, reject) {
      // AJAX কল
      app.request.json('https://api.example.com/data', function (data) {
        resolve({
          component: `
            <div class="page">
              <div class="navbar">
                <div class="navbar-inner">
                  <div class="title">Data Page</div>
                </div>
              </div>
              <div class="page-content">
                <p>${data.message}</p>
              </div>
            </div>
          `,
        });
      });
    },
  },
],

Framework7 এর রাউটিং ব্যবস্থার সুবিধা

1. সহজ ইমপ্লিমেন্টেশন: HTML ফাইল বা ডাইনামিক টেমপ্লেট সরাসরি লোড করা যায়।
2. AJAX এবং ডায়নামিক ডেটা সাপোর্ট: API থেকে ডেটা নিয়ে পৃষ্ঠায় দেখানো সম্ভব।
3. মডুলার ডিজাইন: প্রতিটি রুট আলাদা, যা বড় অ্যাপ্লিকেশন তৈরি করা সহজ করে।
4. SPA সমর্থন: একাধিক পৃষ্ঠার জন্য ব্রাউজার রিলোডের প্রয়োজন হয় না।

Framework7 Routes এবং Navigation সিস্টেম ব্যবহার করে ডেভেলপাররা দ্রুত এবং কার্যকরভাবে অ্যাপ্লিকেশন তৈরি করতে পারেন। এটি পৃষ্ঠাগুলোর মধ্যে নেভিগেশন এবং ডেটা লোডিংকে সহজ করে, যা একটি উন্নত ইউজার অভিজ্ঞতা নিশ্চিত করে।

Routes কী?

Routes হলো Framework7-এ ব্যবহৃত একটি সিস্টেম যা অ্যাপ্লিকেশনের বিভিন্ন পৃষ্ঠার (pages) মধ্যে নেভিগেশন পরিচালনা করতে সাহায্য করে। এটি মূলত URL এবং তার সাথে সম্পর্কিত পৃষ্ঠা বা উপাদানগুলোর মধ্যে একটি সংযোগ তৈরি করে। Framework7-এর Routes সিস্টেম ডেভেলপারদের জন্য সহজ এবং ব্যবহারবান্ধব, যা অ্যাপ্লিকেশনের মধ্যে পৃষ্ঠা লোডিং এবং নেভিগেশন পরিচালনা করে।

Routes এর উপাদান

Routes সাধারণত একটি জাভাস্ক্রিপ্ট অবজেক্ট আকারে ডিফাইন করা হয়, যেখানে প্রতিটি Route এর জন্য একটি নির্দিষ্ট URL এবং তার সাথে সম্পর্কিত পৃষ্ঠার তথ্য থাকে।

একটি Route এর গঠন:

routes: [
  {
    path: '/about/',
    url: './pages/about.html',
  },
  {
    path: '/contact/',
    component: ContactPage,
  },
]

গুরুত্বপূর্ণ ফিল্ড:

• path: URL বা রুটের পথ। এটি ব্যবহারকারীর ব্রাউজারে প্রদর্শিত হবে।
• url: এই পাথের সাথে সম্পর্কিত HTML পৃষ্ঠার অবস্থান।
• component: যদি একটি Vue.js বা React কম্পোনেন্ট ব্যবহার করা হয়, তাহলে এটি নির্দিষ্ট করা হয়।
• name: রুটের একটি নির্দিষ্ট নাম, যা কোডে রেফারেন্স করতে সহজ করে।

Routes কেন প্রয়োজন?

Routes ব্যবহারের কয়েকটি গুরুত্বপূর্ণ কারণ:

পৃষ্ঠা পরিচালনা

Routes সিস্টেম ডেভেলপারদের অ্যাপ্লিকেশনের বিভিন্ন পৃষ্ঠার মধ্যে সহজে নেভিগেশন তৈরি করতে সাহায্য করে। উদাহরণস্বরূপ, ব্যবহারকারী যদি "About" পৃষ্ঠায় যেতে চান, তাহলে Routes ব্যবহার করে তা সরাসরি পরিচালনা করা যায়।

স্পা (SPA) সমর্থন

Framework7 একটি Single Page Application (SPA) এর মতো কাজ করে, যেখানে পৃষ্ঠাগুলো পুনরায় লোড না করেই পরিবর্তন করা যায়। Routes এই ফিচারটি সহজতর করে।

কোড স্ট্রাকচার পরিষ্কার রাখা

Routes অ্যাপ্লিকেশনকে মডুলার এবং স্ট্রাকচারযুক্ত রাখতে সাহায্য করে। প্রতিটি পৃষ্ঠার জন্য নির্দিষ্ট path এবং url ডিফাইন করা হয়, যা কোড রিডেবিলিটি বাড়ায়।

ডাইনামিক পৃষ্ঠার লোডিং

Routes ব্যবহার করে ডাইনামিক পৃষ্ঠা তৈরি এবং লোড করা সম্ভব। উদাহরণস্বরূপ, নির্দিষ্ট প্রোডাক্টের ডিটেইল পৃষ্ঠা বা ডাইনামিক URL এর ভিত্তিতে পৃষ্ঠাগুলো লোড করা।

রিসোর্স লোড অপ্টিমাইজেশন

Routes ব্যবহার করে প্রয়োজনীয় রিসোর্স (HTML, CSS, JavaScript) কেবল তখনই লোড করা হয় যখন ব্যবহারকারী সেই রুটে নেভিগেট করেন। এটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে।

Framework7 এ Routes কনফিগারেশন উদাহরণ

পৃষ্ঠা ভিত্তিক রাউটিং (HTML ফাইলের সাথে):

var routes = [
  {
    path: '/about/',
    url: './pages/about.html',
  },
  {
    path: '/contact/',
    url: './pages/contact.html',
  },
];

ডাইনামিক পৃষ্ঠার রাউটিং:

var routes = [
  {
    path: '/product/:id/',
    url: './pages/product.html',
  },
];

উদাহরণ: /product/123/ রুটে গেলে প্রোডাক্ট আইডি 123 পাঠানো হবে।

কম্পোনেন্ট ভিত্তিক রাউটিং:

Vue.js বা React ব্যবহার করলে:

var routes = [
  {
    path: '/home/',
    component: HomePage,
  },
];

Routes ব্যবহারের সুবিধা

1. নেভিগেশনের সহজতা: Routes সিস্টেম দিয়ে অ্যাপ্লিকেশন ব্যবহারকারীদের জন্য সহজে নেভিগেটেবল হয়।
2. ডাইনামিক কন্টেন্ট ম্যানেজমেন্ট: নির্দিষ্ট path এর উপর ভিত্তি করে ডাইনামিক কন্টেন্ট প্রদর্শন করা যায়।
3. পারফরম্যান্স অপ্টিমাইজেশন: রিসোর্স কেবল প্রয়োজন অনুযায়ী লোড হয়।
4. SPA অভিজ্ঞতা: পৃষ্ঠাগুলো দ্রুত পরিবর্তন হয় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
5. সহজতর ডেভেলপমেন্ট: Routes সিস্টেম অ্যাপ্লিকেশন পরিচালনা সহজ করে এবং কোড স্ট্রাকচার পরিষ্কার রাখে।

Framework7-এ Routes অ্যাপ্লিকেশন নেভিগেশনের একটি গুরুত্বপূর্ণ অংশ, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং ডেভেলপারদের জন্য পৃষ্ঠা পরিচালনা সহজতর করে। এটি SPA ডেভেলপমেন্টের জন্য অপরিহার্য।

Framework7 এ রাউটিং সিস্টেম ব্যবহার করে পৃষ্ঠাগুলোর মধ্যে সহজে নেভিগেশন তৈরি করা যায়। Routes (পথ) ব্যবহারকারীর নির্দিষ্ট পৃষ্ঠায় যাওয়ার নির্দেশনা দেয় এবং অ্যাপ্লিকেশন ব্যবস্থাপনা সহজ করে। Framework7 এ রাউটিং সিস্টেম খুবই সহজ এবং শক্তিশালী।

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

Routes কনফিগারেশন কোথায় থাকবে?

Framework7 রাউটিং কনফিগারেশন সাধারণত app.js ফাইলে থাকে। এখানে routes নামে একটি অ্যারের মধ্যে সব রাউট কনফিগার করা হয়।

উদাহরণ:

var app = new Framework7({
  root: '#app', // অ্যাপের মূল রুট
  routes: [
    {
      path: '/about/',
      url: './pages/about.html',
    },
    {
      path: '/contact/',
      url: './pages/contact.html',
    },
  ],
});

উপরের কোডে, /about/ এবং /contact/ রাউটগুলো কনফিগার করা হয়েছে এবং প্রতিটি রাউট নির্দিষ্ট HTML ফাইলে নেভিগেট করে।

Routes তৈরি করা: ধাপসমূহ

১. HTML ফাইল তৈরি

প্রথমে প্রতিটি পৃষ্ঠার জন্য আলাদা HTML ফাইল তৈরি করতে হবে এবং /pages ডিরেক্টরিতে রাখতে হবে।

উদাহরণ (about.html):

<div class="page" data-name="about">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">About</div>
    </div>
  </div>
  <div class="page-content">
    <p>This is the About Page.</p>
  </div>
</div>

উদাহরণ (contact.html):

<div class="page" data-name="contact">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Contact</div>
    </div>
  </div>
  <div class="page-content">
    <p>This is the Contact Page.</p>
  </div>
</div>

২. Routes কনফিগার করা

প্রতিটি HTML ফাইলের জন্য একটি রাউট কনফিগার করতে হবে। এটি app.js বা Framework7 কনফিগারেশন ফাইলে করতে হবে।

উদাহরণ:

var app = new Framework7({
  root: '#app',
  routes: [
    {
      path: '/about/',
      url: './pages/about.html',
    },
    {
      path: '/contact/',
      url: './pages/contact.html',
    },
  ],
});

Routes ব্যবহার করা

Framework7 এর link ব্যবহার করে নির্দিষ্ট রাউটে নেভিগেট করা যায়।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <a href="/about/" class="item-link">About</a>
    </li>
    <li>
      <a href="/contact/" class="item-link">Contact</a>
    </li>
  </ul>
</div>

উপরের কোডে, /about/ এবং /contact/ পৃষ্ঠাগুলোর জন্য লিঙ্ক তৈরি করা হয়েছে। Framework7 এই লিঙ্কগুলো ধরে পৃষ্ঠাগুলো লোড করবে।

Dynamic Routes

Dynamic Routes ব্যবহার করে URL থেকে ডাটা পাস করা যায় এবং ডাইনামিক পৃষ্ঠা তৈরি করা যায়।

উদাহরণ:

var app = new Framework7({
  root: '#app',
  routes: [
    {
      path: '/user/:userId/',
      url: './pages/user.html',
    },
  ],
});

এখানে /user/:userId/ একটি ডাইনামিক রাউট।

ডাইনামিক পৃষ্ঠা তৈরি (user.html):

<div class="page" data-name="user">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">User Page</div>
    </div>
  </div>
  <div class="page-content">
    <p>User ID: {{userId}}</p>
  </div>
</div>

JavaScript কোডে ডাটা পাস করা:

app.views.main.router.navigate('/user/123/');

এতে /user/123/ রাউটটি লোড হবে এবং userId এর মান 123 হবে।

Routes এর সম্পূর্ণ কনফিগারেশন উদাহরণ

var app = new Framework7({
  root: '#app',
  routes: [
    {
      path: '/',
      url: './index.html',
    },
    {
      path: '/about/',
      url: './pages/about.html',
    },
    {
      path: '/contact/',
      url: './pages/contact.html',
    },
    {
      path: '/user/:userId/',
      url: './pages/user.html',
    },
  ],
});

Framework7 Routes এর সুবিধা

• সহজ পৃষ্ঠা নেভিগেশন: Routes ব্যবহার করে পৃষ্ঠাগুলোর মধ্যে দ্রুত এবং সঠিকভাবে নেভিগেট করা যায়।
• ডাইনামিক ডাটা হ্যান্ডলিং: ডাইনামিক রাউট ব্যবহার করে URL এর মাধ্যমে ডাটা পাঠানো এবং গ্রহন করা যায়।
• উন্নত অ্যাপ ব্যবস্থাপনা: Routes অ্যাপ্লিকেশন গঠনকে সুসংহত করে এবং কোডকে সহজবোধ্য রাখে।

Framework7 Routes একটি অ্যাপ্লিকেশনের জন্য গাইডলাইন হিসেবে কাজ করে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

Framework7 এর Dynamic Routing এবং Route Parameters ফিচার আপনাকে ডাইনামিক পেজ নেভিগেশন এবং পৃষ্ঠার কনটেন্ট পরিবর্তনের জন্য অত্যন্ত কার্যকর টুল প্রদান করে। এটি ডেভেলপারদের সহজেই ডাইনামিক এবং রিয়েল-টাইম পৃষ্ঠাগুলো পরিচালনা করতে সক্ষম করে।

Dynamic Routing কী?

Dynamic Routing এমন একটি পদ্ধতি যেখানে URL এর একটি অংশ ডাইনামিক বা পরিবর্তনশীল থাকে। Framework7 এই পদ্ধতিতে :parameter চিহ্ন ব্যবহার করে ডাইনামিক পাথ তৈরি করতে দেয়। এটি ব্যবহার করে পৃষ্ঠাগুলোর মধ্যে ডেটা পাস এবং ডাইনামিক পেজ লোড করা সম্ভব।

Route Parameters কী?

Route Parameters হলো ডাইনামিক URL পাথের অংশ যা :parameter চিহ্নের মাধ্যমে ডিফাইন করা হয়। এটি ডেটা পাস করার জন্য URL এর অংশ হিসেবে ব্যবহৃত হয় এবং Framework7 এর রাউটিং সিস্টেম সেই ডেটা অ্যাক্সেস করতে সক্ষম হয়।

উদাহরণ:

একটি ডাইনামিক রাউট :id প্যারামিটার ব্যবহার করে এই রকম হতে পারে:

{
  path: '/user/:id/',
  url: './pages/user.html',
}

উপরে, :id একটি ডাইনামিক প্যারামিটার যা প্রতিবার আলাদা ডেটা পাস করতে ব্যবহৃত হয়।

Dynamic Routing এবং Route Parameters কনফিগার করা

স্টেপ ১: রাউট কনফিগারেশন

app.js ফাইলে Framework7 রাউটিং সিস্টেমে ডাইনামিক রাউট যোগ করুন।

var app = new Framework7({
  root: '#app',
  routes: [
    {
      path: '/user/:id/',
      url: './pages/user.html',
    },
  ],
});

স্টেপ ২: ডাইনামিক পেজ তৈরি

user.html নামে একটি পৃষ্ঠা তৈরি করুন এবং ডাইনামিক ডেটা দেখানোর জন্য Framework7 এর route অবজেক্ট ব্যবহার করুন।

<div class="page" data-name="user">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">User Details</div>
    </div>
  </div>
  <div class="page-content">
    <p>User ID: {{route.params.id}}</p>
  </div>
</div>

এখানে {{route.params.id}} ডাইনামিক প্যারামিটার থেকে id মান দেখাবে।

Route Parameters থেকে ডেটা অ্যাক্সেস

Framework7 এর রাউটিং সিস্টেমে, ডাইনামিক প্যারামিটারগুলো route.params অবজেক্ট থেকে অ্যাক্সেস করা যায়।

উদাহরণ:

URL: /user/123/

route.params.id হবে 123।

Route Parameters ব্যবহার করে ডেটা লোড করা

স্টেপ ১: API বা ডেটাবেস থেকে ডেটা লোড

ডাইনামিক রাউটের ভিত্তিতে API থেকে ডেটা লোড করতে on ইভেন্ট ব্যবহার করুন।

{
  path: '/user/:id/',
  async: function (routeTo, routeFrom, resolve, reject) {
    var userId = routeTo.params.id;
    // API থেকে ডেটা ফেচ করা
    app.request.json('https://example.com/api/users/' + userId, function (data) {
      resolve(
        {
          componentUrl: './pages/user.html',
        },
        {
          context: {
            user: data,
          },
        }
      );
    });
  },
}

স্টেপ ২: ডাইনামিক ডেটা পেজে দেখানো

user.html পৃষ্ঠায় ডাইনামিক ডেটা দেখানোর জন্য context ব্যবহার করুন:

<div class="page" data-name="user">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">{{user.name}}</div>
    </div>
  </div>
  <div class="page-content">
    <p>User ID: {{user.id}}</p>
    <p>Email: {{user.email}}</p>
  </div>
</div>

Query Parameters এবং Dynamic Routing এর মধ্যে পার্থক্য

Framework7 এর Dynamic Routing এবং Route Parameters ডাইনামিক অ্যাপ্লিকেশন তৈরি করতে গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি ডেভেলপারদের ডাইনামিক পেজ তৈরি, ডেটা লোড এবং URL ভিত্তিক পৃষ্ঠাগুলোর কন্টেন্ট পরিবর্তনের জন্য কার্যকর সমাধান প্রদান করে। Dynamic Routing এর মাধ্যমে অ্যাপ্লিকেশন আরো ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে।

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 এবং ফাংশনালিটি আলাদাভাবে হ্যান্ডেল করে। এগুলো ব্যবহার করে আপনি সহজে একটি মাল্টি-পেজ, মাল্টি-ভিউ অ্যাপ্লিকেশন তৈরি করতে পারবেন।

Framework7 মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের জন্য উন্নত নেভিগেশন সিস্টেম প্রদান করে। Push, Pop এবং Tabbed Navigation Framework7 এর গুরুত্বপূর্ণ ফিচার, যা ব্যবহারকারীদের জন্য একটি মসৃণ এবং প্রাকৃতিক নেভিগেশন অভিজ্ঞতা তৈরি করে।

Push এবং Pop Navigation

Push এবং Pop Navigation হলো Framework7 এর ডিফল্ট রাউটিং সিস্টেমের একটি অংশ। এটি ব্যবহার করে ব্যবহারকারী একটি নতুন পৃষ্ঠায় যেতে (Push) এবং পূর্ববর্তী পৃষ্ঠায় ফিরে আসতে (Pop) পারে।

Push এবং Pop Navigation সেটআপ

1. প্রজেক্ট স্ট্রাকচার তৈরি করুন Framework7 প্রজেক্ট তৈরি করুন এবং আপনার পৃষ্ঠাগুলোর জন্য পৃথক HTML ফাইল তৈরি করুন। যেমন:
   • home.html
   • about.html

2. Routes কনফিগারেশন app.js ফাইলে Framework7 রাউটিং কনফিগার করুন:

   var app = new Framework7({
     root: '#app',
     routes: [
       {
         path: '/',
         url: './pages/home.html',
       },
       {
         path: '/about/',
         url: './pages/about.html',
       },
     ],
   });
   

3. নেভিগেশন তৈরি করুন পৃষ্ঠার মধ্যে নেভিগেশন লিঙ্ক যোগ করুন:

   <!-- home.html -->
   <div class="page" data-name="home">
     <div class="navbar">
       <div class="navbar-inner">
         <div class="title">Home</div>
       </div>
     </div>
     <div class="page-content">
       <a href="/about/">Go to About</a>
     </div>
   </div>
   

   <!-- about.html -->
   <div class="page" data-name="about">
     <div class="navbar">
       <div class="navbar-inner">
         <div class="title">About</div>
       </div>
     </div>
     <div class="page-content">
       <a href="/">Back to Home</a>
     </div>
   </div>
   

Tabbed Navigation

Tabbed Navigation হলো Framework7 এর আরেকটি শক্তিশালী ফিচার, যা একই পৃষ্ঠায় একাধিক বিভাগ বা ভিউ তৈরি করতে ব্যবহার করা হয়।

Tabbed Navigation সেটআপ

1. Tabbed Layout তৈরি করুন Framework7 এর tabs কম্পোনেন্ট ব্যবহার করে ট্যাব তৈরি করুন:

   <div class="page" data-name="tabs">
     <div class="navbar">
       <div class="navbar-inner">
         <div class="title">Tabs</div>
       </div>
     </div>
     <div class="toolbar tabbar">
       <div class="toolbar-inner">
         <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
         <a href="#tab-2" class="tab-link">Tab 2</a>
         <a href="#tab-3" class="tab-link">Tab 3</a>
       </div>
     </div>
     <div class="tabs">
       <div id="tab-1" class="tab tab-active">
         <div class="page-content">
           <p>Content for Tab 1</p>
         </div>
       </div>
       <div id="tab-2" class="tab">
         <div class="page-content">
           <p>Content for Tab 2</p>
         </div>
       </div>
       <div id="tab-3" class="tab">
         <div class="page-content">
           <p>Content for Tab 3</p>
         </div>
       </div>
     </div>
   </div>
   

2. Tabbed Navigation Styling Framework7 এর ডিফল্ট স্টাইলিং ব্যবহার করে আপনার ট্যাবগুলোর জন্য একটি সুন্দর লেআউট পাবেন। তবে চাইলে CSS ব্যবহার করে কাস্টমাইজ করা যায়।

Push, Pop এবং Tabbed Navigation একসাথে ব্যবহার করা

Framework7 আপনাকে Push এবং Pop Navigation এর পাশাপাশি Tabbed Navigation একত্রে ব্যবহার করার সুযোগ দেয়। একাধিক নেভিগেশন প্যাটার্ন ব্যবহার করতে রাউটিং সিস্টেমে ট্যাবযুক্ত পৃষ্ঠাগুলো যুক্ত করুন।

Routes সহ Tabs পৃষ্ঠার উদাহরণ:

var app = new Framework7({
  root: '#app',
  routes: [
    {
      path: '/',
      url: './pages/home.html',
    },
    {
      path: '/tabs/',
      url: './pages/tabs.html',
    },
  ],
});

Tabs পৃষ্ঠায় Push লিঙ্ক যুক্ত করা:

<!-- tabs.html -->
<div class="page" data-name="tabs">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Tabs with Navigation</div>
    </div>
  </div>
  <div class="toolbar tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
    </div>
  </div>
  <div class="tabs">
    <div id="tab-1" class="tab tab-active">
      <div class="page-content">
        <a href="/about/">Go to About Page</a>
      </div>
    </div>
    <div id="tab-2" class="tab">
      <div class="page-content">
        <p>Content for Tab 2</p>
      </div>
    </div>
    <div id="tab-3" class="tab">
      <div class="page-content">
        <p>Content for Tab 3</p>
      </div>
    </div>
  </div>
</div>

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