Web Development Custom Components তৈরি করা গাইড ও নোট

Sencha Touch এর পরিচিতি

Sencha Touch হল একটি JavaScript ফ্রেমওয়ার্ক যা মূলত মোবাইল ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়। এটি HTML5, CSS3, এবং JavaScript ব্যবহার করে দ্রুত এবং কার্যকরী মোবাইল অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। Sencha Touch বিভিন্ন মোবাইল ডিভাইসে স্লিক, রেসপন্সিভ ইউজার ইন্টারফেস (UI) তৈরি করতে সক্ষম এবং এটি বেশ কিছু প্রস্তুত উপাদান (pre-built components) সরবরাহ করে, যা মোবাইল অ্যাপ্লিকেশনের উন্নয়নকে দ্রুত করে।

Sencha Touch দিয়ে আপনি Custom Components তৈরি করতে পারেন, যা আপনার অ্যাপ্লিকেশনের নির্দিষ্ট প্রয়োজন মেটাতে সাহায্য করবে। Custom Components তৈরি করার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেস কাস্টমাইজ করতে পারেন।

Sencha Touch এ Custom Components তৈরি করার পদ্ধতি

Sencha Touch এর মধ্যে Custom Component তৈরি করতে আপনাকে কিছু মৌলিক স্টেপ অনুসরণ করতে হবে। Custom Component তৈরির জন্য সাধারণত Ext.Component বা Ext.Container শ্রেণী ব্যবহার করা হয়। এগুলো আপনাকে নতুন ইউজার ইন্টারফেস উপাদান তৈরি করতে সাহায্য করে।

১. Custom Component তৈরি করা

Custom Component তৈরি করতে, প্রথমে আপনি একটি নতুন JavaScript ক্লাস তৈরি করবেন এবং সেটি Ext.Component বা Ext.Container থেকে এক্সটেন্ড করবেন। এটি আপনার কম্পোনেন্টের মূল ফাংশনালিটি প্রদান করবে।

Custom Component উদাহরণ:

Ext.define('MyApp.view.CustomButton', {
    extend: 'Ext.Button', // Ext.Button বা Ext.Component বেস ক্লাস
    xtype: 'custombutton', // কম্পোনেন্টের জন্য xtype (কাস্টম নাম)

    config: {
        text: 'Click Me', // বাটনের টেক্সট
        handler: function() { // বাটনে ক্লিক হলে কি হবে
            Ext.Msg.alert('Clicked!', 'You clicked the custom button.');
        }
    }
});

এখানে, আমরা Ext.Button ক্লাসকে এক্সটেন্ড করে একটি কাস্টম বাটন তৈরি করেছি, যার টেক্সট 'Click Me' এবং একটি ক্লিক হ্যান্ডলার রয়েছে যা একটি মেসেজ শো করবে।

২. Component এর মধ্যে কনফিগারেশন (config) সেট করা

আপনি যখন একটি Custom Component তৈরি করেন, তখন আপনি config অবজেক্ট ব্যবহার করে কম্পোনেন্টের কনফিগারেশন সেট করতে পারেন। এই কনফিগারেশনে আপনি বিভিন্ন প্রপার্টি যেমন text, handler, icon, style ইত্যাদি ব্যবহার করতে পারেন।

Ext.define('MyApp.view.CustomLabel', {
    extend: 'Ext.Component',
    xtype: 'customlabel',
    
    config: {
        html: 'Hello, this is a custom label!',
        style: 'color: blue; font-size: 20px;'
    }
});

এখানে, একটি কাস্টম লেবেল তৈরি করা হয়েছে, যেখানে html প্রপার্টি দ্বারা টেক্সট এবং style দ্বারা CSS স্টাইল সেট করা হয়েছে।

৩. Custom Component রেন্ডারিং

Custom Component যখন তৈরি হয়ে যায়, তখন আপনি এটি আপনার অ্যাপ্লিকেশনে ব্যবহার করতে পারবেন। কম্পোনেন্টটি সাধারণত একটি কনটেইনার বা প্যানেলে রেন্ডার করা হয়।

Ext.application({
    name: 'MyApp',
    
    launch: function() {
        Ext.create('Ext.Container', {
            fullscreen: true,
            items: [{
                xtype: 'custombutton' // কাস্টম বাটন ব্যবহার
            },{
                xtype: 'customlabel' // কাস্টম লেবেল ব্যবহার
            }]
        });
    }
});

