I have a ploblem with resizing of ImageView in StackPane:
If StackPane is root container and I bind image's height and width to StackPane, everything is fine.
<StackPane id="StackPane" fx:id="stack" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: lightgreen;" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxapplication8.FXMLController">
<children>
<ImageView fx:id="image" fitHeight="100.0" fitWidth="300.0" pickOnBounds="true" preserveRatio="true" />
</children>
<stylesheets>
<URL value="#fxml.css" />
</stylesheets>
</StackPane>
But if I place such stack pane in, for example, grid, than image doesnt resize properly.
As I read, the problem that ImageView is non-Resizable. Is there any ways to make it resizable? Or could you give some advise how to resize ImageView?
It sounds like you are trying to create a background image for the StackPane. In which case applying the image via CSS may be a better route to use than an ImageView.
.stack-pane {
-fx-background-image: url("flower.png");
-fx-background-size: cover;
}
See the background images section of the Region specification in the JavaFX CSS reference guide.
Making ImageView itself resizable is an unresolved major issue. The issue links to code for a simple workaround - a resizable ImagePane wrapping an Image to fill the resizable pane.
Related
We are using JavaFX to create the text area and populate the text area values dynamically. The display of text area is working some times and some times the text area is getting shrinks and values are not displayed. However If I right click in the text area and select all then copy and paste it in notepad I could see the text.
So i'm assuming something wrong with the Text Area itself.
test.fxml
<AnchorPane prefHeight="200.0" prefWidth="200.0">
<children>
<TextArea id="notes" fx:id="notes" editable="false" prefHeight="152.0" prefWidth="675.0" styleClass="notes" text="%welcome.note" wrapText="true" />
</children>
</AnchorPane>
I created this GUI in Scene Builder. I have an AnchorPane on an AnchorPane, but how do I get it to the edge of the same distance? See second picture. Up, down, right, left should be the same distance from the red AnchorPane everywhere.
-So first thing you need to do, is to choose the layout you want to adjust (the blue one).
-Under the Inspecter panel on the right, you choose the "Layout" pane
-Finally you set the disired values under Anchor Pane Constraints. (they need to have all the same value)
You can ignore all the steps and edit your FXML file :
<AnchorPane layoutX="31.0" layoutY="14.0" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: blue;" AnchorPane.bottomAnchor="ENTER_THE_VALUE" AnchorPane.leftAnchor="ENTER_THE_VALUE" AnchorPane.rightAnchor="ENTER_THE_VALUE" AnchorPane.topAnchor="ENTER_THE_VALUE" />
I have a SubScene placed in StackPane that I want to resize properly. Width resizing works perfect. However, height sets into the biggest value and does not shrink when the window is scaled down. How to force the height to keep the actual window height rather than the maximum one?
view.fxml:
<StackPane fx:id="MapPane"/>
Controller.java:
MapPane.getChildren().clear();
MapPane.getChildren().add(mapScene);
mapScene.setManaged(false);
mapScene.heightProperty().bind(MapPane.heightProperty());
mapScene.widthProperty().bind(MapPane.widthProperty());
It turned out that the subscene fxml code was preventing from shrinking the view in the <BorderPane> line.
Malfunctioning line:
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity">
Proper line:
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="0" minWidth="0">
I'm including several FXMLs in one main FXML view but the thing is when I change the height of the parent which is an AnchorPane the included view height doesn't change and I didn't find anything in the doc regarding the size of included FXML. Any idea anyone?
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" SplitPane.resizableWithParent="false">
<children>
<fx:include fx:id="child" source="child.fxml" />
</children>
</AnchorPane>
An AnchorPane will attempt to resize its children based on the constraints you set on those child nodes. From the documentation:
The application sets anchor constraints on each child to configure the
anchors on one or more sides. If a child is anchored on opposite sides
(and is resizable), the anchor pane will resize it to maintain both
offsets, otherwise the anchor pane will resize it to its preferred
size. If in the former case (anchored on opposite sides) and the child
is not resizable, then only the top/left anchor will be honored.
In the code you posted, you haven't set any constraints on the child node, so it will just be sized to its preferred size.
For example, if you wanted the child to stretch to fill the entire AnchorPane, then you would do
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" SplitPane.resizableWithParent="false">
<children>
<fx:include fx:id="child" source="child.fxml" AnchorPane.topAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.buttonAnchor="0.0" />
</children>
</AnchorPane>
Note that this also assumes that whatever node is generated by child.fxml is allowed to grow to the size of the AnchorPane (e.g. it's maxWidth and maxHeight properties have appropriate values), and that the AnchorPane also grows when the window is resized, etc. You might also want to consider whether or not an AnchorPane is the best choice, or if some other layout might work better.
In short, there is nothing special about using an <fx:include> in terms of layout: it behaves just like any other scene graph hierarchy.
I'm creating a 2x2 grid which will contain components inside of them. They will look like the following image:
I'm unsure what the proper layout should be for this. The problem is the bottom right isn't really aligned... so I'm guessing a grid layout won't work (or can it?). I figured I'd do a BorderPane and have the top contain the top two panes, and the bottom contain the bottom two, then do another BorderPane in those and go from there.
1) Is this a good way to approach this (border layout ignoring the center), or is there a better layout?
Next: The blue box will resize based on how large the full screen is. The problem I run into is that after growing large, when it's shrunk, the black boxes (which should always stay the same dimensions, excluding the ones that touch the blue sides which should resize)
2) Is there a way to make the black boxes adjust to the size of the blue box?
By this I mean: If the blue box grows vertically, the top right pane will have to extend vertically as well. Likewise, it also will have to shrink if the blue one does. Can this be done by binding both heights? Since the bottom rectangles won't expand, is there a way to bind it so if the height of the entire pane is x then the bound height that JavaFX will calculate for me will be x - bottomFixedHeight, yet also will not go smaller than lets say 128 (as an arbitrary example)?
Note: I'm not familiar with multiple bindings, I'm trying to google it though maybe an example could help.
Background
IMHO, BorderPane is the best Layout you can use for the above stated scenario.
The Javadoc for BorderPane says,
The top and bottom children will be resized to their preferred heights and extend the width of the border pane. The left and right children will be resized to their preferred widths and extend the length between the top and bottom nodes. And the center node will be resized to fill the available space in the middle.
So using TOP and BOTTOM is not a suitable scenario. I would suggest to go with CENTER and BOTTOM.
SOLUTION
Now that we have decided to use BorderPane, let us decide the Layout we can use for filling the four space.
As we can see in the above picture, we can use the CENTER and RIGHT of the BorderPane to create the upper part. Let us add VBox to center and right space of the borderpane. The VBox on the right side must have a PREF_WIDTH and MAX_WIDTH specified so as to make sure it doesn't exceed a supplied WIDTH. If you want to have a MIN_WIDTH, you can supply that as well.
For the BOTTOM, we can use a HBox, then add two VBox to it. For the first VBox, as we want it to exceed in Width, when re-sized, we will set the HBox.hgrow="ALWAYS". For the bottom right VBox, we will again set the width as we did for the top-right VBox and the HBox.hgrow="NEVER".
Note : You can replace VBox with your preferred layout. PREF_WIDTH and PREF_HEIGHT is used for the initial WIDTH and HEIGHT
I have created a sample using scenebuilder and the output is, as shown
FXML
<BorderPane minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<bottom>
<HBox prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<children>
<VBox prefHeight="100.0" prefWidth="100.0" style="-fx-border-color: green;" HBox.hgrow="ALWAYS" />
<VBox minWidth="70.0" prefHeight="200.0" prefWidth="70.0" style="-fx-border-color: black;" HBox.hgrow="NEVER" />
</children>
</HBox>
</bottom>
<right>
<VBox minWidth="100.0" prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: red;" BorderPane.alignment="CENTER" />
</right>
<center>
<VBox prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: blue;" BorderPane.alignment="CENTER" />
</center>
</BorderPane>
Authors Note : Though I would not consider binding to be important here, you can anyway use it if you desire for better control.