নেভিগেশন এবং রাউটিং

Vaadin এ নেভিগেশন এবং রাউটিং একটি গুরুত্বপূর্ণ ফিচার, যা আপনাকে ওয়েব অ্যাপ্লিকেশনের বিভিন্ন পৃষ্ঠায় বা ভিউতে ইউজারদের নিয়ে যেতে সাহায্য করে। Vaadin-এ রাউটিং ব্যবস্থাপনা খুবই সহজ এবং শক্তিশালী, যা আপনাকে একটি অ্যাপ্লিকেশন তৈরি করতে দেয় যা মডুলার এবং স্কেলেবল।

Vaadin এ নেভিগেশন এবং রাউটিং কী?

নেভিগেশন এবং রাউটিং ব্যবস্থাপনা হল ওয়েব অ্যাপ্লিকেশনটিতে ভিন্ন ভিন্ন ভিউ বা পৃষ্ঠায় স্থানান্তর করার প্রক্রিয়া। Vaadin এতে @Route অ্যানোটেশন ব্যবহার করে সহজে বিভিন্ন পেজের জন্য রাউটিং সেটআপ করতে দেয়। এর মাধ্যমে আপনি কাস্টম URL পাথ নির্ধারণ করতে পারেন এবং নির্দিষ্ট URL অনুযায়ী ভিউ পরিবর্তন করতে পারেন।

Vaadin এ রাউটিং সেটআপ

Vaadin এ রাউটিং খুবই সহজ। আপনাকে শুধুমাত্র @Route অ্যানোটেশন ব্যবহার করতে হবে এবং নির্দিষ্ট ভিউ ক্লাসে এটিকে যোগ করতে হবে। নিচে একটি উদাহরণ দেখানো হলো:

1. বেসিক রাউটিং উদাহরণ

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("home")  // "home" URL পাথ এর জন্য এই ভিউ
public class HomeView extends VerticalLayout {
    public HomeView() {
        add("Welcome to the Home Page!");
    }
}

এখানে, @Route("home") অ্যানোটেশন দ্বারা "home" URL পাথের জন্য HomeView ক্লাসটি রাউট করা হয়েছে। যখন ইউজার /home URL তে যাবে, তখন তারা HomeView পৃষ্ঠাটি দেখতে পাবে।

2. অন্য পৃষ্ঠায় নেভিগেট করা

Vaadin এ ইউজারকে এক পৃষ্ঠার থেকে অন্য পৃষ্ঠায় নেভিগেট করার জন্য UI.getCurrent().navigate() মেথড ব্যবহার করা হয়। উদাহরণস্বরূপ, একটি বাটন ক্লিক করে অন্য একটি পৃষ্ঠায় যেতে:

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.UI;

@Route("home")
public class HomeView extends VerticalLayout {

    public HomeView() {
        Button navigateButton = new Button("Go to About Page", e -> UI.getCurrent().navigate("about"));
        add(navigateButton);
    }
}

এখানে, navigate() মেথড ব্যবহার করে "home" পৃষ্ঠা থেকে "about" পৃষ্ঠায় ইউজারকে নেভিগেট করা হচ্ছে।

Vaadin এ রাউটিং এবং নেভিগেশন সুবিধা

1. ইনবিল্ট রাউটিং: Vaadin স্বয়ংক্রিয়ভাবে URL পাথ এবং তাদের সাথে সম্পর্কিত ভিউ সংযুক্ত করে, যাতে আপনাকে manually URL এর জন্য রাউটিং সেট করতে না হয়।
2. ডাইনামিক রাউটিং: আপনি ভিউ ক্লাসের মাধ্যমে URL পাথটি ডাইনামিকভাবে কনফিগার করতে পারেন। উদাহরণস্বরূপ, URL এর মধ্যে প্যারামিটার ব্যবহার করে ভিউ তৈরি করতে পারেন।
3. নেভিগেশন স্ট্যাক: Vaadin এর রাউটিং সিস্টেম নেভিগেশন স্ট্যাক সাপোর্ট করে, যা আগের পৃষ্ঠা ফিরে যাওয়ার (back) সুবিধা দেয়, যেমন স্পষ্টভাবে ব্রাউজারের “back” বাটনটি কাজ করবে।
4. লেজার এবং URL প্যারামিটার: @Route অ্যানোটেশন ব্যবহার করে আপনি URL প্যারামিটার পাস করতে পারেন। এটি ডাইনামিক কন্টেন্ট এবং ডেটা লোড করার ক্ষেত্রে উপকারী।

URL প্যারামিটার ব্যবহার

Vaadin এ URL প্যারামিটার ব্যবহার করে আপনি ভিউয়ের মধ্যে ডাইনামিক ডেটা পাস করতে পারেন। এর জন্য @Route অ্যানোটেশনের সাথে প্যারামিটার পাস করা হয়।

উদাহরণ

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteParameter;

@Route("user/:userId")  // "user/:userId" পাথ এর জন্য রাউটিং
public class UserView extends VerticalLayout {
    
    public UserView(@RouteParameter String userId) {
        add("User ID: " + userId);  // URL প্যারামিটার ব্যবহার
    }
}

এখানে, user/:userId URL পাথ থেকে userId প্যারামিটার নেওয়া হচ্ছে, যা পরবর্তীতে ইউজারের ইনফরমেশন প্রদর্শনে ব্যবহার করা যাবে।

রাউটিং ম্যানেজমেন্ট এবং প্রিভেন্টিভ রাউটিং

Vaadin এ আপনি BeforeEnterObserver এবং BeforeLeaveObserver ইন্টারফেস ব্যবহার করে রাউটিংয়ের আগে কিছু কাস্টম লজিক প্রয়োগ করতে পারেন।

1. BeforeEnterObserver

BeforeEnterObserver ইন্টারফেস ব্যবহার করে আপনি ইউজার রাউটিং করার আগে কিছু চেক বা লজিক অ্যাড করতে পারেন, যেমন লগইন চেক:

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.BeforeEnterEvent;
import com.vaadin.flow.router.BeforeEnterObserver;
import com.vaadin.flow.router.Route;

@Route("private")
public class PrivateView extends VerticalLayout implements BeforeEnterObserver {

    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        // ইউজার যদি লগ ইন না থাকে, তাহলে তাকে লগইন পেজে পাঠানো হবে
        if (!isUserLoggedIn()) {
            event.rerouteTo("login");
        }
    }

    private boolean isUserLoggedIn() {
        // লগইন চেকের লজিক
        return false;  // উদাহরণস্বরূপ, এখানে ফালস ফিরিয়ে দেওয়া হয়েছে
    }
}

এখানে, যদি ইউজার লগইন না থাকে, তবে beforeEnter মেথডটি ইউজারকে "login" পৃষ্ঠায় রিডিরেক্ট করবে।

2. BeforeLeaveObserver

BeforeLeaveObserver ব্যবহার করে আপনি যখন কোনো পৃষ্ঠা থেকে চলে যাবেন, তখন কিছু একশন নিতে পারেন, যেমন ফর্মের ডেটা সংরক্ষণ বা ক্লিনআপ কাজ:

import com.vaadin.flow.router.BeforeLeaveEvent;
import com.vaadin.flow.router.BeforeLeaveObserver;
import com.vaadin.flow.router.Route;

@Route("profile")
public class ProfileView extends VerticalLayout implements BeforeLeaveObserver {

    @Override
    public void beforeLeave(BeforeLeaveEvent event) {
        // ইউজার যদি ফর্ম পরিবর্তন করে Leave করতে চায়, তবে সতর্কীকরণ দেখানো হবে
        if (isFormModified()) {
            event.postpone();  // রাউটিং দেরি করবে
            showUnsavedChangesWarning();
        }
    }

    private boolean isFormModified() {
        // ফর্ম চেক করা
        return true;  // উদাহরণস্বরূপ, এখানে ট্রুউ ফিরিয়ে দেওয়া হয়েছে
    }

    private void showUnsavedChangesWarning() {
        // সতর্কীকরণ দেখানো
    }
}

সারাংশ

Vaadin এর রাউটিং এবং নেভিগেশন ব্যবস্থা খুবই শক্তিশালী এবং ফ্লেক্সিবল। আপনি সহজেই বিভিন্ন পৃষ্ঠায় রাউটিং করতে পারেন, ডাইনামিক URL প্যারামিটার ব্যবহার করতে পারেন এবং ইউজারকে বিভিন্ন পৃষ্ঠায় নেভিগেট করতে পারেন। এছাড়া, BeforeEnterObserver এবং BeforeLeaveObserver ইন্টারফেসের মাধ্যমে রাউটিংয়ের আগে এবং পরে কাস্টম লজিক প্রয়োগ করা যায়, যা অ্যাপ্লিকেশনটির কার্যকারিতা আরও উন্নত করে।

Vaadin এ URL Routing এবং Parameters একটি গুরুত্বপূর্ণ বৈশিষ্ট্য, যা আপনাকে ওয়েব অ্যাপ্লিকেশনের বিভিন্ন পেজের জন্য ডাইনামিক রাউটিং এবং প্যারামিটার ব্যবস্থাপনা করতে সাহায্য করে। এটি অ্যাপ্লিকেশনের বিভিন্ন অংশের মধ্যে নেভিগেশন এবং ডেটা পাসিং সহজ করে তোলে, যা একটি ইন্টারেক্টিভ এবং ডায়নামিক ওয়েব অ্যাপ্লিকেশন তৈরিতে সহায়ক।

URL Routing কী?

URL Routing হল একটি প্রক্রিয়া, যেখানে ওয়েব অ্যাপ্লিকেশনটি ব্যবহারকারীর নির্দিষ্ট URL অনুসারে পেজ বা ভিউ রেন্ডার করে। Vaadin-এ, URL Routing এর মাধ্যমে নির্দিষ্ট URL প্যাটার্নের উপর ভিত্তি করে ভিউ রেন্ডার করা হয়। Vaadin রাউটিং ব্যবস্থাপনা মূলত @Route অ্যানোটেশন এবং URL প্যারামিটারগুলির মাধ্যমে কাজ করে।