এখানে, একটি Ext.Container ব্যবহার করা হয়েছে, যেখানে custombutton এবং customlabel কম্পোনেন্টগুলিকে xtype হিসেবে রেন্ডার করা হয়েছে।

৪. Custom Component এর মধ্যে ইভেন্ট হ্যান্ডলিং

Sencha Touch এ Custom Component এর মধ্যে ইভেন্ট হ্যান্ডলিং খুবই গুরুত্বপূর্ণ। আপনি tap, swipe, click, touchstart, ইত্যাদি ইভেন্ট হ্যান্ডলারগুলি ব্যবহার করতে পারেন।

Ext.define('MyApp.view.CustomSlider', {
    extend: 'Ext.Slider',
    xtype: 'customslider',
    
    config: {
        value: 50, // প্রাথমিক মান
        minValue: 0, // সর্বনিম্ন মান
        maxValue: 100, // সর্বোচ্চ মান
        listeners: {
            change: function(slider, newValue) {
                console.log('Slider value: ' + newValue);
            }
        }
    }
});

এখানে, Ext.Slider ক্লাসকে এক্সটেন্ড করে একটি কাস্টম স্লাইডার তৈরি করা হয়েছে এবং এর মধ্যে change ইভেন্ট হ্যান্ডলার দেওয়া হয়েছে, যা স্লাইডারের মান পরিবর্তন হওয়ার পর কল হবে।

৫. Custom Component এর মধ্যে লেআউট কনফিগারেশন

আপনি যখন Custom Component তৈরি করবেন, তখন আপনি লেআউট কনফিগারেশনও করতে পারেন। Sencha Touch-এ লেআউট কনফিগারেশন দ্বারা আপনি কনটেইনারে থাকা কম্পোনেন্টগুলোর অবস্থান নিয়ন্ত্রণ করতে পারেন।

Ext.define('MyApp.view.CustomPanel', {
    extend: 'Ext.Panel',
    xtype: 'custompanel',
    
    config: {
        layout: 'vbox', // উল্লম্ব লেআউট
        items: [{
            xtype: 'custombutton'
        },{
            xtype: 'customlabel'
        }]
    }
});

এখানে, vbox লেআউট ব্যবহার করা হয়েছে যা কম্পোনেন্টগুলিকে উল্লম্বভাবে সাজাবে।

৬. Custom Component এর মধ্যে স্টাইল এবং থিম কাস্টমাইজেশন

Sencha Touch আপনাকে কাস্টম থিম তৈরি করার সুযোগ দেয়, যাতে আপনি আপনার Custom Components এর স্টাইল এবং থিম কাস্টমাইজ করতে পারেন। আপনি CSS বা SASS ব্যবহার করে থিম এবং স্টাইল কাস্টমাইজ করতে পারেন।

Custom Component Styling:

/* custom-styles.css */
.x-btn-custom {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

Ext.define('MyApp.view.CustomButton', {
    extend: 'Ext.Button',
    xtype: 'custombutton',
    
    config: {
        text: 'Custom Button',
        cls: 'x-btn-custom' // স্টাইল ক্লাস যুক্ত করা হচ্ছে
    }
});

এখানে, একটি কাস্টম স্টাইল ক্লাস তৈরি করা হয়েছে এবং সেই ক্লাসটি xtype: 'custombutton' এর মধ্যে যোগ করা হয়েছে।

সারাংশ

Sencha Touch এ Custom Components তৈরি করা আপনাকে আপনার মোবাইল ওয়েব অ্যাপ্লিকেশনকে বিশেষভাবে কাস্টমাইজ করার ক্ষমতা প্রদান করে। আপনি Ext.Component, Ext.Button, Ext.Panel ইত্যাদি ক্লাসগুলো এক্সটেন্ড করে আপনার নিজস্ব কম্পোনেন্ট তৈরি করতে পারেন এবং এগুলির মধ্যে বিভিন্ন কনফিগারেশন যেমন event handling, layout, styles, themes ইত্যাদি ব্যবহার করতে পারেন। এই কাস্টম কম্পোনেন্টগুলি আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও ডায়নামিক, ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করতে সাহায্য করে।