Drag-and-Drop এর ধারণা এবং ব্যবহার

JavaFX-এ Drag-and-Drop ইভেন্টের মাধ্যমে আপনি ইউজারকে এক উপাদান থেকে অন্য উপাদানে ডাটা টানতে এবং ছাড়তে সক্ষম করেন। এটি একটি শক্তিশালী ইন্টারঅ্যাকটিভ ফিচার, বিশেষত যখন আপনি ড্র্যাগেবল উপাদানগুলি তৈরি করতে চান এবং ব্যবহারকারীরা তাদের মধ্যে ইন্টারঅ্যাক্ট করতে চান।

JavaFX-এ Drag-and-Drop প্রক্রিয়া Source Node (যেখান থেকে উপাদানটি টানা হবে) এবং Target Node (যেখানে উপাদানটি ফেলা হবে) এর মধ্যে কাজ করে। ড্র্যাগ এবং ড্রপ ইভেন্টে সাধারণত তিনটি মূল পদ্ধতি ব্যবহৃত হয়:

1. DragDetected: যখন ড্র্যাগ শুরু হয়, তখন এটি ট্রিগার হয়।
2. DragOver: যখন ড্র্যাগ করা উপাদান টার্গেটের উপরে চলে আসে, তখন এটি ট্রিগার হয়।
3. DragDropped: যখন ড্র্যাগ করা উপাদান টার্গেটে ফেলা হয়, তখন এটি ট্রিগার হয়।

ড্র্যাগ-এন্ড-ড্রপ এর মধ্যে স্টেপস:

1. Source Node-এ ড্র্যাগ শুরু করা।
2. Target Node-এ ড্র্যাগ করা উপাদান পৌঁছানো।
3. Drop-এ উপাদানটি Target Node-এ ফেলা।

JavaFX Drag-and-Drop উদাহরণ:

এই উদাহরণে, একটি বাটন ড্র্যাগ করা হবে এবং এটি একটি StackPane (Target Node) এ ফেলা হবে।

উদাহরণ কোড:

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

public class DragAndDropExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Source Node - একটি Button তৈরি
        Button button = new Button("Drag Me!");
        
        // Target Node - একটি StackPane তৈরি
        StackPane targetPane = new StackPane();
        targetPane.setStyle("-fx-border-color: black; -fx-border-width: 2; -fx-pref-height: 300; -fx-pref-width: 300;");

        // Source Node - Drag Detected Event
        button.setOnDragDetected(event -> {
            // Dragging শুরু হলে, Dragboard তৈরি হবে
            var dragboard = button.startDragAndDrop(TransferMode.MOVE);
            // Add the content (button text) to dragboard
            dragboard.setContent(java.util.Collections.singletonMap(java.awt.datatransfer.DataFlavor.stringFlavor, button.getText()));
            event.consume();
        });

        // Target Node - Drag Over Event
        targetPane.setOnDragOver(event -> {
            // Checking if the dragboard content is of the right type
            if (event.getGestureSource() != targetPane && event.getDragboard().hasString()) {
                event.acceptTransferModes(TransferMode.MOVE); // Allow move operation
            }
            event.consume();
        });

        // Target Node - Drag Dropped Event
        targetPane.setOnDragDropped(event -> {
            var dragboard = event.getDragboard();
            boolean success = false;
            if (dragboard.hasString()) {
                // Show the dropped content in the target pane
                targetPane.getChildren().add(new Button(dragboard.getString()));
                success = true;
            }
            event.setDropCompleted(success);
            event.consume();
        });

        // Adding the button and target pane to the root
        StackPane root = new StackPane();
        root.getChildren().add(button);
        root.getChildren().add(targetPane);
        
        // Scene setup
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("JavaFX Drag and Drop Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

1. Source Node (Button):
   • setOnDragDetected ইভেন্টে, বাটনটি যখন টানা শুরু হয়, তখন এটি Dragboard তৈরি করে এবং বাটনের টেক্সট সেট করে। এটি TransferMode.MOVE ব্যবহার করে (অর্থাৎ উপাদানটি স্থানান্তর করা হবে)।
2. Target Node (StackPane):
   • DragOver: যখন ড্র্যাগ করা বাটনটি StackPane এর উপর চলে আসে, তখন এটি যাচাই করে যে ড্র্যাগড কন্টেন্ট সঠিক ফরম্যাটে (যেমন স্ট্রিং) রয়েছে এবং TransferMode.MOVE-এ অনুমতি দেয়।
   • DragDropped: যখন ড্র্যাগ করা উপাদানটি টার্গেটের উপর ফেলানো হয়, তখন টার্গেট প্যানেলে একটি নতুন বাটন যুক্ত হয়, যা ড্র্যাগ করা কন্টেন্ট (বাটনের টেক্সট) প্রদর্শন করবে।

Key Points:

1. startDragAndDrop(): এটি ড্র্যাগ অপারেশন শুরু করে এবং ড্র্যাগবোর্ড তৈরি করে।
2. acceptTransferModes(): এটি ড্র্যাগ অপারেশনের জন্য সাপোর্টেড TransferMode নির্ধারণ করে, যেমন COPY, MOVE, বা LINK।
3. setDropCompleted(): এটি নির্ধারণ করে যে ড্রপ অপারেশন সফল ছিল কি না।
4. hasString(): এটি ড্র্যাগড কন্টেন্টের প্রকার পরীক্ষা করে, এবং যদি তা সঠিক হয় তবে ড্রপ অনুমোদন করা হয়।

JavaFX Drag-and-Drop-এ Styling Techniques:

1. CSS ব্যবহার করে Drag-and-Drop UI Styling:

JavaFX এ আপনি Drag-and-Drop এর জন্য CSS স্টাইলিং করতে পারেন যাতে UI আরো ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় হয়। যেমন, আপনি target node (যেখানে উপাদানটি ড্রপ করা হচ্ছে) এর জন্য hover effect যোগ করতে পারেন:

/* Target Node - Hover Effect */
.stack-pane:hover {
    -fx-background-color: lightgreen;
    -fx-border-color: green;
    -fx-border-width: 3;
}

2. Effect Add করা:

ড্র্যাগ এবং ড্রপ এর সময় DropShadow অথবা Glow এর মতো Effect ব্যবহার করা যেতে পারে:

/* Add shadow effect to target pane */
.stack-pane:drag-over {
    -fx-effect: dropshadow(gaussian, gray, 10, 0.5, 0, 0);
}

এটি টার্গেট নোডে হালকা ছায়া যুক্ত করবে যখন তা ড্র্যাগড উপাদানটি গ্রহন করবে।

JavaFX-এর Drag-and-Drop সাপোর্ট দিয়ে আপনি ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি অ্যাপ্লিকেশন তৈরি করতে পারেন। Source Node থেকে Target Node-এ ড্র্যাগড কন্টেন্ট টানতে এবং ফেলার জন্য আপনি সঠিক events (DragDetected, DragOver, DragDropped) ব্যবহার করবেন। CSS এবং JavaFX Effects এর মাধ্যমে আপনি এই ইন্টারঅ্যাকশনগুলিকে আরও আকর্ষণীয় ও উপভোগ্য করতে পারেন।