Aligning a Path within a Container, StackPane, VBox etc - javafx

If I try to align a Path in a StackPane, somehow it is aligned based on its internal structure rather than using the layout bounds. Is there anyway of changing this? I've tried all sorts of combinations of with/without Group wrapper, VBox, HBox, autosizeChildren property etc.
For example, I want the line to be inset by (50, 50), but it gets shown at (0, 0)
#Override
public void start(Stage primaryStage) {
MoveTo moveTo = new MoveTo();
moveTo.setX(50);
moveTo.setY(50);
LineTo lineTo = new LineTo();
lineTo.setX(100);
lineTo.setY(100);
Path path = new Path(moveTo, lineTo);
StackPane stack = new StackPane(new Group(path));
stack.setAlignment(Pos.TOP_LEFT);
primaryStage.setScene(new Scene(stack, 100, 100));
primaryStage.show();
}
Without using a StackPane it appears as I expect. the line starts at (50, 50)
#Override
public void start(Stage primaryStage) {
MoveTo moveTo = new MoveTo();
moveTo.setX(50);
moveTo.setY(50);
LineTo lineTo = new LineTo();
lineTo.setX(100);
lineTo.setY(100);
Path path = new Path(moveTo, lineTo);
primaryStage.setScene(new Scene(new Group(path), 100, 100));
primaryStage.show();
}

According to the StackPane Javadocs:
The stackpane will attempt to resize each child to fill its content
area. If the child could not be sized to fill the stackpane (either
because it was not resizable or its max size prevented it) then it
will be aligned within the area using the alignment property, which
defaults to Pos.CENTER.
Since the Path is not resizable, is doesn't get resized, and just gets positioned according to the alignment you set. Wrapping in a Group doesn't help because the Group takes on the bounds of its children.
Either use a regular Pane instead of the StackPane (probably the most convenient solution):
Pane stack = new Pane(path);
or wrap the path in a Pane (which gets resized, etc):
StackPane stack = new StackPane(new Pane(path));

Related

How to add child node without affecting layout of GridPane parent

I want create a app using javafx. It looks like this:
I want to add the zoom function for the chart. When I click the button "Zoom in", the app will become fig2. However, I have no idea to achieve it. When I change the size of pane included the chart, it will change grid pane size, looks like this:
You do not want the zoom to be considered for the gridpane layout. In this can be achieved by applying transforms to the child of the gridpane you want to modify.
The following example demonstrates how to zoom a node while the mouse is hovering over it:
private static Region createRegion(String background) {
Region region = new Region();
region.setStyle("-fx-background-color:"+background);
region.setPrefSize(300, 100);
return region;
}
#Override
public void start(Stage primaryStage) {
GridPane gp = new GridPane();
// create background
gp.add(createRegion("green"), 0, 0);
gp.add(createRegion("dodgerblue"), 0, 1);
// create region to be zoomed
Region zoomRegion = createRegion("red");
GridPane.setFillWidth(zoomRegion, Boolean.FALSE);
GridPane.setFillHeight(zoomRegion, Boolean.FALSE);
zoomRegion.setPrefWidth(100);
Scale scale = new Scale();
zoomRegion.getTransforms().add(scale);
// keep pivot at bottom left corner
scale.pivotYProperty().bind(zoomRegion.heightProperty());
zoomRegion.hoverProperty().addListener((observable, oldValue, newValue) -> {
// adjust scale when hover state is changed
double scaleFactor = newValue ? 1.5 : 1;
scale.setX(scaleFactor);
scale.setY(scaleFactor);
});
gp.add(zoomRegion, 0, 1);
Scene scene = new Scene(gp);
primaryStage.setScene(scene);
primaryStage.show();
}

Java FX out of the window screen

