JavaFX CSS Styling

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

JavaFX CSS ব্যবহার করা হয় JavaFX Scene Graph এর বিভিন্ন নোডে, যেমন Button, TextField, Label, HBox, VBox ইত্যাদি উপাদানগুলিতে।

JavaFX CSS-এর কিছু বৈশিষ্ট্য:

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

CSS ফাইল তৈরি এবং JavaFX এ ব্যবহার করা:

ধরি, আমরা একটি JavaFX অ্যাপ্লিকেশন তৈরি করেছি যেখানে CSS স্টাইলিং ব্যবহার করা হবে।

ধাপ 1: JavaFX অ্যাপ্লিকেশন তৈরি (FXML এবং CSS স্টাইলিং)

sample.fxml (FXML ফাইল):

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
    <Button text="Click Me!" id="myButton"/>
</StackPane>

এখানে, একটি Button তৈরি করা হয়েছে যার id="myButton" দেওয়া হয়েছে। এই id দিয়ে আমরা CSS ফাইলের মধ্যে বাটনের স্টাইল নির্ধারণ করব।

style.css (CSS ফাইল):

/* 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;
}

/* StackPane Styling */
.root {
    -fx-background-color: #ecf0f1;
    -fx-alignment: center;
    -fx-padding: 20px;
}

ব্যাখ্যা:

1. Button Styling:
   • -fx-background-color: বাটনের পটভূমির রঙ সেট করেছে (নীল).
   • -fx-text-fill: বাটনের টেক্সটের রঙ সাদা করা হয়েছে।
   • -fx-font-size: বাটনের ফন্ট সাইজ ১৬px নির্ধারণ করা হয়েছে।
   • -fx-padding: বাটনের চারপাশে প্যাডিং যোগ করা হয়েছে।
   • -fx-border-radius এবং -fx-background-radius: বাটনের কোণার রেডিয়াস (পৃথকভাবে ব্যাকগ্রাউন্ড এবং বর্ডার) সেট করা হয়েছে।
2. StackPane Styling:
   • -fx-background-color: StackPane এর পটভূমির রঙ রাখা হয়েছে হালকা গ্রে।
   • -fx-alignment: স্ট্যাকপেনের কন্টেন্টের অবস্থান কেন্দ্রের মধ্যে রাখা হয়েছে।
   • -fx-padding: স্ট্যাকপেনের চারপাশে প্যাডিং দেওয়া হয়েছে।

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

package sample;

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

public class Controller {
    @FXML
    private Button myButton;

    // Button click handler
    @FXML
    private void handleButtonClick() {
        myButton.setText("Clicked!");
    }
}

ব্যাখ্যা:

• @FXML অ্যানোটেশন দ্বারা myButton কে FXML ফাইলের সাথে সংযুক্ত করা হয়েছে।
• handleButtonClick() মেথড বাটনে ক্লিক করলে বাটনের টেক্সট পরিবর্তন করবে।

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 CSS Styling 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);
    }
}

ব্যাখ্যা:

• scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm()): এখানে CSS ফাইলটি Scene-এ যুক্ত করা হয়েছে, যাতে UI উপাদানগুলোর স্টাইল প্রয়োগ করা যায়।

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

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

JavaFX CSS স্টাইলিং এর কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য:

1. UI কন্ট্রোল স্টাইলিং:
   • JavaFX UI কন্ট্রোল যেমন Button, Label, TextField, VBox, HBox, GridPane ইত্যাদি CSS ব্যবহার করে স্টাইল করা যায়।
2. CSS Selectors:
   • #id (ID সিলেক্টর): নির্দিষ্ট ID-এ স্টাইল প্রয়োগ করা হয় (যেমন, #myButton).
   • .class (ক্লাস সিলেক্টর): একই ক্লাসের সমস্ত উপাদানে স্টাইল প্রয়োগ করা হয়।
   • * (Universal Selector): সমস্ত উপাদানে স্টাইল প্রয়োগ করা হয়।