Vaadin এ URL Routing কিভাবে কাজ করে?

Vaadin 14 এবং তার পরবর্তী সংস্করণে, @Route অ্যানোটেশন ব্যবহার করে URL রাউটিং তৈরি করা হয়। @Route আপনাকে কোনো নির্দিষ্ট URL প্যাটার্নে একটি ক্লাস বা ভিউ যুক্ত করতে সাহায্য করে।

1. Basic URL Routing

এখানে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে @Route অ্যানোটেশন ব্যবহার করে একটি পেজ তৈরি করা হয়েছে:

@Route("")
public class MainView extends VerticalLayout {
    public MainView() {
        add(new H1("Welcome to Vaadin App"));
    }
}

এখানে, @Route("") ব্যবহার করে MainView ক্লাসটি অ্যাপ্লিকেশনের হোম পেজে রেন্ডার হবে। URL এর শেষে কোনো প্যারামিটার নেই, তাই এটি ডিফল্টভাবে / রুট পেইজ হিসেবে কাজ করবে।

2. Dynamic URL Routing

Vaadin-এ, URL প্যারামিটারগুলি নিয়ে ডাইনামিক রাউটিং করতে পারেন। উদাহরণস্বরূপ, যদি আপনার URL এর মধ্যে একটি ভিন্ন ভিউ বা পেজ থাকে, যেখানে আপনি কিছু ডেটা পাস করতে চান, তবে আপনি URL প্যারামিটার ব্যবহার করতে পারেন।

@Route("view/:id")
public class ViewPage extends VerticalLayout {
    public ViewPage(@QueryParameter("id") String id) {
        add(new H1("Viewing item with ID: " + id));
    }
}

এখানে, @Route("view/:id") এর মাধ্যমে URL এর প্যারামিটার হিসেবে id নেওয়া হচ্ছে। URL এর মাধ্যমে নির্দিষ্ট আইডি পাঠালে, সেই আইডি অনুযায়ী পেজের কন্টেন্ট রেন্ডার হবে।

URL Parameters ব্যবহারের উদাহরণ

Vaadin এ URL প্যারামিটারগুলি ব্যবহারের মাধ্যমে আপনি ডাইনামিক কন্টেন্ট রেন্ডার করতে পারেন। এখানে URL প্যারামিটার হিসেবে id ব্যবহার করা হয়েছে:

@Route("profile/:userId")
public class ProfileView extends VerticalLayout {
    public ProfileView(@QueryParameter("userId") String userId) {
        add(new H1("User Profile for: " + userId));
        // এখানে ডেটা ফেচিং বা প্রোফাইল ইনফরমেশন শো করা যাবে
    }
}

এই ক্ষেত্রে, যদি URL হয় /profile/123, তাহলে userId প্যারামিটারটি "123" হবে এবং সেই অনুযায়ী প্রোফাইল ভিউ রেন্ডার হবে।

URL Parameters এবং Query Parameters

Vaadin এ, URL এর প্যারামিটার দুটি ধরনের হতে পারে:

1. Path Parameters: এগুলি URL এর অংশ হিসেবে থাকে। যেমন /profile/:userId। এখানে :userId একটি প্যারামিটার হিসেবে কাজ করবে।
2. Query Parameters: এগুলি URL এর শেষে ? চিহ্নের পর থাকে, যেমন /profile?id=123।

এখানে, @QueryParameter ব্যবহার করে আপনি URL থেকে query parameters পেতে পারেন।

@Route("search")
public class SearchView extends VerticalLayout {
    public SearchView(@QueryParameter("query") String query) {
        add(new H1("Search Results for: " + query));
    }
}

এখানে, URL /search?query=Vaadin হলে, query প্যারামিটারটি "Vaadin" হয়ে যাবে এবং সেই অনুসারে সার্চ রেজাল্ট রেন্ডার হবে।

URL Routing এর অন্যান্য বৈশিষ্ট্য

1. Route Aliases: Vaadin এ @Route ব্যবহার করে আপনি একটি ক্লাসের জন্য একাধিক রাউট তৈরি করতে পারেন। এর মাধ্যমে আপনি একাধিক URL এ একই ভিউ রেন্ডার করতে পারবেন।

   @Route("home")
   @Route("dashboard")
   public class DashboardView extends VerticalLayout {
       public DashboardView() {
           add(new H1("Dashboard"));
       }
   }
   

   এখানে, /home অথবা /dashboard দুইটি URL রাউটের মাধ্যমে একই DashboardView ভিউ রেন্ডার হবে।

