We Keep Coding

How to reserve space for the VirtualFlow scrollbars?

The current implementation of the VirtualFlow only makes scrollbars visible when view rect becomes less than control size. By control I mean ListView, TreeView and whatever standard virtualized controls. The problem is that vertical scrollbar appearance causes recalculation of the control width, namely it slightly shifts cell content to the left side. This is clearly noticeable and very uncomfortable movement.
I need to reserve some space for the vertical scrollbar beforehand, but none of controls provide API to manipulate VirtualFlow scrollbars behavior, which is very unfortunate API design. Not to mention that most of the implementations place scrollbars on top of the component, thus just overlapping the small part of it.
The question is, "Which is the best way to achieve this?". Paddings won't help, and JavaFX has no margins support. I could put control (e.g ListView) inside of ScrollPane, but I'd bet VirtualFlow won't continue to reuse cells in that case, so it's not a solution.
EXAMPLE:
Expand and collapse node2, it shifts lbRight content.
public class Launcher extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
TreeItem<UUID> root = new TreeItem<>(UUID.randomUUID());
TreeView<UUID> tree = new TreeView<>(root);
tree.setCellFactory(list -> new CustomCell());
TreeItem<UUID> node0 = new TreeItem<>(UUID.randomUUID());
TreeItem<UUID> node1 = new TreeItem<>(UUID.randomUUID());
TreeItem<UUID> node2 = new TreeItem<>(UUID.randomUUID());
IntStream.range(0, 100)
.mapToObj(index -> new TreeItem<>(UUID.randomUUID()))
.forEach(node2.getChildren()::add);
root.getChildren().setAll(node0, node1, node2);
root.setExpanded(true);
node2.setExpanded(true);
BorderPane pane = new BorderPane();
pane.setCenter(tree);
Scene scene = new Scene(pane, 600, 600);
primaryStage.setTitle("Demo");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(t -> Platform.exit());
primaryStage.show();
}
static class CustomCell extends TreeCell<UUID> {
public HBox hBox;
public Label lbLeft;
public Label lbRight;
public CustomCell() {
hBox = new HBox();
lbLeft = new Label();
lbRight = new Label();
lbRight.setStyle("-fx-padding: 0 20 0 0");
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
hBox.getChildren().setAll(lbLeft, spacer, lbRight);
}
#Override
protected void updateItem(UUID uuid, boolean empty) {
super.updateItem(uuid, empty);
if (empty) {
setGraphic(null);
return;
}
String s = uuid.toString();
lbLeft.setText(s.substring(0, 6));
lbRight.setText(s.substring(6, 12));
setGraphic(hBox);
}
}
}

Reacting to
you can't just extend the VirtualFlow and override a method
certainly true if the method is deeply hidden by package/-private access (but even then: javafx is open source, checkout-edit-compile-distribute is also an option :). In this case we might get along with overriding public api as outlined below (not formally tested!).
VirtualFlow is the "layout" of cells and scrollBars: in particular, it has to cope with handling sizing/locating of all content w/out scrollBars being visible. There are options on how that can be done:
adjust cell width to always fill the viewport, increasing/decreasing when vertical scrollBar is hidden/visible
keep cell width constant such that there is always space left for the scrollBar, be it visible or not
keep cell width constant such that there is never space left the scrollBar, laying it out on top of cell
others ??
Default VirtualFlow implements the first with no option to switch to any other. (might be candidate for an RFE, feel free to report :).
Digging into the code reveals that the final sizing of the cells is done by calling cell.resize(..) (as already noted and exploited in the self-answer) near the end of the layout code. Overriding a custom cell's resize is perfectly valid and a good option .. but not the only one, IMO. An alternative is to
extend VirtualFlow and override layoutChildren to adjust cell width as needed
extend TreeViewSkin to use the custom flow
Example code (requires fx12++):
public static class XVirtualFlow<I extends IndexedCell> extends VirtualFlow<I> {
#Override
protected void layoutChildren() {
super.layoutChildren();
fitCellWidths();
}
/**
* Resizes cell width to accomodate for invisible vbar.
*/
private void fitCellWidths() {
if (!isVertical() || getVbar().isVisible()) return;
double width = getWidth() - getVbar().getWidth();
for (I cell : getCells()) {
cell.resize(width, cell.getHeight());
}
}
}
public static class XTreeViewSkin<T> extends TreeViewSkin<T>{
public XTreeViewSkin(TreeView<T> control) {
super(control);
}
#Override
protected VirtualFlow<TreeCell<T>> createVirtualFlow() {
return new XVirtualFlow<>();
}
}
On-the-fly usage:
TreeView<UUID> tree = new TreeView<>(root) {
#Override
protected Skin<?> createDefaultSkin() {
return new XTreeViewSkin<>(this);
}
};

