ExtJS Routing এবং Navigation Management

Routing এবং Navigation Management হল ExtJS অ্যাপ্লিকেশনের অন্যতম গুরুত্বপূর্ণ অংশ, যা ইউজারের ইন্টারঅ্যাকশন এবং অ্যাপ্লিকেশনের বিভিন্ন ভিউ বা রুটের মধ্যে নেভিগেশন পরিচালনা করতে সাহায্য করে। যখন আপনি একটি স্পা (Single Page Application) তৈরি করেন, তখন Routing আপনাকে ইউজারের URL-এর উপর ভিত্তি করে বিভিন্ন ভিউ বা কম্পোনেন্টের মধ্যে নেভিগেশন পরিচালনা করতে সহায়ক হয়। ExtJS তে, Routing এবং Navigation ব্যবস্থাপনা খুবই সহজ এবং ফ্লেক্সিবল।

১. ExtJS Routing - Overview

Routing হল একটি প্রযুক্তি যা URL এর বিভিন্ন অংশকে ভিন্ন ভিন্ন ভিউ বা কার্যকলাপে ম্যাপ করে। উদাহরণস্বরূপ, যদি ইউজার একটি নির্দিষ্ট URL খুলে, তবে Routing সিস্টেমটি সেই URL থেকে সম্পর্কিত ভিউটি বা পেজটি লোড করবে।

ExtJS তে, Routing সিস্টেম Ext.router.Router ক্লাস দ্বারা পরিচালিত হয়, যা আপনার URL রাউটিং এবং URL প্যারামিটারগুলোর ভিত্তিতে ভিউ পরিবর্তন করতে সাহায্য করে।

Routing উদাহরণ:

Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'card',
            items: [{
                xtype: 'panel',
                title: 'Home',
                html: 'This is the Home page'
            }, {
                xtype: 'panel',
                title: 'About',
                html: 'This is the About page'
            }, {
                xtype: 'panel',
                title: 'Contact',
                html: 'This is the Contact page'
            }]
        });

        // Setting up the router for navigation
        Ext.Router.add({
            'home': function() {
                console.log('Navigating to Home');
                // Activate the Home panel
                Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(0);
            },
            'about': function() {
                console.log('Navigating to About');
                // Activate the About panel
                Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
            },
            'contact': function() {
                console.log('Navigating to Contact');
                // Activate the Contact panel
                Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(2);
            }
        });

        // Start routing
        Ext.Router.connect();
    }
});

এখানে, Ext.Router.add() এর মাধ্যমে home, about, contact রাউট তৈরি করা হয়েছে। প্রতিটি রাউটের জন্য একটি নির্দিষ্ট কলব্যাক ফাংশন দেওয়া হয়েছে, যা ব্যবহারকারী যখন URL এ যান, তখন সেগুলি সক্রিয় করবে।

Ext.Router.connect() কল করার মাধ্যমে রাউটিং শুরু হবে।

২. Routing এবং Navigation Management

Navigation Management হল নেভিগেশন বার বা লিঙ্ক ব্যবহার করে এক পেজ থেকে অন্য পেজে যাওয়া, এবং URL প্যারামিটার ব্যবহার করে ভিউ বা কনটেন্ট পরিবর্তন করা। ExtJS Routing এর সাথে ইউজার URL এর মাধ্যমে কন্টেন্ট বা ভিউ পরিবর্তন করতে পারে।

Navigation Button উদাহরণ:

Ext.create('Ext.button.Button', {
    text: 'Go to About',
    renderTo: Ext.getBody(),
    handler: function() {
        Ext.Router.redirect('about'); // Redirect to About page
    }
});

এখানে, Ext.Router.redirect() ব্যবহার করা হয়েছে, যা ইউজারকে about রাউটের পেজে নিয়ে যাবে।

৩. Dynamic URL Parameters

ExtJS Routing সিস্টেম আপনাকে ডায়নামিক URL প্যারামিটার পরিচালনা করার ক্ষমতা দেয়। এর মাধ্যমে, আপনি URL এর মধ্যে ডেটা পাস করতে পারেন এবং সেই ডেটা অনুযায়ী পেজ বা কনটেন্ট লোড করতে পারেন।

