Pre-built Theme ব্যবহার এবং কাস্টম থিম তৈরি করা

Web Development - এক্সটিজেএস (ExtJS) - ExtJS Theming এবং Customization |

ExtJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা উন্নত ইউজার ইন্টারফেস (UI) তৈরির জন্য ব্যবহৃত হয়। এর মধ্যে একটি দুর্দান্ত থিমিং সিস্টেম রয়েছে যা ডেভেলপারদের তাদের অ্যাপ্লিকেশনটির চেহারা ও অনুভূতি কাস্টমাইজ করতে দেয়। ExtJS আপনাকে pre-built themes ব্যবহার করার সুবিধা দেয় এবং আপনি চাইলে custom themes তৈরি করেও অ্যাপ্লিকেশনটির ডিজাইন কাস্টমাইজ করতে পারেন।

Pre-built Theme ব্যবহার

ExtJS তে অনেক প্রি-বিল্ট থিম উপলব্ধ রয়েছে, যা আপনি সরাসরি ব্যবহার করতে পারেন। সাধারণত, Sencha Themer এবং ExtJS Theme ডেভেলপমেন্ট টুলস ব্যবহার করে থিম পরিবর্তন করা হয়।

Pre-built Themes এর উদাহরণ:

classic থিম: একটি প্রথাগত ডেস্কটপ-ভিত্তিক ডিজাইন।
modern থিম: আধুনিক ডিজাইন যা মোবাইল এবং ট্যাবলেট-ভিত্তিক ইউজার ইন্টারফেসের জন্য উপযুক্ত।

Pre-built Theme ব্যবহার করার জন্য কনফিগারেশন:

app.js ফাইলে, আপনি সহজেই থিম সিলেক্ট করতে পারেন:

Ext.application({
    name: 'MyApp',
    requires: ['Ext.MessageBox'],
    
    // থিম নির্বাচন করা
    theme: 'classic', // বা 'modern'
    
    launch: function() {
        Ext.create('Ext.MessageBox', {
            title: 'Hello ExtJS!',
            message: 'This is a pre-built theme example.',
            buttons: Ext.MessageBox.OK
        });
    }
});

এখানে, theme কনফিগারেশনে "classic" বা "modern" থিম ব্যবহার করা হয়েছে। ExtJS ফ্রেমওয়ার্ক এই থিমগুলো সরাসরি অ্যাপ্লিকেশনে প্রয়োগ করবে।

কাস্টম থিম তৈরি করা

ExtJS তে কাস্টম থিম তৈরি করার জন্য SASS (Syntactically Awesome Stylesheets) ব্যবহার করা হয়। SASS ব্যবহার করে আপনি থিমের স্টাইল কাস্টমাইজ করতে পারেন, যেমন সঠিক রং, টাইপোগ্রাফি, বর্ডার, শ্যাডো ইত্যাদি।

কাস্টম থিম তৈরি করার ধাপ:

Sencha Cmd ইনস্টল করা: কাস্টম থিম তৈরি করার জন্য Sencha Cmd ইনস্টল করা প্রয়োজন। এটি থিম তৈরির জন্য প্রয়োজনীয় সরঞ্জাম সরবরাহ করে।
প্রকল্প তৈরি এবং থিম কনফিগারেশন: আপনি Sencha Cmd এর মাধ্যমে একটি নতুন প্রকল্প তৈরি করতে পারেন এবং সেখানে আপনার কাস্টম থিম কনফিগার করতে পারবেন।

Sencha Cmd দিয়ে প্রজেক্ট তৈরি:

sencha generate app MyApp /path/to/myapp

কাস্টম থিম ফোল্ডার তৈরি করা: আপনি কাস্টম থিম ফোল্ডার তৈরি করতে পারেন এবং সেখানে SASS ফাইলগুলি রাখবেন। উদাহরণস্বরূপ:

কাস্টম থিম ফোল্ডার স্ট্রাকচার:

/app
  /sass
    /themes
      /myCustomTheme
        _variables.scss
        _buttons.scss
        _layout.scss

