JavaFX CSS এর বিভিন্ন Selector এবং Pseudo-classes

JavaFX এ, CSS ব্যবহার করে আপনি আপনার UI উপাদানগুলোর স্টাইল কাস্টমাইজ করতে পারেন। JavaFX CSS এর মাধ্যমে আপনি বিভিন্ন Selectors এবং Pseudo-classes ব্যবহার করে UI উপাদানগুলোর স্টাইল করতে পারেন। CSS এর এই ফিচারগুলো JavaFX অ্যাপ্লিকেশনের রূপ এবং অনুভূতি উন্নত করতে সাহায্য করে।

1. JavaFX CSS Selectors

Selectors হল CSS-এর অংশ যা নির্দিষ্ট HTML বা JavaFX উপাদানগুলোর জন্য স্টাইল নির্ধারণ করে। JavaFX CSS এর Selectors আপনাকে UI উপাদানগুলোকে চিহ্নিত করতে এবং তাদের স্টাইল প্রয়োগ করতে সাহায্য করে।

a. Element Selector

এটি CSS এর সবচেয়ে সাধারণ ধরনের সিলেক্টর যা একটি নির্দিষ্ট উপাদানকে লক্ষ্য করে।

Button {
    -fx-background-color: lightblue;
    -fx-text-fill: black;
}

ব্যাখ্যা:

• এই CSS কোডটি Button উপাদানের জন্য প্রযোজ্য। এটি বাটনের ব্যাকগ্রাউন্ড কালার lightblue এবং টেক্সট কালার black করে।

b. ID Selector

ID সিলেক্টর ব্যবহার করে আপনি নির্দিষ্ট ID সহ উপাদানগুলোকে স্টাইল করতে পারেন।

#myButton {
    -fx-background-color: yellow;
}

ব্যাখ্যা:

• #myButton একটি ID সিলেক্টর যা শুধুমাত্র myButton ID সহ বাটনগুলোর জন্য স্টাইল প্রয়োগ করবে।

c. Class Selector

ক্লাস সিলেক্টর ব্যবহার করে আপনি এক বা একাধিক উপাদানের জন্য স্টাইল প্রয়োগ করতে পারেন।

.button-style {
    -fx-font-size: 14px;
    -fx-padding: 10px;
}

ব্যাখ্যা:

• .button-style ক্লাস সিলেক্টরটি সব বাটনগুলোর জন্য একটি স্টাইল প্রয়োগ করবে যেগুলোর ক্লাস button-style হবে।

d. Descendant Selector

এটি একটি উপাদানের ভিতরে থাকা অন্য উপাদানগুলোকে লক্ষ্য করে।

VBox Button {
    -fx-background-color: green;
}

ব্যাখ্যা:

• VBox Button সিলেক্টরটি সব বাটনগুলোর জন্য প্রযোজ্য হবে যা VBox লেআউটের ভিতরে রয়েছে।

2. JavaFX CSS Pseudo-classes

Pseudo-classes হল CSS-এর একটি শক্তিশালী ফিচার, যা UI উপাদানের বিভিন্ন স্টেট (যেমন, হোভার, অ্যাকটিভ, ইনপুট ফোকাস) এর ভিত্তিতে স্টাইল পরিবর্তন করতে ব্যবহৃত হয়। JavaFX তে কিছু প্রচলিত Pseudo-classes ব্যবহার করা যায়।

a. :hover Pseudo-class

এই পসুডো-ক্লাসটি তখন ব্যবহৃত হয় যখন ইউজার মাউস পয়েন্টারকে একটি UI উপাদান (যেমন, বাটন) এর উপর রাখে।

Button:hover {
    -fx-background-color: darkgreen;
    -fx-text-fill: white;
}

ব্যাখ্যা:

• যখন বাটনের উপরে মাউস রাখবে, তখন বাটনের ব্যাকগ্রাউন্ড কালার darkgreen এবং টেক্সট কালার white হবে।

b. :pressed Pseudo-class

এই পসুডো-ক্লাসটি তখন ব্যবহৃত হয় যখন UI উপাদানটি প্রেস করা হয়, যেমন বাটন ক্লিক করা।

