<AnchorPane id="AnchorPane" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml" fx:controller="freshminds.DashBoardController">
<stylesheets>
<URL value="#dashboard.css"/>
</stylesheets>
<Button layoutX="40" layoutY="30" text="DASHBOARD" fx:id="btn_dashboard" />
<GridPane fx:id="dash_grid" layoutX="40" layoutY="300" alignment="center" hgap="10" vgap="10" xmlns:fx="http://javafx.com/fxml">
<padding><Insets top="25" right="25" bottom="10" left="25"/></padding>
<Button text="SERVICE PACKAGE" fx:id="btn_service" />
<Button text="BOOKING" fx:id="btn_booking" />
<Button text="INVOICE" fx:id="btn_invoice" />
<Button text="REPORTS" fx:id="btn_reports" />
<Button text="COUPONS" fx:id="btn_coupons" />
<Button text="SOCIAL MEDIA" fx:id="btn_social" />
</GridPane>
</AnchorPane>
I get an error in GridPane padding Insets on this line:
<padding><Insets top="25" right="25" bottom="10" left="25"/></padding>
If your error is class not found error, you can add this import statement at the beginning of your FXML file.
<?import javafx.geometry.Insets?>
Related
I made an FXML in the Scenebuilder with a Tableview and Pagination.
But I am having trouble to get the pagination to work, especially the PageFactory.
I have following code:
FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Pagination?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<AnchorPane fx:id="recordsOverview" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="accentor.overview.RecordsOverviewController">
<children>
<Pagination fx:id="paginator" onMouseClicked="#pageClicked" prefHeight="20.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="340.0" />
<HBox alignment="TOP_RIGHT" spacing="20.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="60.0">
<children>
<Label prefHeight="25.0" text="Search:" />
<TextField prefHeight="25.0" prefWidth="137.0" />
<Label prefHeight="25.0" text="Sort:" />
<ChoiceBox prefHeight="25.0" prefWidth="100.0" />
<ChoiceBox prefHeight="25.0" prefWidth="100.0" />
</children>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</HBox>
<Label prefHeight="52.0" text="Records" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0">
<font>
<Font size="48.0" />
</font>
</Label>
<TableView fx:id="table" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="100.0">
<columns>
<TableColumn fx:id="trackid" text="#" />
<TableColumn fx:id="title" text="Title" />
<TableColumn fx:id="length" text="Length" />
<TableColumn fx:id="album" text="Album" />
<TableColumn fx:id="artists" text="Artist(s)" />
</columns>
</TableView>
</children>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</AnchorPane>
Controller:
public void fillTable(int page) {
this.dataModel.setTracksPage(page);
this.table.setItems(FXCollections.observableArrayList(this.dataModel.getTracks().getData()));
this.paginator.setCurrentPageIndex(page);
}
#Override
public void showOverview() {
recordsOverview.setVisible(true);
}
#Override
public void setDataModel(DataModel dataModel) {
if (this.dataModel == null) {
this.dataModel = dataModel;
}
fillTable(1);
paginator.setPageCount(this.dataModel.getTracks().getTotalPages());
this.paginator.setPageFactory((Integer pageIndex) -> {
fillTable(pageIndex);
return null; // ???
}
);
}
I just want to fill the table with new data, but returning null gives me errors.
If I return something else like return new BorderPane(table), It doesn't work either, same error.
How can I solve this issue?
Your page factory needs to return the node that will be displayed as the "page". The Pagination will then manage that node and make it part of the scene graph under it. What you want to do is display the TableView in the pagination, so you should return it from the page factory.
You didn't post any of the stack traces from the errors you mention, but I'm guessing that what's happening is that when you return the table, you get an error because the TableView is already part of the scene graph, and nodes can't exist in two different places.
One solution is to omit the table entirely from the FXML, and just define it in the controller (set it up in the initialize() method, then return the reference to it from the page factory).
If you still want it defined in the FXML file, you can define elements in FXML which are not part of the scene graph by wrapping them in a <fx:define> block.
So your FXML would look something like this:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Pagination?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<AnchorPane fx:id="recordsOverview" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="accentor.overview.RecordsOverviewController">
<fx:define>
<TableView fx:id="table" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="100.0">
<columns>
<TableColumn fx:id="trackid" text="#" />
<TableColumn fx:id="title" text="Title" />
<TableColumn fx:id="length" text="Length" />
<TableColumn fx:id="album" text="Album" />
<TableColumn fx:id="artists" text="Artist(s)" />
</columns>
</TableView>
</fx:define>
<children>
<Pagination fx:id="paginator" onMouseClicked="#pageClicked" prefHeight="20.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="340.0" />
<HBox alignment="TOP_RIGHT" spacing="20.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="60.0">
<children>
<Label prefHeight="25.0" text="Search:" />
<TextField prefHeight="25.0" prefWidth="137.0" />
<Label prefHeight="25.0" text="Sort:" />
<ChoiceBox prefHeight="25.0" prefWidth="100.0" />
<ChoiceBox prefHeight="25.0" prefWidth="100.0" />
</children>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</HBox>
<Label prefHeight="52.0" text="Records" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0">
<font>
<Font size="48.0" />
</font>
</Label>
</children>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</AnchorPane>
and then you do
this.paginator.setPageFactory((Integer pageIndex) -> {
fillTable(pageIndex);
return table;
}
);
So I've been searching the internet for about 2 hours now without getting anywhere. I've seen multiple posts already regarding this issue and I tried some of the solutions provided but none seemed to work... or I was just too incompetent to implement them properly...
Anyways, how can I make it so that the elements/controls adjust when the user maximizes the window?
Here's the whole FXML-File:
<GridPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="percolationapplication.controllers.Percolation">
<!-- CUSTOM WINDOW CONTROLS -->
<ToolBar fx:id="toolbar" onMousePressed="#moveableWindowOnMousePressed" onMouseDragged="#moveableWindowOnMouseDragged" prefHeight="25" minHeight="25" maxHeight="25" GridPane.columnIndex="0" GridPane.rowIndex="0">
<ImageView fitWidth="15" fitHeight="15" smooth="true">
<image>
<Image url="/resources/icon.png"/>
</image>
</ImageView>
<Text styleClass="customWindowTitle" text="Percolation Simulation"/>
<Pane HBox.hgrow="ALWAYS" />
<Button fx:id="applicationMinimize" onAction="#minimizeWindow" text="_" styleClass="customWindowButtons"/>
<Button fx:id="applicationMaximize" onAction="#maximizeWindow" text="O" styleClass="customWindowButtons"/>
<Button fx:id="applicationClose" onAction="#closeWindow" text="X" styleClass="customWindowButtons"/>
</ToolBar>
<GridPane hgap="10" GridPane.columnIndex="0" GridPane.rowIndex="1">
<!-- CANVAS -->
<Canvas fx:id="canvas" height="700" width="1100" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
<!-- CONTROLS -->
<GridPane hgap="10" vgap="10" GridPane.columnIndex="1" GridPane.rowIndex="0">
<Label text="Number Of Sites:" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
<TextField fx:id="quantityInput" text="25" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
<Label text="Probability:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
<TextField fx:id="probabilityInput" text="0.6" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
<Label text="Algorithms:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
<HBox spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="2">
<fx:define>
<ToggleGroup fx:id="algs"/>
</fx:define>
<RadioButton fx:id="algNormal" text="Normal" selected="true" toggleGroup="$algs"/>
<RadioButton fx:id="algStack" text="Stack" toggleGroup="$algs"/>
</HBox>
<Label text="System Percolates:" GridPane.columnIndex="0" GridPane.rowIndex="3"/>
<Label fx:id="outputPerc" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
<Button fx:id="perc" onAction="#handlePerc" text="Go" GridPane.columnIndex="0" GridPane.rowIndex="4"/>
</GridPane>
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
</GridPane>
<stylesheets>
<URL value="#/resources/style.css"/>
</stylesheets>
</GridPane>
Here's the window in normal sized mode:
Here's the window in maximized mode. All elements should "grow" to the right and only the canvas should reach the bottom:
You can try this template. You may need to set the height on your ToolBar. You also might need to set your min, max and preferred width to the same number on your right Panel
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
<children>
<AnchorPane style="-fx-background-color: green;">
<children>
<Label alignment="CENTER" text="Remove this label and put your toolbar here" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<HBox prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
<children>
<AnchorPane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: blue;" HBox.hgrow="ALWAYS">
<children>
<Label alignment="CENTER" layoutX="58.0" layoutY="50.0" text="Remove this label and put your picture here" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<AnchorPane maxWidth="200.0" minWidth="200.0" prefWidth="200.0" style="-fx-background-color: yellow;">
<children>
<Label alignment="CENTER" layoutY="40.0" text="Remove this label and put your right panel here" textAlignment="CENTER" wrapText="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</children>
</HBox>
</children>
</VBox>
i've a trouble with JavaFX and FXML.
I've a simple FXML file structured in this way:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.media.MediaView?>
<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="480.0" minWidth="720.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="mediaplayer.MediaPlayerControllerSplit">
<center>
<SplitPane dividerPositions="0.5" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" BorderPane.alignment="CENTER">
<items>
<AnchorPane fx:id="mediaPaneL" style="-fx-background-color: green;">
<children>
<MediaView fx:id="mediaViewL" />
</children>
</AnchorPane>
<AnchorPane fx:id="mediaPaneR" style="-fx-background-color: red;">
<children>
<MediaView fx:id="mediaViewR" />
</children>
</AnchorPane>
</items>
</SplitPane>
</center>
<bottom>
<ToolBar minHeight="-Infinity" minWidth="-Infinity" style="-fx-background-color: black;" BorderPane.alignment="BOTTOM_CENTER">
<items>
<Button mnemonicParsing="false" onAction="#openVideo" text="Openfile" />
<Button mnemonicParsing="false" onAction="#playVideo" text=">" />
<Button mnemonicParsing="false" onAction="#pauseVideo" text="||" />
<Button mnemonicParsing="false" onAction="#stopVideo" text="stop" />
<Button mnemonicParsing="false" text="<<<" />
<Button mnemonicParsing="false" text="<<" />
<Button mnemonicParsing="false" text=">>" />
<Button mnemonicParsing="false" text=">>>" />
<Button mnemonicParsing="false" onAction="#exitVideo" text="EXIT" />
</items>
</ToolBar>
</bottom>
</BorderPane>
The controller will load 2 videos and show them in the relative 2 AnchorPanes inside the SplitView, as shown in the following image:
ClickMe
The video exceeds from width bounds of the Parent AnchorPane, how can i set them properly?
Thanks all.
I've solved this with the following line of codes in the Controller class:
mediaViewL.fitWidthProperty().bind(mediaPaneL.widthProperty());
The left (same for the right one) mediaView width has been fitted to his first Parent width (AnchorPaneL / AnchorPaneR).
I'm having this weird behavior when I run my JavaFx app:
As you can see the elements aren't properly aligned. I've created that view using SceneBuilder and there isn't that gap in the editor.
My view is composed of a GridPane. The right cells (on the pic) of the GridPane each contains an HBox, each containing elements (buttons / text fields). I haven't configured anything specific here and am not using any CSS.
Here's the full FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="MyController">
<children>
<GridPane hgap="3.0" vgap="3.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<columnConstraints>
<ColumnConstraints hgrow="NEVER" />
<ColumnConstraints hgrow="NEVER" />
<ColumnConstraints hgrow="ALWAYS" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Label text="label1" />
<Label text="label2" GridPane.rowIndex="1" />
<Button defaultButton="true" mnemonicParsing="false" onAction="#handleGo" text="Go!" GridPane.rowIndex="2">
<graphic>
<TextField fx:id="iterations" alignment="CENTER" prefWidth="43.0" style="-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em;" text="50000" />
</graphic></Button>
<Button fx:id="selectFileButton" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleFileSelection" text="Select file" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<HBox spacing="3.0" GridPane.columnIndex="2">
<children>
<TextField fx:id="customValue" editable="false" HBox.hgrow="ALWAYS" />
<Button fx:id="deleteButton" mnemonicParsing="false" onAction="#handleDelete" text="Delete" visible="false" />
</children>
</HBox>
<HBox spacing="3.0" GridPane.columnIndex="2" GridPane.rowIndex="1">
<children>
<Button fx:id="editButton" mnemonicParsing="false" text="Edit" />
<Button mnemonicParsing="false" text="New" />
</children>
</HBox>
<ComboBox fx:id="selection" maxWidth="1.7976931348623157E308" onAction="#handleSelection" GridPane.columnIndex="1" />
</children>
</GridPane>
</children>
</AnchorPane>
Am I missing something ?
The default alignment for controls in GridPane (Maybe for controls in general?) is CENTER_LEFT, while for HBox the default is TOP_LEFT. Adding
alignment="CENTER_LEFT"
to your HBox should align them properly.
When I increase the window, the inner elements stay at the same size.
I want that when I increase the window, that the elements also get larger/scale
Main.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane cacheHint="SCALE_AND_ROTATE" focusTraversable="true" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<TableView fx:id="finalTable" layoutX="27.0" layoutY="358.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="190.0" prefWidth="766.0" />
<Label layoutX="27.0" layoutY="21.0" prefHeight="25.0" prefWidth="149.0" text=" Quell-Datei" />
<TableView fx:id="sourceTable" editable="true" layoutX="27.0" layoutY="50.0" maxHeight="900.0" maxWidth="900.0" minHeight="-Infinity" minWidth="-Infinity" prefHeight="190.0" prefWidth="766.0" />
<Label layoutX="27.0" layoutY="329.0" prefHeight="25.0" prefWidth="149.0" text=" Konvertierte-Datei" />
<Button fx:id="linkBtn" layoutX="313.0" layoutY="282.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#linkAction" prefHeight="30.0" prefWidth="90.0" text="Verbinden" />
<Button fx:id="splitBtn" layoutX="437.0" layoutY="282.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#splitAction" prefHeight="30.0" prefWidth="90.0" text="Trennen" />
</children>
</AnchorPane>
Im working with SceneBuilder 2.0, and I have also tried to "anchor" a button
(see here: http://i.imgur.com/GZyL5xC.png)
...but the scaling is completely wrong (see here: http://i.imgur.com/hmMi1p3.png)
I searched the whole internet for an answer, but I found nothing that could help.
Well your layout is typically a VBox layout. If your Windows isn't at a fixed size this will be a good solution, because your Buttons stay at the same height and in the center of your window. The TableViews grow and shrink as you resize the window. Like you want.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<VBox xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<Label prefHeight="25.0" prefWidth="149.0" text=" Quell-Datei" VBox.vgrow="NEVER" />
<TableView fx:id="sourceTable" editable="true" prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
<Label />
<HBox alignment="CENTER" prefHeight="61.0" prefWidth="766.0" spacing="20.0" VBox.vgrow="NEVER">
<children>
<Button fx:id="linkBtn" maxHeight="-Infinity" maxWidth="-Infinity" mnemonicParsing="false" onAction="#linkAction" prefHeight="30.0" prefWidth="90.0" text="Verbinden" HBox.hgrow="NEVER" />
<Button fx:id="splitBtn" maxHeight="-Infinity" maxWidth="-Infinity" mnemonicParsing="false" onAction="#splitAction" prefHeight="30.0" prefWidth="90.0" text="Trennen" HBox.hgrow="NEVER" />
</children>
</HBox>
<Label prefHeight="25.0" prefWidth="149.0" text=" Konvertierte-Datei" VBox.vgrow="NEVER" />
<TableView fx:id="finalTable" prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
</children>
<padding>
<Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
</padding>
</VBox>