2. Route Layout: Vaadin এ আপনি একটি Layout ভিউ (যেমন MainLayout) তৈরি করতে পারেন, যা একাধিক পেজে শেয়ার করা যায়। এর মাধ্যমে, আপনি ন্যাভিগেশন বার, ফুটার ইত্যাদি শেয়ার করতে পারবেন।

   @Route("")
   @RouteAlias("home")
   public class MainView extends MainLayout {
       public MainView() {
           add(new H1("Home Page"));
       }
   }
   

3. Route Guards: Vaadin এর মাধ্যমে আপনি রাউট গার্ড ব্যবহার করতে পারেন, যা ইউজারকে নির্দিষ্ট পেজে প্রবেশ করতে বাধা দিতে বা অনুমতি দিতে সাহায্য করে। এটি ইউজার অথেনটিকেশন এবং অথোরাইজেশন চেক করতে ব্যবহৃত হয়।

   @Route("")
   public class ProtectedView extends VerticalLayout implements BeforeEnterObserver {
       @Override
       public void beforeEnter(BeforeEnterEvent event) {
           if (!isUserLoggedIn()) {
               event.rerouteTo(LoginView.class);
           }
       }
   
       private boolean isUserLoggedIn() {
           return false; // লগইন চেক
       }
   }
   

সারাংশ

Vaadin এ URL Routing এবং Parameters ব্যবহার করে, আপনি ওয়েব অ্যাপ্লিকেশনে ডাইনামিক নেভিগেশন এবং প্যারামিটারাইজড কন্টেন্ট রেন্ডারিং করতে পারেন। @Route অ্যানোটেশন এবং @QueryParameter এর মাধ্যমে আপনি URL প্যাটার্ন এবং প্যারামিটার নিয়ে কাজ করতে পারেন, যা অ্যাপ্লিকেশনের নেভিগেশন এবং ডেটা ফ্লো সহজ এবং কার্যকরী করে তোলে। URL Routing আপনাকে পেজগুলির মধ্যে সোজা নেভিগেশন এবং ডেটা পাসিং করার সুবিধা দেয়, যা উন্নত ইউজার এক্সপিরিয়েন্স (UX) তৈরি করতে সহায়তা করে।

Vaadin এ View Navigation এবং নেভিগেশন বার তৈরি করা ওয়েব অ্যাপ্লিকেশনটির বিভিন্ন অংশের মধ্যে ইউজারের সহজে চলাচল নিশ্চিত করার জন্য অত্যন্ত গুরুত্বপূর্ণ। View Navigation ব্যবহারকারীদের এক ভিউ থেকে অন্য ভিউতে সুগমভাবে নেভিগেট করতে সাহায্য করে, এবং নেভিগেশন বার ইউজারের জন্য একটি ইন্টারফেস উপস্থাপন করে যা দিয়ে তারা বিভিন্ন ভিউতে যাতায়াত করতে পারে।

View Navigation কী?

Vaadin এ View Navigation হল প্রক্রিয়া যার মাধ্যমে একটি ইউজার ভিন্ন ভিন্ন পৃষ্ঠায় (বা ভিউ) নেভিগেট করতে পারে অ্যাপ্লিকেশনটির মধ্যে। এর মাধ্যমে ইউজারের জন্য ইন্টারফেসের বিভিন্ন অংশে সুগম ও কার্যকর নেভিগেশন প্রদান করা হয়। এটি ওয়েব অ্যাপ্লিকেশনে ভিন্ন ভিন্ন ইউআই ভিউগুলোর মধ্যে একের পর এক সরাসরি সুইচ করতে সক্ষম হয়।

Vaadin 14 ও তার পরবর্তী সংস্করণগুলোতে @Route অ্যানোটেশন ব্যবহার করে ভিউ ডিফাইন করা যায় এবং এই ভিউগুলোর মধ্যে নেভিগেশন পরিচালনা করা হয়।

Vaadin এ View Navigation সেটআপ

Vaadin এ ভিউ নেভিগেশন করতে, আপনাকে প্রথমে @Route অ্যানোটেশন ব্যবহার করে ক্লাস তৈরি করতে হবে। এই অ্যানোটেশনটি ভিউ এবং নেভিগেশন ডিরেকশন নির্ধারণে ব্যবহৃত হয়।

উদাহরণ:

@Route("home")
public class HomeView extends VerticalLayout {
    public HomeView() {
        add(new H1("Welcome to the Home Page!"));
    }
}

@Route("about")
public class AboutView extends VerticalLayout {
    public AboutView() {
        add(new H1("Welcome to the About Page!"));
    }
}

এখানে, দুটি ভিউ (HomeView এবং AboutView) তৈরি করা হয়েছে, যেগুলি ইউজারের নেভিগেশনের জন্য অ্যাক্সেসযোগ্য। যখন ইউজার /home বা /about URL এ যাবে, তখন তারা সংশ্লিষ্ট পৃষ্ঠাটি দেখতে পাবে।

নেভিগেশন বার তৈরি করা