3. CSS প্রপার্টি:
   • Colors: -fx-background-color, -fx-text-fill, -fx-border-color
   • Fonts: -fx-font-size, -fx-font-family, -fx-font-weight
   • Borders: -fx-border-width, -fx-border-radius
   • Padding & Margin: -fx-padding, -fx-margin
   • Alignment: -fx-alignment
4. Responsive Layout:
   • আপনি CSS-এ -fx-pref-width, -fx-pref-height এবং -fx-min-width, -fx-max-width ইত্যাদি ব্যবহার করে উপাদানগুলির আকার নিয়ন্ত্রণ করতে পারেন।

JavaFX CSS এর সুবিধা:

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

এভাবে JavaFX এর CSS স্টাইলিং ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের UI ডিজাইন করতে পারেন এবং সহজেই কাস্টমাইজেশন ও থিম তৈরি করতে পারেন।

JavaFX এ CSS (Cascading Style Sheets) ব্যবহারের মাধ্যমে ইউজার ইন্টারফেস (UI) ডিজাইনকে আরও সুন্দর, আধুনিক এবং কাস্টমাইজ করা যায়। CSS মূলত UI উপাদানগুলির স্টাইলিং বা চেহারা পরিবর্তন করতে ব্যবহৃত হয়, যেমন রঙ, আকার, মার্জিন, প্যাডিং, ফন্ট স্টাইল, ব্যাকগ্রাউন্ড ইত্যাদি।

JavaFX এর সাথে CSS ব্যবহার করার সুবিধা হলো এটি Java কোড থেকে UI এর স্টাইল আলাদা করে রাখে, ফলে UI ডিজাইন এবং লজিকের মধ্যে একটি পরিষ্কার বিচ্ছেদ তৈরি হয়। এর মাধ্যমে ডেভেলপাররা UI উপাদানগুলির স্টাইলিং এবং ডেভেলপাররা লজিকাল কোড পৃথকভাবে কাজ করতে পারেন।

CSS দিয়ে JavaFX অ্যাপ্লিকেশনের দৃশ্যমান অংশের স্টাইল এবং আচরণ নিয়ন্ত্রণ করা সম্ভব। JavaFX-এর UI উপাদানগুলি (যেমন Button, Label, TextField, Pane, Scene ইত্যাদি) CSS দিয়ে কাস্টমাইজ করা যায়।

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

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

JavaFX এ CSS এর ব্যবহার:

JavaFX এ CSS ব্যবহার করার দুটি প্রধান উপায় আছে:

1. Inline CSS: JavaFX উপাদানগুলির জন্য স্টাইল সোজা Java কোডে সেট করা।
2. External CSS File: আলাদা একটি CSS ফাইল তৈরি করে, তারপর তা JavaFX অ্যাপ্লিকেশনে লোড করা।

JavaFX এর মধ্যে CSS ব্যবহার করার উদাহরণ:

১. Inline CSS:

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

public class InlineCSSExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // বাটন তৈরি করা
        Button btn = new Button("Click Me");

        // Inline CSS এর মাধ্যমে বাটনের স্টাইল দেওয়া
        btn.setStyle("-fx-background-color: #FF6347; -fx-text-fill: white; -fx-font-size: 14px;");

        // StackPane তৈরি করা এবং বাটন যোগ করা
        StackPane root = new StackPane();
        root.getChildren().add(btn);

        // সীন এবং স্টেজ সেট করা
        Scene scene = new Scene(root, 300, 200);
        primaryStage.setTitle("Inline CSS Example");
        primaryStage.setScene(scene);

        // স্টেজটি শো করা
        primaryStage.show();
    }

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

এখানে আমরা একটি Button তৈরি করেছি এবং setStyle() মেথড ব্যবহার করে Inline CSS দিয়েছি। এই CSS-এ আমরা বাটনের ব্যাকগ্রাউন্ড কালার, টেক্সট কালার এবং ফন্ট সাইজ সেট করেছি।

২. External CSS File:

এখন আমরা একটি বাইরের CSS ফাইল ব্যবহার করে JavaFX অ্যাপ্লিকেশন স্টাইলিং করবো।

CSS File (styles.css):

