javafx 2 - How to drag and drop tab nodes between tab panes

Question

I'm working on example from this tutorial. Based on the tutorial I want to drag tabs between two tabs. So far I managed to create this code but I need some help in order to finish the code.

Source

tabPane = new TabPane();

        Tab tabA = new Tab();
        Label tabALabel = new Label("Main Component");

        tabPane.setOnDragDetected(new EventHandler<MouseEvent>()
        {
            @Override
            public void handle(MouseEvent event)
            {
                /* drag was detected, start drag-and-drop gesture*/
                System.out.println("onDragDetected");

                /* allow any transfer mode */
                Dragboard db = tabPane.startDragAndDrop(TransferMode.ANY);

                /* put a string on dragboard */
                ClipboardContent content = new ClipboardContent();
                content.put(DataFormat.PLAIN_TEXT, tabPane);
                db.setContent(content);

                event.consume();
            }
        });

What is the proper way to insert the content of the tab as object? Into the tutorial simple text is transferred. How I must modify this line content.put(DataFormat.PLAIN_TEXT, tabPane);?

And what is the proper way to insert the tab after I drag the tab:

Destination

tabPane.setOnDragDropped(new EventHandler<DragEvent>()
        {
            @Override
            public void handle(DragEvent event)
            {
                /* data dropped */
                /* if there is a string data on dragboard, read it and use it */
                Dragboard db = event.getDragboard();
                boolean success = false;
                if (db.hasString())
                {
                    //tabPane.setText(db.getString());
                    Tab tabC = new Tab();
                    tabPane.getTabs().add(tabC);
                    success = true;
                }
                /* let the source know whether the string was successfully
                 * transferred and used */
                event.setDropCompleted(success);

                event.consume();
            }
        });

I suppose that this transfer can be accomplished?

The working solution:

import java.util.Random;
import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.input.ClipboardContent;
import javafx.scene.input.DragEvent;
import javafx.scene.input.Dragboard;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.TransferMode;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class client extends Application
{

    private static final String TAB_DRAG_KEY = "tab";
    private ObjectProperty<Tab> draggingTab;

    @Override
    public void start(Stage primaryStage)
    {
        draggingTab = new SimpleObjectProperty<>();
        TabPane tabPane1 = createTabPane();
        TabPane tabPane2 = createTabPane();
        VBox root = new VBox(10);
        root.getChildren().addAll(tabPane1, tabPane2);
        final Random rng = new Random();
        for (int i = 1; i <= 8; i++)
        {
            final Tab tab = createTab("Tab " + i);
            final StackPane pane = new StackPane();
            int red = rng.nextInt(256);
            int green = rng.nextInt(256);
            int blue = rng.nextInt(256);
            String style = String.format("-fx-background-color: rgb(%d, %d, %d);", red, green, blue);
            pane.setStyle(style);
            final Label label = new Label("This is tab " + i);
            label.setStyle(String.format("-fx-text-fill: rgb(%d, %d, %d);", 256 - red, 256 - green, 256 - blue));
            pane.getChildren().add(label);
            pane.setMinWidth(600);
            pane.setMinHeight(250);
            tab.setContent(pane);
            if (i <= 4)
            {
                tabPane1.getTabs().add(tab);
            }
            else
            {
                tabPane2.getTabs().add(tab);
            }
        }
        primaryStage.setScene(new Scene(root, 600, 600));
        primaryStage.show();
    }

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

    private TabPane createTabPane()
    {
        final TabPane tabPane = new TabPane();
        tabPane.setOnDragOver(new EventHandler<DragEvent>()
        {
            @Override
            public void handle(DragEvent event)
            {
                final Dragboard dragboard = event.getDragboard();
                if (dragboard.hasString()
                        && TAB_DRAG_KEY.equals(dragboard.getString())
                        && draggingTab.get() != null
                        && draggingTab.get().getTabPane() != tabPane)
                {
                    event.acceptTransferModes(TransferMode.MOVE);
                    event.consume();
                }
            }
        });
        tabPane.setOnDragDropped(new EventHandler<DragEvent>()
        {
            @Override
            public void handle(DragEvent event)
            {
                final Dragboard dragboard = event.getDragboard();
                if (dragboard.hasString()
                        && TAB_DRAG_KEY.equals(dragboard.getString())
                        && draggingTab.get() != null
                        && draggingTab.get().getTabPane() != tabPane)
                {
                    final Tab tab = draggingTab.get();
                    tab.getTabPane().getTabs().remove(tab);
                    tabPane.getTabs().add(tab);
                    tabPane.getSelectionModel().select(tab);
                    event.setDropCompleted(true);
                    draggingTab.set(null);
                    event.consume();
                }
            }
        });
        return tabPane;
    }

    private Tab createTab(String text)
    {
        final Tab tab = new Tab();
        final Label label = new Label(text);
        tab.setGraphic(label);
        label.setOnDragDetected(new EventHandler<MouseEvent>()
        {
            @Override
            public void handle(MouseEvent event)
            {
                Dragboard dragboard = label.startDragAndDrop(TransferMode.MOVE);
                ClipboardContent clipboardContent = new ClipboardContent();
                clipboardContent.putString(TAB_DRAG_KEY);
                dragboard.setContent(clipboardContent);
                draggingTab.set(tab);
                event.consume();
            }
        });
        return tab;
    }
}

Answer 1

Thank you very much for this, it works basically well. However, when dragging to the first / upper tabpane from the second one, the content of the tab does not get refreshed, you need to change the tab or move the split divider. The second / lower tabpane does always refresh correctly. I have not found a remedy for this so far, asking the tabpane to do a refresh does not work. I would really appreciated if I could find a solution for this.

Edit: found a working solution

In the setOnDragDropped event handler I commented the line that selects the added tab, then added the following code:

Platform.runLater(new Runnable() {
   @Override
   public void run() {
       tabPane.getSelectionModel().select(tab) ;
   }
});

now it works. Thanks again

Edit 2: I'm sorry that I have to report that it works sometimes / most of the time, but not always.. still investigating on how to fix it for real.

Edit 3: At least now i know what causes the problem: when one tab is removed and added to the other pane, the removal from the old tabpane is not instant, and then the old pane disable the update of the context of that tab which is now already in the other tabpane. that's why it does not get drawn at all. When I put a Thread.sleep(500) (shorter sleep time is not working) between the calls to remove and add, everything works fine. Will update later if I manage to find a solution.