Vaadin এ একটি নেভিগেশন বার তৈরি করা অনেক সহজ, এবং আপনি AppLayout নামক একটি ক্লাস ব্যবহার করে এটি খুব সহজেই তৈরি করতে পারেন। AppLayout ক্লাসের মাধ্যমে একটি সাইড নেভিগেশন বার তৈরি করা যায়, যেখানে লিঙ্কগুলো ভিউ গুলি নির্দেশ করে।

উদাহরণ:

@Route("")
public class MainView extends AppLayout {
    public MainView() {
        // নেভিগেশন বার তৈরি
        H1 header = new H1("My Vaadin App");

        // সাইড নেভিগেশন
        Div nav = new Div();
        nav.setText("Navigation Bar");

        // নেভিগেশন লিঙ্ক
        RouterLink homeLink = new RouterLink("Home", HomeView.class);
        RouterLink aboutLink = new RouterLink("About", AboutView.class);

        // নেভিগেশন বার সম্পাদনা
        nav.add(homeLink, aboutLink);

        // UI এ নেভিগেশন বার এবং হেডার যোগ করা
        addToNavbar(header);
        addToDrawer(nav);
    }
}

এখানে MainView ক্লাসটি একটি AppLayout ক্লাসের সাবক্লাস, যা সাইড নেভিগেশন বার এবং হেডার উপস্থাপন করে। RouterLink কম্পোনেন্টের মাধ্যমে ইউজারদের জন্য Home এবং About ভিউতে নেভিগেট করার লিঙ্ক তৈরি করা হয়।

• addToNavbar(header) এই লাইনটি হেডারটি নেভিগেশন বারের উপরের অংশে যোগ করে।
• addToDrawer(nav) এই লাইনটি নেভিগেশন বারকে সাইডে যোগ করে।

নেভিগেশন বার কাস্টমাইজেশন

আপনি আপনার নেভিগেশন বারটিকে আরও কাস্টমাইজ করতে পারেন, যেমন আইকন যোগ করা, বিভিন্ন ভিউয়ের জন্য সেগমেন্ট তৈরি করা, এবং নেভিগেশন প্রক্রিয়া আরও ইন্টারেক্টিভ করা।

উদাহরণ:

@Route("")
public class MainView extends AppLayout {
    public MainView() {
        // নেভিগেশন বার কাস্টমাইজেশন
        VerticalLayout navLayout = new VerticalLayout();

        // নেভিগেশন লিঙ্ক এবং আইকন
        RouterLink homeLink = new RouterLink("Home", HomeView.class);
        homeLink.setIcon(VaadinIcon.HOME.create());

        RouterLink aboutLink = new RouterLink("About", AboutView.class);
        aboutLink.setIcon(VaadinIcon.INFO_CIRCLE.create());

        // নেভিগেশন লিঙ্কগুলো অ্যাড করা
        navLayout.add(homeLink, aboutLink);

        // নেভিগেশন বার
        addToNavbar(new H1("My App"));
        addToDrawer(navLayout);
    }
}

এখানে, আমরা Home এবং About লিঙ্কের পাশে আইকন যোগ করেছি। Vaadin আইকন ব্যবহার করে আপনি অ্যাপ্লিকেশনের নেভিগেশন বারকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করতে পারেন।

সারাংশ

Vaadin এ View Navigation এবং নেভিগেশন বার তৈরি করা খুবই সহজ এবং কার্যকরী। @Route অ্যানোটেশন ব্যবহার করে ভিউ তৈরি করা যায়, যা অ্যাপ্লিকেশনটি বিভিন্ন ভিউয়ের মধ্যে ইউজারের নেভিগেশন সম্ভব করে তোলে। AppLayout এবং RouterLink এর মাধ্যমে একটি সুন্দর নেভিগেশন বার তৈরি করা যায়, যা ইউজারকে অ্যাপ্লিকেশনের বিভিন্ন অংশে দ্রুত নেভিগেট করার সুবিধা দেয়।

এই নেভিগেশন ব্যবস্থা ওয়েব অ্যাপ্লিকেশনটির ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং ওয়েব অ্যাপ্লিকেশনকে আরো প্রফেশনাল এবং সহজবোধ্য করে তোলে।

Vaadin এ Nested Routes এবং Views ব্যবহার করে আপনি অ্যাপ্লিকেশনের বিভিন্ন অংশকে সন্নিবেশিত (nested) করে উন্নত এবং সংগঠিত ইউজার ইন্টারফেস (UI) তৈরি করতে পারেন। এই পদ্ধতিটি অ্যাপ্লিকেশনের নেভিগেশন এবং ভিউ ম্যানেজমেন্টকে আরও কার্যকর এবং স্কেলেবল করে তোলে।

Nested Routes কী?

Nested Routes হল একটি পদ্ধতি যেখানে একটি রুটের অধীনে আরও এক বা একাধিক সাব-রুট (sub-routes) সংযুক্ত করা হয়। এটি একটি parent-child রিলেশন তৈরি করে, যেখানে প্রধান রুটটি একটি ভিউ ধারণ করে এবং তার মধ্যে অন্য ভিউস বা রাউটগুলিকে অন্তর্ভুক্ত করা হয়।

