I'm using JavaFX in a project instead of Swing because of the enhanced multimedia, webviewer and possibility to use visual effects. However, what I've learned from what I found on the web (http://docs.oracle.com/javafx/2/layout/jfxpub-layout.htm and others) is that JavaFX layout managers focus on scaling the size of the parent based on the size of the content, whereas Swing focusses on scaling the content according to the parent, at least based on the Layout being used.
Right now I'm using an Accordion with some TitledPane children. One of them contains a GridPane for the simple reason it is the best way I know to emulate a GridLayout (as I learned from my previous question here: JavaFX layout equivalent to GridLayout). I want to have the TitledPane's content split in 2 rows and 1 column, each row with a 50% height of the available space in the TitledPane (scaling with the Stage or Scene), equivalent to what a GridLayout(2,1) inside a BorderLayout.CENTER would accomplish. For this, I've added a GridPane with 2 RowConstraints using setPercentHeight(50) and 1 ColumnConstraint with setPercentWidth(100). However, I've noticed the contents are scaling with the grid properly, but the grid is not taking up all available space in the TitledPane (because apparently it doesn't act like a BorderPane's center). I've also tried with setMaxWidth to make the content scale with the parent, but it doesn't seem to work either (as said here: JavaFX: How to make my custom component use all available space from parent layout?). And even if it would, do I need to set the max width to EACH descendent in my UI elements tree to have all of them scale?
Either way, does anyone know how to make a TitledPane with 2 equal spaces in it underneath eachother that scale with the titledpane's size?
In fact, your gridpane is growing to fill all its parent.
Consider the below code, I have added a background color (red) to the gridpane for debugging purposes.
Accordion accordion = new Accordion();
TitledPane titledPane = new TitledPane();
titledPane.setText("Title");
GridPane gridPane = new GridPane();
gridPane.setStyle("-fx-background-color:red");
gridPane.add(new TextArea("Hello"), 0, 0);
gridPane.add(new TextArea("World"), 0, 1);
titledPane.setContent(gridPane);
accordion.getPanes().add(titledPane);
If you execute this code, the gridpane will fill all its parent (check the red color spans all over the titledpane content).
However, the content of the gridpane will not fill all the column. If you try to resize the window, you will see that the textareas are not changing in width along with the gridpane.
To fix that, you need to tell the first column of the gridpane to grow with the gridpane itself.
The way to do that is to add the following constraint:
ColumnConstraints columnConstraints = new ColumnConstraints();
columnConstraints.setFillWidth(true);
columnConstraints.setHgrow(Priority.ALWAYS);
gridPane.getColumnConstraints().add(columnConstraints);
Related
I was learning javafx and came across these two statements which I don't know their difference.
Pane pane = new Pane();
and
StackPane pane = new StackPane();
Can somebody enlighten me about the difference and when to use which?
Both are layouts but the Pane is the basis of all the other layouts, the difference is that the Pane offers a free positioning of nodes, and The StackPane (and other Node with the suffix Pane called Built-in Layout) in return, follow their own logic (Positions/Constraints...). The 'StackPane' for example lays out its children in a back-to-front stack StackPane. This is only superficial and limited information, here's a good tutorial : Layout in JavaFX
The difference between both layouts is positioning of the children and the resizing of resizeable children.
Pane does not do any positioning. The child's layoutX and layoutY are left unmodified. Furthermore resizeable children are resized to their preferred sizes.
StackPane determines the position of children based on the alignment set for the child itself or the one set for the StackPane itself, if no position is set for the child. Resizable children are resized to a size that fits the StackPane's size best (still taking into account max size). Both can be modified by a margin set for individual children...
The end goal is to reproduce this image as well as possible. I am trying to start from a bottom up approach as I have many questions.
My first question is how can I get labels alongside the textboxes (it has been suggested to use VBoxes on an hbox to organize everything, but then the textbox automatically goes below the label)
My second question is, as you can see there are borders around the four related boxes to separate the information. I am uncertain how this is done.
Finally what is the configuration of Panes that I should put these four groups on. As I mentioned below someone suggested VBoxes placed on a HBox but I can't get the text to be at the right spot with this approach.
One last thing... I was trying to use ComboBoxes but I can only make one selection, unlike in the image showing the appetizers and main courses selected.
I looked at ListView but its not a drop down box and I read in the API that this in general is not supported since they thought having multiple selections was not necessary. So how might one approach this?
Thanks so much
I'de recommaned an HBox as the primary container, and a VBox on the left side containing the three panes.
In case the window is resizable, and you want to keep either of the panes flushed to the side, try AnchorPane, instead of the HBox.
this required nested panes. for those with similar assignments, creating grid boxes and placing them inside titled boxes allows for the "group box" effect shown above that was a part of swing. An additional HBox was added where the image and title were, making three parts: the top HBox, the right title box, and the left VBox.the left VBox and the top HBox were added into a VBox (or grid), linking the entire left side, which was then placed in an hbox along with the right side title pane.
I want to create a scrollable timeline controller with circles connected to a baseline filled with a number ( size of circle corresponding to containing number) and a trailing icon.
Since I am new to JavaFX i have no idea how to start. In Swing i would e.g. use JPanel and ovverride its onPaint() method to draw the circles, lines and icons...
In JavaFX I thought about using a horizontal ListView with custom ListCell, but i am not sure if the baseline is possible with it. So i am looking for ideas how to implementiert such a controll...
Try using a HBox wrapped inside a ScrollPane.
You can add elements to HBox using getChildren.add(node). The elements will be automatically shown on the scene and the ScrollPane will adjust the ScrollBar for you.
I have a HBox in my Javafx application with below configuration
HBox belowBox = new HBox(10);
belowBox.getStyleClass().addAll("pane", "vbox");
belowBox.setAlignment(Pos.CENTER);
belowBox.getChildren().addAll( .... );
belowBox.setMaxHeight(200);
belowBox.setPrefHeight(200);
belowBox.setFillHeight(false);
But still if I resize my application the HBox grows vertically. Is there a way to fix the height.
Thank you
But this is the exact behavior of the HBox layout pane. If you read the HBox documentation, you will see the following:
HBox lays out its children in a single horizontal row...
And also:
HBox will resize children (if resizable) to their preferred widths and uses its fillHeight property to determine whether to resize their heights to fill its own height or keep their heights to their preferred (fillHeight defaults to true)...
As said, if for some reason you set the fillHeight property from HBox, you can make the nodes contained within to fill the vacant vertical space, But this will only occur for the nodes that are resizable. For more information about using the JavaFX layout panels, look here. If I'm not mistaken, texts, geometric shapes and ImageView are not resizable objects.
I ave tried the following code:
Label label = new Label(reallyLongString, skin);
label.setWrap(true);
label.setWidth(100); // or even as low as 10
table.add(label);
...
and yet all I get is a very wide line that draws off the screen. How to get a Label with wrapped text?
This is the same issue as seen in slider always has default width or "Slider always has default width".
You need to put that label into a table and add the right size to the cell of the table where the label is.
UI widgets do not set their own size and position. Instead, the parent widget sets the size and position of each child. Widgets provide a minimum, preferred, and maximum size that the parent can use as hints. Some parent widgets, such as Table, can be given constraints on how to size and position the children. To give a widget a specific size in a layout, the widget's minimum, preferred, and maximum size are left alone and size constraints are set in the parent.
Source: From the libgdx wiki Scene2D
The solution:
Label label = new Label(reallyLongString, skin);
label.setWrap(true);
label.setWidth(100); // or even as low as 10
table.add(label).width(10f);// <--- here you define the width
I've found that the following code can solve the issue without any table or wrapping container (for libgdx-1.9.6):
label = new Label("Some label", skin);
label.setPosition(600, 50);
label.setWidth(200);
label.setHeight(50);
label.setWrap(true);
stage.addActor(label);
If you just want to specify the preferred size for a single widget, wrap it with a Container.
https://github.com/libgdx/libgdx/wiki/Scene2d.ui#layout-widgets
https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/Container.html
Something like:
Container<Label> labelContainer = new Container(myLabel);
labelContainer.prefWidth(200.0f);
Keep in mind that the actual size will vary depending on the container hierarchy - for example, the labelContainer above will display differently if placed in another layout object.
The size will also vary depending on the viewport, etc.