I wanna it will be okay when the number variables is changed, but when the are increased the button goes out from the window. How to fix it? Also how to put the bar down to the level of "10$", so they will be in the same row?
Before :
After :
Here is my code :
VBox vboxBottom = new VBox();
HBox hboxBottomElements = new HBox(15);
HBox hboxBottomMain = new HBox(0);
Region region = new Region();
region.setPrefWidth(500);
hboxBottomElements.getChildren().addAll(visaLabel, separator2, adLabel, separator3, governRelationStatus, separator4, region, next);
hboxBottomElements.setPadding(new Insets(5));
vboxBottom.getChildren().addAll(separator1, new Group(hboxBottomElements));
vboxBottom.setPadding(new Insets(3));
hboxBottomMain.getChildren().addAll(new Group(moneyBox), vboxBottom);
hboxBottomMain.setPadding(new Insets(3));
layout.setBottom(hboxBottomMain);
By using a Group here
vboxBottom.getChildren().addAll(separator1, new Group(hboxBottomElements));
you're creating a layout structure that resizes hboxBottomElements to it's prefered size independent of the space available.
HBox simply moves elements out the right side of it's bounds, if the space available does not suffice. This means if the Group containing moneyBox grows, the Button is moved out of the HBox...
The following simpler example demonstrates the behavior:
#Override
public void start(Stage primaryStage) {
Button btn = new Button("Do something");
HBox.setHgrow(btn, Priority.NEVER);
btn.setMinWidth(Region.USE_PREF_SIZE);
Region filler = new Region();
filler.setPrefWidth(100);
HBox.setHgrow(filler, Priority.ALWAYS);
Rectangle rect = new Rectangle(200, 50);
HBox hBox = new HBox(rect, filler, btn);
Scene scene = new Scene(hBox);
primaryStage.setScene(scene);
primaryStage.show();
}
This will resize filler to make the HBox fit the window.
Now replace
Scene scene = new Scene(hBox);
with
Scene scene = new Scene(new Group(hBox));
and the Button will be moved out of the window...

Responsive UI-Design with a TilePane in a ScrollPane

