'JavaFX JFXDrawer not hidden completely when program starts
I'm trying to add a JFXDrawer to my program which I have succeeded in doing that however I have only one issue that I cannot figure out why its happening. When my program first runs the JFXDrawer should be completely hidden and shown when I click on the Hamburger button but if you look at the below image the red space highlighted(which I added as a background color for the drawer to make it clear), that space is always shown when the program starts but when I click on the hamburger to open and close it returns normal hidden, its just on startup.
This is how its working now:
The following is a reproducible example code:
NavigationDrawerTest
public class NavigationDrawerTest extends Application {
@Override
public void start(Stage stage) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));
Scene scene = new Scene(root);
stage.initStyle(StageStyle.UNDECORATED);
stage.setScene(scene);
stage.show();
}
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
MainController:
public class MainController implements Initializable {
/**
* Initializes the controller class.
*/
@FXML
private AnchorPane anchorPane;
@FXML
private JFXHamburger hamburger;
@FXML
private JFXDrawer drawer;
@Override
public void initialize(URL url, ResourceBundle rb) {
try {
// TODO
VBox box = FXMLLoader.load(getClass().getResource("NavDrawer.fxml"));
drawer.setSidePane(box);
} catch (IOException ex) {
Logger.getLogger(MainController.class.getName()).log(Level.SEVERE, null, ex);
}
HamburgerSlideCloseTransition task = new HamburgerSlideCloseTransition(hamburger);
task.setRate(-1);
hamburger.addEventHandler(MouseEvent.MOUSE_CLICKED, (Event event) -> {
drawer.toggle();
});
drawer.setOnDrawerOpening((event) -> {
task.setRate(task.getRate() * -1);
task.play();
drawer.setMinWidth(220);
});
drawer.setOnDrawerClosed((event) -> {
task.setRate(task.getRate() * -1);
task.play();
drawer.setMinWidth(0);
});
}
}
Main.fxml
<BorderPane maxHeight="790.0" maxWidth="1280.0" prefHeight="790.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="navigationdrawertest.MainController">
<center>
<AnchorPane id="AnchorPane" fx:id="anchorPane" prefHeight="720.0" prefWidth="1280.0">
<children>
<JFXHamburger fx:id="hamburger" layoutX="14.0" layoutY="14.0" />
<JFXTextField fx:id="tf_search" focusColor="#ffc107" layoutX="80.0" layoutY="54.0" prefHeight="40.0" prefWidth="925.0" promptText="SEARCH HERE" unFocusColor="#c5c5c5" AnchorPane.leftAnchor="80.0" AnchorPane.rightAnchor="80.0" AnchorPane.topAnchor="54.0">
<font>
<Font name="Exo Regular" size="18.0" />
</font>
</JFXTextField>
<TableView fx:id="personTable" layoutX="80.0" layoutY="132.0" prefHeight="577.0" prefWidth="1040.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="152.0">
<columns>
<TableColumn fx:id="T1Column" editable="false" prefWidth="195.0" sortType="DESCENDING" text="T1" />
<TableColumn fx:id="T2Column" editable="false" minWidth="6.0" prefWidth="220.0" sortType="DESCENDING" text="T2" />
<TableColumn fx:id="T3Column" editable="false" prefWidth="97.0" sortType="DESCENDING" text="T3" />
</columns>
</TableView>
</children>
</AnchorPane>
</center>
<left>
<JFXDrawer fx:id="drawer" defaultDrawerSize="220.0" prefWidth="0.0" style="-fx-background-color: red;" BorderPane.alignment="CENTER" />
</left>
</BorderPane>
NavDrawer.fxml
<VBox style="-fx-background-color: black;" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="navigationdrawertest.NavDrawerController">
<children>
<JFXButton alignment="BASELINE_LEFT" focusTraversable="false" graphicTextGap="15.0" prefHeight="32.0" prefWidth="220.0" ripplerFill="WHITE" text="Button 1" textFill="#c1fff9">
<padding>
<Insets bottom="5.0" left="30.0" top="5.0" />
</padding>
</JFXButton>
<JFXButton alignment="BASELINE_LEFT" focusTraversable="false" graphicTextGap="15.0" layoutX="10.0" layoutY="10.0" prefHeight="32.0" prefWidth="220.0" ripplerFill="WHITE" text="Button 2" textFill="#c1fff9">
<padding>
<Insets bottom="5.0" left="30.0" top="5.0" />
</padding>
</JFXButton>
<JFXButton alignment="BASELINE_LEFT" focusTraversable="false" graphicTextGap="15.0" layoutX="10.0" layoutY="45.0" prefHeight="32.0" prefWidth="220.0" ripplerFill="WHITE" text="Button 3" textFill="#c1fff9">
<padding>
<Insets bottom="5.0" left="30.0" top="5.0" />
</padding>
</JFXButton>
<JFXButton alignment="BASELINE_LEFT" focusTraversable="false" graphicTextGap="15.0" layoutX="10.0" layoutY="80.0" prefHeight="32.0" prefWidth="220.0" ripplerFill="WHITE" text="Button 4" textFill="#c1fff9">
<padding>
<Insets bottom="5.0" left="30.0" top="5.0" />
</padding>
</JFXButton>
<JFXButton alignment="BASELINE_LEFT" focusTraversable="false" graphicTextGap="15.0" layoutX="10.0" layoutY="115.0" prefHeight="32.0" prefWidth="220.0" ripplerFill="WHITE" text="Button 5" textFill="#c1fff9">
<padding>
<Insets bottom="5.0" left="30.0" top="5.0" />
</padding>
</JFXButton>
</children>
</VBox>
NavDrawerController
public class NavDrawerController implements Initializable {
/**
* Initializes the controller class.
*/
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
I have also tried using stackpane and the a border pane within it as I have seen on some tutorials but still getting same problem.
Unfortunately there aren't much examples regarding using JFXDrawer which i'm not sure why.
Solution 1:[1]
I have managed to solve it thankfully, hwowver I'm not sure of that's the best way to solve it. If anyone has a better solution for it please share it. so I just added this line of code in the MainController:
drawer.setMinWidth(0);
so the MainController should look like this:
@Override
public void initialize(URL url, ResourceBundle rb) {
try {
// TODO
VBox box = FXMLLoader.load(getClass().getResource("NavDrawer.fxml"));
drawer.setSidePane(box);
drawer.setMinWidth(0); // this is the new code added
} catch (IOException ex) {
Logger.getLogger(MainController.class.getName()).log(Level.SEVERE, null, ex);
}
HamburgerSlideCloseTransition task = new HamburgerSlideCloseTransition(hamburger);
task.setRate(-1);
hamburger.addEventHandler(MouseEvent.MOUSE_CLICKED, (Event event) -> {
drawer.toggle();
});
drawer.setOnDrawerOpening((event) -> {
task.setRate(task.getRate() * -1);
task.play();
drawer.setMinWidth(220);
});
drawer.setOnDrawerClosed((event) -> {
task.setRate(task.getRate() * -1);
task.play();
drawer.setMinWidth(0);
});
} }
Solution 2:[2]
I might be years late, so this is for anyone coming here with this problem. This is the easiest way to do it. select your JFXDrawer in Scenebuilder then under the properties tab on the right of your screen, there's a field labelled "Default Drawer Size".
in that field, enter the exact width of the parent container of your fxml. In the question above, use the width of the parent pane in NavDrawer.fxml ...and there you have it.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Kay |
| Solution 2 | Jeremy Caney |