Dynamic URL Parameters উদাহরণ:

Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'card',
            items: [{
                xtype: 'panel',
                title: 'User Profile',
                html: 'This is the User Profile page'
            }, {
                xtype: 'panel',
                title: 'User Details',
                html: 'This is the User Details page'
            }]
        });

        // Setting up routing with dynamic parameters
        Ext.Router.add({
            'user/:id': function(params) {
                console.log('Navigating to User Profile with ID: ' + params.id);
                // Display user profile based on ID
                Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(0);
            },
            'user/:id/details': function(params) {
                console.log('Navigating to User Details with ID: ' + params.id);
                // Display user details based on ID
                Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
            }
        });

        // Start routing
        Ext.Router.connect();
    }
});

এখানে:

• :id ব্যবহার করে ডায়নামিক URL প্যারামিটার তৈরি করা হয়েছে, যা ইউজারের আইডি অনুযায়ী প্রোফাইল বা ডিটেইলস পেজে নেভিগেট করবে।

যেমন, ইউজার যদি user/123 URL এ যান, তাহলে params.id হবে 123, এবং সংশ্লিষ্ট পেজটি প্রদর্শিত হবে।

৪. ExtJS History Management

History Management সিস্টেমটি ব্যবহারকারীর আগের পরিদর্শন করা URL বা পেজ ট্র্যাক করার জন্য ব্যবহৃত হয়। এতে, আপনি ব্রাউজার ইতিহাস (back, forward) ব্যবহার করে নেভিগেশন করতে পারেন এবং URL এর ভিত্তিতে অ্যাপ্লিকেশন রেটা পেজ বা ভিউ রেন্ডার করতে পারেন।

History Management উদাহরণ:

Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'card',
            items: [{
                xtype: 'panel',
                html: 'Home Page',
                title: 'Home'
            }, {
                xtype: 'panel',
                html: 'About Us Page',
                title: 'About'
            }]
        });

        // Routing
        Ext.Router.add({
            'home': function() {
                Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(0);
            },
            'about': function() {
                Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
            }
        });

        // Start History Management
        Ext.util.History.init(function() {
            console.log('History initialized');
        });

        // Manage Back button behavior
        Ext.util.History.on('change', function(token) {
            if (token === 'home') {
                Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(0);
            } else if (token === 'about') {
                Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
            }
        });

        // Redirect to Home
        Ext.util.History.add('home');
    }
});

এখানে Ext.util.History.add() এবং Ext.util.History.on() ব্যবহার করা হয়েছে যা ব্রাউজারের back এবং forward বাটন ব্যবহার করে নেভিগেশন কন্ট্রোল করতে সক্ষম।

৫. SEO-friendly Routing

SEO-friendly routing হল যখন আপনি URL এর মাধ্যমে অ্যাপ্লিকেশনের ভিউ বা পেজ সঠিকভাবে ইন্ডেক্স করতে পারেন। ExtJS তে, আপনি history এবং hash ভিত্তিক URL প্যারামিটার ব্যবহার করে SEO-সঙ্গত রাউট তৈরি করতে পারেন।

SEO-Friendly URL উদাহরণ:

Ext.Router.add({
    'about': function() {
        console.log('Navigating to About');
        Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
    },
    'about/:section': function(params) {
        console.log('Navigating to About section: ' + params.section);
        Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
    }
});

Ext.Router.connect();

এখানে, about/:section রাউটটি about পেজের বিভিন্ন সেকশন সম্পর্কিত URL প্যারামিটার গ্রহণ করে, যা SEO এর জন্য সুবিধাজনক হতে পারে।

সারাংশ

1. Routing: URL প্যারামিটার এবং রাউটগুলির মাধ্যমে অ্যাপ্লিকেশনের ভিউ বা পেজ পরিবর্তন করা।
2. Navigation Management: নেভিগেশন বার বা লিঙ্ক ব্যবহার করে এক পেজ থেকে অন্য পেজে যাওয়া।
3. Dynamic URL Parameters: URL প্যারামিটার ব্যবহার করে ভিউ বা কনটেন্ট পরিবর্তন করা।
4. History Management: ইউজারের ব্রাউজিং ইতিহাস ব্যবহার করে আগের পেজে ফিরে যাওয়া বা নতুন পেজে যাওয়া।
5. SEO-friendly Routing: URL প্যারামিটার এবং হ্যাশ ব্যবহার করে SEO-সঙ্গত রাউট তৈরি করা।

