Custom CSS তৈরি এবং Scene এর জন্য প্রয়োগ করা

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

এখানে আমরা দেখব কীভাবে JavaFX-এ Custom CSS তৈরি এবং Scene-এ প্রয়োগ করা যায়।

ধাপ 1: Custom CSS তৈরি করা

style.css (Custom CSS ফাইল):

/* Root container styling */
.root {
    -fx-background-color: #f4f4f9;
    -fx-padding: 20px;
}

/* Button styling */
.myButton {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 10px 20px;
    -fx-border-radius: 5px;
    -fx-background-radius: 5px;
}

/* Button hover effect */
.myButton:hover {
    -fx-background-color: #2980b9;
}

/* Label styling */
.myLabel {
    -fx-font-size: 18px;
    -fx-text-fill: #2c3e50;
    -fx-font-weight: bold;
}

/* TextField styling */
.myTextField {
    -fx-background-color: #ecf0f1;
    -fx-border-color: #bdc3c7;
    -fx-border-radius: 5px;
    -fx-padding: 5px 10px;
}

/* StackPane background color */
.stackPane {
    -fx-background-color: #ffffff;
    -fx-border-radius: 10px;
    -fx-padding: 10px;
}

ব্যাখ্যা:

• .root: এটি পুরো Scene এর জন্য স্টাইলিং, যেখানে ব্যাকগ্রাউন্ড রঙ এবং প্যাডিং নির্ধারণ করা হয়েছে।
• .myButton: একটি বাটন কাস্টম ক্লাসের জন্য স্টাইল। এর মধ্যে বাটনের ব্যাকগ্রাউন্ড, টেক্সট রঙ, ফন্ট সাইজ, প্যাডিং এবং বর্ডার রেডিয়াস নির্ধারণ করা হয়েছে।
• .myButton:hover: বাটনের উপর মাউস রেখে গেলে, রঙ পরিবর্তন করার জন্য হোভার প্রভাব।
• .myLabel: লেবেলের জন্য স্টাইলিং, যা ফন্ট সাইজ, রঙ এবং বোল্ড ফন্ট ব্যবহার করে।
• .myTextField: টেক্সটফিল্ডের ব্যাকগ্রাউন্ড, বর্ডার রঙ, প্যাডিং ইত্যাদি।
• .stackPane: StackPane এর জন্য ব্যাকগ্রাউন্ড রঙ এবং প্যাডিং।

ধাপ 2: FXML ফাইল তৈরি করা

sample.fxml (FXML ফাইল):

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.TextField?>

<StackPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller" fx:id="root">
    <VBox alignment="CENTER" spacing="20">
        <Label text="Welcome to JavaFX!" fx:id="myLabel" styleClass="myLabel"/>
        <TextField fx:id="myTextField" promptText="Enter something..." styleClass="myTextField"/>
        <Button text="Click Me!" fx:id="myButton" styleClass="myButton" onAction="#handleButtonClick"/>
    </VBox>
</StackPane>

ব্যাখ্যা:

• styleClass="myLabel", styleClass="myTextField", এবং styleClass="myButton": FXML-এ আমরা স্টাইল ক্লাস অ্যাট্রিবিউট ব্যবহার করে CSS স্টাইলিং ক্লাসগুলি যুক্ত করেছি।
• onAction="#handleButtonClick": এটি একটি ইভেন্ট হ্যান্ডলার যা বাটন ক্লিক হলে Java কোডে একটি মেথড কল করবে।

ধাপ 3: Controller ক্লাস তৈরি করা

Controller.java (Controller ক্লাস):

package sample;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

public class Controller {

    @FXML
    private Button myButton;
    
    @FXML
    private TextField myTextField;
    
    @FXML
    private Label myLabel;

    @FXML
    private void handleButtonClick() {
        myLabel.setText("You entered: " + myTextField.getText());
    }
}

ব্যাখ্যা:

• @FXML অ্যানোটেশন দ্বারা, FXML ফাইল থেকে UI উপাদানগুলি (Button, Label, TextField) কন্ট্রোলারের সাথে যুক্ত করা হয়েছে।
• handleButtonClick() মেথড বাটনে ক্লিক করলে টেক্সটফিল্ডের ভিতরের টেক্সটটি লেবেলে দেখাবে।

ধাপ 4: Main Application ক্লাস তৈরি করা

Main.java (Main Application ক্লাস):

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        // Load FXML file
        FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("JavaFX Custom CSS Example");

        // Create scene and apply CSS
        Scene scene = new Scene(loader.load(), 300, 250);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

        // Set scene to stage
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• FXML Loader: FXMLLoader দ্বারা FXML ফাইলটি লোড করা হচ্ছে।
• CSS Stylesheet: scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm()) এর মাধ্যমে CSS ফাইলটি Scene-এ যোগ করা হচ্ছে।

ধাপ 5: প্রোজেক্ট কাঠামো:

project-folder/
|-- src/
|   |-- sample/
|       |-- Main.java
|       |-- Controller.java
|       |-- sample.fxml
|       |-- style.css
|-- lib/
|-- bin/

JavaFX Custom CSS Styling এর সুবিধা:

1. UI কন্ট্রোলের কাস্টমাইজেশন: JavaFX CSS ব্যবহার করে আপনি সহজে সমস্ত UI কন্ট্রোলের স্টাইলিং করতে পারেন যেমন বাটন, টেক্সটফিল্ড, লেবেল, টেবিল, গ্রিড ইত্যাদি।
2. থিম তৈরির সুবিধা: আপনি CSS ফাইলের মাধ্যমে অ্যাপ্লিকেশনটির পুরো থিম কাস্টমাইজ করতে পারেন এবং একটি ইউনিফর্ম স্টাইল প্রয়োগ করতে পারেন।
3. স্টাইলিং এবং লজিকের মধ্যে বিভাজন: CSS স্টাইল এবং Java কোডের মধ্যে পরিষ্কার বিভাজন থাকে, যা কোডের মেইনটেনযোগ্যতা এবং পরিষ্কারতা বাড়ায়।

JavaFX CSS Styling এর কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য:

• Selector: CSS সিলেক্টরের মাধ্যমে আপনি বিভিন্ন UI উপাদানকে টার্গেট করতে পারেন যেমন ID, ক্লাস, প্যারেন্ট-চাইল্ড রিলেশনশিপ ইত্যাদি।
• Responsive Design: CSS এর মাধ্যমে আপনি UI উপাদানগুলির আকার এবং লেআউট ডাইনামিকভাবে পরিবর্তন করতে পারেন, যা রেসপন্সিভ ডিজাইন তৈরি করতে সহায়ক।
• Hover Effects: CSS এর মাধ্যমে UI কন্ট্রোলগুলোর হোভার ইফেক্ট তৈরি করা যায়, যেমন বাটনে হোভার করলে রঙ পরিবর্তন।

এভাবে আপনি JavaFX অ্যাপ্লিকেশনগুলিতে Custom CSS তৈরি এবং প্রয়োগ করে সুন্দর এবং ইন্টারেকটিভ ইউজার ইন্টারফেস ডিজাইন করতে পারেন।