Flex এ CSS ব্যবহার করে Styling করা

Adobe Flex-এ CSS (Cascading Style Sheets) ব্যবহার করে অ্যাপ্লিকেশনের UI কম্পোনেন্টগুলোর স্টাইলিং করা যায়। CSS ফাইলগুলি Flex অ্যাপ্লিকেশনগুলিতে থিম এবং ডিজাইন কাস্টমাইজ করার জন্য ব্যবহৃত হয়। Flex CSS স্টাইলিং উপাদানগুলির জন্য কাস্টম স্টাইলস তৈরি করতে সহায়ক, যেমন বাটন, লেবেল, ডেটাগ্রিড ইত্যাদি।

Flex-এ CSS ব্যবহারের মাধ্যমে আপনি অ্যাপ্লিকেশনটির লেআউট, রং, ফন্ট, প্যাডিং, মার্জিন ইত্যাদি কাস্টমাইজ করতে পারেন।

১. CSS স্টাইলিংয়ের মৌলিক ধারণা

Flex অ্যাপ্লিকেশনে CSS ফাইল সাধারণত <style> ট্যাগের মাধ্যমে MXML ফাইলে অন্তর্ভুক্ত করা হয় অথবা আলাদাভাবে একটি CSS ফাইলে লেখা থাকে। আপনি CSS সিলেক্টর ব্যবহার করে UI কম্পোনেন্টের স্টাইলিং করতে পারেন।

উদাহরণ:

/* Example.css */
.s-Button {
    background-color: #0078D7;
    color: white;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
}

এখানে, .s-Button সিলেক্টর ব্যবহার করে আমরা বাটনের জন্য কিছু স্টাইল প্রয়োগ করেছি। background-color, color, font-size ইত্যাদি প্রপার্টি সেট করা হয়েছে।

২. CSS ফাইল অ্যাপ্লিকেশনে যুক্ত করা

Flex অ্যাপ্লিকেশনে CSS ফাইল অন্তর্ভুক্ত করতে MXML ফাইলের মধ্যে <fx:Style> ট্যাগ ব্যবহার করা হয় অথবা ফাইলের মধ্যে সরাসরি CSS ফাইল রেফারেন্স দেওয়া যায়।

১. CSS স্টাইল MXML ফাইলে যুক্ত করা:

<fx:Style>
    .s-Button {
        background-color: #0078D7;
        color: white;
        font-size: 16px;
        padding: 10px;
        border-radius: 5px;
    }
</fx:Style>

<s:Button label="Click Me" />

২. CSS ফাইল রেফারেন্স করা:

<fx:Style source="styles.css"/>
<s:Button label="Click Me" />

এখানে, styles.css ফাইলটি অ্যাপ্লিকেশনের সাথে যুক্ত হয়েছে এবং এতে দেওয়া স্টাইলগুলি বাটনের উপর প্রয়োগ হবে।

৩. Flex UI কম্পোনেন্টগুলির স্টাইলিং

Flex অ্যাপ্লিকেশনগুলিতে বিভিন্ন UI কম্পোনেন্টের জন্য CSS ব্যবহার করে কাস্টম স্টাইল তৈরি করা যেতে পারে। কিছু সাধারণ কম্পোনেন্ট যেমন Button, Label, TextInput, DataGrid ইত্যাদির স্টাইলিং কাস্টমাইজ করা হয়।

উদাহরণ ১: Button স্টাইলিং

/* button.css */
.s-Button {
    background-color: #0078D7;
    color: white;
    font-size: 16px;
    border: none;
    padding: 10px;
    border-radius: 5px;
}

.s-Button:hover {
    background-color: #005B9F;
}

এখানে, Button কম্পোনেন্টের জন্য background-color, font-size, padding, border-radius স্টাইল সেট করা হয়েছে। এছাড়াও, hover স্টাইলটি ব্যবহার করা হয়েছে যাতে ব্যবহারকারী যখন বাটনের উপর মাউস রেখে ক্লিক না করেন, তখন একটি নতুন ব্যাকগ্রাউন্ড রঙ প্রদর্শিত হয়।