ExtJS এর রাউটিং এবং নেভিগেশন ব্যবস্থাপনা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং SEO-সঙ্গত বানাতে সাহায্য করে, যা ইউজার এক্সপিরিয়েন্স এবং সার্চ ইঞ্জিন র‍্যাঙ্কিং উন্নত করে।

ExtJS Routing System হল একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA) তৈরির সময় রাউটিং এবং নেভিগেশন পরিচালনা করতে ব্যবহৃত হয়। রাউটিং সিস্টেমের মাধ্যমে, আপনি URL এর ভিত্তিতে বিভিন্ন ভিউ (views) এবং কম্পোনেন্ট (components) অ্যাক্সেস করতে পারেন, যেমন প্রথাগত ওয়েব অ্যাপ্লিকেশনগুলিতে বিভিন্ন পেজের মধ্যে নেভিগেট করা হয়। ExtJS তে রাউটিং ব্যবহার করে, অ্যাপ্লিকেশনটি ক্লায়েন্ট-সাইডে এক পেজে চলতে থাকে এবং ডেটা বা ভিউ পরিবর্তন হয়, কিন্তু URL ঠিকানা পরিবর্তিত হয়, যা ইউজারের অভিজ্ঞতাকে আরও উন্নত করে।

Routing System কী?

Routing System হল একটি মেকানিজম যা ইউআরএল এর ভিত্তিতে অ্যাপ্লিকেশন ভিউ এবং স্টেট পরিবর্তন করে। এটি ব্যবহারকারীর ইউআরএল চেঞ্জ (যেমন: পেজ পরিবর্তন) ট্র্যাক করে এবং পেজ লোড করার পরিবর্তে উপযুক্ত ভিউ বা কম্পোনেন্ট রেন্ডার করে। ExtJS তে, রাউটিং সিস্টেম অ্যাপ্লিকেশন স্টেট এবং ভিউয়ের মধ্যে সিঙ্ক্রোনাইজেশন নিশ্চিত করতে সহায়ক।

ExtJS Routing System এর বৈশিষ্ট্য

1. URL Mapping:
   • রাউটিং সিস্টেম ইউআরএল এর সাথে এক বা একাধিক ভিউ ম্যাপ করতে সক্ষম। এর মাধ্যমে, নির্দিষ্ট ইউআরএল প্যাটার্ন অনুযায়ী উপযুক্ত ভিউ প্রদর্শিত হয়।
2. History Management:
   • রাউটিং সিস্টেম ব্যবহারকারীর ব্রাউজার হিস্ট্রি ট্র্যাক করে এবং সঠিকভাবে পেছনে বা সামনে নেভিগেট করতে সহায়তা করে।
3. Dynamic Routing:
   • ইউআরএল চেঞ্জের মাধ্যমে অ্যাপ্লিকেশন ভিউ বা কম্পোনেন্টের ডাইনামিক লোডিং সম্ভব।
4. URL Parameters:
   • ইউআরএল এ প্যারামিটার ব্যবহার করে ডেটা বা ভিউ কাস্টমাইজ করা যায়। এটি অ্যাপ্লিকেশন ভিউয়ের মধ্যে প্যারামিটার সমর্থন করতে সহায়ক।

ExtJS Routing System এর ব্যবহার

ExtJS তে Routing ব্যবহারের জন্য Ext.util.History এবং Ext.Router (Sencha Cmd এর মাধ্যমে) ব্যবহৃত হয়। এখানে, Ext.util.History কম্পোনেন্ট ব্রাউজারের ইতিহাস এবং Ext.Router রাউটিং সিস্টেমের জন্য ব্যবহৃত হয়।

১. History এবং Routing কনফিগারেশন

Ext.util.History ব্যবহার করে আপনি URL এর ইতিহাস ট্র্যাক এবং ব্রাউজারের 'back' এবং 'forward' অ্যাকশনগুলি ম্যানেজ করতে পারেন।

History ব্যবহারের উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'ExtJS Routing Example',
    width: 600,
    height: 400,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'button',
            text: 'Go to Page 1',
            handler: function() {
                Ext.util.History.add('page1');
            }
        },
        {
            xtype: 'button',
            text: 'Go to Page 2',
            handler: function() {
                Ext.util.History.add('page2');
            }
        }
    ]
});

