Routes তৈরি এবং কনফিগার করা

ExtJS তে Routes তৈরি এবং কনফিগার করা একটি অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য গুরুত্বপূর্ণ ফিচার। এটি মূলত URL Routing এর মতো কাজ করে, যেখানে ইউজার একটি নির্দিষ্ট URL এর মাধ্যমে একটি নির্দিষ্ট ভিউ বা কম্পোনেন্ট প্রদর্শন করতে পারে। ExtJS এর Ext.Router এবং Ext.application কনফিগারেশন ব্যবহার করে সহজেই Routes কনফিগার করা যায়।

Routes ব্যবহারের মাধ্যমে এক পৃষ্ঠা অ্যাপ্লিকেশন (SPA - Single Page Application) তৈরি করা সম্ভব হয়, যেখানে ইউজারের বিভিন্ন ইন্টারঅ্যাকশনের ভিত্তিতে অ্যাপ্লিকেশনের ভিউ পরিবর্তন হতে থাকে, কিন্তু পৃষ্ঠাটি রিফ্রেশ হয় না।

Routes কী?

Routes হল একটি ম্যাপ যা URL এর সাথে মেলানো কম্পোনেন্ট বা ফাংশন কনফিগার করে। যখনই ইউজার কোনো নির্দিষ্ট URL ক্লিক করে বা ব্রাউজারে সরাসরি প্রবেশ করে, তখন Route সেটি শনাক্ত করে এবং নির্দিষ্ট অ্যাকশন অথবা ভিউ প্রদর্শন করে।

ExtJS-এ Routes কনফিগারেশন

ExtJS-এ Routes কনফিগার করতে Ext.Router ব্যবহার করা হয়, যা URL-এর পাথ মেলাতে সাহায্য করে এবং প্রতিটি পাথের জন্য নির্দিষ্ট কন্ট্রোলার মেথড কল করে।

১. Ext.Router কনফিগার করা

Ext.Router একটি সহজ কিন্তু শক্তিশালী পদ্ধতি যা URL-এর পাথ এবং এর সাথে সম্পর্কিত কন্ট্রোলারের ফাংশন কনফিগার করতে ব্যবহার করা হয়।

Ext.application({
    name: 'MyApp',

    controllers: ['MainController'],  // কন্ট্রোলার লোড করা

    launch: function() {
        // Routes কনফিগার করা
        Ext.Router.register([
            {
                // "/home" পাথের জন্য MainController এর onHomeAction মেথড কল হবে
                route: 'home',
                handler: 'onHomeAction'
            },
            {
                // "/about" পাথের জন্য MainController এর onAboutAction মেথড কল হবে
                route: 'about',
                handler: 'onAboutAction'
            }
        ]);
        
        // রাউটিং শুরু করা
        Ext.Router.start();
    }
});

এখানে:

• route: URL পাথ কনফিগার করে, যেমন home, about ইত্যাদি।
• handler: কন্ট্রোলারের মেথডের নাম যা নির্দিষ্ট রাউটের জন্য কল হবে।

২. Controller এর মেথড তৈরি করা

আপনার কন্ট্রোলারে, আপনি রেজিস্টার করা রাউটের সাথে সম্পর্কিত handler মেথড তৈরি করবেন। এই মেথডগুলি ভিউ লোড অথবা অ্যাপ্লিকেশনের অন্য লজিক পরিচালনা করতে পারে।

Ext.define('MyApp.controller.MainController', {
    extend: 'Ext.app.Controller',

    onHomeAction: function() {
        // হোম পেজ ভিউ লোড করা
        Ext.Msg.alert('Welcome', 'Welcome to the Home page!');
    },

    onAboutAction: function() {
        // অ্যাবাউট পেজ ভিউ লোড করা
        Ext.Msg.alert('About', 'This is the About page!');
    }
});

এখানে, onHomeAction এবং onAboutAction মেথড দুটি ব্যবহারকারীর home এবং about রাউটের জন্য কল হবে। এই মেথডগুলো কাস্টম ভিউ বা UI কম্পোনেন্টও লোড করতে পারে।

৩. URL এর মাধ্যমে Route Navigating

এখন, আপনি URL এর মাধ্যমে route নেভিগেট করতে পারবেন। উদাহরণস্বরূপ, /home URL তে যাওয়ার জন্য:

Ext.Router.redirect('home');  // এটি "/home" URL এ রিডাইরেক্ট করবে

এছাড়া, URL চেঞ্জ হলে রাউটার স্বয়ংক্রিয়ভাবে কনফিগার করা হ্যান্ডলার কল করবে।

৪. Query Parameters এর সাথে Route

Query parameters ব্যবহার করে আপনি URL এর সাথে অতিরিক্ত তথ্য পাস করতে পারেন, যা আপনার অ্যাপ্লিকেশন লজিক অনুযায়ী ব্যবহার করা যেতে পারে।

Ext.Router.register([
    {
        route: 'product/:productId',
        handler: 'onProductPage'
    }
]);

Ext.define('MyApp.controller.MainController', {
    extend: 'Ext.app.Controller',

    onProductPage: function(params) {
        // URL প্যারামিটার থেকে productId অ্যাক্সেস করা
        var productId = params.productId;
        Ext.Msg.alert('Product', 'Viewing product with ID: ' + productId);
    }
});

এখানে, product/:productId রুটে productId একটি ডায়নামিক প্যারামিটার হিসেবে কাজ করছে। যখনই ইউজার /product/123 URL তে যাবে, তখন onProductPage মেথড কল হবে এবং productId প্যারামিটারটি 123 হবে।

৫. Route Error Handling

কখনো কখনো ইউজার এমন URL এ চলে যেতে পারে যা রেজিস্টার করা হয়নি। এর জন্য আপনি রাউটিংয়ের একটি ডিফল্ট error handler কনফিগার করতে পারেন।

Ext.Router.on('routeNotFound', function(route) {
    Ext.Msg.alert('Error', 'Route ' + route + ' not found!');
});

এখানে, যদি ইউজার এমন কোনো URL এ যায় যা রেজিস্টার করা হয়নি, তাহলে routeNotFound ইভেন্ট ট্রিগার হবে এবং একটি ত্রুটি বার্তা দেখানো হবে।

সারাংশ

• Routes URL পাথ এবং তাদের সাথে সম্পর্কিত কন্ট্রোলারের মেথড কনফিগার করার জন্য ব্যবহৃত হয়।
• Ext.Router URL পাথ এবং কন্ট্রোলারের মধ্যে সম্পর্ক তৈরি এবং পরিচালনা করতে সহায়ক।
• Ext.Router.register() ব্যবহার করে আপনি আপনার রাউট এবং সংশ্লিষ্ট হ্যান্ডলারগুলো রেজিস্টার করতে পারেন।
• Query Parameters সহ রাউট ব্যবহার করে ডায়নামিক ডেটা সংগ্রহ এবং ইউজার ইন্টারফেস কাস্টমাইজ করা যায়।
• Error Handling এর মাধ্যমে ভুল URL রাউট হলে ইউজারকে ত্রুটি বার্তা দেখানো যায়।

ExtJS এর রাউটিং সিস্টেম আপনাকে Single Page Application (SPA) তৈরি করতে সহায়ক, যেখানে পৃষ্ঠা রিফ্রেশ না করেই URL এর ভিত্তিতে বিভিন্ন ভিউ প্রদর্শন করা যায়।