উদাহরণ ২: TextInput স্টাইলিং

/* textinput.css */
.s-TextInput {
    border: 1px solid #0078D7;
    padding: 5px;
    border-radius: 4px;
    font-size: 14px;
}

এখানে, TextInput কম্পোনেন্টের জন্য border, padding, এবং font-size কাস্টমাইজ করা হয়েছে।

উদাহরণ ৩: DataGrid স্টাইলিং

/* datagrid.css */
.s-DataGrid {
    border-collapse: collapse;
    width: 100%;
}

.s-DataGridColumn {
    background-color: #f4f4f4;
    color: #333;
    padding: 8px;
}

এখানে, DataGrid এবং DataGridColumn কম্পোনেন্টের জন্য background-color, padding, এবং color স্টাইল সেট করা হয়েছে।

৪. Flex UI কম্পোনেন্টে স্টাইল প্রয়োগের কৌশল

1. Class-based Styling: CSS ক্লাস ব্যবহার করে একাধিক কম্পোনেন্টে স্টাইল প্রয়োগ করা যায়।

   • উদাহরণ:

     .myCustomButton {
         background-color: #4CAF50;
         color: white;
         padding: 12px 24px;
         font-size: 16px;
     }
     

     <s:Button label="Click Me" class="myCustomButton" />
     

2. Inline Styling: style অ্যাট্রিবিউট ব্যবহার করে সরাসরি MXML ফাইলে স্টাইল প্রয়োগ করা যায়।

   • উদাহরণ:

     <s:Button label="Click Me" style="background-color:#4CAF50; color:white; padding:12px 24px; font-size:16px;"/>
     

3. State-based Styling: Flex অ্যাপ্লিকেশনে বিভিন্ন state অনুযায়ী স্টাইল প্রয়োগ করা যায়, যেমন Normal, Disabled, Hovered ইত্যাদি।

   • উদাহরণ:

     <fx:Style>
         .normalState {
             background-color: #4CAF50;
         }
         .disabledState {
             background-color: #9E9E9E;
         }
     </fx:Style>
     
     <s:Button label="Submit" state="normalState"/>
     

4. Inherited Styles: Flex UI কম্পোনেন্টের স্টাইলিং মূল কম্পোনেন্ট থেকে ইনহেরিট করা যেতে পারে।

   • উদাহরণ:

     .myCustomButton {
         font-family: Arial, sans-serif;
         font-size: 14px;
     }
     
     .myCustomButton s:Label {
         color: red;
     }
     

৫. CSS সিলেক্টর এবং স্টাইলিং

CSS সিলেক্টরগুলি ব্যবহার করে কম্পোনেন্টগুলোকে সঠিকভাবে লক্ষ্য করা যায় এবং তাদের স্টাইল করা যায়। বিভিন্ন ধরনের সিলেক্টর ব্যবহার করা হয়, যেমন:

• Class Selector: .className
• ID Selector: #idName
• Element Selector: elementName
• Descendant Selector: elementName elementName

উদাহরণ:

/* Class Selector */
.myButton {
    background-color: #4CAF50;
}

/* ID Selector */
#submitButton {
    font-size: 16px;
}

/* Element Selector */
s:Label {
    font-weight: bold;
}

সারাংশ

Flex অ্যাপ্লিকেশনে CSS ব্যবহার করে আপনি সহজেই UI কম্পোনেন্টগুলির স্টাইল কাস্টমাইজ করতে পারেন। MXML ফাইলে স্টাইল প্রয়োগ করতে <fx:Style> ট্যাগ বা বাইরের CSS ফাইল রেফারেন্স ব্যবহার করা হয়। Flex-এর Button, TextInput, DataGrid ইত্যাদি কম্পোনেন্টগুলিতে CSS স্টাইল প্রয়োগ করা সহজ, যা অ্যাপ্লিকেশনের থিম এবং ইউজার ইন্টারফেস ডিজাইনকে আরও কাস্টমাইজ করতে সহায়ক।