// History listener setup
Ext.util.History.on('change', function(token) {
    if (token === 'page1') {
        console.log('Navigated to Page 1');
    } else if (token === 'page2') {
        console.log('Navigated to Page 2');
    }
});

// Enable history
Ext.util.History.init();

• Ext.util.History.add: এটি নতুন ইউআরএল টোকেন (যেমন: 'page1', 'page2') ব্রাউজারের ইতিহাসে যোগ করে।
• Ext.util.History.on: ইতিহাসে পরিবর্তন ঘটলে, এটি একটি ইভেন্ট ট্রিগার করে, যেখানে নির্দিষ্ট ভিউ বা কম্পোনেন্ট রেন্ডার করা যেতে পারে।

২. Ext.Router এবং Dynamic Routing

Ext.Router একাধিক রাউটিং প্যাটার্নের জন্য URL এবং কম্পোনেন্ট সংযুক্ত করে।

Ext.Router এর উদাহরণ:

Ext.application({
    name: 'MyApp',

    launch: function() {
        // Define routes
        Ext.Router.on({
            'home': function() {
                console.log('Home Page');
            },
            'user/:id': function(id) {
                console.log('User Page with ID: ' + id);
            }
        });

        // Activate router
        Ext.Router.redirect('home');
    }
});

• Ext.Router.on: এটি একটি রাউট প্যাটার্ন তৈরি করে, যেমন home এবং user/:id। :id একটি প্যারামিটার যা ইউআরএল থেকে পাঠানো হয়।
• Ext.Router.redirect: এটি একটি নির্দিষ্ট রাউটে নেভিগেট করে, যেমন home।

Routing System এর সুবিধা

1. এক পেজ অ্যাপ্লিকেশন (SPA):
   • রাউটিং সিস্টেম ব্যবহার করে আপনি এক পেজ অ্যাপ্লিকেশন তৈরি করতে পারেন, যেখানে পুরো অ্যাপ্লিকেশন একটি পেজেই রেন্ডার হয় এবং ডেটা বা ভিউ পরিবর্তন হয়।
2. ডাইনামিক URL এবং প্যারামিটার:
   • URL এর মাধ্যমে প্যারামিটার পাঠানোর মাধ্যমে অ্যাপ্লিকেশনের বিভিন্ন অংশ ডাইনামিকভাবে কনফিগার করা যায়, যেমন একটি নির্দিষ্ট ইউজারের ডেটা দেখতে URL এ user/:id প্যারামিটার ব্যবহার করা হয়।
3. নেভিগেশন এবং ব্রাউজার ইতিহাস:
   • History Management ব্রাউজারের ব্যাক এবং ফরওয়ার্ড বাটন কাজ নিশ্চিত করে, যেখানে ইউজার সহজেই পূর্ববর্তী অবস্থায় ফিরে যেতে পারে।
4. দ্রুত লোডিং:
   • রাউটিং সিস্টেমের মাধ্যমে আপনি প্রতিটি ইউআরএল টোকেনের জন্য নির্দিষ্ট ভিউ বা কম্পোনেন্ট ডাইনামিকভাবে লোড করতে পারেন, যা অ্যাপ্লিকেশনের লোডিং সময় কমায় এবং পারফরম্যান্স উন্নত করে।

সারাংশ

ExtJS Routing System এর মাধ্যমে আপনি ক্লায়েন্ট-সাইড রাউটিং এবং নেভিগেশন পরিচালনা করতে পারেন। এটি Single Page Applications (SPA) তৈরি করতে সহায়ক এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। Ext.util.History এবং Ext.Router টুলস দিয়ে আপনি URL এর মাধ্যমে বিভিন্ন ভিউ এবং কম্পোনেন্ট রেন্ডার করতে পারেন, যা ডেটা বা ইউআরএল চেঞ্জের সাথে সিঙ্ক্রোনাইজেশন নিশ্চিত করে। ExtJS এর রাউটিং সিস্টেম সাশ্রয়ী এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।

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 এর ভিত্তিতে বিভিন্ন ভিউ প্রদর্শন করা যায়।