Ok, this is summary based on #kleopatra comments and OpenJFX code exploration. There will be no code to solve the problem, but still maybe it will spare some time to someone.
As being said, it's VirtualFlow responsibility to manage virtualized control viewport size. All magic happens in the layoutChildren(). First it computes scrollbars visibility and then recalculates size of all children based on that knowledge. Here is the code which causes the problem.
Since all implementation details are private or package-private, you can't just extend the VirtualFlow and override method or two, you have to copy-paste and edit entire class (to remove one line, yes). Given that, changing internal components layout could be a better option.
Sometimes, I adore languages those have no encapsulation.
UPDATE:
I've solved the problem. There is no way no reserve space for vertical scrollbar without tweaking JavaFX internals, but we can limit cell width, so it would be always less than TreeView (or List View) width. Here is simple example.
public class Launcher extends Application {
public static final double SCENE_WIDTH = 500;
#Override
public void start(Stage primaryStage) {
TreeItem<UUID> root = new TreeItem<>(UUID.randomUUID());
TreeView<UUID> tree = new TreeView<>(root);
tree.setCellFactory(list -> new CustomCell(SCENE_WIDTH));
TreeItem<UUID> node0 = new TreeItem<>(UUID.randomUUID());
TreeItem<UUID> node1 = new TreeItem<>(UUID.randomUUID());
TreeItem<UUID> node2 = new TreeItem<>(UUID.randomUUID());
IntStream.range(0, 100)
.mapToObj(index -> new TreeItem<>(UUID.randomUUID()))
.forEach(node2.getChildren()::add);
root.getChildren().setAll(node0, node1, node2);
root.setExpanded(true);
node2.setExpanded(true);
BorderPane pane = new BorderPane();
pane.setCenter(tree);
Scene scene = new Scene(pane, SCENE_WIDTH, 600);
primaryStage.setTitle("Demo");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(t -> Platform.exit());
primaryStage.show();
}
static class CustomCell extends TreeCell<UUID> {
public static final double RIGHT_PADDING = 40;
/*
this value depends on tree disclosure node width
in my case it's enforced via CSS, so I always know exact
value of this padding
*/
public static final double INDENT_PADDING = 14;
public HBox hBox;
public Label lbLeft;
public Label lbRight;
public double maxWidth;
public CustomCell(double maxWidth) {
this.maxWidth = maxWidth;
hBox = new HBox();
lbLeft = new Label();
lbRight = new Label();
lbRight.setPadding(new Insets(0, RIGHT_PADDING, 0, 0));
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
hBox.getChildren().setAll(lbLeft, spacer, lbRight);
}
#Override
protected void updateItem(UUID uuid, boolean empty) {
super.updateItem(uuid, empty);
if (empty) {
setGraphic(null);
return;
}
String s = uuid.toString();
lbLeft.setText(s.substring(0, 6));
lbRight.setText(s.substring(6, 12));
setGraphic(hBox);
}
#Override
public void resize(double width, double height) {
// enforce item width
double maxCellWidth = getTreeView().getWidth() - RIGHT_PADDING;
double startLevel = getTreeView().isShowRoot() ? 0 : 1;
double itemLevel = getTreeView().getTreeItemLevel(getTreeItem());
if (itemLevel > startLevel) {
maxCellWidth = maxCellWidth - ((itemLevel - startLevel) * INDENT_PADDING);
}
hBox.setPrefWidth(maxCellWidth);
hBox.setMaxWidth(maxCellWidth);
super.resize(width, height);
}
}
}
It's far from perfect, but it works.

JavaFx pane in pane resizing

