Is it possible to shrink a GridPane row if the content of that row is both disabled and invisible?
When I set a Node to disable=true and visible=false, the cell still takes up space.
If I have 8 rows and only the first and last is visible I don't want the empty rows to take up much space. As if there was only two rows.
The only "solution" I could find was to set the size to zero. However I do not consider that a good solution. I would have to store the min/max size to set it back when/if the node becomes enabled/visible again.
Could perhaps CSS help with a better solution?
package com.company;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;
public class App extends Application {
public static void main(String[] args) {
launch(args);
}
/* (non-Javadoc)
* #see javafx.application.Application#start(javafx.stage.Stage)
*/
#Override
public void start(Stage stage) throws Exception {
Label label1 = new Label("Text");
Label label2 = new Label("Text");
Label label3 = new Label("Text");
label2.setDisable(true);
label2.setVisible(false);
GridPane root = new GridPane();
root.setGridLinesVisible(true);
root.add(label1, 0, 0);
GridPane.setVgrow(label1, Priority.NEVER);
root.add(label2, 0, 1);
GridPane.setVgrow(label2, Priority.NEVER);
root.add(label3, 0, 2);
GridPane.setVgrow(label3, Priority.NEVER);
stage.setScene(new Scene(root));
stage.setWidth(300);
stage.setHeight(300);
stage.setTitle("JavaFX 8 app");
stage.show();
}
}
If you do not want the parent to layout a node, you can set the managed property of the node to false.
Here is an image showing the difference in layout when I used the following line in your code:
label2.setManaged(false);
Related
In JavaFX, is there a way to "autofit" elements on a page so they take up the entire thing?
Currently, I'm trying to make the window have two buttons that together take up the entire canvas, but I am not sure how to do that, given that it is possible to stretch the window, etc. I've tried playing around with Button.setPrefSize, but the button size stays the same, it just shows you a window with two outsized buttons, the text of which is not visible.
What I currently have
What I want (but for any window size)
Here's one way (code here but also possible in Scene Builder and FXML):
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;
public class TestApplication extends Application {
#Override
public void start(Stage stage) throws Exception {
Button button1 = new Button("Button1");
HBox.setHgrow(button1, Priority.SOMETIMES);
button1.setMaxWidth(Double.MAX_VALUE);
button1.setMaxHeight(Double.MAX_VALUE);
Button button2 = new Button("Button2");
HBox.setHgrow(button2, Priority.SOMETIMES);
button2.setMaxWidth(Double.MAX_VALUE);
button2.setMaxHeight(Double.MAX_VALUE);
HBox hBox = new HBox(button1, button2);
AnchorPane.setLeftAnchor(hBox, 0.0);
AnchorPane.setRightAnchor(hBox, 0.0);
AnchorPane.setTopAnchor(hBox, 0.0);
AnchorPane.setBottomAnchor(hBox, 0.0);
AnchorPane rootContainer = new AnchorPane(hBox);
Scene scene = new Scene(rootContainer, 600, 600);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
package example;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
Text text = new Text("This is a Text");
VBox box = new VBox();
box.setAlignment(Pos.CENTER);
box.setStyle("-fx-background-color: yellow;");
box.getChildren().add(text);
StackPane container = new StackPane();
container.getChildren().add(box);
BorderPane bp = new BorderPane();
bp.setCenter(container);
Scene scene = new Scene(bp, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
Here's the output:
Question: Can someone explain to me why the Vbox fill the whole screen? Is there a method that is similar to Android's wrap_content? I want the image below to be the output:
Solution
Wrap the VBox in a Group; e.g. use:
container.getChildren().add(new Group(box));
instead of:
container.getChildren().add(box);
Why it works
From the Group javadoc:
By default, a Group will "auto-size" its managed resizable children to their preferred sizes during the layout pass.
This means that the VBox won't grow past the preferred size of it's content (which is just enough area to display the label inside it).
Alternate implementation
Set the maximum size of the VBox to the preferred size. Then the VBox will only ever grow large enough to fit the preferred size of the content inside it and will never grow any larger.
box.setMaxSize(VBox.USE_PREF_SIZE, VBox.USE_PREF_SIZE);
Why VBox grows by default
It is a resizable container which will stretch to fill available area.
Note
I don't know that the effect is exactly the same as an Android wrap_content method as I have never developed for Android, however the effect does seem to exactly match the second image you provided in your question, which appears to be what you want.
VBox automatically resizes itself to the size of the Parent, so it is better not to set background color to it. Instead, you can use a Label in place of a Text and then add background color to the Label instead of the VBox.
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
Label text = new Label("This is a Text");
VBox box = new VBox();
box.setAlignment(Pos.CENTER);
text.setStyle("-fx-background-color: yellow;");
box.getChildren().add(text);
StackPane container = new StackPane();
container.getChildren().add(box);
BorderPane bp = new BorderPane();
bp.setCenter(container);
Scene scene = new Scene(bp, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
This will give you an output like an image below:
I am trying to figure out how to center and bind a label perfectly at the bottom of a scene. I have a simple test application here to show what I am working with and what my issue is.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
public class LabelTest extends Application {
#Override
public void start(Stage stage) throws Exception {
Pane root = new Pane();
Scene scene = new Scene(root, 400, 400);
Label label = new Label("Testing testing 1 2 3");
label.layoutXProperty().bind(scene.widthProperty().divide(2).subtract(label.getWidth() / 2)); //Should align label to horizontal center, but it is off
label.layoutYProperty().bind(scene.heightProperty().subtract(label.getHeight() + 35)); //Aligns the label to bottom of scene
root.getChildren().add(label);
stage.setScene(scene);
stage.show();
}
}
The logic behind my positioning makes sense to me, so I am not sure why it is not horizontally centered. I have included a screenshot below to show what the output looks like:
And below is more of what I am wanting it to look like (still off by a bit, but you get the point)
Thanks in advance to anyone who helps me out!
Let layout managers do the layout for you:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class LabelTest extends Application {
#Override
public void start(Stage stage) throws Exception {
Label label = new Label("Testing testing 1 2 3");
BorderPane root = new BorderPane();
//center label by
//BorderPane.setAlignment(label, Pos.CENTER);
//root.setBottom(label);
//OR
root.setBottom(new StackPane(label));
Scene scene = new Scene(root, 400, 400);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The issue is you are taking the values of width/height at the time of binding. And at this instance it will be 0 as they are not yet rendered. You need bind those properties as well for computing.
label.layoutXProperty().bind(scene.widthProperty().divide(2).subtract(label.widthProperty().divide(2)));
label.layoutYProperty().bind(scene.heightProperty().subtract(label.heightProperty().add(35)));
The code below generates this screen shot:
The label below the 2nd column does not want to properly claim extra space when it needs to be wrapped. This only occurs when the columns use percentage widths -- the docs say it will ignore all other properties in that case, including hgrow etc, but it does not mention it would also affect how rows work.. but it looks like it does.
Anyone got a work-around or can tell me what I'm doing wrong? All I want is to display 3 images, with labels of unknown size below them that are nicely spaced and aligned and all the same size... Something like this:
The above is done with a custom control, tentatively named "BetterGridPane"...
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.RowConstraints;
import javafx.stage.Stage;
public class TestLabelWrap extends Application {
public static void main(String[] args) {
Application.launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
GridPane root = new GridPane();
root.add(new ListView(FXCollections.observableArrayList("1", "2", "3")), 0, 0);
root.add(new ListView(FXCollections.observableArrayList("1", "2", "3")), 1, 0);
root.add(new ListView(FXCollections.observableArrayList("1", "2", "3")), 2, 0);
root.add(new Label("Value A"), 0, 1);
root.add(new Label("The value for this porperty is so large it wraps, The value for this porperty is so large it wraps") {{
setWrapText(true);
}}, 1, 1);
root.add(new Label("Value C"), 2, 1);
root.getColumnConstraints().add(new ColumnConstraints() {{ setPercentWidth(33.33); }});
root.getColumnConstraints().add(new ColumnConstraints() {{ setPercentWidth(33.33); }});
root.getColumnConstraints().add(new ColumnConstraints() {{ setPercentWidth(33.33); }});
root.getRowConstraints().add(new RowConstraints() {{ setVgrow(Priority.NEVER); }});
root.getRowConstraints().add(new RowConstraints() {{ setVgrow(Priority.ALWAYS); }});
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
}
Setting wrapText to true actually seems to be enough. You can see this by simply increasing the height of your window and watch the text start to wrap (decreasing the width of the window as necessary). The problem seems to be GridPane and it's initial size calculations—it grows horizontally to accommodate the Label, but not vertically. One fix is to simply give the Scene, GridPane, or Label an explicit (preferred) width while leaving the height to be computed.
new Scene(root, someWidth, -1)
root.setPrefWidth(someWidth)
label.setPrefWidth(someWidth) + label.setMaxWidth(Double.MAX_VALUE)
However, even though the Javadoc of ColumnConstraints.percentWidth says:
If set to a value greater than 0, the column will be resized to this percentage of the gridpane's available width and the other size constraints (minWidth, prefWidth, maxWidth, hgrow) will be ignored.
The [min|pref|max]Width does not seemed to be ignored during preferred size calculations. As you appear to have images of known and uniform width, you should be able to set the preferred width of each constraint to be slightly larger than the width of the image. Here's an example (using OpenJDK 12 and OpenJFX 12):
import java.util.stream.Stream;
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;
public class Main extends Application {
private static ColumnConstraints[] createColumnConstraints() {
return Stream.generate(() -> {
var constraint = new ColumnConstraints();
constraint.setHalignment(HPos.CENTER);
constraint.setPercentWidth(100.0 / 3.0);
constraint.setPrefWidth(225.0); // SET PREF WIDTH
return constraint;
}).limit(3).toArray(ColumnConstraints[]::new);
}
private static Rectangle[] createRectangles() {
return Stream.generate(() -> new Rectangle(100.0, 150.0)).limit(3).toArray(Rectangle[]::new);
}
private static Label[] createLabels(String... texts) {
return Stream.of(texts).map(text -> {
var label = new Label(text);
label.setWrapText(true);
label.setTextAlignment(TextAlignment.CENTER);
return label;
}).toArray(Label[]::new);
}
#Override
public void start(Stage primaryStage) {
var root = new GridPane();
root.setGridLinesVisible(true); // FOR VISUAL CLARITY
root.setHgap(10.0);
root.setVgap(10.0);
root.setAlignment(Pos.CENTER);
root.setPadding(new Insets(20.0));
root.getColumnConstraints().addAll(createColumnConstraints());
root.addRow(0, createRectangles());
root.addRow(1, createLabels("Label A", "This is long text. ".repeat(10), "Label C"));
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
}
Which results in:
Speculation:
Since you use new Scene(root) that means the Scene will size itself to the preferred size of its content. This basically gives the root free reign to grow as large as it deems necessary. As documented by GridPane:
By default, rows and columns will be sized to fit their content; a column will be wide enough to accommodate the widest child, a row tall enough to fit the tallest child.
With the use of percentWidth, the width of each column effectively doesn't have an upper bound; they will grow to to fit the widest child. Also, because each column uses percentWidth, as one grows, they all grow.
This means the Labels have virtually unlimited space to grow horizontally, which means the preferred height of the Label is calculated to be only one line of text; why wrap when you have infinite width? Because of this, the row the Labels belong to only grows vertically enough to accommodate one line of text. With no room to wrap the text overruns.
Is it possible to allow an element's size (for example, a HBox) grow (overflow) outside the stage it belongs to, while still being visible, and if so, how can I go about it?
Wrap the pane in a group, which is not resizable by the scene. In the following example, if you comment out the current root.setCenter(...) and uncomment the one that just adds the hbox, the HBox will be constrained to the size of the scene (so the labels will be squeezed smaller and smaller as you add more of them).
When wrapped in a Group, the hbox will grow indefinitely.
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class GrowingHBoxTest extends Application {
int count = 0 ;
#Override
public void start(Stage primaryStage) {
HBox hbox = new HBox();
Button button = new Button("New label");
button.setOnAction(e -> hbox.getChildren().add(new Label("Label "+(++count))));
hbox.setMaxWidth(Double.MAX_VALUE);
BorderPane root = new BorderPane();
root.setBottom(button);
// will not grow outside of scene bounds:
root.setCenter(hbox);
// will grow outside of scene bounds:
// root.setCenter(new Group(hbox));
primaryStage.setScene(new Scene(root, 400, 400));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}