ExtJS এ Dynamic Routes এবং URL Mapping দুটি অত্যন্ত গুরুত্বপূর্ণ কনসেপ্ট, যা অ্যাপ্লিকেশন নেভিগেশন এবং URL এর সাথে সম্পর্কিত ডেটা মানিপুলেশন সহজ করে তোলে। বিশেষ করে, এক্সটিজেএসে Dynamic Routes এবং URL Mapping অ্যাপ্লিকেশনকে এমনভাবে ডিজাইন করতে সাহায্য করে, যা ডাইনামিক পেজ নেভিগেশন এবং URL এর মাধ্যমে ডেটা লোডিং এবং স্টেট ম্যানেজমেন্ট পরিচালনা করতে সক্ষম।

১. Dynamic Routes

Dynamic Routes হলো এমন URL প্যাটার্ন বা রুটিং কনফিগারেশন যা অ্যাপ্লিকেশনের ডাইনামিক পেজের জন্য ব্যবহার করা হয়। ExtJS 5.0 এবং তার পরবর্তী সংস্করণে Ext.router ব্যবহার করে ডাইনামিক রুটিং পরিচালনা করা যায়, যা URL প্যাটার্নের ভিত্তিতে নেভিগেশন এবং অ্যাকশন নির্ধারণ করে।

Dynamic Routes এর মূল কাজ:

• URL এর মাধ্যমে নির্দিষ্ট পেজ বা ভিউ লোড করা।
• ব্যবহারকারীর মুভমেন্ট ট্র্যাক করা এবং নির্দিষ্ট URL অনুযায়ী কন্টেন্ট প্রদর্শন করা।
• অ্যাপ্লিকেশন স্টেট ম্যানেজমেন্ট এবং URL মানিপুলেশন।

Dynamic Routes উদাহরণ:

Ext.application({
    name: 'MyApp',
    
    routes: {
        'home': 'onHome', // URL 'home' এর জন্য onHome মেথড
        'profile/:id': 'onProfile' // Dynamic URL, id দিয়ে প্যারামিটার দেওয়া
    },
    
    onHome: function() {
        console.log('Navigating to Home');
        // এখানে home পেজ রেন্ডার বা কোনো ভিউ শো করা যেতে পারে
    },
    
    onProfile: function(id) {
        console.log('Navigating to Profile with id: ' + id);
        // এখানে প্রোফাইল পেজ রেন্ডার বা কোনো ডেটা লোড করা যেতে পারে
    },
    
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [{
                xtype: 'panel',
                html: 'Welcome to MyApp'
            }]
        });
    }
});

এখানে:

• routes: এখানে URL প্যাটার্ন নির্ধারণ করা হয়েছে। যেমন, 'home' URL এর জন্য onHome মেথড এবং 'profile/:id' এর জন্য onProfile মেথড নির্ধারণ করা হয়েছে।
• :id: Dynamic প্যারামিটার ব্যবহার করা হয়েছে, যার মাধ্যমে আপনি URL এর ভিতরে ডাইনামিক ডেটা পাঠাতে পারবেন।

Dynamic Routes কনফিগারেশন:

• /:id: এই রুটে ডাইনামিক প্যারামিটার ব্যবহার করা হয় যা URL এর অংশ হিসেবে আর্গুমেন্ট পাস করবে।
• onHome: কোনো নির্দিষ্ট পেজ বা কন্টেন্ট লোড করার জন্য ব্যবহৃত ফাংশন।

২. URL Mapping

URL Mapping এর মাধ্যমে, আপনি URL এর মাধ্যমে অ্যাপ্লিকেশনের বিভিন্ন অংশকে মেপিং করতে পারেন। এটি মূলত এক্সটিজেএস অ্যাপ্লিকেশনের URL থেকে নির্দিষ্ট রুট এবং অ্যাকশন মাপ করা হয়। এটি একটি URL থেকে অ্যাপ্লিকেশনের অবস্থান এবং কন্টেন্ট নির্ধারণে সাহায্য করে।

URL Mapping উদাহরণ:

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

    routes: {
        'home': 'loadHome',   // home route এর জন্য loadHome ফাংশন কল হবে
        'products/:category': 'loadProducts',  // Dynamic category route
        'cart': 'loadCart'    // cart route এর জন্য loadCart ফাংশন কল হবে
    },

    loadHome: function() {
        console.log('Loading Home Page');
        // হোম পেজ লোড করার লজিক
    },

    loadProducts: function(category) {
        console.log('Loading Products for Category: ' + category);
        // প্রোডাক্টের কেটাগরি অনুযায়ী পেজ লোড বা ডেটা লোড করার লজিক
    },

    loadCart: function() {
        console.log('Loading Cart');
        // শপিং কার্টের পেজ লোড করার লজিক
    }
});