How I can resize Pane in GridPane? I'm creating a GUI which is GridPane and a map in it. And when gui change it's size I want to map which is in another Pane to resize. So I've added listners to width and height property of scene and there are generaly working. When I do setTranslateX of map I can see that something changed, but resizing not works at all. It can be caused by fact that map contains from tiles which have their size set. Code of method which create the scene:
private Scene createScene(GridPane root){
Scene scene = new Scene(root, WIDTH_OF_SCENE, HEIGHT_OF_SCENE);
scene.widthProperty().addListener((observableValue, oldSceneWidth, newSceneWidth) -> {
WIDTH_OF_SCENE = newSceneWidth.intValue();
draw();
MAP_PANE.setPrefSize(200, 200); //it's not working
MAP_PANE.setTranslateX(0); //it's working
root.requestLayout();
});
scene.heightProperty().addListener((observableValue, oldSceneHeight, newSceneHeight) ->{
HEIGHT_OF_SCENE = newSceneHeight.intValue();
draw();
root.requestLayout();
});
return scene;
}
And here I'm creating MAP_PANE:
public Pane createContent() {
map = new Pane();
map.setStyle("-fx-background-color: #383838");
// dodawanie pojedynczych kafli do dwuwymiarowej tablicy
for (int y = 0; y < Y_TILES; y++) {
for (int x = 0; x < X_TILES; x++) {
Tile tile = new Tile(x, y);
grid[x][y] = tile;
map.getChildren().addAll(tile);
}
}
return map;
}
And start method:
#Override
public void start(Stage primaryStage) throws Exception{
Map map = new Map();
GridPane root = FXMLLoader.load(getClass().getResource("sample.fxml"));
MAP_PANE = map.createContent();
IMAGE_VIEW = new ImageView();
countScreenSize();
draw();
root.getChildren().addAll(IMAGE_VIEW);
root.getChildren().addAll(MAP_PANE);
primaryStage.setTitle(TITLE);
primaryStage.setScene(createScene(root));
primaryStage.show();
}

How to apply a blur only to a rectangular area within a pane?

Let's say I've got a StackPane which has a BackgroundImage as background and another StackPane (or another component, if neccessary) as a child. The child covers only a part of the parent StackPane.
I'd like to know how to apply a GaussianBlur just to the area the child covers, so that the BackgroundImageis blurry in this area.
The size of the child changes when the parent is resized. It would be perfect to get a solution that will resize just in time, too.

If you want to do it manually, you can use the snapshot function to create a snapshot image, blur it and apply it to the child every time the parent is resized.
However, invoking snapshot all the time will cause performance loss. I rather suggest you create 2 images, one normal and one blurred, and display a viewport of the blurred one.
Here's a more "complex" example with a circle where the viewport isn't sufficient. The clip method is used in this case:
public class Lens extends Application {
Image image = new Image( "http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/800px-Siberischer_tiger_de_edit02.jpg");
CirclePane circlePane;
#Override
public void start(Stage primaryStage) {
ImageView normalImageView = new ImageView( image);
ImageView blurredImageView = new ImageView( image);
blurredImageView.setEffect(new GaussianBlur( 40));
Group root = new Group();
root.getChildren().addAll( normalImageView);
Scene scene = new Scene( root, 1024, 768);
primaryStage.setScene( scene);
primaryStage.show();
// pane with clipped area
circlePane = new CirclePane( blurredImageView);
makeDraggable( circlePane);
root.getChildren().addAll( circlePane);
}
public static void main(String[] args) {
launch(args);
}
private class CirclePane extends Pane {
ImageView blurredImageView;
ImageView clippedView = new ImageView();
public CirclePane( ImageView blurredImageView) {
this.blurredImageView = blurredImageView;
// new imageview
update();
getChildren().addAll( clippedView);
}
public void update() {
// create circle
Circle circle = new Circle( 200);
circle.relocate( getLayoutX(), getLayoutY());
// clip image by circle
blurredImageView.setClip(circle);
// non-clip area should be transparent
SnapshotParameters parameters = new SnapshotParameters();
parameters.setFill(Color.TRANSPARENT);
// new image from clipped image
WritableImage wim = null;
wim = blurredImageView.snapshot(parameters, wim);
clippedView.setImage( wim);
}
}
// make node draggable
class DragContext {
double x;
double y;
}
public void makeDraggable( Node node) {
final DragContext dragDelta = new DragContext();
node.setOnMousePressed(mouseEvent -> {
dragDelta.x = node.getBoundsInParent().getMinX() - mouseEvent.getScreenX();
dragDelta.y = node.getBoundsInParent().getMinY() - mouseEvent.getScreenY();
});
node.setOnMouseDragged(mouseEvent -> {
node.relocate( mouseEvent.getScreenX() + dragDelta.x, mouseEvent.getScreenY() + dragDelta.y);
circlePane.update();
});
}
}
Just click on the circle and drag it around.

