Switch between tabs in tabpane

Question

Is it possible to switch between tabs in tab pane with delay in JavaFX? For example I want to when I change selection tab to tab2 I see a transition on the tab that is selected and then tab2 will be shown .

You can simply show a gif image while clicking in the tabs.. — rinuthomaz, Jun 19 '14 at 06:23
Why are you looking for a delay while switching between tabs ? — ItachiUchiha, Jun 19 '14 at 06:50
Is there a loading lag, which you want to hide from the user, showing a progress bar ? — ItachiUchiha, Jun 19 '14 at 06:56
Because I want to have something like this : http://git.aaronlumsden.com/tabulous.js/#demo — faraa, Jun 19 '14 at 06:58
I know that I can use some rectangle and anchorpane and design a custom tabpane for myself . But I want to use tabpane in javaFX because I think it is more simple :) ! — faraa, Jun 19 '14 at 07:00
listen to selection changes, and then let the tab content fade-out/in with a transform as appropriate — kleopatra, Jun 19 '14 at 10:14
I did it . But as a selection change occurs another the content of another tab will be shown without any delay.I can not add delay to selection changes and this is the main problem ! — faraa, Jun 19 '14 at 10:21
ahh ... see what you mean. Interesting problem, no time to try something (like a custom selectionModel that's aware of a potential fade out of the previous tab content) Could be that you'll need a custom TabPaneSkin, though. — kleopatra, Jun 19 '14 at 10:54

score 4 · Accepted Answer · answered Jun 19 '14 at 16:08

I think you can use the existing TabPane, but you'll need to manage the tab content yourself; just switch the tab content for the selected tab with a change listener.

import java.util.HashMap;
import java.util.Map;

import javafx.animation.ScaleTransition;
import javafx.animation.SequentialTransition;
import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.util.Duration;

public class TransitioningTabPane extends Application {

    @Override
    public void start(Stage primaryStage) {
        TabPane tabPane = new TabPane();
        Tab tab1 = new Tab("Tab 1");
        Tab tab2 = new Tab("Tab 2");
        tabPane.getTabs().addAll(tab1, tab2);

        Map<Tab, Node> tabContent = new HashMap<>();
        tabContent.put(tab1, createTab1Content());
        tabContent.put(tab2, createTab2Content());

        // Initial state:

        tab1.setContent(tabContent.get(tab1));
        tabPane.getSelectionModel().select(tab1);

        // State change manager:

        tabPane.getSelectionModel()
                .selectedItemProperty()
                .addListener(
                        (obs, oldTab, newTab) -> {
                            oldTab.setContent(null);
                            Node oldContent = tabContent.get(oldTab);
                            Node newContent = tabContent.get(newTab);

                            newTab.setContent(oldContent);
                            ScaleTransition fadeOut = new ScaleTransition(
                                    Duration.seconds(0.5), oldContent);
                            fadeOut.setFromX(1);
                            fadeOut.setFromY(1);
                            fadeOut.setToX(0);
                            fadeOut.setToY(0);

                            ScaleTransition fadeIn = new ScaleTransition(
                                    Duration.seconds(0.5), newContent);
                            fadeIn.setFromX(0);
                            fadeIn.setFromY(0);
                            fadeIn.setToX(1);
                            fadeIn.setToY(1);

                            fadeOut.setOnFinished(event -> {
                                newTab.setContent(newContent);
                            });

                            SequentialTransition crossFade = new SequentialTransition(
                                    fadeOut, fadeIn);
                            crossFade.play();
                        });

        BorderPane root = new BorderPane(tabPane);
        Scene scene = new Scene(root, 600, 600);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    private Node createTab1Content() {
        Pane pane = new Pane();
        Rectangle rect1 = new Rectangle(50, 50, 250, 250);
        rect1.setFill(Color.SALMON);
        Rectangle rect2 = new Rectangle(150, 150, 250, 250);
        rect2.setFill(Color.CORNFLOWERBLUE.deriveColor(0, 1, 1, 0.5));
        Text text = new Text(225, 225, "This is tab 1");
        pane.getChildren().addAll(rect1, rect2, text);
        pane.setMinSize(500, 500);
        return pane;
    }

    private Node createTab2Content() {
        Pane pane = new Pane();
        Rectangle rect1 = new Rectangle(250, 50, 250, 250);
        rect1.setFill(Color.CORNFLOWERBLUE);
        Rectangle rect2 = new Rectangle(50, 150, 250, 250);
        rect2.setFill(Color.SALMON.deriveColor(0, 1, 1, 0.5));
        Text text = new Text(225, 225, "This is tab 2");
        pane.getChildren().addAll(rect1, rect2, text);
        pane.setMinSize(500, 500);
        return pane;
    }

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

Switch between tabs in tabpane

1 Answers1

Linked