এটি আপনাকে অ্যাপ্লিকেশনের বিভিন্ন অংশের মধ্যে সহজে নেভিগেশন করতে এবং অ্যাপ্লিকেশনটির কাঠামোকে পরিষ্কারভাবে সংগঠিত করতে সাহায্য করে। যখন আপনি একটি parent রুটে পরিবর্তন করেন, তখন তার অন্তর্ভুক্ত সাব-রুটগুলির মধ্যে পরিবর্তন আনা যায়।

Nested Routes কিভাবে কাজ করে?

Vaadin 14 এবং পরবর্তী সংস্করণগুলোতে @Route অ্যানোটেশন ব্যবহার করে রুট এবং ভিউগুলিকে ডিফাইন করা হয়। একটি parent route এবং তার মধ্যে থাকা nested routes কে @Route অ্যানোটেশন দিয়ে সহজেই সংজ্ঞায়িত করা যায়।

Parent Route এবং Nested Routes উদাহরণ

ধরা যাক, আমাদের একটি অ্যাপ্লিকেশন রয়েছে যেখানে দুটি প্রধান অংশ রয়েছে: Dashboard এবং Settings। Settings এর মধ্যে আরও দুটি সাব-প্যানেল রয়েছে: Profile Settings এবং Account Settings।

এটা নির্ধারণ করতে হবে যে Dashboard একটি parent route এবং তার ভিতরে দুটি nested route রয়েছে: Profile Settings এবং Account Settings।

@Route("dashboard")
public class DashboardView extends VerticalLayout {
    public DashboardView() {
        add(new Text("Welcome to the Dashboard!"));
    }
}

@Route(value = "profile", layout = DashboardView.class)
public class ProfileSettingsView extends VerticalLayout {
    public ProfileSettingsView() {
        add(new Text("Profile Settings"));
    }
}

@Route(value = "account", layout = DashboardView.class)
public class AccountSettingsView extends VerticalLayout {
    public AccountSettingsView() {
        add(new Text("Account Settings"));
    }
}

ভিউর মধ্যে layout এর ভূমিকা

Vaadin-এ layout একটি ভিউ বা পেজের কাঠামোকে সংজ্ঞায়িত করে। Nested Routes ব্যবহারের সময়, আপনি layout ফিল্ডের মাধ্যমে parent route এর জন্য একটি কম্পোনেন্ট (যেমন DashboardView) নির্ধারণ করতে পারেন। এর মাধ্যমে, সব nested route সেই layout-এ রেন্ডার হবে। এর ফলে, আপনি একটি নির্দিষ্ট কাঠামোতে, একাধিক ভিউকে সন্নিবেশিত (nested) করতে পারবেন।

উপরে দেয়া উদাহরণে DashboardView.class layout হিসেবে উল্লেখ করা হয়েছে, যার মাধ্যমে Profile Settings এবং Account Settings উভয়ই Dashboard এর ভিতরে প্রদর্শিত হবে।

Nested Routes এর সুবিধা

1. ক্লিন নেভিগেশন: Nested routes আপনাকে অ্যাপ্লিকেশনের বিভিন্ন অংশগুলোকে সহজে নেভিগেট করতে দেয়। এটি একটি পরিষ্কার এবং সহজ নেভিগেশন স্ট্রাকচার তৈরি করতে সহায়তা করে।
2. এনার্কি বা জটিলতার অভাব: Nested routes ব্যবহারের মাধ্যমে আপনার অ্যাপ্লিকেশনের বিভিন্ন অংশ একে অপরের থেকে আলাদা থাকে, কিন্তু আপনি তাদের মধ্যে সম্পর্ক বজায় রাখতে পারেন। ফলে অ্যাপ্লিকেশনটি বেশি স্কেলেবল এবং রক্ষণাবেক্ষণযোগ্য হয়।
3. UI অভিজ্ঞতা উন্নত করা: Nested routes ব্যবহার করে ইউজারকে ভিন্ন ভিন্ন ভিউ দেখতে দেওয়ার মাধ্যমে UI অভিজ্ঞতা উন্নত করা যায়। এটি ব্যবহারকারীকে এক ভিউ থেকে অন্য ভিউতে সরাসরি যাওয়ার সুবিধা প্রদান করে, যেন তার অভিজ্ঞতা আরও প্রাসঙ্গিক এবং সোজা হয়।
4. রুটিং ইজিস্টেন্স: যদি আপনার অ্যাপ্লিকেশনে অনেকগুলো সাবপ্যানেল এবং কন্টেন্ট থাকে, তবে Nested Routes ব্যবহার করলে সেই কন্টেন্টগুলোকে পরিষ্কারভাবে সন্নিবেশিত করতে পারেন এবং যেকোনো সময় তা পরবর্তী স্কেল করতে পারেন।