JavaFX increasing a circle's radius by clicking on it

I'm trying to create a JavaFX program that creates a circle when you click on the screen. There can be many circles at once. But I can't think of a solution to how to increase a circle's radius when I click on it again.
public class Controller implements Initializable {
#FXML
private Button reset;
#FXML
private AnchorPane anchor;
#FXML
private BorderPane border;
Circle circle = new Circle();
int radius = 20;
public void initialize (URL location, ResourceBundle resources) {
anchor.setOnMouseClicked(event -> {
border.getChildren().add(circle = new Circle());
circle.setCenterX(event.getX());
circle.setCenterY(event.getY());
circle.setRadius(radius);
});
reset.setOnAction(event -> {
border.getChildren().clear();
});
circle.setOnMouseClicked(event -> {
circle.setRadius(radius * 1.5);
});
}
}

The field you declare as circle is never added to the scene graph. So it never appears and its mouseClicked handler is never invoked.
On the other hand, the circles you do add to the scene graph have no mouse clicked handler associated with them. You need to register a handler when you create them:
anchor.setOnMouseClicked(event -> {
Circle circle = new Circle();
border.getChildren().add(circle);
circle.setCenterX(event.getX());
circle.setCenterY(event.getY());
circle.setRadius(radius);
circle.setOnMouseClicked(e -> {
circle.setRadius(circle.getRadius() * 1.5);
// prevent event from propagating to pane:
e.consume();
});
});
And now just get rid of the circle instance field and the handler you associate with it entirely.

JavaFX 8 - Add a graphic to a TitledPane on the right side

