Dynamic Routes এবং URL Mapping

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