JavaFX এ CSS Styling এর ভূমিকা

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 এর মাধ্যমে সহজেই গ্রাফিক্স, টেক্সট, রঙ, ফন্ট, মার্জিন এবং প্যাডিং ইত্যাদি পরিবর্তন করা যায়, যা অ্যাপ্লিকেশনের চেহারা উন্নত করতে সহায়তা করে।