I am trying to wrap my head around Scroll- and Tilepanes atm, and I have come upon an issue I just cant solve without a dirty hack.
I have a horizontal TilePane that has 8 Tiles, and I set it to have 4 columns, resulting in 2 rows with 4 tiles.
That TilePane I put in an HBox, since if I put it in a StackPane it would stretch the size of the tilepane making my colum setting void. A bit weird that setting the prefColumns/Rows recalculates the size of the TilePane, rather than trying to set the actual amounts of columns/rows, feels more like a dirty hack.
Anyway, putting the HBox directly into the ScrollPane would not work either, since the Scrollbars would not appear even after the 2nd row of tiles would get cut off. Setting that HBox again in a Stackpane which I then put in a ScrollPane does the trick. Atleast until I resize the width of the window to be so small the tilepane has to align the tiles anew and a 3rd or more rows appear.
Here is the basic programm:
public class Main extends Application {
#Override
public void start(Stage stage) {
TilePane tilePane = new TilePane();
tilePane.setPadding(new Insets(5));
tilePane.setVgap(4);
tilePane.setHgap(4);
tilePane.setPrefColumns(4);
tilePane.setStyle("-fx-background-color: lightblue;");
HBox tiles[] = new HBox[8];
for (int i = 0; i < 8; i++) {
tiles[i] = new HBox(new Label("This is node #" + i));
tiles[i].setStyle("-fx-border-color: black;");
tiles[i].setPadding(new Insets(50));
tilePane.getChildren().add(tiles[i]);
}
HBox hbox = new HBox();
hbox.setAlignment(Pos.CENTER);
hbox.setStyle("-fx-background-color: blue;");
hbox.getChildren().add(tilePane);
StackPane stack = new StackPane();
stack.getChildren().add(hbox);
ScrollPane sp = new ScrollPane();
sp.setFitToHeight(true);
sp.setFitToWidth(true);
sp.setContent(stack);
stage.setScene(new Scene(sp, 800, 600));
stage.show();
}
public static void main(String[] args) {
launch();
}
}
I managed to achieve my wanted behaviour, but its more of a really dirty hack. I added a listener to the height and width of my HBox containing the TilePane and assumed that when the height changes its because the width got so small that a column was removed and a new row added. To be able to do that I put the HBox in a VBox so that it would not grow withe the height of the ScrollPane. For the width I simply calculated if there is space to display another colum (up to 4), to do it.
Here are the changes:
public class Main extends Application {
private boolean notFirstPassHeight;
private boolean notFirstPassWidth;
#Override
public void start(Stage stage) {
TilePane tilePane = new TilePane();
tilePane.setPadding(new Insets(5));
tilePane.setVgap(4);
tilePane.setHgap(4);
tilePane.setPrefColumns(4);
tilePane.setStyle("-fx-background-color: lightblue;");
// I took the value from ScenicView
tilePane.prefTileWidthProperty().set(182);
HBox tiles[] = new HBox[8];
for (int i = 0; i < 8; i++) {
tiles[i] = new HBox(new Label("This is node #" + i));
tiles[i].setStyle("-fx-border-color: black;");
tiles[i].setPadding(new Insets(50));
tilePane.getChildren().add(tiles[i]);
}
ScrollPane sp = new ScrollPane();
sp.setFitToHeight(true);
sp.setFitToWidth(true);
StackPane stack = new StackPane();
VBox vbox = new VBox();
vbox.setStyle("-fx-background-color: red");
HBox hbox = new HBox();
hbox.setAlignment(Pos.CENTER);
hbox.setStyle("-fx-background-color: blue;");
hbox.getChildren().add(tilePane);
notFirstPassHeight = false;
notFirstPassWidth = false;
hbox.heightProperty().addListener((observable, oldValue, newValue) -> {
if (oldValue.doubleValue() < newValue.doubleValue() && notFirstPassHeight) {
tilePane.setPrefColumns(tilePane.getPrefColumns() - 1);
stack.requestLayout();
}
notFirstPassHeight = true;
});
hbox.widthProperty().addListener((observable, oldValue, newValue) -> {
if (oldValue.doubleValue() < newValue.doubleValue() && notFirstPassWidth && tilePane.getPrefColumns() <= 3
&& (newValue.doubleValue() / (tilePane.getPrefColumns() + 1)) > tilePane.getPrefTileWidth()) {
tilePane.setPrefColumns(tilePane.getPrefColumns() + 1);
stack.requestLayout();
}
notFirstPassWidth = true;
});
vbox.getChildren().add(hbox);
stack.getChildren().add(vbox);
sp.setContent(stack);
stage.setScene(new Scene(sp, 800, 600));
stage.show();
}
public static void main(String[] args) {
launch();
}
}
However this approach requires me to
1.Know the Width of the Tiles in the Tilepane.
2.Consider Padding and Gap between tiles for my calculation to be accurate, which I dont do in my example.
And its just not a good approach at any rate if you ask me. Too complicated a process for such a basic thing. There has to be a way better and simple way to accomplish complete resizability and the wanted behaviour with TilePanes in a ScrollPane.
Setting the preferred number of columns and/or rows in the TilePane determines the calculation for the prefWidth and prefHeight values for that tile pane. If you want to force a maximum number of columns, you just need to make the maxWidth equal to the computed prefWidth: you can do this with
tilePane.setMaxWidth(Region.USE_PREF_SIZE);
This means that (as long as the tile pane is placed in something that manages layout), it will never be wider than the pref width, which is computed to allow the preferred number of columns. It may, of course, be smaller than that. (Note you could use the same trick with setMinWidth if you needed a minimum number of columns, rather than a maximum number of columns.)
The scroll pane's fitToHeight and fitToWidth properties will, when true, attempt to resize the height (respectively width) of the content to be equal to the height (width) of the scroll pane's viewport. These operations will take precedence over the preferred height (width) of the content, but will attempt to respect the minimum height (width).
Consequently, it's usually a mistake to call both setFitToWidth(true) and setFitToHeight(true), as this will almost always turn off scrolling completely (just forcing the content to be the same size as the scroll pane's viewport).
So here you want to make the max width of the tile pane respect the pref width, and fix the width of the tile pane to be the width of the scroll pane's viewport (so that when you shrink the width of the window, it shrinks the width of the viewport and creates more columns). This will add a vertical scrollbar if the number of rows grows large enough, and only add a horizontal scrollbar if the viewport shrinks horizontally below the minimum width of the tile pane (which is computed as the minimum of the preferred widths of all the nodes it contains).
I think the following version of your original code does essentially what you are looking for:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;
public class ScrollingTilePane extends Application {
#Override
public void start(Stage stage) {
TilePane tilePane = new TilePane();
tilePane.setPadding(new Insets(5));
tilePane.setVgap(4);
tilePane.setHgap(4);
tilePane.setPrefColumns(4);
tilePane.setStyle("-fx-background-color: lightblue;");
// dont grow more than the preferred number of columns:
tilePane.setMaxWidth(Region.USE_PREF_SIZE);
HBox tiles[] = new HBox[8];
for (int i = 0; i < 8; i++) {
tiles[i] = new HBox(new Label("This is node #" + i));
tiles[i].setStyle("-fx-border-color: black;");
tiles[i].setPadding(new Insets(50));
tilePane.getChildren().add(tiles[i]);
}
HBox hbox = new HBox();
hbox.setAlignment(Pos.CENTER);
hbox.setStyle("-fx-background-color: blue;");
hbox.getChildren().add(tilePane);
// StackPane stack = new StackPane();
// stack.getChildren().add(tilePane);
// stack.setStyle("-fx-background-color: blue;");
ScrollPane sp = new ScrollPane();
// sp.setFitToHeight(true);
sp.setFitToWidth(true);
sp.setContent(hbox);
stage.setScene(new Scene(sp, 800, 600));
stage.show();
}
public static void main(String[] args) {
launch();
}
}
Note that if you need to change the background color of the space outside the scroll pane's content, you can use the following in an external style sheet:
.scroll-pane .viewport {
-fx-background-color: red ;
}

