How to dynamically load content into JavaFX tabs?

Question

I have a GUI created using JavaFX with FXML.

There are many components in this GUI, and not all of them are needed at one time.

For example, imagine a graphical interface that receives a list of cities from its server side. Each city is described on its own tab (and is described by many nodes). A set of cities contains 30 elements.

When the GUI starts up, it asks the server for a list of cities. The server returns a random "subset" of cities (thus, it can be Moscow + Riga + New York or St. Petersburg + Tokyo, or only Amsterdam, or all 30 cities in one set).

So. I don’t need to have all 30 tabs in my node tree (I suppose they just “eat up” the memory and nothing else).

I want to control the number of tabs that I have at every moment of my GUI.

The first simple solution I have is the following:

• Create an FXML file that contains components for all cities.
• During initialization in the controller class, delete the tabs that are not needed.

I have problems with this solution. First, I don’t know if tabPane.getTabs().remove(index) really removes the tab and all its content from the tree of nodes. Secondly, all unnecessary tabs will be initialized before they are deleted, so in any case they will use memory and resources, and my graphical interface may be slower than it should be.

My second solution:

• Make a lot of FXML. One for all cities, one for each city and one for each city combination.

But many FXML will have many ways, so this solution is also not useful.

The solution I dream of:

• Create an FXML file for each city and one for the main tabbed application.
• Load the contents of an FXML city file into a dynamic table if necessary.

So, if someone has ideas for this task or they know the solution, please help me with this ...

Answer 1

Well, if I understood you correctly, here is my suggestion Victoria,
Suppose the main FXML application contains a TabPane somewhere in it:

 // other controls <TabPane fx:id="tabPane" id="tabPane"> <tabs> </tabs> </TabPane> // other controls 

In the main controller:

 // TabPane in fxml @FXML private TabPane tabPane; // The FXMLLoader private FXMLLoader fXMLLoader = new FXMLLoader(); // City list fetched from server private String[] cityList = {"Moscow", "Stambul", "New York", "Bishkek"}; // OPTIONAL : Map for "city name - city fxml controller" pairs private Map<String, Object> cityControllerMap = new HashMap<String, Object>(); // Belows are in init method // Add only tabs dynamically but not their content for (String city : cityList) { tabPane.getTabs().add(new Tab(city)); } // It is important to call it before adding ChangeListener to the tabPane to avoid NPE and // to be able fire the manual selection event below. Otherwise the 1st tab will be selected // with empty content. tabPane.getSelectionModel().clearSelection(); // Add Tab ChangeListener tabPane.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Tab>() { @Override public void changed(ObservableValue<? extends Tab> observable, Tab oldValue, Tab newValue) { System.out.println("Tab selected: " + newValue.getText()); if (newValue.getContent() == null) { try { // Loading content on demand Parent root = (Parent) fXMLLoader.load(this.getClass().getResource(newValue.getText() + ".fxml").openStream()); newValue.setContent(root); // OPTIONAL : Store the controller if needed cityControllerMap.put(newValue.getText(), fXMLLoader.getController()); } catch (IOException ex) { ex.printStackTrace(); } } else { // Content is already loaded. Update it if necessary. Parent root = (Parent) newValue.getContent(); // Optionally get the controller from Map and manipulate the content // via its controller. } } }); // By default, select 1st tab and load its content. tabPane.getSelectionModel().selectFirst(); 

If you decide to store controllers, you can define a controller for each city of fxml or define only one controller class for all of them and set it as fXMLLoader.setController(new CommonCityController()); , before downloading the city fxml file.

NTN.