Eexpand 2 more Titledpanes at once

Question

On these days i am refactoring java swing code to javafx. And about some jpanels, i just refactored as JFXPanel and that JFXPanels` root is VBOX. the structure of JFXPanel is VBOX -> BorderPane -> TitledPane -> AnchorPane.

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="93.0" prefWidth="295.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <BorderPane prefHeight="259.0" prefWidth="309.0">
         <top>
            <TitledPane animated="false" prefHeight="93.0" prefWidth="297.0" style="-fx-background-color: #eeeeee;" text="Compensation Options" textFill="#1b75bc">
               <content>
                  <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="295.0" prefWidth="267.0">
                     <children>
                        <Button fx:id="mResetCountButton" layoutX="25.0" layoutY="5.0" mnemonicParsing="false" text="Reset Counts" textAlignment="CENTER" />
                        <Button fx:id="plotStatsButton" layoutX="123.0" layoutY="5.0" mnemonicParsing="false" text="Stats Panel" textAlignment="CENTER" />
                        <Button fx:id="gateStatsButton" layoutX="208.0" layoutY="5.0" mnemonicParsing="false" text="Gate State" textAlignment="CENTER" />
                        <Button fx:id="mLoadMatrixButton" layoutX="28.0" layoutY="37.0" mnemonicParsing="false" text="Load Matrix" textAlignment="CENTER" />
                        <Button fx:id="viewCompMatrix" layoutX="119.0" layoutY="37.0" mnemonicParsing="false" text="View Matrix" textAlignment="CENTER" />
                        <Label fx:id="mJCompMatrixCombo" layoutX="208.0" layoutY="41.0" text="Matrix Name" />
                     </children>
                  </AnchorPane>
               </content>
            </TitledPane>
         </top>
      </BorderPane>
   </children>
</VBox>

And now i want to make JFXPanels as Accordion. When i searched in google i just saw some code which use and when i make Accordion tag, i just can use TitledPane below tag. Is there any other way to make JFXPanels as Accordion reusing my code?...

And actually using Tag, i just can expand one titledPane at once. How can i make JavaFX application with Accordion which can expand many titledPanes at once?

I just tried as make titledPanesclicklistener and resizing VBox which is wrapping titledPane and titledpanes size and some panes which in inside of titledpane.

such as

boolean titledPaneClicked = false;

TiteldPane.setOnAction((e)->{
    if(titledPaneClicked){
        TitledPane.setHeight(0);
        Vbox.setHeight(0);
        soemotherPanes.setHeight(0);
        titledPaneClicked = !titledPaneClicked;
    }else{
        TitledPane.setHeight(previousSize);
        Vbox.setHeight(previousSize);
        soemotherPanes.setHeight(previousSize);
        titledPaneClicked = !titledPaneClicked;
    }
});

And it did not work. Plz help me :)

Answer 1

If your question is about how you can open close 2 TitledPanes at once, you can do so programmatically, for example by using a button :

Main.fxml (to make your code mcve always post the fxml name and imports)

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>

<VBox minWidth="-Infinity" prefHeight="200.0" prefWidth="200.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" 
fx:controller="tests.xml.Controller">
   <children>
      <BorderPane>
         <top>
            <TitledPane fx:id="aTitledPane" animated="false" style="-fx-background-color: #eeeeee;" text="Compensation Options" textFill="#1b75bc">
               <content>
                  <AnchorPane>
                     <children>
                        <Label text="Top pane expanded" />
                     </children>
                  </AnchorPane>
               </content>
            </TitledPane>
         </top>
          <center>
            <TitledPane fx:id="bTitledPane" animated="false" style="-fx-background-color: #eeeeee;" text="Other Options" textFill="#1b75bc">
               <content>
                  <AnchorPane>
                     <children>
                        <Label text="Bottom pane expanded" />
                     </children>
                  </AnchorPane>
               </content>
            </TitledPane>
         </center>
         <bottom>   
            <Button fx:id="openCloseButton" onAction="#openClose" text="Close" textAlignment="CENTER" />
         </bottom>
      </BorderPane>
   </children>
</VBox>

And it controller:

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TitledPane;

public class Controller {

    @FXML
    private TitledPane aTitledPane, bTitledPane;
    @FXML
    private Button openCloseButton;

    private final static String OPEN = "Open", CLOSE = "Close";

    @FXML
    void initialize(){
        openCloseButton.setText(OPEN);
        aTitledPane.setExpanded(false);
        bTitledPane.setExpanded(false);
    }

    @FXML
    private void openClose(){
        System.out.println(openCloseButton.getText());
        if(openCloseButton.getText().equals(OPEN)){
            openCloseButton.setText(CLOSE);
            aTitledPane.setExpanded(true);
            bTitledPane.setExpanded(true);
        }else{
            openCloseButton.setText(OPEN);
            aTitledPane.setExpanded(false);
            bTitledPane.setExpanded(false);
        }
    }
}

Test it using :

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class FXMLTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{

        Parent root = FXMLLoader.load(getClass().getResource("xml/Main.fxml"));
        primaryStage.setTitle("Hello World");
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

If you want that opening / closing one TitledPane will open / close the other without using a button, remove the button from the fxml, and bind TitledPane.expandedProperty() of the two TitledPanes in the controller:

import javafx.fxml.FXML;
import javafx.scene.control.TitledPane;

public class Controller {

    @FXML
    private TitledPane aTitledPane, bTitledPane;

    @FXML
    void initialize(){
        aTitledPane.expandedProperty().bindBidirectional(bTitledPane.expandedProperty());
    }
}

Answer 2

I solved this problem just using VBox.

I made VBox, titledPane and VBox which contains some Btns, Labels, and so on.

VBox mainBox = new VBox();
TitledPane T1 = new TitledPane();
VBox content1 = new VBox();
T1.setContent(content1);
TitledPane T2 = new TitledPane();
VBox content2 = new VBox();
T2.setContent(content2);

mainBox.getChildren().addAll(T1, T2);

and then in MainVBox, titledPanes are shown like accordion.