CODEWITHSUNDEEP
javafx-2javafxjavafx-8
user1285928
user1285928

Reputation: 1476

How to resize components when tab pane is resized with mouse drag

I have implemented very simple mouse drag of the tab pane located at the center. The mouse resize is very basic and it's not working very well but for now I can drag the border of the tabs and increase the size.

enter image description here

Now I have found a problem. When I resize the tabs located at the center the components located next of the center are not pushed back and shrieked automatically as the user might expect, they are placed behind the component that I resize. Can I somehow set all component to be pushed back when I extend the main component with mouse drag?

Upvotes: 1

Views: 5712

Answers (2)

Nick Rippe
Nick Rippe

Reputation: 6465

Like others here, I'd recommend using the SplitPane class to handle the splitting of the screen for you. Here's a sample (based on your screenshot) of the split panes. If you dislike the display of the divider bar, you can modify the CSS to suit your needs.

Screenshot of sample code

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.SplitPane;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;


public class FXSplitTabs extends Application{

    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("SplitTabs");
        stage.setWidth(700);
        stage.setHeight(500);

        //Setup Center and Right
        TabPaneWrapper wrapper = new TabPaneWrapper(Orientation.HORIZONTAL, .9);
        TabPane centerPane = new TabPane();
        centerPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N"));

        TabPane rightPane = new TabPane();
        rightPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N"));
        SplitPane.setResizableWithParent(rightPane, false);
        wrapper.addNodes(centerPane, rightPane);

        //Add bottom
        TabPane bottomPane = new TabPane();
        bottomPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N"));
        TabPaneWrapper wrapperBottom = new TabPaneWrapper(Orientation.VERTICAL, .7);
        wrapperBottom.addNodes(wrapper.getNode(), bottomPane);

        //Add left
        TabPane leftPane = new TabPane();
        leftPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N"));
        TabPaneWrapper wrapperleft = new TabPaneWrapper(Orientation.HORIZONTAL, .1);
        wrapperleft.addNodes(leftPane, wrapperBottom.getNode());

        Scene myScene = new Scene(wrapperleft.getNode());
        stage.setScene(myScene);
        stage.sizeToScene();
        stage.show();
    }

    public Tab generateTab(String name){
        Tab result = new Tab(name);
        BorderPane content = new BorderPane();
        TextArea text = new TextArea();
        content.setCenter(text);
        result.setContent(content);
        return result;
    }

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

    public static class TabPaneWrapper{
        SplitPane split;

        public TabPaneWrapper(Orientation o, double splitLocation){
            split = new SplitPane();

            //Change the CSS (uncomment if using an external css)
            //split.getStylesheets().add("test.css");

            split.setOrientation(o);
            split.setDividerPosition(0, splitLocation);
        }

        public void addNodes(final Node node1, final Node node2){
            //Add to the split pane
            split.getItems().addAll(node1, node2);
        }

        public Parent getNode(){
            return split;
        }
    }

}

And if you wanted to use the CSS to change how the dividers look, uncomment the CSS line of code above, create a file test.css in the base package, and insert css specifications (here's an example that turns the dividers transparent):

.split-pane-divider {
   -fx-border-color: transparent;
   -fx-background-color: transparent;
}

Upvotes: 6

Puce
Puce

Reputation: 38132

As an alternative solution:

I've released a first Early Access version of Drombler FX, a new Rich Client Platform for JavaFX based on OSGi and Maven.

It also comes with an initial version of a Docking Framework, which seems something you are looking for.

You can read more about Drombler FX here: http://puces-blog.blogspot.ch/2012/12/drombler-fx-building-modular-javafx.html

Upvotes: 3

Related Questions