Layout এবং UI Components এর মধ্যে Styling এবং Customization

JavaFX একটি শক্তিশালী GUI টুলকিট, যা ব্যবহারকারীদের জন্য আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে। JavaFX-এর মধ্যে অনেক Layout এবং UI Components রয়েছে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারে। এই উপাদানগুলি সহজেই Styling এবং Customization করা যায়, যাতে অ্যাপ্লিকেশনটির ডিজাইন আরও আকর্ষণীয় হয়।

1. JavaFX Layouts

JavaFX-এ বিভিন্ন ধরনের Layouts রয়েছে যা আপনার UI উপাদানগুলি সঠিকভাবে সাজাতে সাহায্য করে। কিছু সাধারণ Layouts হল:

• BorderPane
• VBox
• HBox
• GridPane
• StackPane

2. JavaFX UI Components

JavaFX-এর UI Components এর মধ্যে রয়েছে:

• Button
• Label
• TextField
• ComboBox
• ListView
• CheckBox

এখন, এই Layouts এবং UI Components-এর Styling এবং Customization দেখানো হবে।

3. JavaFX Layout এবং UI Components এর Styling এবং Customization

এখানে একটি উদাহরণ দেয়া হচ্ছে যেখানে VBox, HBox, Button, Label, TextField ইত্যাদি UI উপাদান ব্যবহার করা হয়েছে এবং সেগুলির স্টাইলিং এবং কাস্টমাইজেশন করা হয়েছে।

উদাহরণ: Styling এবং Customization

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

public class JavaFXStylingExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // VBox Layout
        VBox vbox = new VBox(10);  // 10px gap between components
        vbox.setStyle("-fx-background-color: lightblue; -fx-padding: 20px;");

        // Label with custom style
        Label label = new Label("Welcome to JavaFX!");
        label.setStyle("-fx-font-size: 20px; -fx-font-weight: bold; -fx-text-fill: darkblue;");

        // Button with custom style
        Button button = new Button("Click Me");
        button.setStyle("-fx-background-color: darkgreen; -fx-text-fill: white; -fx-font-size: 16px;");

        // Add the label and button to the VBox layout
        vbox.getChildren().addAll(label, button);

        // Set up the scene
        Scene scene = new Scene(vbox, 300, 200);

        // Set up the stage
        primaryStage.setTitle("JavaFX Styling and Customization");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

1. VBox Layout:
   • VBox একটি লম্বালম্বি লেআউট যা উপাদানগুলিকে উল্লম্বভাবে সাজাতে ব্যবহৃত হয়।
   • এখানে vbox.setStyle() ব্যবহার করে ব্যাকগ্রাউন্ড রঙ এবং প্যাডিং নির্ধারণ করা হয়েছে।
2. Label:
   • Label এর ফন্ট সাইজ, ফন্ট ওজন এবং টেক্সটের রঙ কাস্টমাইজ করা হয়েছে।
3. Button:
   • Button এর ব্যাকগ্রাউন্ড কালার, টেক্সটের রঙ এবং ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।
4. Scene:
   • Scene এ vbox নামক লেআউট ব্যবহার করে UI উপাদানগুলি প্রদর্শন করা হয়েছে।
5. Stage:
   • Stage হল JavaFX অ্যাপ্লিকেশনটির প্রধান উইন্ডো। এটি দৃশ্য (Scene) ধারণ করে।

4. CSS দিয়ে Styling

JavaFX অ্যাপ্লিকেশনগুলির স্টাইলিং CSS (Cascading Style Sheets) এর মাধ্যমে আরও সহজ এবং শক্তিশালীভাবে করা যেতে পারে। JavaFX Scene এবং Node-এ CSS প্রয়োগের জন্য CSS ফাইল ব্যবহার করা হয়।

উদাহরণ: CSS দিয়ে Styling

JavaFXCSSExample.java

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

public class JavaFXCSSExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // VBox Layout
        VBox vbox = new VBox(10); // 10px gap between components

        // Label and Button
        Label label = new Label("Welcome to JavaFX with CSS!");
        Button button = new Button("Click Me");

        // Add label and button to VBox
        vbox.getChildren().addAll(label, button);

        // Create a Scene and apply CSS file
        Scene scene = new Scene(vbox, 300, 200);
        scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());

        // Set up the stage
        primaryStage.setTitle("JavaFX with CSS");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

styles.css

/* styles.css */
.label {
    -fx-font-size: 20px;
    -fx-font-weight: bold;
    -fx-text-fill: darkblue;
}

.button {
    -fx-background-color: darkgreen;
    -fx-text-fill: white;
    -fx-font-size: 16px;
}

.vbox {
    -fx-background-color: lightblue;
    -fx-padding: 20px;
}

ব্যাখ্যা:

1. CSS ফাইল:
   • এখানে styles.css ফাইলটি তৈরি করা হয়েছে, যেখানে Label, Button এবং VBox এর জন্য স্টাইলিং নির্ধারণ করা হয়েছে।
   • CSS ক্লাসগুলির নাম JavaFX-এর UI উপাদানগুলির সাথে মিলিয়ে দেওয়া হয়েছে যেমন .label, .button, .vbox।
2. CSS ফাইল প্রয়োগ:
   • scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm()); — এই কোড দিয়ে আমরা CSS ফাইলটি Scene এ প্রয়োগ করেছি।

5. UI Components Styling and Customization

• Button Styling: -fx-background-color, -fx-text-fill, -fx-font-size
• Label Styling: -fx-font-size, -fx-text-fill, -fx-font-weight
• VBox/HBox/GridPane Styling: -fx-background-color, -fx-padding, -fx-alignment
• TextField Styling: -fx-background-color, -fx-border-color

6. Event Handling and Customization

আপনি UI উপাদানগুলির উপর ইভেন্ট হ্যান্ডলিং যোগ করতে পারেন এবং এর স্টাইলিং কাস্টমাইজ করতে পারেন।

উদাহরণ: Button Click Event

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

public class JavaFXButtonEventHandling extends Application {

    @Override
    public void start(Stage primaryStage) {
        VBox vbox = new VBox(10); // 10px gap between components
        Button button = new Button("Click Me");

        // Button click event
        button.setOnAction(e -> button.setText("Clicked!"));

        vbox.getChildren().add(button);

        Scene scene = new Scene(vbox, 200, 150);
        primaryStage.setTitle("Button Event Handling");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• button.setOnAction(e -> button.setText("Clicked!")); — এটি একটি ইভেন্ট হ্যান্ডলার যা বোতামটি ক্লিক করলে টেক্সট পরিবর্তন করবে।

সারাংশ

• JavaFX Layouts: VBox, HBox, GridPane এবং BorderPane ইত্যাদি লেআউট ব্যবহৃত হয় UI উপাদানগুলি সাজানোর জন্য।
• JavaFX UI Components: বিভিন্ন UI উপাদান যেমন Button, Label, TextField ইত্যাদি ব্যবহার করা হয়।
• Styling: JavaFX অ্যাপ্লিকেশনগুলির জন্য CSS ব্যবহার করে সহজে স্টাইলিং এবং কাস্টমাইজেশন করা সম্ভব।
• Customization: আপনি উপাদানগুলির আকার, রঙ, ফন্ট, প্যাডিং ইত্যাদি কাস্টমাইজ করে UI ডিজাইন উন্নত করতে পারেন।

এই উদাহরণগুলি JavaFX এর স্টাইলিং এবং কাস্টমাইজেশনের প্রাথমিক ধারণা প্রদান করে, যা আপনার JavaFX অ্যাপ্লিকেশন তৈরি এবং ডিজাইন উন্নত করতে সহায়ক।