ভিউ মধ্যে ভিউ রেন্ডারিং (Nested Views)

একটি nested view তৈরি করার জন্য, আপনি একটি parent view তৈরি করেন এবং তারপর তার মধ্যে সাব-ভিউ রেন্ডার করেন। নিচে একটি উদাহরণ দেওয়া হল:

@Route("main")
public class MainView extends VerticalLayout {
    
    public MainView() {
        add(new Text("This is the Main View"));
        
        // Nested View রেন্ডার করা
        add(new RouterLink("Go to Profile", ProfileSettingsView.class));
        add(new RouterLink("Go to Account", AccountSettingsView.class));
    }
}

এখানে, MainView একটি parent view এবং ProfileSettingsView এবং AccountSettingsView সাব-ভিউ হিসেবে রেন্ডার করা হয়।

Nested Routes এবং Layouts একত্রিত করা

Nested routes এবং layouts একত্রিত করার সময়, আপনি আপনার অ্যাপ্লিকেশনকে আরও মডুলার এবং সুসংগঠিত করতে পারেন। একাধিক সাব-প্যানেল এবং কন্টেন্ট যুক্ত করার মাধ্যমে, আপনি ওয়েব অ্যাপ্লিকেশনের প্রতিটি অংশকে পৃথকভাবে ডিজাইন করতে পারবেন।

@Route(value = "admin", layout = AdminLayout.class)
public class AdminView extends VerticalLayout {
    public AdminView() {
        add(new Text("Welcome to the Admin Panel!"));
    }
}

@Route(value = "users", layout = AdminLayout.class)
public class UserManagementView extends VerticalLayout {
    public UserManagementView() {
        add(new Text("User Management"));
    }
}

এখানে AdminLayout একটি মূল লেআউট হিসেবে কাজ করছে, যা বিভিন্ন সাব-প্যানেল (এখানে AdminView এবং UserManagementView) দেখাবে।

Nested routes এবং views Vaadin অ্যাপ্লিকেশনে একটি শক্তিশালী উপায় হয়ে উঠেছে অ্যাপ্লিকেশনগুলোকে আরও স্কেলেবল, সুসংগঠিত এবং সহজে রক্ষণাবেক্ষণযোগ্য করার জন্য। এটি একটি প্রজেক্টের নেভিগেশন এবং UI ভিউ ম্যানেজমেন্টকে পরিপূর্ণভাবে সংহত করে, যা বড় এবং জটিল অ্যাপ্লিকেশনগুলোর জন্য অপরিহার্য।

Vaadin এ রাউটিং এবং নেভিগেশন ব্যবহারকারীদের জন্য অ্যাপ্লিকেশন নেভিগেশন পরিচালনা করার একটি শক্তিশালী পদ্ধতি। Vaadin অ্যাপ্লিকেশনকে অনেক সেকশন বা পেজে বিভক্ত করা এবং সেগুলোর মধ্যে ইউজারের প্রবাহ সহজ করতে রাউটিং এবং নেভিগেশন ব্যবহৃত হয়। এখানে রাউটার এবং নেভিগেশন মেকানিজম কীভাবে কাজ করে, তা আলোচনা করা হবে।

রাউটার (Router) কী?

রাউটার হলো একটি ক্লাস যা URL পাথ এবং নির্দিষ্ট ভিউয়ের মধ্যে সম্পর্ক স্থাপন করে। এটি ইউজারের ব্রাউজারে URL পরিবর্তন হলে সংশ্লিষ্ট ভিউ লোড করতে সহায়তা করে। Vaadin এ @Route অ্যানোটেশন ব্যবহার করে রাউটিং পরিচালনা করা হয়। এই অ্যানোটেশনের মাধ্যমে আপনি নির্দিষ্ট URL পাথের সাথে একটি ভিউ যুক্ত করতে পারেন।

Vaadin এ রাউটিং সেটআপ

Vaadin এ রাউটিং সেটআপ করা বেশ সহজ। আপনাকে শুধু একটি ভিউ ক্লাস তৈরি করতে হবে এবং সেই ভিউ ক্লাসের ওপর @Route অ্যানোটেশন ব্যবহার করতে হবে। @Route এর মাধ্যমে আপনি URL পাথ নির্দিষ্ট করে দিতে পারেন, যা পরে ইউজার দ্বারা ব্যবহার করা হবে।

উদাহরণ: রাউটিং ব্যবহার করা

@Route("")
public class MainView extends VerticalLayout {
    public MainView() {
        add(new Text("Welcome to the Main View!"));
    }
}

@Route("about")
public class AboutView extends VerticalLayout {
    public AboutView() {
        add(new Text("This is the About View"));
    }
}

এখানে, MainView একটি ডিফল্ট ভিউ যেটি রুট ("/") পাথের জন্য ব্যবহৃত হবে এবং AboutView একটি আলাদা ভিউ যেটি "/about" পাথের জন্য ব্যবহৃত হবে।

রাউটার কনফিগারেশন