Difficulty with nested ScrollPanes and FlowPanes/VBox'es

Above, I have added a screen shot - now that I can add images. The bottom of the screen shot shows the edge of the scene (with no scrollbar on outer container 2).
This scene may become too busy - but I am attempting to use nested scroll panes which contain either a FlowPane or VBox. I am defining "inner containers" which is a VBox and includes a textfield and scroll pane which has a flow pane as it's content. The flow pane loads a number of "status blocks". The scroll pane for the inner containers seems to be working okay. Below is a code snippet from the inner container:
public class InnerContainer extends VBox
{
// Declare the various parts of the inner container
private TextField m_icName = null; // Name of the inner container
private ScrollPane m_icScroll = null;
private FlowPane m_icFlow = null; // Holds the status blocks
// List of status blocks in this inner container
private ArrayList<StatusBlock> m_statBlockList = null;
/******************************************************************
* Create the containers and controls used by the inner container *
******************************************************************/
public InnerContainer()
{
m_statBlockList = new ArrayList<>(); // Set up list of status blocks
setMinSize(200.0, 170.0);
setPrefSize(200, 170);
setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
setPadding(new Insets(5, 5, 5, 5));
m_icName = new TextField();
m_icName.setMaxWidth(Double.MAX_VALUE);
m_icScroll = new ScrollPane();
m_icScroll.setFitToWidth(true);
m_icScroll.setFitToHeight(true);
m_icScroll.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
VBox.setVgrow(m_icScroll, Priority.ALWAYS);
m_icFlow = new FlowPane();
m_icFlow.setPrefWrapLength(650.0); // This is the "wrap" point
m_icFlow.setVgap(5);
m_icFlow.setHgap(5);
m_icFlow.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
m_icScroll.setContent(m_icFlow);
// Add the elements to the vbox
getChildren().addAll(m_icName, m_icScroll);
VBox.setVgrow(this, Priority.ALWAYS);
I've been unable to get the scroll bars to work properly for the outer containers. If I add inner containers the outer container just keeps growing and I can never get the scroll bar to show up (even if it exceeds the size of the screen). I suspect I am having trouble correctly computing the size of the content of the outer container. The outer container is a VBox which contains a text field and a scrollpane which has content of a VBox. The final VBox can consist of one to many inner containers.
Here is a code snippet from the outer container:
public class OuterContainer extends VBox
{
// Declare the various parts of the outer container
private TextField m_ocName = null; // Name of the outer container
private ScrollPane m_ocScroll = null;
private VBox m_ocMainVBox = null;
private ArrayList<InnerContainer> m_innerContList = null;
public OuterContainer()
{
// Setup the inner container list
m_innerContList = new ArrayList<>();
setSpacing(8);
setPrefSize(USE_COMPUTED_SIZE, USE_COMPUTED_SIZE);
setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
setPadding(new Insets(5, 5, 5, 5));
m_ocName = new TextField();
m_ocName.setMaxWidth(Double.MAX_VALUE);
m_ocScroll = new ScrollPane();
m_ocScroll.setFitToWidth(true);
m_ocScroll.setFitToHeight(true);
m_ocScroll.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
VBox.setVgrow(m_ocScroll, Priority.ALWAYS);
m_ocMainVBox = new VBox();
m_ocMainVBox.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
VBox.setVgrow(m_ocMainVBox, Priority.ALWAYS);
m_ocMainVBox.setSpacing(5);
m_ocMainVBox.setMinSize(1.0, 1.0);
m_ocScroll.setContent(m_ocMainVBox);
// Add the elements to the top vbox
getChildren().addAll(m_ocName, m_ocScroll);
VBox.setVgrow(this, Priority.ALWAYS);
There is a final outer class which also should potentially have a scrollbar. It also isn't working correctly, but I suspect the issue is similar to what I am asking for help with here.
Thanks in advance for any help.
I've abandoned trying to use three scrollbars and will instead use a single scrollbar. However, I believe the root issue was addressed in:
Java FX scales the parent based on the content size
The size of the FlowPane or VBox used as the content of the ScrollPane keeps growing as the size of the content grows. This also causes the height of the scrollpane to grow. To resolve this, I am now basing the pref height of the scroll pane on the height of the stage. I've also added a change listener that looks for changes to the stage height property. It is similar to the following code snippet:
m_dashScroll.setPrefHeight(TopClass.getStage().getHeight() - DECORATION_OFFSET);
TopClass.getStage().heightProperty().addListener(new ChangeListener<Number>()
{
#Override
public void changed(ObservableValue<? extends Number> ov,
Number oldVal, Number newVal)
{
m_dashScroll.setPrefHeight(newVal.doubleValue() - DECORATION_OFFSET);
}
});
This required a static reference to the stage, so I would be interested if there are better ways to do this. [Also, I could use a lambda here if desired.]

Javafx - How to set drag range for components added in a pane

i have tried a below sample, in which left area of border Pane will have list of components and center of the border pane will act as a canvas area and here i have added a rectangle on run time as children to a Pane which is set to Center portion of BorderPane. But when drag the rectangle it moving outof the area allocated for the center, so how could i make this drag around only inside the Center Pane.
#Override
public void start(Stage stage) throws Exception {
stage.setTitle("BPM");
BorderPane border = new BorderPane();
Pane canvas = new Pane();
canvas.setStyle("-fx-background-color: #F0F0F0;");
border.setLeft(compList());
border.setCenter(canvas);
//
Anchor start = new Anchor(null, "Start", Color.PALEGREEN, new SimpleDoubleProperty(170), new SimpleDoubleProperty(170));
final Rect rect=new Rect(100, 70,new SimpleDoubleProperty(10), new SimpleDoubleProperty(100));
rect.setX(100);
rect.setY(100);
canvas.getChildren().add(rect);
canvas.getChildren().add(start);
Scene scene = new Scene(border, 800, 600);
stage.setScene(scene);
stage.show();
}
Actually, by default, the Pane class does not ensure that all its children are clipping hence there are possibility that the children might go out of the boundary of the Pane. To ensure that all children (in your case, the rectangle) are dragged within specify boundary, you have to manually check the boundary as you dragging the children. Below are example of my implementation:
#Override
public void start(Stage stage){
stage.setTitle("BPM");
BorderPane mainPanel = new BorderPane();
VBox nameList = new VBox();
nameList.getChildren().add(new Label("Data"));
nameList.setPrefWidth(150);
Pane canvas = new Pane();
canvas.setStyle("-fx-background-color: #ffe3c3;");
canvas.setPrefSize(400,300);
Circle anchor = new Circle(10);
double rectWidth = 50, rectHeight = 50;
Rectangle rect = new Rectangle(50,50);
rect.setX(100);
rect.setY(100);
canvas.getChildren().addAll(rect, anchor);
// set the clip boundary
Rectangle bound = new Rectangle(400,300);
canvas.setClip(bound);
rect.setOnMouseDragged(event -> {
Point2D currentPointer = new Point2D(event.getX(), event.getY());
if(bound.getBoundsInLocal().contains(currentPointer)){
if(currentPointer.getX() > 0 &&
(currentPointer.getX() + rectWidth) < bound.getWidth()){
rect.setX(currentPointer.getX());
}
if(currentPointer.getY() > 0 &&
(currentPointer.getY() + rectHeight) < bound.getHeight()){
rect.setY(currentPointer.getY());
}
}
});
mainPanel.setLeft(nameList);
mainPanel.setCenter(canvas);
Scene scene = new Scene(mainPanel, 800, 600);
stage.setScene(scene);
stage.show();
}

Resources