JavaFX এর জন্য External এবং Inline 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 সমর্থন উন্নত এবং শক্তিশালী, যা ইউজার ইন্টারফেসের দৃশ্যমানতা এবং ব্যবহারের অভিজ্ঞতা উন্নত করে।