I'd like to create a layout container that has some of the features of BorderPane but without exposing BorderPane's methods (e.g. setCenter).
I'm thinking that one way to do this is to extend Region and set a BorderPane as its child:
class MyPane extends Region {
private val borderPane = new BorderPane
borderPane setCenter foo
getChildren add borderPane
}
The problem is that now the BorderPane will not be resized to fill the Region. Is there a way to achieve that?
Related
I want to write a new class that extends Region containing a StackPane inside. But I'm getting into trouble when I add insets to it like padding or a border. Here is a simplified example of the class:
public class CustomPane extends Region
{
private ToggleButton testControl = new ToggleButton("just a test control");
private StackPane rootPane = new StackPane(testControl);
public CustomPane()
{
getChildren().add(rootPane);
setStyle("-fx-border-color: #257165; -fx-border-width: 10;");
}
}
And that is how the result looks like:
If I try to move the StackPane by calling
rootPane.setLayoutX(10);
rootPane.setLayoutY(10);
then the Region just grows:
But really I wanted it to look like this:
(The third image was created by extending StackPane instead of Region, which already manages the layouting stuff correctly. Unfortunately I have to extend Region since I want to keep getChildren() protected.)
Okay, I tried to handle the layout calculation but I didn't come up with it. Could experts give me some advise?
StackPane uses the insets for layouting the (managed) children. Region doesn't do this by default. Therefore you need to override the layoutChildren with something that uses these insets, e.g.:
#Override
protected void layoutChildren() {
Insets insets = getInsets();
double top = insets.getTop(),
left = insets.getLeft(),
width = getWidth() - left - insets.getRight(),
height = getHeight() - top - insets.getBottom();
// layout all managed children (there's only rootPane in this case)
layoutInArea(rootPane,
left, top, // offset of layout area
width, height, // available size for content
0,
HPos.LEFT,
VPos.TOP);
}
When to use translate and when relocate in order to move a node? In the end of the day it seems they do the same thing (visually); move the node; the first by doing a translation on the origin (the x, y stays the same), the second by changing the x, y coords.
So suppose i want to move a node in a specific point in the screen.. should i use node.relocate(x,y) or node.setTranslateX(x), node.setTranslateY(y)?
To demostrate what I mean I have made a sample program you can play with:
A rectangle on the screen, whose position is determined by 4 sliders (2 of them controlling the layout x, y the other two controlling the translate x, y).
/* imports are missing */
public class TransReloc extends Application{
#Override
public void start(Stage primaryStage) throws Exception {
Group root = new Group();
Rectangle rect = new Rectangle(100, 50, Color.BLUE);
root.getChildren().add(rect);
VBox controlGroup = new VBox();
Slider relocX = new Slider(-100, 100, 0 );
Slider relocY = new Slider(-100, 100, 0 );
Slider transX = new Slider(-100, 100, 0 );
Slider transY = new Slider(-100, 100, 0 );
rect.layoutXProperty().bind(relocX.valueProperty());
rect.layoutYProperty().bind(relocY.valueProperty());
rect.translateXProperty().bind(transX.valueProperty());
rect.translateYProperty().bind(transY.valueProperty());
controlGroup.getChildren().addAll(relocX, relocY, transX, transY);
root.getChildren().add(controlGroup);
controlGroup.relocate(0, 300);
Scene scene = new Scene(root, 300, 400, Color.ALICEBLUE);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
layout coordinates are used by Layout Managers like StackPane or VBox to control their children location. Group (and Pane) leaves children layout to developer thus there is no difference from translate functionality.
So generally you should only change translate coordinates for fine location tuning and leave layout to layout managers (actually you can't change layoutX, layoutY for nodes inside non Group/Pane layout managers)
As an example try to run next code and resize window to see how StackPane recalculates layoutBounds
public void start(Stage primaryStage) throws Exception {
StackPane root = new StackPane();
Rectangle rect = new Rectangle(100, 50, Color.BLUE);
root.getChildren().add(rect);
Scene scene = new Scene(root, 300, 300, Color.ALICEBLUE);
rect.layoutXProperty().addListener( (e) -> {
System.out.println(rect.getLayoutX() + ":" + rect.getLayoutY());
});
primaryStage.setScene(scene);
primaryStage.show();
}
Another difference is that when you call Node.getBoundsInLocal(), will calculate the LayoutX, LayoutY and all the applied Effects. But, Node.getBoundsInParent() will get calculated with LayoutX, LayoutY, all applied Effects plus all transformations (rotation, translation and scaling). So you can use LayoutX/Y properties as a main position and use translateX/Y as a second or an alternative way to move the node. And the other difference is discussed above, I mean not to copy from Sergey Grinev.
I am currently experimenting with JavaFX's scene graph. I came across a strange problem that i can't really explain. Have a look at the following code:
final BorderPane bp1 = new BorderPane();
final Button button = new Button("CLICK ME");
Scene sc1 = new Scene(bp1,100,100);
bp1.setCenter(button);
stage1.setScene(sc1);
stage1.show();
Stage stage2 = new Stage();
final BorderPane bp2 = new BorderPane();
Scene sc2 = new Scene(bp2,100,100);
stage2.setScene(sc2);
stage2.setX(250);
stage2.show();
bp2.setCenter(button);
bp1.setCenter(button);
What i am trying to do here is to add a node (Button) to a Borderpane which lies within a scene on stage1. At the end of the code i try to add the node to a different scene(pane) on stage2. This actually works. But the last line does not. The button remains on stage2. The strange thing is that if i replace the borderpane with a gridpane, the code works as intended. Why does the borderpane behave different from the gridpane in this situation?
Another question which came to my mind in this case: I assume that there is exactly 1 scene graph per scene (or stage). Is that correct?
I guess you found a bug in the BorderPane implementation. The BorderPane has a bit of peculiar way how it manages its children. You can find the BorderPane implementation here. I suggest you file a bug report at the javafx jira
My testcase:
final BorderPane bp1 = new BorderPane();
final BorderPane bp2 = new BorderPane();
System.out.println("bp1 "+bp1);
System.out.println("bp2 "+bp2);
final Button button = new Button("CLICK ME");
button.parentProperty().addListener(new ChangeListener<Parent>() {
#Override
public void changed(ObservableValue<? extends Parent> observableValue, Parent parent, Parent parent2) {
System.out.println("changed");
System.out.println(button.getParent());
}
});
bp1.centerProperty().addListener(new InvalidationListener() {
#Override
public void invalidated(Observable observable) {
System.out.println("bp1 center invalidated ");
}
});
bp2.centerProperty().addListener(new InvalidationListener() {
#Override
public void invalidated(Observable observable) {
System.out.println("bp2 center invalidated ");
}
});
// bp1.centerProperty().addListener(new ChangeListener<Node>() {
// #Override
// public void changed(ObservableValue<? extends Node> observableValue, Node node, Node node2) {
// System.out.println("bp1 center changed "+node+" -> "+node2);
// }
// });
// bp2.centerProperty().addListener(new ChangeListener<Node>() {
// #Override
// public void changed(ObservableValue<? extends Node> observableValue, Node node, Node node2) {
// System.out.println("bp2 center changed "+node+" -> "+node2);
// }
// });
Scene sc1 = new Scene(bp1,100,100);
bp1.setCenter(button);
primaryStage.setScene(sc1);
primaryStage.show();
Stage stage2 = new Stage();
Scene sc2 = new Scene(bp2,100,100);
stage2.setScene(sc2);
stage2.setX(250);
stage2.show();
bp2.setCenter(button);
bp1.setCenter(button);
output:
bp1 BorderPane#48a80c67
bp2 BorderPane#10c66375
changed
BorderPane#48a80c67[styleClass=root]
bp1 center invalidated
changed
null
changed
BorderPane#10c66375[styleClass=root]
bp2 center invalidated
Explanation:
I found that bp1's center property is not invalidated and thus not updated when the button is added to the second scene. Adding a node to another scene should normally cause it to be removed from the previous scene. However, since BorderPane uses a peculiar way to hold its values (object properties for center, left and so on), after the button is added to the second scene, the button is not removed from the center property of the BorderPane. Setting the button a second time on the same BorderPane doesn't add the button to its children because it thinks that it is already set as the center node.
To your second question:
yes, only one scene graph per stage/scene.
The following program fails to resize the line chart horizontally when embedded in a Pane (or borderpane of anchorpane for the matter)
If the line chart is directly parented to the VBox instead, then everything works as expected.
I found I needed to bind the chart size to the parent pane, which I assume must be done automatically by VBox and HBox.
After trying different combination of enclosing in HBox/VBox, setting growing and alignment policies, I am quite confused about how layouts work.
I observe that there are differences in how ui components behave wrt resizing.
Any clarification (or digest insight on javadoc unclear documentation) is appreciated.
Best regards.
Source edited and clarified
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.chart.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class App extends Application {
#Override
public void start(Stage stage) {
NumberAxis xAxis = new NumberAxis();
NumberAxis yAxis = new NumberAxis();
xAxis.setLabel("X");
yAxis.setLabel("Y");
final LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);
lineChart.setTitle("x = f(y)");
XYChart.Series data = new XYChart.Series();
data.setName("Serie 1");
for (int i = 0; i < 10; i++) {
data.getData().add(new XYChart.Data(i, i * i));
}
lineChart.getData().add(data);
VBox vb = new VBox();
vb.setFillWidth(true);
HBox hb = new HBox();
hb.getChildren().add(lineChart);
hb.setFillHeight(true);
vb.getChildren().add(hb);
HBox.setHgrow(lineChart, Priority.ALWAYS);
VBox.setVgrow(hb, Priority.ALWAYS);
Scene scene = new Scene(vb);
stage.setScene(scene);
stage.centerOnScreen();
stage.setResizable(true);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
For the record, the problem of the provided example is solved after modifying this typo:
HBox.setHgrow(hb, Priority.ALWAYS);
to:
HBox.setHgrow(lineChart, Priority.ALWAYS);
This fixes resizing horizontally.
When embedded directly in VBox, the chart's size is recomputed on resize, as it is anchored to the VBox, which boundaries change.
When embedded in a HBox, we have to provide a hint for the HBox to grow horizontally, and vertically.
Vertically it's done with:
VBox.setVgrow(hb, Priority.ALWAYS);
Horizontally it's done by requesting its content to occupy all available space, which the fix above is about.
I've been trying to work with the scaling transform in JavaFX, but haven't quite been able to wrap my head around it. Basically, I have a Pane containing a complex graph and would like to be able to rescale it. The scaling part itself works fine, however, the enclosing scroll pane will not adapt to the graph.
For simplicity's sake, i'll post a short example in which my graph is replaced by a label:
public class TestApp extends Application {
#Override public void start(final Stage stage) throws Exception {
final Label label = new Label("Hello World");
label.getTransforms().setAll(new Scale(0.5, 0.5));
label.setStyle("-fx-background-color:blue");
label.setFont(new Font(200));
final ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(label);
stage.setScene(new Scene(scrollPane));
stage.setWidth(200);
stage.setHeight(100);
stage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
The label will scale correctly, but the enclosing scroll pane's bars will still accomodate a component of the original size.
I've tried so far:
Playing around with the labels min and pref size
wrapping the label inside a Group (no scrollbars will appear whatsoever)
scaling the enclosing Group rather than the label
What am I missing? What can I do to make the ScrollPane adapt to the content view?
Thanks for your help.
According to the ScrollPane document you might try to wrap a Pane in a Group so the ScrollPane is scroll by visual bound not the actual layout bound.
ScrollPane layout calculations are based on the layoutBounds rather than the
boundsInParent (visual bounds) of the scroll node. If an application wants the
scrolling to be based on the visual bounds of the node (for scaled content etc.),
they need to wrap the scroll node in a Group.
I implemented scaling in a ScrollPane for Graphs and other nodes in
this example of scrollpane viewports, transforms and layout bounds in JavaFX.
The code was implemented when I was first learning JavaFX, so certainly the code could be cleaner and perhaps there are simpler ways to accomplish this (e.g. using a Group as the container for the scaled node as suggested in the ScrollPane documentation).
One key to getting the solution I wanted (ScrollBars only appearing when you are zoomed in and the node is larger than the visible viewport), was this code:
// create a container for the viewable node.
final StackPane nodeContainer = new StackPane();
nodeContainer.getChildren().add(node);
// place the container in the scrollpane and adjust the pane's viewports as required.
final ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(nodeContainer);
scrollPane.viewportBoundsProperty().addListener(
new ChangeListener<Bounds>() {
#Override public void changed(ObservableValue<? extends Bounds> observableValue, Bounds oldBounds, Bounds newBounds) {
nodeContainer.setPrefSize(
Math.max(node.getBoundsInParent().getMaxX(), newBounds.getWidth()),
Math.max(node.getBoundsInParent().getMaxY(), newBounds.getHeight())
);
}
});
...
// adjust the view layout based on the node scalefactor.
final ToggleButton scale = new ToggleButton("Scale");
scale.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent actionEvent) {
if (scale.isSelected()) {
node.setScaleX(3); node.setScaleY(3);
} else {
node.setScaleX(1); node.setScaleY(1);
}
// runlater as we want to size the container after a layout pass has been performed on the scaled node.
Platform.runLater(new Runnable() {
#Override public void run() {
nodeContainer.setPrefSize(
Math.max(nodeContainer.getBoundsInParent().getMaxX(), scrollPane.getViewportBounds().getWidth()),
Math.max(nodeContainer.getBoundsInParent().getMaxY(), scrollPane.getViewportBounds().getHeight())
);
}
});
}
});