এখানে:

• routes: URL প্যাটার্ন এবং তাদের কন্ট্রোলার ফাংশন মেপিং করা হয়েছে।
• loadHome, loadProducts এবং loadCart: এগুলি সেই ফাংশন যেগুলি রুট মিট হওয়ার পর কল করা হবে।

৩. History Management

এক্সটিজেএসে History Management বা ইতিহাস পরিচালনা একটি গুরুত্বপূর্ণ ফিচার, যা ব্রাউজারের URL এর মাধ্যমে পেজের অবস্থান পরিবর্তন করার জন্য ব্যবহৃত হয়। এতে করে URL মানের পরিবর্তন স্বয়ংক্রিয়ভাবে ফাংশন কল করার মাধ্যমে অ্যাপ্লিকেশনের রেসপন্স তৈরি করা হয়।

History Management উদাহরণ:

Ext.application({
    name: 'MyApp',
    
    launch: function() {
        // ইতিহাস পরিচালনা সক্ষম করা
        Ext.util.History.init();
        
        // একটি রুট URL মান চেক করা
        Ext.util.History.on('change', function(token) {
            console.log('History token changed: ' + token);
            // History token অনুসারে অ্যাকশন নেওয়া যেতে পারে
        });

        // URL পরিবর্তন করা
        Ext.util.History.add('home');
    }
});

• Ext.util.History.add: এটি URL এর অংশে মান অ্যাড করে।
• Ext.util.History.on('change'): এটি ইতিহাস পরিবর্তন হলে ট্র্যাক করে এবং প্রয়োজনে অ্যাকশন নেয়।

৪. Lazy Loading with Routes

Lazy Loading এর মাধ্যমে ডাইনামিকভাবে কম্পোনেন্ট বা রুট লোড করা যায়, যেটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সহায়ক। এক্সটিজেএসে রাউট ব্যবহারের মাধ্যমে ডাইনামিকভাবে কম্পোনেন্ট বা ভিউ লোড করা যায়।

Lazy Loading উদাহরণ:

Ext.application({
    name: 'MyApp',

    routes: {
        'profile/:id': 'onProfileLoad'
    },

    onProfileLoad: function(id) {
        console.log('Lazy load profile with ID: ' + id);
        Ext.create('MyApp.view.Profile', {
            userId: id
        });
    },

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [{
                xtype: 'panel',
                title: 'Welcome to MyApp'
            }]
        });
    }
});

• onProfileLoad: এখানে onProfileLoad ফাংশনে Profile কম্পোনেন্ট ডাইনামিকভাবে লোড করা হয়েছে যখন ইউজার নির্দিষ্ট প্রোফাইল URL পরিদর্শন করবে।

সারাংশ

1. Dynamic Routes:
   • URL প্যাটার্নের মাধ্যমে অ্যাপ্লিকেশন অ্যাকশন বা ফাংশন নির্ধারণ করা হয়।
   • URL থেকে প্যারামিটার গ্রহণ করে ডেটা লোড বা পেজ রেন্ডার করা হয়।
2. URL Mapping:
   • URL থেকে নির্দিষ্ট রুটের সাথে কন্ট্রোলার এবং অ্যাকশন মেপিং করা হয়।
3. History Management:
   • ব্রাউজারের URL পরিবর্তন সঠিকভাবে ট্র্যাক করে এবং অ্যাকশন নেয়।
4. Lazy Loading:
   • ডাইনামিকভাবে রুট লোড এবং কম্পোনেন্ট বা ভিউ ফাংশন কল করা হয়, যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সাহায্য করে।

এক্সটিজেএস (ExtJS) তে Dynamic Routes এবং URL Mapping এর মাধ্যমে আপনি অ্যাপ্লিকেশনের রাউটিং, নেভিগেশন, এবং স্টেট ম্যানেজমেন্ট সহজভাবে পরিচালনা করতে পারবেন।

