HiddenSidesPane fxml example - javafx

Question

Can Anybody tell me how to construct HiddenSidesPane in FXML not in the controller?
I am having the basic controller code for this but I am not able to understand how to create fxml structure from that.
Can I have something like this? Below code;
<HiddenSidesPane prefWidth="800.0" pinnedSide="TOP">
<content>
<HBox fillHeight="false" nodeOrientation="RIGHT_TO_LEFT"
prefHeight="27.0" prefWidth="800.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="3.0" StackPane.alignment="TOP_RIGHT">
<children>
<Label prefHeight="14.0" prefWidth="94.0" text="Value Date From">
<HBox.margin>
<Insets right="2.0" top="5.0" />
</HBox.margin>
</Label>
</children>
<StackPane.margin>
<Insets top="2.0" />
</StackPane.margin>
</HBox>
</content>
</HiddenSidesPane>

Answer 1

This how I made a fast example with the offical FXSampler of ControlsFX in mind:
Assumptions
You already set up your FXML Project and added the ControlsFX.jar as dependency on your build path.
FXMLDocument.fxml
Watch for the import statements.
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>
<?import org.controlsfx.control.*?>
<StackPane xmlns:fx="http://javafx.com/fxml/1" prefHeight="200" prefWidth="320" fx:controller="javafxapplication17.FXMLDocumentController">
<children>
<HiddenSidesPane fx:id="pane">
<content>
<Label alignment="CENTER" style="-fx-background-color: white; -fx-border-color: black;" maxHeight="1000.0" maxWidth="1000.0" text="Content Node" />
</content>
<top>
<Label fx:id="pinLabel" style="-fx-background-color: rgba(0,255,0,.25);" text="(Click to pin / unpin)" alignment="CENTER" prefHeight="50.0" prefWidth="50.0" onMouseClicked="#handleMouseClicked" />
</top>
</HiddenSidesPane>
</children>
</StackPane>
FXMLController.java
Inject your variables pane and pinLabel to set them.
import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.geometry.Side;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import org.controlsfx.control.HiddenSidesPane;
public class FXMLDocumentController implements Initializable {
#FXML
private HiddenSidesPane pane;
#FXML
private Label pinLabel;
#FXML
private void handleMouseClicked(MouseEvent event) {
if (pane.getPinnedSide() != null) {
pinLabel.setText("(unpinned)");
pane.setPinnedSide(null);
} else {
pinLabel.setText("(pinned)");
pane.setPinnedSide(Side.TOP);
}
}
#Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
JavaFXApplication17.java
Sorry for that name :-)
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class JavaFXApplication17 extends Application {
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
As far as you already know here is the JavaDoc of HiddenSidesPane: http://controlsfx.bitbucket.org/org/controlsfx/control/HiddenSidesPane.html
And if you need an example download the Zip http://fxexperience.com/downloads/controlsfx-8.40.9.zip and unzip it, there is a file controlsfx-samples-8.40.9.jar inside. Double click it and show the sources.