I want to have StackPane as my root pane. I want to have a scrollPane as a small box in the middle of the scene and two buttons below the container.
I tried to make it happen by writing this code:
private StackPane root = new StackPane();
private Scene scene = new Scene(root, 1366, 768);
public ContinueScreen() {
Button button1 = new ButtonBuilder("My Button1").setPrefWidth(200).build();
Button button2 = new ButtonBuilder("My Button2").setPrefWidth(200).build();
Button button3 = new ButtonBuilder("My Button3").setPrefWidth(200).build();
Button button4 = new ButtonBuilder("My Button4").setPrefWidth(200).build();
Button button5 = new ButtonBuilder("My Button5").setPrefWidth(200).build();
Button button6 = new ButtonBuilder("My Button6").setPrefWidth(200).build();
VBox vBox = new VBox(5);
vBox.getChildren().addAll(button1, button2, button3, button4, button5, button6);
ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(vBox);
scrollPane.setPannable(true);
scrollPane.setMaxSize(500, 180);
scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.ALWAYS);
scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);
root.getChildren().add(scrollPane);
StackPane.setAlignment(scrollPane, Pos.CENTER);
}
As you can probably notice, the code does work perfectly fine but that is until I add the buttons below I was talking about. I added those buttons in an HBox as
HBox hBox = new HBox(5);
hBox.setAlignment(Pos.BOTTOM_CENTER);
hBox.getChildren().addAll(new Button("cat"), new Button("dog"));
root.getChildren().addAll(hBox);
Now both the scrollpane and the two buttons are shown. However the scroll pane now stops working for some reason. The scrollpane is shown and its content but the horizontal or the vertical scroll, both of them do not work. Anyone knows why is this happening and how to fix it?
As you are using StackPane as root it piles up the nodes on one another so the top pane is HBox and not the ScrollPane, so it you are not able to use.
Use BorderPane or VBox and try.
BorderPane root = new BorderPane();
Scene scene = new Scene(root, 1366, 768);
root.setCenter(scrollPane);
HBox hBox = new HBox(5);
hBox.getChildren().addAll(new Button("cat"), new Button("dog"));
root.setBottom(hBox);
The issue here is that StackPane is allowed to resize the HBox, which it does. The HBox covers the complete scene preventing mouse events from reaching the ScrollPane. You can easily see this by coloring the HBox:
hBox.setStyle("-fx-background-color: rgba(100%, 0%, 0%, 0.5)");
The most simple solution would be to set up the HBox to only receive events on non-(fully-)transparent areas:
hBox.setPickOnBounds(false);
However you could also set up the HBox to take up the space required to fit the preferred size of the content and do the alignment via the StackPane:
hBox.setPrefSize(Region.USE_COMPUTED_SIZE, Region.USE_COMPUTED_SIZE);
hBox.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
StackPane.setAlignment(hBox, Pos.BOTTOM_CENTER);
// hBox.setAlignment(Pos.BOTTOM_CENTER);
Note that using a StackPane like this does not provide you with a responsive GUI: If you resize the window to a small enough height, the buttons will cover the ScrollPane.
You may have better luck using a BorderPane or wrapping the StackPane and the HBox in a VBox and setting VBox.vgrow to Priority.ALWAYS for the StackPane...
Related
I have a problem situating my scene on center in VBox Layout.
I use Border Layout as main, and Vbox is a child of Border Layout.
Any advice is appriciated, thanks!
VBox vbox = new VBox();
Scene scenehbox = new Scene(vbox, 200, 200);
vbox.setStyle("-fx-background-color:DIMGREY");
vbox.getChildren().addAll(username, txuser, password, txpassword, btn1);
primaryStage.setResizable(false); //settings
primaryStage.setScene(scene);
primaryStage.setTitle("ROXXY");
root.setStyle("-fx-background-color:DIMGREY");
root.getChildren().addAll(poly, poly2, poly3, poly4, text, vbox);
vbox.setAlignment(Pos.CENTER);
primaryStage.show();
public static void main(String[] args) {
launch(args);
}
I think your content is centered. It's just your VBox is growing just enough to contain your elements, therefore you cannot notice the elements being centered on it because there's no space left to be centered on.
Try to set the values of height/width of your VBox or bind them to the size of another element if that's what you are looking for.
I built a calculator. I was not able to align the buttons, and the textfield of the calculator in the form that I desire.
I used GridPane due to the fact that I thought it would be easier to control the buttons. I read Oracle's documents online and I still can't figure this out.
How do you resize/align buttons and textfields in JavaFX?
I used HBox for the textfield, because it is only one figure and it is the easiest way to control it.
The calculator itself works, the problem is the resizing and aligning of the buttons and textfield.
Here's a picture of my calculator:
Here are pieces of my code that control the GridPane:
GridPane grid = new GridPane();
grid.setPadding(new Insets(10 ,10 ,10 ,10));
grid.setVgap(4);
grid.setHgap(4);
HBox topMenu = new HBox(); // Display -- top of the window
grid.getChildren().addAll(button0, button1, button2, button3, button4, button5, button6, button7, button8, button9, plusButton, subButton, multiButton, divButton, eqButton, clearButton,npButton,decButton,percentButton);
topMenu.getChildren().add(display);
BorderPane borderPane = new BorderPane();
borderPane.setTop(topMenu);
borderPane.setCenter(grid);
Scene scene = new Scene(borderPane, 800, 600);
window.setScene(scene);
window.show();
BorderPane root = new BorderPane();
Button chooseFile = new Button("chooseFile");
TextField fileLocation = new TextField("C:/");
Button makeGrid = new Button("Solve");
HBox fileLoad = new HBox(chooseFile, fileLocation, makeGrid);
root.setTop(lastfil);
BorderPane.setAlignment(root, Pos.TOP_CENTER);
BorderPane.setMargin(root, new Insets(12,12,12,12));
root.setPrefSize(500, 500);
I'm having some issues centering this, I want the prefSize to be 500 x 500 and have the file loader top center, but it does not do that. It is top but I am unable to get it to the center of the top. Anything obvious I'm doing wrong?
BorderPane sets the alignment and Margin for the child node.
BorderPane.setAlignment(Node child, Pos value)
BorderPane.setMargin(Node child, Insets value)
So replace Borderpane 'root' to child node 'fileLoad ' as:
BorderPane.setAlignment(fileLoad, Pos.TOP_CENTER);
BorderPane.setMargin(fileLoad, new Insets(12,12,12,12));
Also set the child HBox alignment like:
fileLoad.setAlignment(Pos.CENTER);
Refer Class BorderPane to more info.
I am trying to make an application which will have a date at the top (always automatically centered) and content at the bottom which is not going to be aligned to any direction.
I figured the best way to do this would be to have:
Pane normalLayout = new Pane();
StackPane centeredLayout = new Stackpane();
Label centeredText = new Label("I want this text centered!");
Button unorganizedButton = new Button("Press me");
centeredLayout.getChildren().add(centeredText);
normalLayout.getChildren().add(unorganizedButton);
But then I can't do something like:
Scene myScene = new Scene(centeredLayout, normalLayout, 500, 500);
Window myWindow = new Window();
myWindow.setScene(myScene);
myWindow.show();
So how can this be done? How can multiple panes exist on the same scene?
The Scene it self can only have one root Pane.
So if you want 2 panes in the Scene you need 3.
Scene
|
V
Root Pane (Vbox for example)
| |
V V
Pane1 Pane2
In your code this can look like this:
StackPane rootPane = new StackPane();
Scene scene = new Scene(rootPane,...);
Pane pane1 = new Pane();
Pane pane2 = new Pane();
rootPane.getChildren().addAll(pane1,pane2);
Depending on how your Application should be layouted you have to choose the right Pane implementations.
As a little Tip to get familiar whit all the Layout Containers try the SceneBuilder Application. http://gluonhq.com/open-source/scene-builder/
Maybe this link will help you understanding how layouting works in JavaFX:
http://docs.oracle.com/javafx/2/scenegraph/jfxpub-scenegraph.htm
https://docs.oracle.com/javafx/2/layout/builtin_layouts.htm
I would suggest you to create a "root"-Pane.
In your case, you could use a BorderPane.
Example:
BorderPane root = new BorderPane();
Label centeredText = new Label("I want this text centered!");
Button unorganizedButton = new Button("Press me");
BorderPane.setAlignment(centeredText, Pos.CENTER);
root.setTop(centeredText);
root.setBottom(unorganizedButton);
Afterwards just call the constructor with the newly created pane.
Scene scene = new Scene(root, 500, 500);
Addition:
You could also just set new panes.
AnchorPane anchorPane = new AnchorPane();
root.setTop(anchorPane);
I have TreeView placed as content of ScrollPane. ScrollPane is placed inside SplitPane.
When I drag divider of SplitPane so that it becomes bigger than TreeView size I see border of TreeView.
I want TreeView to be resized as much as space is available after I drag divider of SplitPane. My code:
SplitPane splitPane = new SplitPane();
splitPane.getItems().addAll(createTreeOfConnections());
private ScrollPane createTreeOfConnections() {
ScrollPane scrollPane = new ScrollPane();
scrollPane.setMinSize(100, 300);
scrollPane.setPrefSize(200, 500);
scrollPane.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
scrollPane.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);
scrollPane.setHbarPolicy(ScrollBarPolicy.AS_NEEDED);
scrollPane.setContent(new ConnectionsTree(this));
return scrollPane;
Class ConnectionsTree extends TreeView and its constructor is :
public ConnectionsTree(MainStage mainStage) {
// here we set the root of ConnectionsTree which is not visible
super();
this.mainStage = mainStage;
root = new ConnectionTreeItem();
root.setExpanded(true);
super.setRoot(root);
super.setShowRoot(false);
super.setEditable(false);
super.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
super.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
retrieveExistentConnectionsNodes();
ContextMenu contextMenu = new ContextMenu(createNewConnectionMenuItem(
"New Connection", KeyCombination.valueOf("Ctrl+N")));
super.setContextMenu(contextMenu); }
How to tell TreeView(my TreeConnections) that it should take all available space of left part of SplitPane?
Thank you!
Try this
scrollPane.setFitToHeight(true);
scrollPane.setFitToWidth(true);