Button:pressed {
    -fx-background-color: red;
    -fx-text-fill: white;
}

ব্যাখ্যা:

• বাটনটি প্রেস করলে তার ব্যাকগ্রাউন্ড কালার red এবং টেক্সট কালার white হবে।

c. :focused Pseudo-class

এই পসুডো-ক্লাসটি তখন ব্যবহৃত হয় যখন কোনো UI উপাদান (যেমন, টেক্সটফিল্ড) ফোকাস হয়।

TextField:focused {
    -fx-border-color: blue;
}

ব্যাখ্যা:

• যখন TextField ফোকাসে থাকে, তখন এর বর্ডারের কালার blue হবে।

d. :disabled Pseudo-class

এই পসুডো-ক্লাসটি তখন ব্যবহৃত হয় যখন একটি UI উপাদান অক্ষম (disabled) থাকে।

Button:disabled {
    -fx-background-color: gray;
    -fx-text-fill: lightgray;
}

ব্যাখ্যা:

• যখন বাটনটি নিষ্ক্রিয় থাকে, তখন তার ব্যাকগ্রাউন্ড কালার gray এবং টেক্সট কালার lightgray হবে।

e. :selected Pseudo-class

এই পসুডো-ক্লাসটি তখন ব্যবহৃত হয় যখন কোনো UI উপাদান নির্বাচিত থাকে, যেমন চেকবক্স বা রেডিও বাটন।

RadioButton:selected {
    -fx-background-color: yellow;
}

ব্যাখ্যা:

• যখন একটি RadioButton নির্বাচিত (selected) থাকবে, তখন এর ব্যাকগ্রাউন্ড কালার yellow হবে।

3. JavaFX Example: Using CSS Selectors and Pseudo-classes

এখানে একটি উদাহরণ দেওয়া হলো যেখানে আমরা CSS সিলেক্টর এবং পসুডো-ক্লাস ব্যবহার করে JavaFX অ্যাপ্লিকেশন ডিজাইন করব।

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFXCSSExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // বাটন তৈরি
        Button button = new Button("Click Me");
        
        // StackPane লেআউট তৈরি
        StackPane root = new StackPane();
        root.getChildren().add(button);
        
        // Scene তৈরি এবং CSS স্টাইল সেট করা
        Scene scene = new Scene(root, 300, 200);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        
        primaryStage.setTitle("JavaFX CSS Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

style.css (CSS ফাইল):

/* Button Styling */
Button {
    -fx-background-color: lightblue;
    -fx-text-fill: black;
    -fx-font-size: 14px;
}

/* Hover effect */
Button:hover {
    -fx-background-color: darkgreen;
    -fx-text-fill: white;
}

/* Pressed effect */
Button:pressed {
    -fx-background-color: red;
    -fx-text-fill: white;
}

/* Disabled Button */
Button:disabled {
    -fx-background-color: gray;
    -fx-text-fill: lightgray;
}

ব্যাখ্যা:

• এখানে একটি Button তৈরি করা হয়েছে এবং এর CSS স্টাইলিং করা হয়েছে style.css ফাইলে।
• Button:hover এবং Button:pressed পসুডো-ক্লাস ব্যবহার করে বাটনের হোভার এবং প্রেস অবস্থায় ব্যাকগ্রাউন্ড এবং টেক্সট কালার পরিবর্তন করা হয়েছে।

JavaFX এর CSS সিলেক্টর এবং পসুডো-ক্লাস ব্যবহার করে আপনি UI উপাদানগুলোর স্টাইলিং খুব সহজে কাস্টমাইজ করতে পারেন। CSS সিলেক্টর এবং পসুডো-ক্লাস যেমন :hover, :pressed, :focused, এবং :disabled আপনাকে ইন্টারেক্টিভ এবং দৃষ্টিনন্দন ইউজার ইন্টারফেস ডিজাইন করতে সাহায্য করে। JavaFX এ CSS এর মাধ্যমে আপনি অ্যাপ্লিকেশনের রূপ এবং অনুভূতি উন্নত করতে পারবেন।