Router এবং নেভিগেশন মেকানিজম

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 প্যারামিটার ব্যবহার করে আপনি আরও উন্নত রাউটিং মেকানিজম তৈরি করতে পারবেন, যা একটি শক্তিশালী এবং স্কেলেবল ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য সহায়ক।