SASS ফাইল কনফিগারেশন: আপনি কাস্টম স্টাইল এবং ভ্যারিয়েবল কনফিগার করতে পারবেন SASS ফাইলগুলোতে। উদাহরণস্বরূপ, একটি কাস্টম রং পরিবর্তন করার জন্য:

_variables.scss:

$primary-color: #4CAF50; // কাস্টম রঙ নির্ধারণ
$secondary-color: #FF5722; // সেকেন্ডারি রঙ

_buttons.scss:

.x-btn {
    background-color: $primary-color;
    color: white;
}

কাস্টম থিম তৈরি করা: কাস্টম থিম তৈরি করার জন্য sencha কমান্ড ব্যবহার করতে হবে। এটি SASS ফাইলগুলি কম্পাইল করে এবং একটি .css ফাইল তৈরি করবে।

Sencha Cmd দিয়ে থিম তৈরি:

sencha generate theme myCustomTheme

অ্যাপ্লিকেশনে কাস্টম থিম প্রয়োগ: তৈরি করা কাস্টম থিম আপনার অ্যাপ্লিকেশনে প্রয়োগ করতে, app.json ফাইলে থিমটি রেফারেন্স করতে হবে।

app.json ফাইলে কাস্টম থিম প্রয়োগ:

{
    "name": "MyApp",
    "theme": "myCustomTheme",
    "requires": [
        "Ext.MessageBox"
    ],
    "launch": function () {
        Ext.create('Ext.MessageBox', {
            title: 'Custom Theme Example',
            message: 'This is a custom theme example using SASS.',
            buttons: Ext.MessageBox.OK
        });
    }
}

এখানে, theme কনফিগারেশনে "myCustomTheme" রেফারেন্স করা হয়েছে, যা পূর্বে তৈরি করা কাস্টম থিম।

Sencha Themer ব্যবহার করে কাস্টম থিম তৈরি

Sencha Themer হল একটি গ্রাফিক্যাল ইউজার ইন্টারফেস (GUI) টুল যা ডেভেলপারদের এবং ডিজাইনারদের ExtJS অ্যাপ্লিকেশনের জন্য কাস্টম থিম ডিজাইন করতে সাহায্য করে। Sencha Themer ব্যবহার করে আপনি সহজেই রং, স্টাইল, এবং থিমের অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

Sencha Themer ইনস্টল করুন: Sencha Themer ডাউনলোড পেজ থেকে Sencha Themer ডাউনলোড এবং ইনস্টল করুন।
Sencha Themer ব্যবহার করা:
- Themer অ্যাপ্লিকেশন ওপেন করে New Theme তৈরি করুন।
- Pre-built themes থেকে একটি থিম বেছে নিন এবং সেটি কাস্টমাইজ করুন (রং, ফন্ট, শ্যাডো, ব্যাকগ্রাউন্ড ইত্যাদি)।
- থিম তৈরি করার পর, এটি ExtJS অ্যাপ্লিকেশনে প্রয়োগ করতে পারবেন।

সারাংশ

Pre-built themes এর মাধ্যমে আপনি খুব সহজেই ExtJS অ্যাপ্লিকেশনে প্রি-কনফিগারড থিম ব্যবহার করতে পারেন যেমন classic এবং modern থিম।
Custom themes তৈরি করার জন্য SASS ব্যবহার করতে হয়, যেখানে আপনি কাস্টম রং, টাইপোগ্রাফি, বর্ডার ইত্যাদি কাস্টমাইজ করতে পারেন।
Sencha Cmd এবং Sencha Themer এর মাধ্যমে আপনি কাস্টম থিম তৈরি এবং ব্যবহারের জন্য বিভিন্ন টুলস পেতে পারেন।
SASS এর মাধ্যমে কাস্টম থিম তৈরি করলে আপনি অ্যাপ্লিকেশনের ডিজাইনকে আপনার প্রয়োজন অনুসারে সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন।

এভাবে, ExtJS তে থিমিং ব্যবস্থার মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরও সুন্দর, ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব করা সম্ভব।

Content added By

Md Azizur Rahman

Pre-built Theme ব্যবহার এবং কাস্টম থিম তৈরি করা

Pre-built Theme ব্যবহার এবং কাস্টম থিম তৈরি করা