JavaFX Pane inside of a Tab

Question

I want to extend a Class from Pane and then use the setContent() method from a tab from TabPane to display the Pane inside this Tab. It worked in Swing when I extended from JPanel but if I try something similar in JavaFX it only displays the tab itself and stays empty below.

I want to handle the content of the tabs in separate classes, am I doing something completely wrong here?

Swing version:

import java.awt.*;
import javax.swing.*;
import java.util.*;

public class Home extends JFrame{
  private JTabbedPane jTabbedPane1 = new JTabbedPane();
  private Example ex = new Example();

  public static void main(String[] args) {
    Home h1 = new Home();
    h1.ex= new Example();
    h1.jTabbedPane1.add("test",h1.ex);
  } // end of main

  public Home() { 
    // Frame-Initialisierung
    super();

    setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);

    setSize(200,200);
    Dimension d = Toolkit.getDefaultToolkit().getScreenSize();
    int x = (d.width - getSize().width) / 2;
    int y = (d.height - getSize().height) / 2;
    setLocation(x, y);
    setResizable(false);

    Container cp = getContentPane();
    cp.setLayout(null);
    // Anfang Komponenten

    jTabbedPane1.setBounds(0, 0, 100, 100);
    cp.add(jTabbedPane1);

    setVisible(true);
  } // end of public home
} // end of class Home

import java.awt.*;
import javax.swing.*;
import java.util.*;

public class Example extends JPanel {
  private JList jList1 = new JList();
  private DefaultListModel jList1Model = new DefaultListModel();
  private JScrollPane jList1ScrollPane = new JScrollPane(jList1);

  public Example(){
    super();
    setLayout(null);
    jList1.setModel(jList1Model);
    jList1ScrollPane.setBounds(0, 0, 100, 100);

    add(jList1ScrollPane);

    }

} // end of class Example

Not working in JavaFX version:

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TabPane.TabClosingPolicy;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class Home extends Application {


  private TabPane tabpane = new TabPane();
  private Example ex;

    @Override
    public void start(Stage primaryStage) {

     primaryStage.setTitle("TEST");

     Pane layout = new Pane();

     tabpane.setLayoutX(-8);
     tabpane.setLayoutY(24);
     tabpane.setTabClosingPolicy(TabClosingPolicy.UNAVAILABLE);

      Tab tab = new Tab();
      tab.setText("new tab");
      tab.setContent(new Rectangle(200,200));
      this.ex = new Example();
      tab.setContent(ex);
      tabpane.getTabs().add(tab);

     layout.getChildren().add(tabpane);

     Scene scene = new Scene(layout, 500, 500);


     scene.getStylesheets().clear();
     scene.getStylesheets().add(Home.class.getResource("style.css").toExternalForm());

     primaryStage.setScene(scene);
     primaryStage.setResizable(false);


     primaryStage.show();

    }

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



import java.util.ArrayList;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.control.ListView;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;



public class Example extends Pane{

     ListView<String> list = new ListView<String>();


    public void start(Stage primaryStage) {


     ArrayList<String> arraytest = new ArrayList<String>();
     arraytest.add("test1");
     arraytest.add("test2");

    ObservableList<String> test = FXCollections.observableArrayList(arraytest);

    list.setItems(test);
    list.setLayoutX(10);
    list.setLayoutY(10);
    list.setPrefWidth(270);
    list.setPrefHeight(270); 

     getChildren().add(list);

    }    
}

Answer 1

Your Swing example is incorrectly synchronized and suffers from an inflexible layout having absolute positioning. The example should be discarded except to observe that Pane "may be used directly in cases where absolute positioning of children is required." In this case, your JavaFX example does not.

In the JavaFX variation below, Example constructs the desired ListView and makes it available via the getContent() method. Home then uses that content for the tab. Resize the enclosing stage to see the effect.

tab.setContent(example.getContent());

As an aside, the private static class Example is semantically equivalent to a class having package-private access, making it easy to test in situ and later refactor into a separate class.

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TabPane.TabClosingPolicy;
import javafx.stage.Stage;

/** @see https://stackoverflow.com/a/44102580/230513 */
public class Home extends Application {

    private TabPane tabpane = new TabPane();
    private Example example = new Example();

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Test");
        tabpane.setTabClosingPolicy(TabClosingPolicy.UNAVAILABLE);
        Tab tab = new Tab();
        tab.setText("Tab One");
        tab.setContent(example.getContent());
        tabpane.getTabs().add(tab);
        Scene scene = new Scene(tabpane);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private static class Example {

        ListView<String> view = new ListView<>();

        public Example() {
            ObservableList<String> list = FXCollections.observableArrayList(
                "Test 1", "Test 2", "Test 3");
            view.setItems(list);
        }

        public ListView<String> getContent() {
            return view;
        }
    }

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