ExtJS এ Nested Views এবং Routing Events ব্যবহৃত হয় একাধিক ভিউ এবং নেভিগেশন পরিচালনা করার জন্য, যা আপনাকে অ্যাপ্লিকেশনের মধ্যে বিভিন্ন অংশের মধ্যে ভিউ রাউটিং এবং ডায়নামিক কন্টেন্ট লোড করার ক্ষমতা প্রদান করে। এই ফিচারগুলি সাধারণত একক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) তৈরি করার জন্য ব্যবহৃত হয়।

১. Nested Views

Nested Views হলো এমন ভিউ যা অন্য ভিউয়ের মধ্যে অন্তর্ভুক্ত থাকে বা নির্দিষ্ট প্যানেলে উপস্থাপিত হয়। এর মাধ্যমে আপনি ডায়নামিকভাবে একাধিক ভিউকে একে অপরের মধ্যে অ্যাড করতে পারেন, যাতে আপনার অ্যাপ্লিকেশন স্কেলেবল এবং আরও মডুলার হয়।

উদাহরণ: Nested Views তৈরি করা

ধরা যাক, আপনার একটি মূল প্যানেল রয়েছে, এবং এতে আপনি দুটি ভিউ (একটি গ্রিড এবং একটি ফর্ম) অন্তর্ভুক্ত করতে চান।

Ext.define('MyApp.view.MainPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'mainpanel',
    layout: 'border',  // Layout সেট করা হলো 'border' যাতে ভিউটি বিভিন্ন অংশে বিভক্ত হয়
    items: [
        {
            xtype: 'grid',  // প্রথম ভিউ: গ্রিড
            region: 'center',
            store: 'MyStore',  // স্টোর ব্যবহার হচ্ছে
            columns: [
                { text: 'Name', dataIndex: 'name' },
                { text: 'Email', dataIndex: 'email' }
            ]
        },
        {
            xtype: 'form',  // দ্বিতীয় ভিউ: ফর্ম
            region: 'east',  // ফর্মটি 'east' অঞ্চলে
            title: 'User Form',
            width: 300,
            bodyPadding: 10,
            items: [
                { xtype: 'textfield', fieldLabel: 'Name' },
                { xtype: 'textfield', fieldLabel: 'Email' }
            ]
        }
    ]
});

এখানে:

• xtype: 'grid': একটি গ্রিড ভিউ তৈরি করা হয়েছে যা ডেটা টেবিল দেখাবে।
• xtype: 'form': একটি ফর্ম ভিউ তৈরি করা হয়েছে যেখানে ব্যবহারকারী ইনপুট দিতে পারবেন।

এগুলি layout: 'border' এর মাধ্যমে একটি নির্দিষ্ট অঞ্চল (এস্ট, সেন্টার) তৈরি হয়ে একে অপরের মধ্যে নেস্টেড হয়ে গেছে।

২. Routing Events

Routing Events বা View Routing একটি গুরুত্বপূর্ণ বিষয় একক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) তৈরি করার জন্য, যেখানে আপনি বিভিন্ন ভিউয়ের মধ্যে সহজেই নেভিগেট করতে পারেন। ExtJS এর Ext.router ক্লাস ব্যবহৃত হয় রাউটিং এবং URL এর মাধ্যমে ভিউ পরিবর্তন পরিচালনা করার জন্য।

উদাহরণ: Routing ব্যবহার করা

ExtJS তে রাউটিং ব্যবহারের জন্য Ext.util.History এবং Ext.Router ব্যবহৃত হয়, যা ভিউ রাউটিং, URL হ্যান্ডলিং এবং হিস্ট্রি ম্যানেজমেন্ট করতে সাহায্য করে।

Ext.define('MyApp.view.Main', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',
    items: [{
        xtype: 'panel',
        html: '<h1>Welcome to MyApp</h1>',
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Go to Page 1',
                handler: function() {
                    Ext.Router.redirect('page1');  // Page1 এর URL এ রিডিরেক্ট করা
                }
            }, {
                text: 'Go to Page 2',
                handler: function() {
                    Ext.Router.redirect('page2');  // Page2 এর URL এ রিডিরেক্ট করা
                }
            }]
        }]
    }]
});

// Routing configuration
Ext.Router.add({
    ':page': {
        action: 'onPageChange'
    }
});

