0

I have a piece of code like this :

<Tab text="A" fx:controller="myController" xmlns:fx="http://javafx.com/fxml">
  <content>
    <VBox>
      <children>
        <fx:include fx:id="topTab" source="../top-tab.fxml"/>
        <AnchorPane prefHeight="600" VBox.vgrow="ALWAYS">
            <!-- insert code here -->
        </AnchorPane>
        <AnchorPane id="bottom_anchor" prefHeight="250" />
        <fx:include fx:id="bottomTab" source="../bottom-tab.fxml"/>
      </children>
    </VBox>
  </content>
</Tab>

Right now, the 'insert code here' part has a list of links to youtube videos. The idea is, when the user clicks on one of these links, to show IN THE SAME AnchorPane the video and the list disappears. It would be like another screen (with a nice transition if possible) that appears while the list disappears, all inside this AnchorPane as I need to stay there.

I have thought about using a StackPane and making things visible or invisible as needed, but that seems... strange.

As I am new to JavaFX, any answer explained as to a 9-year-old would be appreciated

Thank you all !

Edu Castrillon
  • 527
  • 1
  • 12
  • 28

1 Answers1

0

Easiest way I think is to add 2 AnchorPanes inside the AnchorPane you already have. Let's call them pList and pContent. Then play with the visible property of them.

To make a nice transition you can do something like this:

FadeTransition showTransition = new FadeTransition(Duration.seconds(.1), pList);
showTransition.setFromValue(0.0f);
showTransition.setToValue(1.0f);
showTransition.play();

Do it the other way for pContent.

Perneel
  • 3,317
  • 7
  • 45
  • 66