I want to add a little icon to the title of a TitledPane. Therefore I set an empty title and add a HBox containing a Label and a ImageView as graphic. In this way the icon is shown close to the end of the text. I want it to be shown always next to the right border of the TitledPane.
How can I do this?
I also tried to use a BorderPane and add the Label to the center and the ImageView to the right, but the BorderPane doesn't get the maximum size of the TitledPane.
So I tried to set MaxWidth to Max-Value, but this didn't help
Does anybody know what to do?
**EDIT: ** The "custom" control I created will be initialized within a method called in stage.setOnShown.
public class CustomTitledPane extends TitledPane {
private Image alert;
private Image registered;
private Image deleted;
private ImageView img;
public CustomTitledPane(String titleText, Node node) {
super(titleText, node);
setAnimated(true);
setCollapsible(true);
img = new ImageView();
img.setFitHeight(10d);
img.setPreserveRatio(true);
img.setSmooth(true);
setGraphic(img);
setContentDisplay(ContentDisplay.RIGHT);
// apply css and force layout of nodes
applyCss();
layout();
// title region
Node titleRegion = lookup(".title");
// padding
Insets padding = ((StackPane) titleRegion).getPadding();
// image width
double graphicWidth = img.getLayoutBounds().getWidth();
// arrow
double arrowWidth = titleRegion.lookup(".arrow-button")
.getLayoutBounds().getWidth();
// text
double labelWidth = titleRegion.lookup(".text").getLayoutBounds()
.getWidth();
double nodesWidth = graphicWidth + padding.getLeft()
+ padding.getRight() + arrowWidth + labelWidth;
System.out.println("w: " + graphicWidth + " " + arrowWidth + " "
+ labelWidth);
graphicTextGapProperty().bind(widthProperty().subtract(nodesWidth));
try {
alert = new Image(new FileInputStream("img/Alert.png"));
registered = new Image(new FileInputStream("img/Registered.png"));
deleted = new Image(new FileInputStream("img/Deleted.png"));
} catch (FileNotFoundException e) {
e.printStackTrace();
}
} }
And here's the CSS for TitledPane:
.titled-pane {
-fx-text-fill: #006FD8;
}
.titled-pane > .title {
-fx-background-color: transparent;
-fx-border-color: linear-gradient(to right, white 0%, grey 30%, grey 70%, white 100%) transparent transparent transparent;
}
.titled-pane:expanded > .title {
-fx-border-color: grey transparent transparent transparent;
-fx-background-color: linear-gradient(to bottom, #DCE7F5, white);
}
.titled-pane:expanded > *.content {
-fx-border-width: 0;
}

Based on the code shown by the OP on his edited question, this code addresses the fact that the titled pane is created on a listener before the stage is shown, on a custom class.
#Override
public void start(Stage primaryStage) {
Scene scene = new Scene(new StackPane(), 300, 250);
primaryStage.setScene(scene);
primaryStage.setOnShown(e -> {
CustomTitledPane customTitledPane = new CustomTitledPane("Title", new StackPane(new Label("Graphic to the Right")));
scene.setRoot(customTitledPane);
customTitledPane.applyCss();
customTitledPane.layout();
// title region
Node titleRegion=customTitledPane.lookup(".title");
// padding
Insets padding=((StackPane)titleRegion).getPadding();
// image width
double graphicWidth=customTitledPane.getGraphic().getLayoutBounds().getWidth();
// arrow
double arrowWidth=titleRegion.lookup(".arrow-button").getLayoutBounds().getWidth();
// text
double labelWidth=titleRegion.lookup(".text").getLayoutBounds().getWidth();
double nodesWidth = graphicWidth+padding.getLeft()+padding.getRight()+arrowWidth+labelWidth;
customTitledPane.graphicTextGapProperty().bind(customTitledPane.widthProperty().subtract(nodesWidth));
});
primaryStage.show();
}
class CustomTitledPane extends TitledPane {
public CustomTitledPane(String titleText, Node node) {
super(titleText, node);
setAnimated(true);
setCollapsible(true);
ImageView img = new ImageView(new Image(getClass().getResource("unlock24.png").toExternalForm()));
img.setFitHeight(10d);
img.setPreserveRatio(true);
img.setSmooth(true);
setGraphic(img);
setContentDisplay(ContentDisplay.RIGHT);
}
}

There's no need to wrap graphic and text in a box, since you can select how to display your content with setContentDisplay():
title.setContentDisplay(ContentDisplay.RIGHT);
Once you have the image at the right you need to set the gap between the image and the text. For that, we can use some lookups to get the real dimensions of the nodes in the title, once the stage is shown.
Finally, we bind the gap space to the width property of the title subtracting those dimensions.
EDIT
The sample now supports creation before the stage is shown.
#Override
public void start(Stage primaryStage) {
Scene scene = new Scene(new StackPane(), 300, 250);
primaryStage.setScene(scene);
primaryStage.setOnShown(e -> {
TitledPane title = new TitledPane("Title",
new StackPane(new Label("Graphic to the Right")));
ImageView imageView = new ImageView(new Image(getClass().getResource("unlock24.png").toExternalForm()));
title.setGraphic(imageView);
title.setContentDisplay(ContentDisplay.RIGHT);
scene.setRoot(title);
// apply css and force layout of nodes
title.applyCss();
title.layout();
// title region
Node titleRegion=title.lookup(".title");
// padding
Insets padding=((StackPane)titleRegion).getPadding();
// image width
double graphicWidth=imageView.getLayoutBounds().getWidth();
// arrow
double arrowWidth=titleRegion.lookup(".arrow-button").getLayoutBounds().getWidth();
// text
double labelWidth=titleRegion.lookup(".text").getLayoutBounds().getWidth();
double nodesWidth = graphicWidth+padding.getLeft()+padding.getRight()+arrowWidth+labelWidth;
title.graphicTextGapProperty().bind(title.widthProperty().subtract(nodesWidth));
});
primaryStage.show();
}
And this is how it looks like: