JavaFX Controls এবং Custom Controls তৈরি করা

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

এছাড়া, Custom Controls তৈরি করাও JavaFX এর মাধ্যমে সম্ভব, যাতে আপনি আপনার নিজের কন্ট্রোল তৈরি করতে পারেন যেগুলি আগের থেকে বিদ্যমান কন্ট্রোলগুলির চেয়ে একটু ভিন্ন বা বিশেষ কিছু হতে পারে।

JavaFX Controls

JavaFX বিভিন্ন ধরনের built-in controls সরবরাহ করে, যা সহজে ব্যবহারযোগ্য এবং ইউজারের ইনপুট গ্রহণ করার জন্য উপযুক্ত।

1. Button:

   • Button হল একটি বেসিক কন্ট্রোল যা ইউজারের ইন্টারঅ্যাকশন নিতে ব্যবহৃত হয়।

   Button button = new Button("Click Me");
   button.setOnAction(e -> System.out.println("Button Clicked"));
   

2. TextField:

   • TextField একটি ইনপুট ফিল্ড যেখানে ইউজার একটি একক লাইন টেক্সট ইনপুট দিতে পারেন।

   TextField textField = new TextField();
   textField.setPromptText("Enter your name");
   

3. ComboBox:

   • ComboBox একটি ড্রপডাউন লিস্ট কন্ট্রোল যা একাধিক অপশন থেকে একটি নির্বাচন করতে ব্যবহৃত হয়।

   ComboBox<String> comboBox = new ComboBox<>();
   comboBox.getItems().addAll("Option 1", "Option 2", "Option 3");
   

4. CheckBox:

   • CheckBox একটি অপশন সিলেক্টর যা ইউজারের কাছে একটি টগল (on/off) অপশন দেয়।

   CheckBox checkBox = new CheckBox("Accept Terms and Conditions");
   checkBox.setSelected(true); // Set default checked
   

5. RadioButton:

   • RadioButton একটি গোষ্ঠীভুক্ত বাটন যেখানে শুধুমাত্র একটি বাটন নির্বাচিত হতে পারে।

   RadioButton radioButton = new RadioButton("Option 1");
   

6. Slider:

   • Slider কন্ট্রোল একটি মান নির্বাচন করতে ব্যবহৃত হয়, যা স্লাইডারের মাধ্যমে নির্ধারিত হয়।

   Slider slider = new Slider(0, 100, 50); // min, max, initial value
   

7. TableView:

   • TableView ডেটা প্রদর্শন করতে একটি টেবিল হিসেবে ব্যবহৃত হয়।

   TableView<MyData> tableView = new TableView<>();
   

8. TextArea:

   • TextArea হল একটি মাল্টি-লাইন টেক্সট ইনপুট ফিল্ড।

   TextArea textArea = new TextArea();
   textArea.setPromptText("Enter your text here");
   

JavaFX Custom Controls তৈরি করা

JavaFX তে Custom Controls তৈরি করা হয় যখন আপনি একটি কাস্টম UI উপাদান তৈরি করতে চান যা JavaFX এর ডিফল্ট কন্ট্রোলগুলির চেয়ে ভিন্ন বা আরও বিশেষ কিছু হতে পারে। Custom Controls সাধারণত Region বা Control ক্লাসের সাবক্লাস হয় এবং তাদের নিজের রেন্ডারিং লজিক থাকে।

Custom Control তৈরি করার পদক্ষেপ:

1. Control বা Region ক্লাস এক্সটেন্ড করা:
   • JavaFX কন্ট্রোল ক্লাস যেমন Button, Label, ইত্যাদি কাস্টমাইজ করতে আপনি Control বা Region ক্লাসকে এক্সটেন্ড করতে পারেন।
2. Custom UI তৈরি করা:
   • কাস্টম UI তৈরির জন্য আপনি নিজস্ব গ্রাফিক্স এবং লেআউট ব্যবহার করতে পারেন।
3. Styling (CSS) সহ ব্যবহার করা:
   • কাস্টম কন্ট্রোল তৈরি করার পরে আপনি CSS ব্যবহার করে স্টাইল দিতে পারেন।

Custom Control উদাহরণ

এখানে একটি কাস্টম কন্ট্রোলের উদাহরণ দেওয়া হল, যেখানে আমরা একটি কাস্টম ShapeButton তৈরি করেছি, যা একটি বাটন কিন্তু এটি একটি রঙিন বর্গাকার আকারে দেখাবে।

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class CustomControlExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Custom Button: Rectangle shape as button
        Button customButton = new Button();
        
        // Creating a Rectangle to represent the custom button
        Rectangle rectangle = new Rectangle(100, 50, Color.LIGHTBLUE);
        customButton.setGraphic(rectangle);
        
        // Button action handler
        customButton.setOnAction(event -> {
            System.out.println("Custom button clicked!");
            rectangle.setFill(Color.GREEN); // Change color on click
        });

        // StackPane layout
        StackPane root = new StackPane();
        root.getChildren().add(customButton);

        // Scene and Stage setup
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("Custom Control Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

কাস্টম কন্ট্রোলের ব্যাখ্যা:

1. Custom Shape: এখানে আমরা Rectangle (একটি বর্গাকার আকার) ব্যবহার করেছি যা আমাদের কাস্টম বাটনের গ্রাফিক্স হিসেবে কাজ করে।
2. Set Graphic: customButton.setGraphic(rectangle) ব্যবহার করে, আমরা Button-এর মধ্যে Rectangle যোগ করেছি।
3. Button Action: বাটনে ক্লিক করলে কাস্টম অ্যাকশন হয়, এবং বাটনটির রঙ পরিবর্তন হয় (এখানে এটি Color.GREEN হয়ে যায়)।

Custom Control: Custom TextField Example

এটি একটি কাস্টম টেক্সটফিল্ড তৈরি করার উদাহরণ যা একটি ডিফল্ট টেক্সটফিল্ডের মত কাজ করবে, কিন্তু এর সাথে একটি গ্রাফিক্স যোগ করা হবে।

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class CustomTextFieldExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Custom TextField with Circle shape inside it
        TextField customTextField = new TextField();
        
        // Creating a Circle to be used inside the TextField as a custom graphic
        Circle circle = new Circle(10, Color.RED);
        customTextField.setGraphic(circle);

        // Layout to hold the custom TextField
        StackPane root = new StackPane();
        root.getChildren().add(customTextField);

        // Scene setup
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("Custom TextField Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Custom Control এর জন্য Styling (CSS)

JavaFX এর কাস্টম কন্ট্রোলগুলির জন্য আপনি CSS ব্যবহার করতে পারেন। যেমন, আপনি কাস্টম বাটনের আকার, রঙ, ইত্যাদি কাস্টমাইজ করতে পারেন।

/* Example CSS for Custom Control */
.button {
    -fx-background-color: #66ccff;
    -fx-border-radius: 5px;
    -fx-font-size: 14px;
}

JavaFX Custom Controls এর সুবিধা:

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

সারাংশ:

• JavaFX Controls: JavaFX ডিফল্ট কন্ট্রোলগুলির মাধ্যমে আপনি বিভিন্ন ধরনের UI উপাদান তৈরি করতে পারেন, যেমন বাটন, টেক্সটফিল্ড, স্লাইডার ইত্যাদি।
• Custom Controls: JavaFX আপনাকে আপনার কাস্টম কন্ট্রোল তৈরি করতে সহায়তা করে, যাতে আপনি আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় কন্ট্রোল ডিজাইন করতে পারেন।

JavaFX এর Built-in Controls হল গ্রাফিক্যাল ইউজার ইন্টারফেস (GUI) তৈরি করতে ব্যবহৃত বিভিন্ন ধরনের কন্ট্রোল, যেগুলি সাধারণত ইউজারের সাথে ইন্টারঅ্যাকশন (যেমন ইনপুট নেওয়া, অপশন নির্বাচন, ডেটা দেখানো ইত্যাদি) পরিচালনা করতে ব্যবহৃত হয়। কিছু গুরুত্বপূর্ণ Built-in Controls হল ComboBox, ListView, TableView, এবং TreeView। এগুলি সাধারণত ডেটা নির্বাচন, প্রদর্শন এবং লিস্ট ভিউ তৈরির জন্য ব্যবহৃত হয়।

1. ComboBox

ComboBox হল একটি ড্রপডাউন মেনু, যা ইউজারকে একটি নির্দিষ্ট লিস্ট থেকে একটি অপশন নির্বাচন করতে সহায়তা করে। এটি টেক্সট ইনপুট এবং ড্রপডাউন অপশন দুটোই প্রদান করে।

ComboBox উদাহরণ:

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

public class ComboBoxExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // ComboBox তৈরি করা
        ComboBox<String> comboBox = new ComboBox<>();
        
        // ComboBox এ অপশন যুক্ত করা
        comboBox.getItems().addAll("Option 1", "Option 2", "Option 3", "Option 4");
        
        // ComboBox থেকে নির্বাচিত আইটেম পেতে একটি ইভেন্ট হ্যান্ডলার
        comboBox.setOnAction(e -> System.out.println("Selected Item: " + comboBox.getValue()));

        // Layout তৈরি করা
        StackPane root = new StackPane();
        root.getChildren().add(comboBox);

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

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

আউটপুট:

• ইউজার একটি অপশন নির্বাচন করলে তা কনসোলে প্রিন্ট হবে।

2. ListView

ListView হল একটি কন্ট্রোল যা একাধিক আইটেমের একটি লিস্ট প্রদর্শন করে। এটি ব্যবহারকারীর জন্য একটি স্ক্রলেবল লিস্ট তৈরি করতে ব্যবহৃত হয়, যেখানে ইউজার এক বা একাধিক আইটেম নির্বাচন করতে পারে।

ListView উদাহরণ:

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

public class ListViewExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // ListView তৈরি করা
        ListView<String> listView = new ListView<>();
        
        // ListView এ আইটেম যোগ করা
        listView.getItems().addAll("Item 1", "Item 2", "Item 3", "Item 4");

        // Layout তৈরি করা
        StackPane root = new StackPane();
        root.getChildren().add(listView);

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

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

আউটপুট:

• একটি স্ক্রলেবল লিস্ট ভিউ প্রদর্শিত হবে যেখানে ইউজার আইটেমগুলির মধ্যে নির্বাচন করতে পারবে।

3. TableView

TableView হল একটি টেবিল কন্ট্রোল যা ডেটা প্রদর্শন করতে ব্যবহৃত হয়। এটি একাধিক কলাম এবং রো দিয়ে টেবিল তৈরির জন্য ব্যবহৃত হয় এবং ইউজারের জন্য ডেটা প্রদর্শন ও ম্যানিপুলেশন সহজ করে।

TableView উদাহরণ:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class TableViewExample extends Application {

    public class Person {
        private String name;
        private int age;

        public Person(String name, int age) {
            this.name = name;
            this.age = age;
        }

        public String getName() {
            return name;
        }

        public int getAge() {
            return age;
        }
    }

    @Override
    public void start(Stage primaryStage) {
        // TableView তৈরি করা
        TableView<Person> tableView = new TableView<>();

        // ডেটা যোগ করার জন্য ObservableList তৈরি করা
        ObservableList<Person> data = FXCollections.observableArrayList(
            new Person("John", 25),
            new Person("Emma", 30),
            new Person("Robert", 35)
        );

        // টেবিলের জন্য কলাম তৈরি করা
        TableColumn<Person, String> nameColumn = new TableColumn<>("Name");
        nameColumn.setCellValueFactory(cellData -> javafx.beans.property.adapter.ReadOnlyStringWrapper(cellData.getValue().getName()));

        TableColumn<Person, Integer> ageColumn = new TableColumn<>("Age");
        ageColumn.setCellValueFactory(cellData -> javafx.beans.property.adapter.ReadOnlyIntegerWrapper(cellData.getValue().getAge()));

        // কলাম টেবিলে যোগ করা
        tableView.getColumns().addAll(nameColumn, ageColumn);
        tableView.setItems(data);

        // Layout তৈরি করা
        StackPane root = new StackPane();
        root.getChildren().add(tableView);

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

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

আউটপুট:

• একটি টেবিল প্রদর্শিত হবে যেখানে Name এবং Age কলাম থাকবে এবং প্রতিটি রোতে একটি Person অবজেক্টের ডেটা দেখানো হবে।

4. TreeView

TreeView একটি হায়ারারকিক্যাল (অথবা গাছের মতো) ডেটা কাঠামো প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত ডিরেক্টরি স্ট্রাকচার, ফাইল সিস্টেম বা হায়ারারকিক্যাল ডেটা প্রদর্শন করতে ব্যবহৃত হয়।

TreeView উদাহরণ:

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

public class TreeViewExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Root item তৈরি করা
        TreeItem<String> rootItem = new TreeItem<>("Root");
        rootItem.setExpanded(true);

        // Child item গুলি তৈরি করা
        TreeItem<String> childItem1 = new TreeItem<>("Child 1");
        TreeItem<String> childItem2 = new TreeItem<>("Child 2");

        // Child item গুলি root এর মধ্যে যোগ করা
        rootItem.getChildren().addAll(childItem1, childItem2);

        // TreeView তৈরি করা
        TreeView<String> treeView = new TreeView<>(rootItem);

        // Layout তৈরি করা
        StackPane root = new StackPane();
        root.getChildren().add(treeView);

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

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

আউটপুট:

• একটি গাছের মতো স্ট্রাকচার থাকবে যেখানে একটি Root আইটেম এবং তার দুটি Child আইটেম থাকবে।

সারাংশ:

JavaFX এ Built-in Controls এর মধ্যে ComboBox, ListView, TableView, এবং TreeView কন্ট্রোলস ইউজারের সাথে ইন্টারঅ্যাকশন এবং ডেটা প্রদর্শন করতে ব্যবহৃত হয়:

1. ComboBox: ইউজারকে একটি ড্রপডাউন থেকে অপশন নির্বাচন করতে সহায়তা করে।
2. ListView: একাধিক আইটেম প্রদর্শন করার জন্য ব্যবহৃত হয় এবং স্ক্রলেবল।
3. TableView: ডেটা টেবিল আকারে প্রদর্শন করতে ব্যবহৃত হয়।
4. TreeView: হায়ারারকিক্যাল ডেটা প্রদর্শন করতে ব্যবহৃত হয়, যেমন ডিরেক্টরি স্ট্রাকচার।

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

JavaFX-এ TableView এবং ListView দুটি গুরুত্বপূর্ণ UI উপাদান যা ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। Data Binding এর মাধ্যমে, আপনি TableView বা ListView-এর মধ্যে ডেটা যুক্ত করতে পারেন, যাতে ডেটার পরিবর্তন স্বয়ংক্রিয়ভাবে UI-তে আপডেট হয়। এটি আপনার অ্যাপ্লিকেশনকে আরও রেসপন্সিভ এবং ডায়নামিক করে তোলে।

১. TableView এবং Data Binding:

TableView একটি টেবিল আকারের UI উপাদান যা সাধারণত তালিকা আকারে ডেটা প্রদর্শন করতে ব্যবহৃত হয়। TableView-এর মাধ্যমে আপনি ডেটাকে কলাম আকারে প্রদর্শন করতে পারেন, এবং Property Binding ব্যবহার করে আপনি ডেটার পরিবর্তন ট্র্যাক করতে পারেন।

উদাহরণ: TableView ব্যবহার করে Data Binding

ধরা যাক, আমাদের কাছে একটি Person ক্লাস রয়েছে যার মধ্যে নাম, বয়স এবং শহরের ডেটা আছে। আমরা এই ডেটাগুলিকে TableView তে প্রদর্শন করতে চাই।

import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.property.IntegerProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TableViewExample extends Application {

    public static class Person {
        private final StringProperty name;
        private final IntegerProperty age;
        private final StringProperty city;

        public Person(String name, int age, String city) {
            this.name = new SimpleStringProperty(name);
            this.age = new SimpleIntegerProperty(age);
            this.city = new SimpleStringProperty(city);
        }

        public StringProperty nameProperty() {
            return name;
        }

        public IntegerProperty ageProperty() {
            return age;
        }

        public StringProperty cityProperty() {
            return city;
        }

        public String getName() {
            return name.get();
        }

        public void setName(String name) {
            this.name.set(name);
        }

        public int getAge() {
            return age.get();
        }

        public void setAge(int age) {
            this.age.set(age);
        }

        public String getCity() {
            return city.get();
        }

        public void setCity(String city) {
            this.city.set(city);
        }
    }

    @Override
    public void start(Stage primaryStage) {
        // TableView তৈরি করা
        TableView<Person> tableView = new TableView<>();

        // নামের জন্য কলাম তৈরি করা
        TableColumn<Person, String> nameColumn = new TableColumn<>("Name");
        nameColumn.setCellValueFactory(cellData -> cellData.getValue().nameProperty());

        // বয়সের জন্য কলাম তৈরি করা
        TableColumn<Person, Integer> ageColumn = new TableColumn<>("Age");
        ageColumn.setCellValueFactory(cellData -> cellData.getValue().ageProperty().asObject());

        // শহরের জন্য কলাম তৈরি করা
        TableColumn<Person, String> cityColumn = new TableColumn<>("City");
        cityColumn.setCellValueFactory(cellData -> cellData.getValue().cityProperty());

        // TableView-এ কলামগুলো যোগ করা
        tableView.getColumns().add(nameColumn);
        tableView.getColumns().add(ageColumn);
        tableView.getColumns().add(cityColumn);

        // ObservableList তৈরি করা
        ObservableList<Person> data = FXCollections.observableArrayList(
                new Person("John", 25, "New York"),
                new Person("Jane", 30, "Los Angeles"),
                new Person("Mike", 28, "Chicago")
        );

        // TableView-এ ডেটা সেট করা
        tableView.setItems(data);

        // VBox-এ TableView রাখা
        VBox vbox = new VBox(tableView);

        Scene scene = new Scene(vbox);
        primaryStage.setScene(scene);
        primaryStage.setTitle("TableView Example");
        primaryStage.show();
    }

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

ব্যাখ্যা:

• Person ক্লাস: name, age, এবং city প্রপার্টি ধারণ করে, এবং প্রত্যেকটি প্রপার্টি SimpleStringProperty বা SimpleIntegerProperty দিয়ে ডেক্লেয়ার করা হয়েছে।
• TableView: TableView তৈরি করা হয়েছে এবং তিনটি কলাম (name, age, city) যোগ করা হয়েছে। প্রতিটি কলামের জন্য setCellValueFactory ব্যবহার করা হয়েছে যাতে প্রপার্টি থেকে ডেটা নেওয়া যায়।
• ObservableList: ObservableList ব্যবহার করা হয়েছে যাতে ডেটা পরিবর্তন হলে TableView স্বয়ংক্রিয়ভাবে আপডেট হয়।

২. ListView এবং Data Binding:

ListView হল একটি লিনিয়ার তালিকা উপাদান যা সাধারণত একক ডেটা আইটেম বা তালিকা প্রদর্শন করতে ব্যবহৃত হয়। এটি JavaFX-এর একটি মৌলিক অংশ এবং এটি ObservableList এর মাধ্যমে ডেটা ব্যন্ড করতে সহায়তা করে।

উদাহরণ: ListView ব্যবহার করে Data Binding

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ListViewExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // ListView তৈরি করা
        ListView<String> listView = new ListView<>();

        // ObservableList তৈরি করা
        ObservableList<String> data = FXCollections.observableArrayList(
                "Apple", "Banana", "Cherry", "Date", "Elderberry");

        // ListView-এ ডেটা সেট করা
        listView.setItems(data);

        // VBox-এ ListView রাখা
        VBox vbox = new VBox(listView);

        Scene scene = new Scene(vbox, 300, 250);
        primaryStage.setTitle("ListView Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• ListView: এটি একটি সাধারণ তালিকা যা আইটেমগুলি দেখাবে। এখানে ObservableList<String> তৈরি করা হয়েছে এবং সেটি ListView-এ যোগ করা হয়েছে।
• ObservableList: ObservableList ব্যবহার করা হয়েছে, যাতে তালিকার ডেটা পরিবর্তিত হলে তা UI তে স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।

Data Binding Benefits in TableView and ListView:

1. Real-time Updates: যখন ডেটা পরিবর্তিত হয়, তা সরাসরি UI তে প্রতিফলিত হয়, কারণ ObservableList এবং Properties যুক্ত করার মাধ্যমে ডেটার পরিবর্তন ট্র্যাক করা হয়।
2. Minimal Code: JavaFX-এর Property Binding ব্যবহার করে আপনি UI এবং ডেটা ম্যানিপুলেশনের জন্য কম কোড লিখতে পারেন।
3. Reactivity: TableView বা ListView-এ ডেটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়, এটি অ্যাপ্লিকেশনকে আরও রেসপন্সিভ এবং ডায়নামিক করে তোলে।
4. Ease of Maintenance: UI এবং ডেটা লজিক আলাদা রাখতে সাহায্য করে, ফলে কোডের পরিচালনা এবং মেইনটেনেন্স সহজ হয়।

JavaFX-এ TableView এবং ListView উভয়েই Data Binding-এর মাধ্যমে ডেটা পরিচালনা করতে সাহায্য করে। ObservableList এবং Properties ব্যবহার করে আপনি ডেটার পরিবর্তন স্বয়ংক্রিয়ভাবে UI-তে দেখতে পাবেন। এটি আপনাকে আরো পরিষ্কার, রিয়েক্টিভ এবং ডায়নামিক অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।

JavaFX Custom Control তৈরি এবং ব্যবহার একটি গুরুত্বপূর্ণ ধারণা, যেখানে আপনি JavaFX-এর বিদ্যমান কন্ট্রোলগুলির ওপর কাস্টম স্টাইল, আচরণ বা বৈশিষ্ট্য যোগ করতে পারেন। JavaFX আপনাকে Custom Controls তৈরি করার জন্য JavaFX Controls API ব্যবহার করার সুবিধা দেয়, যা আপনাকে আপনার নিজস্ব UI উপাদান তৈরি করার জন্য JavaFX Scene Graph ব্যবহার করতে সহায়তা করে।

Custom Control তৈরি এবং ব্যবহার:

একটি কাস্টম কন্ট্রোল তৈরি করার জন্য আপনাকে একটি নতুন ক্লাস তৈরি করতে হবে যা javafx.scene.control.Control বা javafx.scene.layout.Region থেকে এক্সটেন্ড করবে। এটি আপনাকে কন্ট্রোলের জন্য লেআউট, স্টাইল এবং আচরণ কাস্টমাইজ করার সুযোগ দেয়।

নিচে একটি Custom Control তৈরি করার উদাহরণ দেওয়া হলো:

১. Custom Control তৈরি করা

ধরা যাক, আমরা একটি কাস্টম বাটন তৈরি করব যা একটি Circle-কে ক্লিক করার মাধ্যমে একটি কাস্টম সেশন স্টাইল পরিবর্তন করবে।

CustomButton.java (Custom Control)

import javafx.scene.control.Control;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.layout.StackPane;

public class CustomButton extends Control {

    private Circle circle;

    // Constructor
    public CustomButton() {
        // Create a circle as the custom control
        circle = new Circle(50, Color.BLUE); // Default size and color
        
        // Add behavior for the circle (on mouse click)
        circle.setOnMouseClicked(event -> toggleColor());

        // Set the circle in the StackPane for layout
        StackPane layout = new StackPane(circle);
        setSkin(new CustomButtonSkin(this));
    }

    // Toggle color of the circle on click
    private void toggleColor() {
        if (circle.getFill() == Color.BLUE) {
            circle.setFill(Color.RED);
        } else {
            circle.setFill(Color.BLUE);
        }
    }
}

CustomButtonSkin.java (Custom Skin for Custom Control)

import javafx.scene.control.SkinBase;
import javafx.scene.layout.StackPane;

public class CustomButtonSkin extends SkinBase<CustomButton> {

    public CustomButtonSkin(CustomButton control) {
        super(control);
        StackPane layout = new StackPane();
        layout.getChildren().add(control.getChildrenUnmodifiable().get(0)); // Add the circle

        // Set this layout as the skin
        getChildren().setAll(layout);
    }
}

ব্যাখ্যা:

1. CustomButton Class:
   • CustomButton হল একটি কাস্টম কন্ট্রোল, যা Control থেকে এক্সটেন্ড করা হয়েছে।
   • এর মধ্যে একটি Circle তৈরি করা হয়েছে এবং সেটি লেআউটে StackPane এর মধ্যে রাখা হয়েছে।
   • setOnMouseClicked() মেথড ব্যবহার করে আমরা একটি ইভেন্ট হ্যান্ডলার যোগ করেছি যাতে বাটনটি ক্লিক করলে এর রঙ পরিবর্তন হয়।
2. CustomButtonSkin Class:
   • SkinBase ব্যবহার করে আমরা কাস্টম কন্ট্রোলটির চেহারা কাস্টমাইজ করেছি। এখানে কেবল একটি StackPane ব্যবহার করা হয়েছে এবং এর মধ্যে আমাদের কাস্টম বাটনের অংশ (circle) রাখা হয়েছে।
   • Skin হল কাস্টম কন্ট্রোলের দৃশ্যমান অংশ, এবং Control এর মধ্যে কোনও UI উপাদান রয়েছে তা Skin এর মাধ্যমে কাস্টমাইজ করা হয়।

২. Custom Control ব্যবহার করা

এখন, আমরা এই কাস্টম কন্ট্রোলটি একটি JavaFX Application এর মধ্যে ব্যবহার করব।

MainApp.java (Main Application)

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

public class MainApp extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Create a custom button
        CustomButton customButton = new CustomButton();

        // Create a layout and add custom button to it
        StackPane root = new StackPane();
        root.getChildren().add(customButton);

        // Set up the scene and stage
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("Custom Control Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

1. MainApp Class:
   • CustomButton ব্যবহার করা হয়েছে MainApp ক্লাসে, যেখানে একটি StackPane লেআউটের মধ্যে কাস্টম কন্ট্রোল যোগ করা হয়েছে।
   • এরপর, এটি Scene এর মধ্যে রাখা হয়েছে এবং সেটি Stage এ প্রদর্শিত হয়েছে।

৩. আউটপুট

• যখন আপনি MainApp চালান, একটি উইন্ডো খুলবে যেখানে একটি Circle থাকবে যা ক্লিক করলে রঙ পরিবর্তিত হবে (নীল থেকে লাল এবং আবার ফিরে আসবে)।

৪. Custom Control কাস্টমাইজেশন

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

৫. Custom Control এর সুবিধা:

1. UI কাস্টমাইজেশন: JavaFX কাস্টম কন্ট্রোল তৈরি করে আপনি সম্পূর্ণভাবে UI কাস্টমাইজ করতে পারেন, যেমন কাস্টম ড্রইং, ইন্টারঅ্যাকশন, এবং স্টাইল।
2. Code Reusability: একবার তৈরি করা কাস্টম কন্ট্রোল বারবার ব্যবহার করা যেতে পারে, যা কোড রিইউসেবিলিটি নিশ্চিত করে।
3. JavaFX Controls Integration: আপনি JavaFX এর বিল্ট-ইন কন্ট্রোলগুলিকে কাস্টম কন্ট্রোলের মধ্যে অন্তর্ভুক্ত করতে পারেন, যেমন Button, TextField, ComboBox ইত্যাদি।

সারাংশ:

• JavaFX-এ Custom Control তৈরি করা JavaFX অ্যাপ্লিকেশনগুলির জন্য অত্যন্ত কার্যকরী। এটি আপনাকে বিদ্যমান কন্ট্রোলের ওপরে নতুন কন্ট্রোল তৈরি করতে এবং আচরণ কাস্টমাইজ করতে সাহায্য করে।
• আপনি Skin এবং Behavior কাস্টমাইজ করে নতুন কন্ট্রোল তৈরি করতে পারেন, এবং CSS দিয়ে স্টাইলিং করতে পারেন।

JavaFX Controls তে Skinning এবং Customization হল একটি শক্তিশালী কৌশল যার মাধ্যমে আপনি JavaFX-এর ডিফল্ট কন্ট্রোলগুলির চেহারা এবং আচরণ পরিবর্তন করতে পারেন। JavaFX সিস্টেমে, Skinning হল কন্ট্রোলের ভিজ্যুয়াল প্রতিনিধিত্ব (UI) কাস্টমাইজ করা এবং Customization হল কন্ট্রোলের আচরণ বা কার্যকারিতা পরিবর্তন করা।

JavaFX Controls এর জন্য Skinning এবং Customization

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

১. Skinning JavaFX Controls

JavaFX এর ডিফল্ট কন্ট্রোলগুলি CSS ব্যবহার করে স্কিন করতে পারবেন, যেখানে প্রতিটি কন্ট্রোলের স্টাইল প্রপার্টি কাস্টমাইজ করা যায়।

উদাহরণ: Button এর জন্য Custom CSS Skin

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

public class ButtonSkinExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Button তৈরি
        Button btn = new Button("Click Me!");

        // CSS স্টাইল প্রয়োগ করা
        btn.setStyle("-fx-background-color: #4CAF50; -fx-text-fill: white; -fx-font-size: 16px; -fx-padding: 10px;");

        // StackPane layout তৈরি
        StackPane root = new StackPane();
        root.getChildren().add(btn);

        // Scene তৈরি করা
        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Button Skin Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• এখানে CSS এর মাধ্যমে Button এর পটভূমি রঙ, পাঠ্য রঙ, ফন্ট সাইজ, এবং প্যাডিং কাস্টমাইজ করা হয়েছে।
• আপনি CSS ফাইল ব্যবহার করে JavaFX কন্ট্রোলের স্টাইল কাস্টমাইজ করতে পারেন, যা অ্যাপ্লিকেশনের চেহারা পরিবর্তন করে।

CSS Example:

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

এখন আপনি CSS ফাইলটি JavaFX অ্যাপ্লিকেশনে লোড করতে পারেন:

scene.getStylesheets().add("style.css");

২. Custom Skin Class

JavaFX কন্ট্রোলের স্কিন কাস্টমাইজ করার জন্য, আপনি একটি Custom Skin ক্লাস তৈরি করতে পারেন। এটি কন্ট্রোলের স্টাইল এবং তার আচরণ পরিবর্তন করার জন্য ব্যবহৃত হয়।

উদাহরণ: Custom Skin for a Button

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.scene.control.Skin;

public class CustomButtonSkinExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Custom Button তৈরি
        Button customButton = new Button("Click Me!");

        // Custom Skin প্রয়োগ করা
        customButton.setSkin(new CustomButtonSkin(customButton));

        // StackPane layout তৈরি
        StackPane root = new StackPane();
        root.getChildren().add(customButton);

        // Scene তৈরি করা
        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Custom Button Skin Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

class CustomButtonSkin implements Skin<Button> {
    private final Button button;
    private final Rectangle rectangle;

    public CustomButtonSkin(Button button) {
        this.button = button;
        this.rectangle = new Rectangle(100, 50, Color.GREEN);

        // Button এর আচরণ পরিবর্তন করা (উদাহরণস্বরূপ, হোভার করলে রঙ পরিবর্তন)
        button.setOnMouseEntered(e -> rectangle.setFill(Color.RED));
        button.setOnMouseExited(e -> rectangle.setFill(Color.GREEN));
    }

    @Override
    public Button getSkinnable() {
        return button;
    }

    @Override
    public javafx.scene.Node getNode() {
        return rectangle;
    }

    @Override
    public void dispose() {
        // Clean up if needed
    }
}

ব্যাখ্যা:

• এখানে CustomButtonSkin ক্লাসটি Skin<Button> ইন্টারফেস ইমপ্লিমেন্ট করে।
• getNode() মেথডে আমরা একটি Rectangle তৈরি করেছি যা কাস্টম স্কিনের অংশ হবে। এই স্কিনের আচরণ (যেমন, হোভার করলে রঙ পরিবর্তন) Java কোডের মাধ্যমে কাস্টমাইজ করা হয়েছে।

৩. Custom Control

JavaFX তে আপনি নিজের কাস্টম কন্ট্রোলও তৈরি করতে পারেন। এটি করলে আপনি কন্ট্রোলের স্টাইল এবং আচরণ পুরোপুরি কাস্টমাইজ করতে পারবেন।

উদাহরণ: Custom Control

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

public class CustomControlExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Custom Control তৈরি
        CustomControl customControl = new CustomControl();

        // StackPane layout তৈরি
        StackPane root = new StackPane();
        root.getChildren().add(customControl);

        // Scene তৈরি করা
        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Custom Control Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

class CustomControl extends Control {

    public CustomControl() {
        setMinSize(100, 100);
    }

    @Override
    protected void layoutChildren() {
        // Custom layout logic
    }

    @Override
    protected javafx.scene.Node createDefaultSkin() {
        return new CustomControlSkin(this);
    }
}

class CustomControlSkin implements javafx.scene.control.Skin<CustomControl> {
    private final CustomControl customControl;

    public CustomControlSkin(CustomControl customControl) {
        this.customControl = customControl;
    }

    @Override
    public CustomControl getSkinnable() {
        return customControl;
    }

    @Override
    public javafx.scene.Node getNode() {
        return new javafx.scene.shape.Rectangle(100, 100);
    }

    @Override
    public void dispose() {
        // Clean up
    }
}

ব্যাখ্যা:

• CustomControl কাস্টম কন্ট্রোল তৈরি করতে Control ক্লাস এক্সটেন্ড করা হয়েছে।
• createDefaultSkin() মেথডে কাস্টম স্কিন তৈরি করা হয়েছে।
• কাস্টম কন্ট্রোল এবং কাস্টম স্কিন তৈরি করে, আপনি JavaFX এর ডিফল্ট কন্ট্রোলের চেহারা এবং আচরণ পুরোপুরি কাস্টমাইজ করতে পারেন।

সারাংশ:

1. Skinning হল JavaFX কন্ট্রোলের চেহারা কাস্টমাইজ করার প্রক্রিয়া, যেখানে CSS অথবা Custom Skin ব্যবহার করে কন্ট্রোলের ভিজ্যুয়াল পরিবর্তন করা হয়।
2. Customization হল কন্ট্রোলের আচরণ কাস্টমাইজ করা, যা UI ইভেন্ট যেমন ক্লিক, হোভার ইত্যাদি নিয়ন্ত্রণ করার মাধ্যমে করা যায়।
3. JavaFX-এ CSS দিয়ে কন্ট্রোলের স্টাইল পরিবর্তন করা, Custom Skin তৈরি করা এবং Custom Controls তৈরি করার মাধ্যমে JavaFX অ্যাপ্লিকেশনে গভীর কাস্টমাইজেশন করা সম্ভব।

JavaFX-এ কন্ট্রোলের স্কিনিং এবং কাস্টমাইজেশন আপনাকে আধুনিক এবং ব্যক্তিগতকৃত ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে।