We Keep Coding

JavaFX FlowPane within ScrollPane, dynamically adjust scrollpane's content and size

I currently have a ScrollPane with a FlowPane as content. The FlowPane currently initializes with no children nodes, a fixed width and a pref/min height (but no max height).
While adding items to the FlowPane at runtime (I click some UI element and something is added to the FlowPane), the ScrollPane should adjust its height in the case that the addition to the FlowPane no longer fits.
I don't understand how to set the height of the flowPane and ScrollPane so that this works - if that's the problem to begin with. At the moment, whenever the addition to the FlowPane doesn't fit its initial height, the content is added, but not visible. The scrollbar belonging to the ScrollPane never adjusts its height - if it did, I could just scroll further down and see the content.
Let's say I have a ScrollPane with some width and height, some viewport width/height, and a FlowPane with some width/height - What should my settings be for the min/pref/max sizes? How can I make a scrollPane adjust its scrollbar behaviour or make the content visible?
The ScrollPane's setFitToHeight is already set to true, which didn't seem to change anything.
import javafx.application.Application;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class FlowPaneTest extends Application
{
public static void main(String[] args)
{
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception
{
// borderPane rootPane
BorderPane borderPane = new BorderPane();
borderPane.setMinSize(600, 600);
borderPane.setPrefSize(600, 600);
borderPane.setMaxSize(600, 600);
// container for the two scrollPanes below
FlowPane flow = new FlowPane();
borderPane.setRight(flow);
// two scrollPanes, each should resize it's height (width should be fixed) if
// children are added beyond it's current height
ScrollPane top = new ScrollPane();
ScrollPane bottom = new ScrollPane();
FlowPane scrollPaneContent = new FlowPane();
top.setContent(scrollPaneContent);
bottom.setContent(scrollPaneContent);
flow.getChildren().add(top);
flow.getChildren().add(bottom);
borderPane.setOnMouseClicked(new EventHandler<Event>()
{
#Override
public void handle(Event event)
{
Label l = new Label("test");
l.setMinSize(100, 100);
l.setPrefSize(100, 100);
l.setMaxSize(100, 100);
scrollPaneContent.getChildren().add(l);
}
});
// size settings
int width = 300, height = 300;
top.setHvalue(0.5);
top.setMinViewportHeight(height);
top.setPrefViewportHeight(height);
top.setMinViewportWidth(width);
top.setPrefViewportWidth(width);
top.setHbarPolicy(ScrollBarPolicy.ALWAYS);
top.setFitToHeight(true);
top.setMinSize(width, height);
top.setPrefSize(width, height);
top.setMaxWidth(width);
scrollPaneContent.setMinSize(width, height);
scrollPaneContent.setPrefSize(width, height);
scrollPaneContent.setMaxWidth(width);
scrollPaneContent.setPrefHeight(height);
bottom.setMinSize(width, height);
bottom.setPrefSize(width, height);
bottom.setMaxWidth(width);
bottom.setHvalue(0.5);
bottom.setMinViewportHeight(height);
bottom.setPrefViewportHeight(height);
bottom.setMinViewportWidth(width);
bottom.setPrefViewportWidth(width);
bottom.setHbarPolicy(ScrollBarPolicy.ALWAYS);
top.setFitToHeight(true);
bottom.setFitToHeight(true);
// stage
Scene scene = new Scene(borderPane, 600.0, 600.0);
primaryStage.setScene(scene);
primaryStage.show();
}
}

Try to give the ScrollPane pref height and width and add this line
scrollPane.setFitToWidth(true);

Ending up with something similar to this ugly bit of code - It listens to the number of children in the pane and increases the size every time something is added to the list of children:
topSubPane.getChildren().addListener(new ListChangeListener()
{
#Override
public void onChanged(Change c)
{
c.next();
topSubPane.setPrefHeight(topSubPane.getHeight() + 50);
}
});
Works, but feels like an unorthodox hack. Is there really no regular way of doing this?

Divide stage into 2 gridpanes JavaFX

So Im trying to have text on the left and buttons on the right, text should have constant size and buttons should resize to fill the rest of the window.
Here is my result so far:
I dont want my text over buttons, I want them to share the whole window.
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Main extends Application {
GridPane buttons = new GridPane();
GridPane textGrid = new GridPane();
#Override
public void start(Stage primaryStage) {
StackPane root = new StackPane();
Button button1 = new Button();
Button button2 = new Button();
Button button3 = new Button();
Button button4 = new Button();
Button button5 = new Button();
button1.setText("Button1");
button2.setText("Button4");
button3.setText("Button3");
button4.setText("Button4");
button5.setText("Button5");
TextArea text1 = new TextArea();
text1.setText("Test");
text1.setPrefSize(100, 100);
button1.prefWidthProperty().bind(buttons.widthProperty());
button2.prefWidthProperty().bind(buttons.widthProperty());
button3.prefWidthProperty().bind(buttons.widthProperty());
button4.prefWidthProperty().bind(buttons.widthProperty());
button5.prefWidthProperty().bind(buttons.widthProperty());
button1.prefHeightProperty().bind(buttons.heightProperty());
button2.prefHeightProperty().bind(buttons.heightProperty());
button3.prefHeightProperty().bind(buttons.heightProperty());
button4.prefHeightProperty().bind(buttons.heightProperty());
button5.prefHeightProperty().bind(buttons.heightProperty());
buttons.addColumn(0, button1, button2, button3, button4, button5);
textGrid.addColumn(0, text1);
Scene scene = new Scene(root, 280, 180);
root.getChildren().addAll(buttons, textGrid);
buttons.setAlignment(Pos.TOP_RIGHT);
textGrid.setAlignment(Pos.TOP_LEFT);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

It is usually better to let the layout panes handle the layout management rather than trying to manage the layout through bindings.
Here is a sample:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import java.util.stream.IntStream;
public class Main extends Application {
private static final int N_BUTTONS = 5;
#Override
public void start(Stage stage) {
VBox buttonLayout = new VBox(
10,
IntStream.range(0, N_BUTTONS)
.mapToObj(this::createButton)
.toArray(Button[]::new)
);
HBox.setHgrow(buttonLayout, Priority.ALWAYS);
TextArea textArea = new TextArea("Test");
textArea.setPrefWidth(100);
textArea.setMaxWidth(TextArea.USE_PREF_SIZE);
textArea.setMinWidth(TextArea.USE_PREF_SIZE);
HBox layout = new HBox(10, textArea, buttonLayout);
layout.setPadding(new Insets(10));
Scene scene = new Scene(layout);
stage.setScene(scene);
stage.show();
}
private Button createButton(int i) {
Button button = new Button("Button " + i);
// button.setMaxWidth(Double.MAX_VALUE);
button.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
VBox.setVgrow(button, Priority.ALWAYS);
return button;
}
public static void main(String[] args) {
launch(args);
}
}
Here are a couple of things I would point out based upon the sample:
As the buttons are so similar, create the buttons in a loop rather than individually in code. I use an IntStream range with a map and a toArray, but you could do the same thing with a standard for loop (which may be easier to understand).
Use combinations of standard layout panes to achieve your layout. For example the buttons are vertically spaced, so put them in a VBox, the text and the buttons are horizontal to each other, so use a HBox.
Use constraints on the layouts to massage them into performing the layout you like, for example, HBox.setHgrow(buttonLayout, Priority.ALWAYS); tells the Box to always assign any extra additional space in the Box to the buttonLayout so that the buttons will fill any remaining area.
Set constraints on the individual nodes to size them how you wish, for example the following code establishes a fixed width for the textArea, which will not vary (you could similar code to establish a fixed height if you wished):
textArea.setPrefWidth(100);
textArea.setMaxWidth(TextArea.USE_PREF_SIZE);
textArea.setMinWidth(TextArea.USE_PREF_SIZE);
Some controls will automatically expand themselves beyond their max size, buttons do not by default, to enable this behavior use the following code (if you only wanted the width to expand and not the height then you would only set the maxWidth rather than the maxSize):
button.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
Rather than defining layouts in code as in this example, instead use a tool such as SceneBuilder to create the scene visually and save the layout as an FXML file, so that the layout is separated from your code (similarly place any styling in an external CSS file).

JavaFX ScrollPane [ setPrefSize, setMinSize, setMaxSize ] not working

I'm writing a GUI application with a ScrollPane, but had some issues with resizing. I extracted the essential code in the following example:
import javafx.application.Application;
import javafx.geometry.Bounds;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.VBox;
import javafx.scene.control.ScrollPane;
public class JavaFXExample extends Application {
final int width = 300;
final int height = 300;
#Override
public void start(Stage primaryStage) {
Button b = new Button("This should be at the bottom!");
//this vbox goes inside the scrollpane
VBox boxInScrollPane = new VBox(10);
boxInScrollPane.setAlignment(Pos.BOTTOM_CENTER);
boxInScrollPane.getChildren().add(b);
//main content
ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(boxInScrollPane);
scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);
//Doesn't do anything!
scrollPane.setPrefSize(100, 100);
scrollPane.setMaxSize(100, 100);
scrollPane.setMinSize(100, 100);
Scene scene = new Scene(scrollPane, width, height);
primaryStage.setScene(scene);
primaryStage.show();
//set size of boxInScrollPane to be equal to the viewport
Bounds viewportBounds = scrollPane.getViewportBounds();
double innerWidth = viewportBounds.getMaxX() - viewportBounds.getMinX();
double innerHeight = viewportBounds.getMaxY() - viewportBounds.getMinY();
System.out.println(innerWidth + " " + innerHeight);
boxInScrollPane.setPrefSize(innerWidth, innerHeight);
}
public static void main(String[] args) {
launch(args);
}
}
So I have a window, which contains a ScrollPane, which contains a VBox, which contains a button. The example here, where I resize the scrollpane to be 100x100px in a 300x300px window, is arbitrary. What's important is that when I run this code, I get a scrollpane that fills the entire window! Here's my output:
What's going on here?

The root of the scene is sized to fill the entire scene, irrespective of its min/pref/max size. If you want the ScrollPane to remain 100 pixels wide and 100 pixels high, wrap it in another container (pretty much any container will do); the container will then be resized, but the ScrollPane will respect its layout sizes:
Scene scene = new Scene(new StackPane(scrollPane), width, height);
By default a StackPane centers its content, so this results in

Solution:
Pane pane = new Pane(scrollPane);
Scene scene = new Scene(pane, width, height);
primaryStage.setScene(scene);
primaryStage.show();
From Scene constuctor doc:
Creates a Scene for a specific root Node with a specific size.
Setting ScrollPane as root node will make it resize to given size in constructor so the previous settings will not work.
Solution will be to make a simple pane that will be resized so ScrollPane will be on his own rules.

Dynamically add elements to window in JavaFX

I would like to have a window that shows an image. That is the main purpose of the window. However it should be possible to also have controls on the top. The number is not known beforehand. Could be 3 or 15. They should just pile up there for now. So the upper part grows and the image below is just being pushed down.
void createNewWindow() {
Stage stage = new Stage();
BorderPane pane = new BorderPane();
ImageView imageView = new ImageView("path");
pane.setCenter(imageView);
HBox controlBox = new HBox(10);
pane.setTop(controlBox);
Scene scene = new Scene(pane);
stage.setScene(scene);
stage.setResizable(true);
stage.show();
}
This code barely works. I have to add the width and height manually because the scene or the stage doesn't look for anything to fit to. And when I am adding buttons later to the HBox on the top the window doesn't increase in size, neither does the HBox (height stays at 0). Only the image gets pushed down it is not fully visible anymore.
How would I go about this instead?

You should use the HBox.setHgrow method on each of the children of controlBox.
// for each button
HBox.setHgrow(child, Priority.ALWAYS);
This will align the buttons next to each other, reducing the sizes so that all of them fit in one line and they fill the available space.

JavaFX nodes are dynamically re-sizable i.e. the child will fill the space provided by parent and Parent will expand in accordance to the minimum space the child needs.
I don't face issue that have been raised by you while trying to add a HBox to a BorderPane. The BorderPane height increased (more than the image height) after the HBox got added to it. In case you want to see if the Image gets pushed down, try replacing a VBox to the HBox.
A simple example where I use an image of 365 and a HBox of 26, which result in a BorderPane of 391 height
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class BorderPaneHeight extends Application{
#Override
public void start(Stage primaryStage) throws Exception {
BorderPane borderPane = new BorderPane();
HBox box = new HBox(10);
ImageView imageView = new ImageView(new Image("file:///home/itachi/Pictures/aaa.png")); // Replace with your image path
Button button1 = new Button("Add");
Button button2 = new Button("Add");
box.getChildren().addAll(button1, button2);
borderPane.setTop(box);
borderPane.setCenter(imageView);
Scene scene = new Scene(borderPane);
primaryStage.setScene(scene);
primaryStage.show();
System.out.println("Image height : " + imageView.getImage().getHeight());
System.out.println("Hbox height : " + box.getHeight());
System.out.println("BorderPane Height : " + borderPane.getHeight());
}
public static void main(String[] args) {
launch(args);
}
}
Output on Console
Image height : 365.0
Hbox height : 26.0
BorderPane Height : 391.0

For the window to grow as the content inside the window expands I did like this(looked but haven't found another solution)
In this case a new window is open from MainController and this window contents can grow and I want this new window to grow with it, so in the controller for the new window I add a listener...
containerPane.heightProperty().addListener((observable, oldValue, newValue) -> {
MainController.theStage.setHeight(MainController.theStage.getHeight() + (newValue.doubleValue() - oldValue.doubleValue()));
});

JavaFx8 VBox center image

I have a JavaFx VBox inside of a ScrollPane:
VBox container = new VBox();
container.setAlignment(Pos.CENTER);
...
scrollPane.setContent(container);
scrollPane.setFitToWidth(true);
scrollPane.setHbarPolicy(ScrollBarPolicy.NEVER);
scrollPane.setVbarPolicy(ScrollBarPolicy.NEVER);
scrollPane.setMinWidth(150);
scrollPane.setPannable(true);
the size of this VBox never change, inside i have some labels, one label has an user image
like the next image(A)
the image is resized to some Height, but i don't know the size of this image, so if the width of the image is bigger than width of the VBox, this happen(part of the image hidden)(B)
but i don't want this, i want something like the following image:(the sides of the image hidden if the image width is bigger than the VBox width)(C)
http://i.stack.imgur.com/B3DOK.png
How i can do this?
I tried to put a rectangle as clip, in this rectangle i wanna show the center of the image, but the same happens.
imageView.setClip(new Rectangle(centerX - recSize, centerY - recSize, recSize*2, recSize*2));
---------------with the clip----------------
red = original image
blue = part of the image that is visible
http://i.stack.imgur.com/mYbyF.png
Nice(D)
Not nice:(E)(labels not centered correctly because of the image.)
Sorry by the links, i can't put the images directly

Solution
Set a viewport on the image not a clip.
imageView.setViewport(
new Rectangle2D(500, 320, 420, 300)
);
Sample
Here is a sample. It's not going to exactly match what you are asking for because even with the linked images in your question, I can't quite understand what you are trying to do. But I think it should give you enough background info that you can learn to accomplish what you want.
The sample creates an image view as a graphic in a scroll pane. The image view applies a viewport to the image and scales the viewport with preserved ratio. This allows a scaled portion of the much larger image to be displayed. It's kind of like a thumbnail clip (click on the thumbnail to display the full image).
import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.effect.*;
import javafx.scene.image.*;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.*;
import javafx.stage.*;
// display a captioned image in a viewport.
// click the image to get an expanded view.
public class LabelWithImage extends Application {
private static final double IMAGE_WIDTH = 150;
#Override
public void start(Stage stage) {
Image image = new Image(IMAGE_LOC);
ImageView imageView = new ImageView(
image
);
imageView.setViewport(
new Rectangle2D(500, 320, 420, 300)
);
imageView.setFitWidth(IMAGE_WIDTH);
imageView.setPreserveRatio(true);
Label labeledImage = createCaptionedImage(
imageView,
"Village Home"
);
addGlowOnMouseOver(labeledImage);
labeledImage.setOnMouseClicked(event -> {
displayFullImage(stage, image);
});
VBox vbox = new VBox( // vbox just there to mimic question askers structure.
labeledImage
);
vbox.setPadding(new Insets(10));
ScrollPane scrollPane = makeScrollable(vbox);
Scene scene = new Scene(
scrollPane
);
stage.setScene(scene);
stage.show();
stage.setMaxWidth(stage.getWidth());
stage.setMaxHeight(stage.getHeight());
}
private void displayFullImage(Stage stage, Image image) {
Stage displayStage = new Stage();
displayStage.initStyle(StageStyle.UTILITY);
displayStage.initModality(Modality.APPLICATION_MODAL);
displayStage.initOwner(stage);
displayStage.setScene(
new Scene(
new Group(
new ImageView(
image
)
)
)
);
displayStage.show();
}
private void addGlowOnMouseOver(Node node) {
Glow glow = new Glow();
DropShadow shadow = new DropShadow(20, Color.GOLD);
glow.setInput(shadow);
node.setOnMousePressed(event -> node.setEffect(null));
node.setOnMouseEntered(event -> node.setEffect(glow));
node.setOnMouseExited(event -> node.setEffect(null));
}
private ScrollPane makeScrollable(Node node) {
ScrollPane scrollPane = new ScrollPane(node);
scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
scrollPane.setPannable(true);
return scrollPane;
}
private Label createCaptionedImage(ImageView imageView, String caption) {
Label labeledImage = new Label(caption);
labeledImage.setFont(Font.font("Athelas", FontPosture.ITALIC, 20));
labeledImage.setStyle("-fx-background-color: cornsilk");
labeledImage.setPadding(new Insets(0, 0, 5, 0));
labeledImage.setGraphic(
imageView
);
labeledImage.setContentDisplay(ContentDisplay.TOP);
return labeledImage;
}
public static void main(String[] args) {
launch(args);
}
private static final String IMAGE_LOC =
"http://www.imgion.com/images/01/beautiful-village-home.jpg";
// image courtesy of http://www.imgion.com which provides
// "free images on large topics to share with your friends and on your blogs."
}