.button {
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-padding: 10px 20px;
}

.label {
    -fx-font-size: 18px;
    -fx-text-fill: darkblue;
}

Java Code (CSSFileExample.java):

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

public class CSSFileExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // বাটন এবং লেবেল তৈরি করা
        Button btn = new Button("Click Me");
        Label label = new Label("Welcome to JavaFX");

        // StackPane তৈরি করা এবং উপাদানগুলো যোগ করা
        StackPane root = new StackPane();
        root.getChildren().addAll(btn, label);

        // সীন তৈরি এবং স্টাইল ফাইল লোড করা
        Scene scene = new Scene(root, 300, 200);
        scene.getStylesheets().add("file:styles.css");

        // স্টেজ সেট করা
        primaryStage.setTitle("External CSS Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

এই উদাহরণে, আমরা একটি আলাদা styles.css ফাইল ব্যবহার করেছি, যেখানে বাটন এবং লেবেলের স্টাইল দেওয়া হয়েছে। JavaFX অ্যাপ্লিকেশনটির মধ্যে এই CSS ফাইলটি scene.getStylesheets().add("file:styles.css"); এর মাধ্যমে লোড করা হয়েছে।

CSS Syntax in JavaFX:

JavaFX-এ CSS ব্যবহার করার সময় কিছু নির্দিষ্ট সিনট্যাক্স অনুসরণ করতে হয়:

• CSS Properties: JavaFX CSS এ কিছু নির্দিষ্ট প্রপার্টি রয়েছে যেমন: -fx-background-color, -fx-font-size, -fx-padding, -fx-border-color ইত্যাদি।
• Class and ID Selectors: JavaFX এর UI উপাদানগুলির জন্য CSS এ class এবং id সিলেক্টর ব্যবহার করা হয়। উদাহরণ হিসেবে, .button বা #label ক্লাস সিলেক্টর ব্যবহার করা যেতে পারে।
• Pseudo-classes: JavaFX CSS এ পসুডো-ক্লাস যেমন :hover, :pressed, :focused ইত্যাদি ব্যবহার করা হয়।

CSS Styling এর কিছু সাধারণ প্রপার্টি:

1. Background Color:

   -fx-background-color: #FF6347;
   

2. Font Size and Style:

   -fx-font-size: 16px;
   -fx-font-weight: bold;
   

3. Text Color:

   -fx-text-fill: white;
   

4. Padding and Margin:

   -fx-padding: 10px;
   -fx-margin: 5px;
   

5. Border Styling:

   -fx-border-color: black;
   -fx-border-width: 2px;
   

6. Font Family:

   -fx-font-family: "Arial";
   

JavaFX CSS Styling এর ব্যবহার:

1. ডিজাইন এবং কাস্টমাইজেশন: JavaFX অ্যাপ্লিকেশনের স্টাইল এবং ডিজাইন কাস্টমাইজ করার জন্য CSS অত্যন্ত গুরুত্বপূর্ণ। বিভিন্ন রঙ, ফন্ট, স্পেসিং, সাইজ ইত্যাদি পরিবর্তন করা যায় CSS এর মাধ্যমে।
2. অ্যাপ্লিকেশনের ইউজার ইন্টারফেস উন্নয়ন: CSS ব্যবহার করে JavaFX অ্যাপ্লিকেশনের ইউজার ইন্টারফেস আরও আকর্ষণীয় ও ব্যবহারকারী বান্ধব করা যায়।
3. স্টাইলিং এর সিম্পলতা: JavaFX অ্যাপ্লিকেশন স্টাইলিং এর জন্য CSS অনেক সহজ এবং সুবিধাজনক পদ্ধতি প্রদান করে।
4. সহজ রক্ষণাবেক্ষণ: CSS ফাইল দিয়ে স্টাইলগুলি আলাদা রাখা যায়, যা অ্যাপ্লিকেশনের রক্ষণাবেক্ষণ সহজ করে তোলে। CSS ফাইলের মধ্যে পরিবর্তন করলে, পুরো অ্যাপ্লিকেশনটির স্টাইল বদলে যেতে পারে।

JavaFX এ CSS স্টাইলিং ব্যবহার করে অ্যাপ্লিকেশনের গ্রাফিক্যাল ইউজার ইন্টারফেস (GUI) উন্নত করা যায়। এটি UI উপাদানগুলির জন্য একটি পরিষ্কার, শক্তিশালী এবং কার্যকরী কাস্টমাইজেশন সিস্টেম প্রদান করে। CSS এর মাধ্যমে সহজেই গ্রাফিক্স, টেক্সট, রঙ, ফন্ট, মার্জিন এবং প্যাডিং ইত্যাদি পরিবর্তন করা যায়, যা অ্যাপ্লিকেশনের চেহারা উন্নত করতে সহায়তা করে।

JavaFX এ CSS ব্যবহার করলে আপনি ইউজার ইন্টারফেসের উপাদানগুলিকে সুন্দরভাবে স্টাইল করতে পারেন। CSS (Cascading Style Sheets) একটি স্টাইল শীট ল্যাঙ্গুয়েজ যা HTML বা XML ডকুমেন্টের মধ্যে উপাদানগুলির প্রদর্শন নিয়ন্ত্রণ করতে ব্যবহৃত হয়। JavaFX এ আপনি External CSS এবং Inline CSS উভয়ই ব্যবহার করতে পারেন।

1. External CSS (বাহ্যিক CSS)

External CSS ব্যবহারে আপনি একটি আলাদা CSS ফাইল তৈরি করেন এবং সেই ফাইলটি JavaFX অ্যাপ্লিকেশনকে রেফারেন্স হিসেবে প্রদান করেন। এটি বড় অ্যাপ্লিকেশনগুলিতে স্টাইল ব্যবস্থাপনা সহজ করে তোলে এবং কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি করে।

উদাহরণ:

1. CSS ফাইল তৈরি করা (styles.css): প্রথমে, একটি CSS ফাইল তৈরি করুন (যেমন styles.css) যেখানে আপনি JavaFX উপাদানগুলির স্টাইল নির্ধারণ করবেন।

/* styles.css */
.button {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 10px;
}

.label {
    -fx-font-size: 20px;
    -fx-text-fill: #2c3e50;
}

.root {
    -fx-background-color: #ecf0f1;
}

2. Java কোডে External CSS প্রয়োগ করা: এরপর, JavaFX অ্যাপ্লিকেশনে এই বাহ্যিক CSS ফাইলটি যোগ করুন।

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

public class ExternalCSSExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // একটি বাটন এবং লেবেল তৈরি করা
        Button btn = new Button("Click Me");
        Label lbl = new Label("Hello, JavaFX!");

        // StackPane layout তৈরি করা
        StackPane root = new StackPane();
        root.getChildren().addAll(btn, lbl);

        // CSS ফাইল প্রয়োগ করা
        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());

        // Scene এবং Stage সেট করা
        primaryStage.setTitle("External CSS Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

এখানে কী হচ্ছে?

• scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm()); এই লাইনটি বাহ্যিক CSS ফাইলটি JavaFX অ্যাপ্লিকেশনে যোগ করে।

2. Inline CSS (Inline স্টাইলিং)

Inline CSS ব্যবহার করে আপনি JavaFX উপাদানগুলিতে সরাসরি স্টাইল সেট করতে পারেন, CSS ফাইলের প্রয়োজন ছাড়াই। এটি সাধারণত ছোট অ্যাপ্লিকেশন বা একক UI উপাদানের স্টাইল পরিবর্তনের জন্য ব্যবহৃত হয়।

উদাহরণ:

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

public class InlineCSSExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // একটি বাটন তৈরি করা
        Button btn = new Button("Click Me");

        // Inline CSS প্রয়োগ করা
        btn.setStyle("-fx-background-color: #3498db; -fx-text-fill: white; -fx-font-size: 16px;");

        // একটি লেবেল তৈরি করা
        Label lbl = new Label("Hello, JavaFX!");

        // Inline CSS প্রয়োগ করা
        lbl.setStyle("-fx-font-size: 20px; -fx-text-fill: #2c3e50;");

        // StackPane layout তৈরি করা
        StackPane root = new StackPane();
        root.getChildren().addAll(btn, lbl);

        // Scene তৈরি এবং সেট করা
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("Inline CSS Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

এখানে কী হচ্ছে?

• btn.setStyle(...) এবং lbl.setStyle(...) এর মাধ্যমে সরাসরি Inline CSS প্রয়োগ করা হয়েছে। এটি ইউজার ইন্টারফেস উপাদানগুলির স্টাইল পরিবর্তন করে।

JavaFX এ CSS এর বৈশিষ্ট্য:

1. CSS প্রপার্টি (CSS Properties): JavaFX CSS বিভিন্ন প্রপার্টি ব্যবহার করে UI উপাদানগুলির স্টাইল নিয়ন্ত্রণ করতে পারে। যেমন:
   • -fx-background-color: ব্যাকগ্রাউন্ড রঙ সেট করতে ব্যবহৃত হয়।
   • -fx-text-fill: টেক্সটের রঙ নিয়ন্ত্রণ করে।
   • -fx-font-size: ফন্ট সাইজ সেট করতে ব্যবহৃত হয়।
   • -fx-padding: উপাদানটির চারপাশে প্যাডিং (অন্তর্বর্তী ফাঁকা স্থান) যোগ করে।
2. UI উপাদানের ক্লাস নাম: JavaFX CSS এ UI উপাদানের জন্য ক্লাসের নাম ব্যবহার করা হয়। যেমন, .button, .label ইত্যাদি।
3. Inheritance: JavaFX CSS ফাইলগুলিতে, একটি উপাদানের স্টাইল তার প্যারেন্ট (মাতৃ) উপাদান থেকে উত্তরাধিকার সূত্রে পেতে পারে। এটি কোডের পুনঃব্যবহারযোগ্যতা এবং সহজ রক্ষণাবেক্ষণ নিশ্চিত করে।
4. CSS কাস্টম স্টাইলিং: JavaFX CSS আপনাকে কাস্টম ক্লাস এবং ID সেট করতে সহায়ক, যার মাধ্যমে আপনি UI উপাদানগুলির স্টাইল আরও কাস্টমাইজড করতে পারেন।
5. Multiple Stylesheets: JavaFX অ্যাপ্লিকেশনে একাধিক CSS ফাইল ব্যবহার করা সম্ভব। একাধিক স্টাইলশীটকে একসাথে লোড করা এবং একই অ্যাপ্লিকেশন বা দৃশ্যের জন্য আলাদা আলাদা স্টাইল প্রয়োগ করা যায়।

CSS Stylesheets এর একটি উদাহরণ (styles.css):

/* Button Styling */
.button {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 10px;
}

/* Label Styling */
.label {
    -fx-font-size: 20px;
    -fx-text-fill: #2c3e50;
}

/* Root Layout Styling */
.root {
    -fx-background-color: #ecf0f1;
}

JavaFX এ CSS ব্যবহারের সুবিধা:

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

সারাংশ:

JavaFX এ External CSS এবং Inline CSS দুই ধরনের CSS ব্যবহৃত হয়। External CSS আপনাকে একাধিক ফাইল ব্যবহার করে বড় অ্যাপ্লিকেশনে স্টাইলিং সুবিধা দেয়, যেখানে Inline CSS ছোট স্কেলে বা একক UI উপাদানগুলির জন্য ব্যবহার করা হয়। JavaFX এর CSS সমর্থন উন্নত এবং শক্তিশালী, যা ইউজার ইন্টারফেসের দৃশ্যমানতা এবং ব্যবহারের অভিজ্ঞতা উন্নত করে।

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 এর মাধ্যমে আপনি অ্যাপ্লিকেশনের রূপ এবং অনুভূতি উন্নত করতে পারবেন।

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 তৈরি এবং প্রয়োগ করে সুন্দর এবং ইন্টারেকটিভ ইউজার ইন্টারফেস ডিজাইন করতে পারেন।