Vaadin অ্যাপ্লিকেশনে একটি কাস্টম রাউটারের কনফিগারেশনও করা যেতে পারে, যেখানে আপনি বিভিন্ন ভিউ নিয়ে একটি নেভিগেশন কন্ট্রোলার তৈরি করবেন।

@Route("")
@RouteAlias("home")
public class MainView extends VerticalLayout {
    public MainView() {
        Button goToAboutButton = new Button("Go to About", event -> {
            UI.getCurrent().navigate(AboutView.class);
        });
        add(goToAboutButton);
    }
}

@Route("about")
public class AboutView extends VerticalLayout {
    public AboutView() {
        add(new Text("This is the About View"));
    }
}

এখানে, MainView ভিউ থেকে আপনি একটি বাটন ক্লিক করে AboutView এ নেভিগেট করতে পারবেন। UI.getCurrent().navigate() মেথডটি URL পরিবর্তন করে নতুন ভিউটি লোড করে।

নেভিগেশন (Navigation) কী?

নেভিগেশন হলো ইউজারের এক ভিউ থেকে অন্য ভিউতে যাওয়ার প্রক্রিয়া। Vaadin এ, নেভিগেশন ব্যবস্থাটি সাধারণত ভিউ ট্রানজিশন হ্যান্ডল করার জন্য ব্যবহৃত হয়। আপনি @Route অ্যানোটেশন ব্যবহার করে একটি পৃষ্ঠা বা ভিউ তৈরি করবেন, এবং navigate() মেথড ব্যবহার করে ইউজারকে ভিউগুলোর মধ্যে নেভিগেট করতে পারবেন।

উদাহরণ: নেভিগেশন পরিচালনা

@Route("home")
public class MainView extends VerticalLayout {
    public MainView() {
        Button aboutButton = new Button("Go to About", e -> {
            getUI().ifPresent(ui -> ui.navigate("about"));
        });
        add(aboutButton);
    }
}

@Route("about")
public class AboutView extends VerticalLayout {
    public AboutView() {
        add(new Text("This is the About View"));
    }
}

এখানে, "Go to About" বাটনটি ক্লিক করলে, ইউজারকে AboutView এ নেভিগেট করা হবে।

Nested রাউটিং

Vaadin এ Nested Routing ব্যবহার করে আপনি একটি ভিউর মধ্যে আরও ভিউ যুক্ত করতে পারেন, অর্থাৎ একাধিক স্তরের রাউটিং তৈরি করতে পারেন। এটি অনেক বেশি কমপ্লেক্স অ্যাপ্লিকেশন তৈরিতে সহায়ক।

@Route("dashboard")
@ParentLayout(MainLayout.class)
public class DashboardView extends VerticalLayout {
    public DashboardView() {
        add(new Text("This is the Dashboard View"));
    }
}

@Route("profile")
@ParentLayout(MainLayout.class)
public class ProfileView extends VerticalLayout {
    public ProfileView() {
        add(new Text("This is the Profile View"));
    }
}

এখানে, DashboardView এবং ProfileView উভয়ই MainLayout এ নেস্টেড (Nested) অবস্থায় থাকবে, যেখানে MainLayout একটি কমপ্লেক্স লেআউট (layout) যা বিভিন্ন সেকশন ধারণ করে।

রাউটারের জন্য URL প্যারামিটার

আপনি URL পাথের মধ্যে প্যারামিটারও ব্যবহার করতে পারেন, যেমন @Route("{id}") এর মাধ্যমে ডায়নামিক পাথ ব্যবহার করা যায়। এর মাধ্যমে ইউজার নির্দিষ্ট আইডি বা ডেটা নিয়ে কোনো পৃষ্ঠায় নেভিগেট করতে পারে।

@Route("profile/{userId}")
public class ProfileView extends VerticalLayout {
    public ProfileView(@RouteParameter String userId) {
        add(new Text("User ID: " + userId));
    }
}

এখানে, {userId} একটি প্যারামিটার যা ইউজারের প্রোফাইলের জন্য ডায়নামিক URL পাথ হিসেবে ব্যবহৃত হবে।

সারাংশ

Vaadin এ রাউটিং এবং নেভিগেশন ব্যবস্থার মাধ্যমে আপনি অ্যাপ্লিকেশনটির নেভিগেশন কাঠামো সহজে কনফিগার করতে পারেন এবং ইউজারের জন্য সোজা ও প্রাকৃতিক নেভিগেশন প্রক্রিয়া তৈরি করতে পারেন। @Route অ্যানোটেশন ব্যবহার করে আপনি বিভিন্ন ভিউ তৈরি করতে পারেন এবং navigate() মেথড দিয়ে সেগুলোর মধ্যে ট্রানজিশন করতে পারেন। Nested রাউটিং এবং URL প্যারামিটার ব্যবহার করে আপনি আরও উন্নত রাউটিং মেকানিজম তৈরি করতে পারবেন, যা একটি শক্তিশালী এবং স্কেলেবল ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য সহায়ক।