In application one FXML is loaded into tha AnchorPane of the other FXML. The problem is that the AnchorPane Constraints (exactly Bottom one) of ListView don't want to work during resizing.
The code of the file which is loaded:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
<children>
<HBox cache="true" cacheHint="SPEED" fillHeight="true" minHeight="-1.0" prefHeight="-1.0" prefWidth="1280.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<TabPane id="navPane" cache="true" cacheHint="SPEED" maxWidth="-1.0" minHeight="-1.0" minWidth="-1.0" prefHeight="-1.0" prefWidth="420.0" rotateGraphic="false" side="LEFT" tabClosingPolicy="UNAVAILABLE" tabMaxHeight="1.7976931348623157E308" tabMinHeight="30.0" HBox.hgrow="NEVER">
<tabs>
<Tab closable="true" text="Untitled Tab 1">
<content>
<AnchorPane id="AnchorPane" fx:id="homePane" cache="true" cacheHint="SPEED" maxHeight="-1.0" maxWidth="-1.0" minHeight="-1.0" minWidth="-1.0" prefHeight="-1.0" prefWidth="-1.0" style="-fx-background-color: red;">
<children>
<StackPane id="navPaneHeaderPane" cache="true" cacheHint="SPEED" prefHeight="35.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<AnchorPane id="navPaneHeaderPane" cache="true" cacheHint="SPEED" prefHeight="200.0" prefWidth="200.0" style="" />
<Label id="navPaneHeaderString" cache="true" cacheHint="SPEED" text="Label" StackPane.alignment="CENTER" />
</children>
</StackPane>
<TextField cache="true" cacheHint="SPEED" prefHeight="30.0" prefWidth="294.0" AnchorPane.leftAnchor="28.0" AnchorPane.rightAnchor="28.0" AnchorPane.topAnchor="55.0" />
<Separator cache="true" cacheHint="SPEED" prefWidth="200.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="100.0" />
<ListView fx:id="listView" cache="true" cacheHint="SPEED" minHeight="-1.0" minWidth="-1.0" pickOnBounds="true" prefHeight="-1.0" prefWidth="-1.0" AnchorPane.bottomAnchor="15.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="120.0" />
</children>
</AnchorPane>
</content>
</Tab>
<Tab text="Untitled Tab 2">
<content>
<AnchorPane id="Content" cache="true" cacheHint="SPEED" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</Tab>
</tabs>
</TabPane>
<AnchorPane cache="true" cacheHint="SPEED" prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
<children>
<TableView cache="true" cacheHint="SPEED" prefHeight="700.0" prefWidth="860.0" AnchorPane.bottomAnchor="14.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="0.0">
<columns>
<TableColumn prefWidth="75.0" text="Column X" />
<TableColumn prefWidth="75.0" text="Column X" />
</columns>
</TableView>
</children>
</AnchorPane>
</children>
<stylesheets>
<URL value="#../../../../skins/default.css" />
</stylesheets>
</HBox>
</children>
</AnchorPane>
The code of the file where the above FXML is loaded:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?scenebuilder-preview-i18n-resource ../lang/ru_RU.properties?>
<AnchorPane id="AnchorPane" fx:id="mainStage" cache="true" cacheHint="SPEED" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="1280.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="UI.PrimaryStageController">
<children>
<StackPane fx:id="toolbarStack" alignment="CENTER_LEFT" cache="true" cacheHint="SPEED" prefHeight="100.0" prefWidth="1280.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="100.0" AnchorPane.topAnchor="0.0">
<children>
<FlowPane fx:id="toolbarPane" cache="true" cacheHint="SPEED" maxHeight="-Infinity" minHeight="-Infinity" prefHeight="100.0" prefWidth="1280.0" style="">
<children>
<Button id="fileButton" fx:id="selectorButton" cache="true" cacheHint="SPEED" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#openSelector" prefHeight="100.0" prefWidth="100.0" text="%selectorButton" />
<Button fx:id="fileButton" cache="true" cacheHint="SPEED" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#openFileMenu" prefHeight="100.0" prefWidth="100.0" text="%fileButton">
<stylesheets>
<URL value="#../../skins/default.css" />
</stylesheets>
</Button>
<Button fx:id="toolsButton" cache="true" cacheHint="SPEED" mnemonicParsing="false" onAction="#openToolsMenu" prefHeight="100.0" prefWidth="100.0" text="Button" />
<Button fx:id="helpButton" cache="true" cacheHint="SPEED" mnemonicParsing="false" onAction="#openHelpMenu" prefHeight="100.0" prefWidth="100.0" text="Button" />
</children>
</FlowPane>
</children>
</StackPane>
<AnchorPane fx:id="contentPane" prefHeight="-1.0" prefWidth="-1.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="100.0" />
<Button cache="true" cacheHint="SPEED" mnemonicParsing="false" onAction="#closeApp" prefHeight="100.0" prefWidth="100.0" text="%exitButton" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
<stylesheets>
<URL value="#../../skins/default.css" />
</stylesheets>
</AnchorPane>
The first FXML is loaded into the AnchorPane with fx:id = "contentPane". For reasons I don't know ListView fx:id = "listView" doesn't resize during window resizing. Any ideas?
P.S. I use JavaFX 8
Related
Id like to place a label and a button (and a text field) in a horizontal layout. This works, but the baselines are unaligned. How to fix that?
The expected result is that the red lines (baselines of each control) are at the same height.
This is the FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.HBox?>
<HBox prefHeight="100.0" prefWidth="400.0" spacing="10.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Label text="Label" />
<Button mnemonicParsing="false" text="Button" />
<TextField text="Lorem Ipsum" />
</children>
</HBox>
Add an alignment attribute to the HBox with value "BASELINE_LEFT":
<HBox alignment="BASELINE_LEFT" prefHeight="100.0" prefWidth="400.0" spacing="10.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Label text="Label" />
<Button mnemonicParsing="false" text="Button" />
<TextField text="Lorem Ipsum" />
</children>
</HBox>
I am developing a dialog box inside the scenebuilder and I can see there the size is 625x616 (I am using gridpane), however when I run the tool it looks much bigger (around 900x900).
This is the code I use to load the fxml file
private void DisplayDialog(String title, String fxmlPath) throws IOException {
final Stage dialog = new Stage();
dialog.initModality(Modality.APPLICATION_MODAL);
dialog.initOwner(primaryStage);
dialog.setResizable(false);
dialog.setTitle(title);
dialog.getIcons().add(primaryStage.getIcons().get(0));
Parent root = FXMLLoader.load(getClass().getResource(fxmlPath));
Scene dialogScene = new Scene(root);
dialog.setScene(dialogScene);
dialog.show();
logger.exit();
}
and here it is my fxml file:
<GridPane hgap="5.0" vgap="10.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ca.mali.dialogs.chapter6.UpdateAttributeValuesServiceController">
<columnConstraints>
<ColumnConstraints hgrow="NEVER" maxWidth="300.0" minWidth="200.0" prefWidth="200.0" />
<ColumnConstraints hgrow="NEVER" prefWidth="400.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="-Infinity" vgrow="SOMETIMES" />
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints maxHeight="-Infinity" vgrow="SOMETIMES" />
<RowConstraints maxHeight="-Infinity" vgrow="SOMETIMES" />
<RowConstraints maxHeight="-Infinity" vgrow="SOMETIMES" />
</rowConstraints>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<HBox alignment="CENTER_RIGHT" GridPane.columnIndex="1" GridPane.rowIndex="4">
<Button cancelButton="true" mnemonicParsing="false" onAction="#Cancel_click" text="Cancel">
<HBox.margin>
<Insets right="20.0" />
</HBox.margin>
</Button>
<Button fx:id="OkButton" defaultButton="true" disable="true" mnemonicParsing="false" onAction="#OK_click" text="OK" />
</HBox>
<Label text="Instance Name: " GridPane.halignment="RIGHT" />
<ComboBox fx:id="InstanceName" maxWidth="1.7976931348623157E308" GridPane.columnIndex="1" />
<TableView fx:id="AttributeValueTableView" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" GridPane.columnSpan="2" GridPane.rowIndex="1">
<columns>
<TableColumn fx:id="AttributeTableColumn" editable="false" maxWidth="1.7976931348623157E308" minWidth="50.0" prefWidth="200.0" text="Attribute" />
<TableColumn fx:id="ValueTableColumn" maxWidth="1.7976931348623157E308" minWidth="50.0" prefWidth="400.0" text="Value" />
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
</TableView>
<Label text="User-supplied tag*:" GridPane.halignment="RIGHT" GridPane.rowIndex="2" />
<TextField fx:id="UserSuppliedTag" GridPane.columnIndex="1" GridPane.rowIndex="2" />
<Label text="Logical Time:" GridPane.halignment="RIGHT" GridPane.rowIndex="3" />
<Spinner fx:id="LogicalTimeSpin" editable="true" GridPane.columnIndex="1" GridPane.rowIndex="3" />
</GridPane>
I also tried to replace Gridpane with VBox but I got the same results.
My first approach (which works fine)
I have two panes, gridPane (inner one) and borderPane (outer one). The grid pane is just a row of a few labels, so it is very low. It is designed with the Scene Builder. It gets loaded with the FXMLLoader and put into the center of the border pane which is created with the classical
BorderPane borderPane = new BorderPane();
The size of the window is as expected, nothing is too big or too small.
The second approach
I use Scene Builder to create the borderPane as well, but the grid pane does not get put into it right away in the Scene Builder.
FXMLLoader loader = new FXMLLoader();
loader.setLocation(Main.class.getResource("view/RootLayout.fxml"));
borderPane = (BorderPane) loader.load();
// ...
... and later on the gridPane:
borderPane.setCenter(gridPane);
When I run the app now, the window is wider and a lot higher.
Side note:
The borderPane's min/pref/max widths and heights all USE_COMPUTED_SIZE. The labels all use only USE_COMPUTED_SIZE. The ´gridPane` has 8 columns, each having min/pref width of 100. But the displayed window is > 1400 px wide and almost 800 px high. Like I said: it works fine if the border pane is created the classical way.
Here are the FXML files for both panes:
RootLayout.fxml (BorderPane, a.k.a. outer pane)
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">
</BorderPane>
PlacesOverview.fxml (GridPane, a.k.a. inner pane)
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.GridPane?>
<GridPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<columnConstraints>
<ColumnConstraints minWidth="100.0" prefWidth="100.0" />
<ColumnConstraints halignment="CENTER" minWidth="100.0" prefWidth="100.0" />
<ColumnConstraints halignment="CENTER" minWidth="100.0" prefWidth="100.0" />
<ColumnConstraints halignment="CENTER" minWidth="100.0" prefWidth="100.0" />
<ColumnConstraints halignment="CENTER" minWidth="100.0" prefWidth="100.0" />
<ColumnConstraints halignment="CENTER" minWidth="100.0" prefWidth="100.0" />
<ColumnConstraints halignment="CENTER" minWidth="100.0" prefWidth="100.0" />
<ColumnConstraints halignment="CENTER" minWidth="100.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints />
</rowConstraints>
<children>
<Label text="Name" GridPane.halignment="LEFT" />
<Label text="Montag" GridPane.columnIndex="1" GridPane.halignment="CENTER" />
<Label text="Dienstag" GridPane.columnIndex="2" GridPane.halignment="CENTER" />
<Label text="Mittwoch" GridPane.columnIndex="3" GridPane.halignment="CENTER" />
<Label text="Donnerstag" GridPane.columnIndex="4" GridPane.halignment="CENTER" />
<Label text="Freitag" GridPane.columnIndex="5" GridPane.halignment="CENTER" />
<Label text="Samstag" GridPane.columnIndex="6" GridPane.halignment="CENTER" />
<Label text="Sonntag" GridPane.columnIndex="7" GridPane.halignment="CENTER" />
</children>
</GridPane>
I have the following code to load the fxml file. I want to change the width of the button. I am able to access the two labels using fxmlLoader.getNamespace().get("id"), but for some reason I don't see the button inside ObservableMap returned by getNamespace(). Why is it so/
FXML file
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<GridPane fx:controller="org.netbeans.modules.mavenproject1.controller.KeyController" xmlns:fx="http://javafx.com/fxml" >
<padding>
<Insets top="5" right="5" bottom="5" left="5"/>
</padding>
<children>
<Button maxHeight="45.0" maxWidth="45.0" minHeight="45.0" minWidth="45.0" mnemonicParsing="false" prefHeight="45.0" prefWidth="45.0" style="" styleClass="alphabet-button" text="~" textAlignment="CENTER" textOverrun="ELLIPSIS">
<graphic>
<GridPane alignment="TOP_LEFT">
<padding>
<Insets top="1" right="1" bottom="1" left="1"/>
</padding>
<children>
<Label text="" fx:id="mainTextLabel" GridPane.columnIndex="0" GridPane.rowIndex="0" />
<Label text="" fx:id="shiftTextLabel" GridPane.columnIndex="0" GridPane.rowIndex="1" />
</children>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="20.0" prefWidth="20.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="20.0" prefWidth="20.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="20.0" prefHeight="20.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="20.0" prefHeight="20.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
</graphic>
<stylesheets>
<URL value="#../styles/keyboard.css" />
</stylesheets>
</Button>
</children>
</GridPane>
Controller Constructor
public Key(){
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/fxml/key.fxml"));
fxmlLoader.setControllerFactory(new Callback<Class<?>, Object>(){
#Override
public Object call(Class<?> param){
return keyController = new KeyController();
}
});
try {
keyView = (Node) fxmlLoader.load();
} catch (IOException exception) {
throw new RuntimeException(exception);
}
mainTextLabel = (Label) fxmlLoader.getNamespace().get("mainTextLabel");
shiftTextLabel = (Label) fxmlLoader.getNamespace().get("shiftTextLabel");
getChildren().add(keyView);
}
I created this as a wiki post. I found the solution by trial and error ( seems like the best way to learn programming ), but if somebody can show me a location on oracle docs where the following detail is listed, you have my upvote.
Answer
Just add fx:id to the button.
Before
<Button maxHeight="45.0" maxWidth="45.0" minHeight="45.0" minWidth="45.0" mnemonicParsing="false" prefHeight="45.0" prefWidth="45.0" style="" styleClass="alphabet-button" text="~" textAlignment="CENTER" textOverrun="ELLIPSIS">
After
<Button fx:id="button" maxHeight="45.0" maxWidth="45.0" minHeight="45.0" minWidth="45.0" mnemonicParsing="false" prefHeight="45.0" prefWidth="45.0" style="" styleClass="alphabet-button" text="~" textAlignment="CENTER" textOverrun="ELLIPSIS">
I'm new in JavaFX and have a little troubles:
I have an TabPane with several Tabs and I wanna make Tab titles invisible. So, user should not change Tabs by clicking on titles, but it will be changed in different way from menu..
How to make this Tab titles invisible/hidden? That's the question. I don't wanna hide whole Tabs or disable or anything like that, just titles.
Or maybe you have another, completely different idea, how to solve this in JavaFX. Maybe with another controls???
Thanks for any clue.
If you are not using Tabs then you don't need TabPane.
You can just introduce a list of content panes and switch them according to menu commands.
You can find a code example in next question: How can I implement the functionality of awt.CardLayout in my javaFX 2.0 application?
Conclusion of my research: This is not possible to do this in JavaFX. TabPane captions can be located on the top, left, right and bottom of the control, but cannot be hidden.
You can make this by wrapping TabPane in AnchorPane (root container) and setting up TabPane's topAnchor to negative number as much as needed.
Java code:
...
AnchorPane.setTopAnchor(myTabPane, -29.0);
AnchorPane.setBottomAnchor(myTabPane, 0);
AnchorPane.setLeftAnchor(myTabPane, 0);
AnchorPane.setRightAnchor(myTabPane, 0);
...
Also in FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.layout.*?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<TabPane fx:id="myTabPane" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="-29.0">
<tabs>
<Tab fx:id="tab1" text="Tab 1">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<Label text="Tab 1" />
<Button layoutX="35.0" layoutY="2.0" mnemonicParsing="false" text="Go to Tab 2 (non-functional currently)" />
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab2" text="Tab 2">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<Label text="Tab 2" />
<Button layoutX="35.0" layoutY="2.0" mnemonicParsing="false" text="Go to Tab 1 (non-functional currently)" />
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</children>
</AnchorPane>