// Controller to handle page change
Ext.define('MyApp.controller.MainController', {
    extend: 'Ext.app.Controller',
    onPageChange: function(params) {
        var page = params.page;
        var panel = Ext.ComponentQuery.query('panel')[0];
        if (page === 'page1') {
            panel.update('<h1>This is Page 1</h1>');
        } else if (page === 'page2') {
            panel.update('<h1>This is Page 2</h1>');
        }
    }
});

এখানে:

• Ext.Router.add: এটি URL পাথ যোগ করে, এবং প্রতিটি পাথের জন্য একটি অ্যাকশন নির্ধারণ করে। যেমন: :page হল URL প্যারামিটার যেটি page1 বা page2 হতে পারে।
• Ext.Router.redirect: এটি রিডিরেক্ট করার জন্য ব্যবহৃত হয়। যখন ইউজার "Go to Page 1" বা "Go to Page 2" ক্লিক করবে, তখন URL পরিবর্তিত হবে এবং onPageChange অ্যাকশন কল হবে।
• onPageChange: এটি একটি কন্ট্রোলার ফাংশন যা URL অনুযায়ী কনটেন্ট পরিবর্তন করবে।

৩. Nested Views এবং Routing এর সমন্বয়

Nested Views এবং Routing Events একত্রে ব্যবহারের মাধ্যমে আপনি ডাইনামিক এবং ইন্টারেক্টিভ একক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) তৈরি করতে পারেন, যেখানে ভিউ রাউটিং এবং nested (নেস্টেড) ভিউ দ্বারা ব্যবহারকারীর ইন্টারঅ্যাকশন সহ অ্যাপ্লিকেশনটি পরিচালনা হয়।

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

Ext.define('MyApp.view.Main', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',
    items: [{
        xtype: 'panel',
        itemId: 'mainPanel',
        html: '<h1>Home Page</h1>',
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Go to Page 1',
                handler: function() {
                    Ext.Router.redirect('page1');  // Redirect to page1 route
                }
            }, {
                text: 'Go to Page 2',
                handler: function() {
                    Ext.Router.redirect('page2');  // Redirect to page2 route
                }
            }]
        }]
    }]
});

// Adding routes for page1 and page2
Ext.Router.add({
    ':page': {
        action: 'onPageChange'
    }
});

// Controller to handle the routes
Ext.define('MyApp.controller.MainController', {
    extend: 'Ext.app.Controller',
    onPageChange: function(params) {
        var page = params.page;
        var panel = Ext.ComponentQuery.query('#mainPanel')[0];  // Targeting main panel
        if (page === 'page1') {
            panel.update('<h1>This is Page 1</h1>');
            panel.add({ xtype: 'button', text: 'Click Me!' }); // Add nested button to page 1
        } else if (page === 'page2') {
            panel.update('<h1>This is Page 2</h1>');
            panel.add({ xtype: 'button', text: 'Click Here!' }); // Add nested button to page 2
        }
    }
});

এখানে:

• Ext.Router.redirect এবং Ext.Router.add ব্যবহার করে আমরা ভিউ রাউটিং এবং URL চেঞ্জ নিয়ন্ত্রণ করছি।
• Nested Views: প্রতিটি পৃষ্ঠায় নতুন উপাদান বা নেস্টেড ভিউ (যেমন, বাটন) যোগ করা হচ্ছে, যা ভিউ পরিবর্তনের সাথে যুক্ত।

সারাংশ

1. Nested Views: একাধিক ভিউ একে অপরের মধ্যে অন্তর্ভুক্ত হয়ে কাজ করে, যেমন একটি প্যানেলে গ্রিড এবং ফর্ম ভিউ, যা অ্যাপ্লিকেশনকে মডুলার এবং স্কেলেবল করে তোলে।
2. Routing Events: Ext.Router ব্যবহার করে URL রাউটিং এবং ভিউ রাউটিং করা যায়, যা একক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) তৈরি করতে সাহায্য করে।
3. Nested Views এবং Routing: একে অপরের সাথে যুক্ত করে আপনি ডাইনামিক, ইন্টারঅ্যাক্টিভ, এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে পারবেন।

এভাবে Nested Views এবং Routing একসাথে ব্যবহারের মাধ্যমে আপনি একটি পূর্ণাঙ্গ SPA (Single Page Application) তৈরি করতে পারবেন যা বিভিন্ন ভিউর মধ্যে সহজে নেভিগেট করা যায়।