I am just trying out JavaFX and am forcing my way into it because it is suppose to be the future. The problem I have is that the components don't resize with the screen. I tried to change the HBoxz HPane constraints but they seem to mess it all up.
Here is my FXML file.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?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.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<?import org.kordamp.ikonli.javafx.FontIcon?>
<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="#../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.arpentechnologies.software.core.paneladmin.gestionroles.FXMLGestionRolesController">
<children>
<Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="14.0" mnemonicParsing="false" onAction="#onClickVolverInicio" prefHeight="56.0" prefWidth="54.0" styleClass="backButton" stylesheets="#../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="8.0">
<graphic>
<FontIcon iconLiteral="mdi-keyboard-backspace" iconSize="30" wrappingWidth="30.0" />
</graphic>
</Button>
<StackPane layoutX="14.0" layoutY="83.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="8.0">
<children>
<TextField prefHeight="45.0" prefWidth="283.0" promptText="Buscar...">
<font>
<Font size="18.0" />
</font>
</TextField>
</children>
</StackPane>
<StackPane layoutX="267.0" layoutY="83.0" prefHeight="50.0" prefWidth="50.0">
<children>
<FontIcon iconLiteral="mdi-send" iconSize="36" text="" />
</children>
</StackPane>
<StackPane layoutX="860.0" layoutY="77.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="8.0">
<children>
<Button fx:id="anadirRolButton" mnemonicParsing="false" onAction="#onClickAnadirRol" prefHeight="39.0" prefWidth="231.0" text=" Añadir Rol">
<font>
<Font size="18.0" />
</font>
<graphic>
<FontIcon iconLiteral="mdi-account-plus" iconSize="26" />
</graphic>
</Button>
</children>
</StackPane>
<HBox layoutX="14.0" layoutY="152.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="511.0" prefWidth="1060.0">
<children>
<TableView prefHeight="495.0" prefWidth="1049.0" HBox.hgrow="ALWAYS">
<columns>
<TableColumn prefWidth="75.0" text="Nombre" />
<TableColumn prefWidth="75.0" text="Rol Padre" />
<TableColumn prefWidth="75.0" text="Módulos" />
<TableColumn prefWidth="75.0" text="Permisos" />
<TableColumn prefWidth="75.0" text="Editar" />
<TableColumn prefWidth="75.0" text="Borrar" />
</columns>
</TableView>
</children>
</HBox>
<Text layoutX="425.0" layoutY="65.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Gestión de Roles" wrappingWidth="224.0546875">
<font>
<Font size="30.0" />
</font>
</Text>
</children>
</AnchorPane>
I tried making some changes to your fxml file for obtain a responsive layout to achieve your needs
The resizable tableView and the text moves from the center to the
left
Change the Anchor Constraints of HBox which contain the tableView
Put Gestión de Roles in HBox
This is your FXML file after changes :
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?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.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="#../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="14.0" mnemonicParsing="false" prefHeight="56.0" prefWidth="54.0" styleClass="backButton" stylesheets="#../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="8.0">
<graphic>
</graphic>
</Button>
<StackPane layoutX="14.0" layoutY="83.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="8.0">
<children>
<TextField prefHeight="45.0" prefWidth="283.0" promptText="Buscar...">
<font>
<Font size="18.0" />
</font>
</TextField>
</children>
</StackPane>
<StackPane layoutX="267.0" layoutY="83.0" prefHeight="50.0" prefWidth="50.0">
<children>
</children>
</StackPane>
<StackPane layoutX="860.0" layoutY="77.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="8.0">
<children>
<Button fx:id="anadirRolButton" mnemonicParsing="false" prefHeight="39.0" prefWidth="231.0" text=" Añadir Rol">
<font>
<Font size="18.0" />
</font>
<graphic>
</graphic>
</Button>
</children>
</StackPane>
<HBox layoutX="14.0" layoutY="152.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="511.0" prefWidth="1060.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<TableView prefHeight="495.0" prefWidth="1049.0" HBox.hgrow="ALWAYS">
<columns>
<TableColumn prefWidth="75.0" text="Nombre" />
<TableColumn prefWidth="75.0" text="Rol Padre" />
<TableColumn prefWidth="75.0" text="Módulos" />
<TableColumn prefWidth="75.0" text="Permisos" />
<TableColumn prefWidth="75.0" text="Editar" />
<TableColumn prefWidth="75.0" text="Borrar" />
</columns>
</TableView>
</children>
</HBox>
<HBox alignment="CENTER" layoutX="174.0" layoutY="14.0" prefHeight="100.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="Gestión de Roles" wrappingWidth="224.0546875" HBox.hgrow="ALWAYS">
<font>
<Font size="30.0" />
</font>
</Text>
</children>
</HBox>
</children>
</AnchorPane>
I've altered AnchorPane's HBox Constraints to stay fixed, thus ensuring responsiveness
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?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.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="#../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/8.0.102" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.arpentechnologies.software.core.paneladmin.gestionroles.FXMLGestionRolesController">
<children>
<Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="14.0" mnemonicParsing="false" onAction="#onClickVolverInicio" prefHeight="56.0" prefWidth="54.0" styleClass="backButton" stylesheets="#../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="8.0">
<graphic>
<FontIcon iconLiteral="mdi-keyboard-backspace" iconSize="30" wrappingWidth="30.0" />
</graphic>
</Button>
<StackPane layoutX="14.0" layoutY="83.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="8.0">
<children>
<TextField prefHeight="45.0" prefWidth="283.0" promptText="Buscar...">
<font>
<Font size="18.0" />
</font>
</TextField>
</children>
</StackPane>
<StackPane layoutX="267.0" layoutY="83.0" prefHeight="50.0" prefWidth="50.0">
<children>
<FontIcon iconLiteral="mdi-send" iconSize="36" text="?" />
</children>
</StackPane>
<StackPane layoutX="860.0" layoutY="77.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="8.0">
<children>
<Button fx:id="anadirRolButton" mnemonicParsing="false" onAction="#onClickAnadirRol" prefHeight="39.0" prefWidth="231.0" text=" A�adir Rol">
<font>
<Font size="18.0" />
</font>
<graphic>
<FontIcon iconLiteral="mdi-account-plus" iconSize="26" />
</graphic>
</Button>
</children>
</StackPane>
<HBox layoutX="14.0" layoutY="152.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="511.0" prefWidth="1060.0" AnchorPane.bottomAnchor="8.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="152.0">
<children>
<TableView prefHeight="495.0" prefWidth="1049.0" HBox.hgrow="ALWAYS">
<columns>
<TableColumn prefWidth="75.0" text="Nombre" />
<TableColumn prefWidth="75.0" text="Rol Padre" />
<TableColumn prefWidth="75.0" text="M�dulos" />
<TableColumn prefWidth="75.0" text="Permisos" />
<TableColumn prefWidth="75.0" text="Editar" />
<TableColumn prefWidth="75.0" text="Borrar" />
</columns>
</TableView>
</children>
</HBox>
<Text layoutX="425.0" layoutY="65.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Gesti�n de Roles" wrappingWidth="224.0546875">
<font>
<Font size="30.0" />
</font>
</Text>
</children>
</AnchorPane>
You can also add a ScrollPane
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<?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.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="#../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/8.0.102" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.arpentechnologies.software.core.paneladmin.gestionroles.FXMLGestionRolesController">
<children>
<ScrollPane prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="670.0" prefWidth="1005.0">
<children>
<HBox layoutX="389.0" layoutY="30.0">
<children>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="Gesti�n de Roles" wrappingWidth="241.0546875" HBox.hgrow="NEVER">
<font>
<Font size="30.0" />
</font>
</Text>
</children>
</HBox>
<Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="25.0" mnemonicParsing="false" onAction="#onClickVolverInicio" prefHeight="50.0" prefWidth="115.0" styleClass="backButton" stylesheets="#../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="14.0">
<graphic>
<FontIcon iconLiteral="mdi-keyboard-backspace" iconSize="30" wrappingWidth="30.0" />
</graphic>
</Button>
<StackPane layoutX="14.0" layoutY="87.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="14.0">
<children>
<TextField promptText="Buscar...">
<font>
<Font size="18.0" />
</font>
</TextField>
</children>
</StackPane>
<StackPane layoutX="280.0" layoutY="87.0" prefHeight="50.0" prefWidth="50.0">
<children>
<FontIcon iconLiteral="mdi-send" iconSize="36" text="?" />
</children>
</StackPane>
<StackPane layoutX="784.0" layoutY="81.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="21.0">
<children>
<Button fx:id="anadirRolButton" mnemonicParsing="false" onAction="#onClickAnadirRol" text=" A�adir Rol">
<font>
<Font size="18.0" />
</font>
<graphic>
<FontIcon iconLiteral="mdi-account-plus" iconSize="26" />
</graphic>
</Button>
</children>
</StackPane>
<HBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" AnchorPane.bottomAnchor="8.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="152.0">
<children>
<TableView HBox.hgrow="ALWAYS">
<columns>
<TableColumn prefWidth="75.0" text="Nombre" />
<TableColumn prefWidth="75.0" text="Rol Padre" />
<TableColumn prefWidth="75.0" text="M�dulos" />
<TableColumn prefWidth="75.0" text="Permisos" />
<TableColumn prefWidth="75.0" text="Editar" />
<TableColumn prefWidth="75.0" text="Borrar" />
</columns>
</TableView>
</children>
</HBox>
</children>
</AnchorPane>
</content>
</ScrollPane>
</children>
</AnchorPane>
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;
}
);
I have a AnchorPane with some elements as you can see:
Sample.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.Group?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" style="-fx-background-color: #fff;" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<AnchorPane prefHeight="500.0" prefWidth="800.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<MenuBar prefHeight="30.0" prefWidth="800.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<Menu mnemonicParsing="false" text="File">
<MenuItem mnemonicParsing="false" text="Close" />
</Menu>
<Menu mnemonicParsing="false" text="Edit">
<MenuItem mnemonicParsing="false" text="Delete" />
</Menu>
<Menu mnemonicParsing="false" text="Help">
<MenuItem mnemonicParsing="false" text="About" />
</Menu>
</MenuBar>
<Group />
<TableView id="tableDisplay" fx:id="tableDisplay" editable="true" layoutX="14.0" layoutY="50.0" prefHeight="200.0" prefWidth="771.0" AnchorPane.bottomAnchor="250.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.799999999999955" AnchorPane.topAnchor="50.0">
<columns>
<TableColumn id="tableWellN" fx:id="tableWellN" prefWidth="75.20001220703125" text="Колодязь №" />
<TableColumn id="tableWellD" fx:id="tableWellD" editable="false" prefWidth="66.39996337890625" text="D колодязя" />
<TableColumn id="tableMarkB" fx:id="tableMarkB" minWidth="9.5999755859375" prefWidth="79.199951171875" text="Відмітка низу труби" />
<TableColumn id="tableMarkP" fx:id="tableMarkP" minWidth="0.800048828125" prefWidth="114.4000244140625" text="Проектна відмітка землі" />
<TableColumn id="tableMarkN" fx:id="tableMarkN" minWidth="0.0" prefWidth="139.99993896484375" text="Натуральна відмітка землі" />
<TableColumn id="tableDiameter" fx:id="tableDiameter" prefWidth="64.800048828125" text="Діаметер" />
<TableColumn id="tableLength" fx:id="tableLength" prefWidth="75.0" text="Довжина" />
<TableColumn id="tableSlope" fx:id="tableSlope" prefWidth="68.00006103515625" text="Похил" />
<TableColumn id="tablePipeB" fx:id="tablePipeB" prefWidth="46.4000244140625" text="Низ труби">
<columns>
<TableColumn id="tablePipeS" fx:id="tablePipeS" prefWidth="75.0" text="Початок" />
<TableColumn id="tablePipeE" fx:id="tablePipeE" prefWidth="75.0" text="Кінець" />
</columns>
</TableColumn>
<TableColumn id="tablePipeT" fx:id="tablePipeT" prefWidth="61.5999755859375" text="Верх труби">
<columns>
<TableColumn fx:id="tablePipeTS" prefWidth="75.0" text="Початок" />
<TableColumn fx:id="tablePipeTE" prefWidth="75.0" text="Кінець" />
</columns>
</TableColumn>
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
</TableView>
<TextField id="inputWellN" fx:id="inputWellN" layoutX="14.0" layoutY="278.0" promptText="Колодязь №" AnchorPane.bottomAnchor="196.4" AnchorPane.leftAnchor="14.0" />
<TextField id="inputWellD" fx:id="inputWellD" layoutX="14.0" layoutY="319.0" promptText="Діаметер колодязя" AnchorPane.bottomAnchor="155.39999999999998" AnchorPane.leftAnchor="14.0" />
<TextField id="inputMarkB" fx:id="inputMarkB" layoutX="14.0" layoutY="357.0" promptText="Відмітка низу" AnchorPane.bottomAnchor="117.39999999999998" AnchorPane.leftAnchor="14.0" />
<TextField id="inputMarkP" fx:id="inputMarkP" layoutX="14.0" layoutY="395.0" promptText="Проектна відмітка" AnchorPane.bottomAnchor="79.39999999999998" AnchorPane.leftAnchor="14.0" />
<TextField id="inputMarkN" fx:id="inputMarkN" layoutX="14.0" layoutY="438.0" promptText="Натуральна відмітка" AnchorPane.bottomAnchor="36.39999999999998" AnchorPane.leftAnchor="14.0" />
<TextField id="inputDiameter" fx:id="inputDiameter" layoutX="171.0" layoutY="278.0" promptText="Діаметер" AnchorPane.bottomAnchor="196.4" AnchorPane.leftAnchor="171.0" />
<TextField id="inputLength" fx:id="inputLength" layoutX="170.0" layoutY="319.0" promptText="Довжина" AnchorPane.bottomAnchor="155.39999999999998" AnchorPane.leftAnchor="170.0" />
<TextField id="inputSlope" fx:id="inputSlope" layoutX="170.0" layoutY="357.0" promptText="Похил" AnchorPane.bottomAnchor="117.4" AnchorPane.leftAnchor="170.0" />
<Button fx:id="buttonAdd" layoutX="170.0" layoutY="395.0" mnemonicParsing="false" prefHeight="26.0" prefWidth="149.0" text="Добавити" AnchorPane.bottomAnchor="78.6" AnchorPane.leftAnchor="170.0" />
<Button fx:id="buttonBuild" layoutX="169.0" layoutY="438.0" mnemonicParsing="false" prefHeight="26.0" prefWidth="150.0" text="Побудувати" AnchorPane.bottomAnchor="35.60000000000002" AnchorPane.leftAnchor="169.0" />
<LineChart fx:id="chartArea" layoutX="376.0" layoutY="300.0" prefHeight="178.0" prefWidth="402.0" AnchorPane.bottomAnchor="21.599999999999994" AnchorPane.leftAnchor="376.0" AnchorPane.rightAnchor="21.600000000000023" AnchorPane.topAnchor="300.0">
<xAxis>
<NumberAxis fx:id="lineChartX" side="BOTTOM" />
</xAxis>
<yAxis>
<NumberAxis fx:id="lineChartY" autoRanging="false" side="LEFT" tickUnit="0.1" />
</yAxis>
</LineChart>
</children>
</AnchorPane>
</AnchorPane>
What i need is that when i go full screen only the buttons and text fields remain the same and the rest get bigger. I tried setting the anchors and it almost as i want it, but when i resize the window the table and line chart overlap:
How can i fix this?
I would not lay it out like you have done. Positioning in JavaFX takes a bit to master. Have you read/understood this?
https://docs.oracle.com/javase/8/javafx/layout-tutorial/index.html
Use Screenbuilder to get started, then customize it in your IDE. Screenbuilder uses absolute positioning. You may need to convert/wrap some sections with HBox, VBox, TilePane etc. to get the layout you want. It may take a few tries. Good Luck!
I have a small problem with the position / visibility of the lower scrollbar button of the BorderPanes (EBMTableView) - JavaFX Scene Builder
I want that if I minimize the window, the bottom scrollbar button is always visible.
Thank you very much
Please check the Code of GUI and the imgs down.
<?xml version="1.0" encoding="UTF-8"?>
<?import de.riconn.fx_ebm_control.gui.views.abgleich.*?>
<?import de.riconn.fx_ebm_control.gui.views.arzt_aktuell.*?>
<?import de.riconn.fx_ebm_control.gui.views.ebm.*?>
<?import de.riconn.fx_ebm_control.gui.views.frequenz.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.effect.Glow?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity"
minHeight="-Infinity" minWidth="-Infinity" prefHeight="900.0"
prefWidth="1230.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="de.riconn.fx_ebm_control.gui.WpdlTxtControler">
<center>
<TabPane prefHeight="200.0" prefWidth="200.0"
tabClosingPolicy="UNAVAILABLE" BorderPane.alignment="CENTER">
<tabs>
<Tab fx:id="tab_patient" onSelectionChanged="#tab_Patienten_Selected"
text="Patientenliste">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="107.0" layoutY="53.0"
prefHeight="346.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<Button fx:id="btn_PatientenOpen" mnemonicParsing="false"
onAction="#openPatientenListe" text="Patientenliste öffnen.."
BorderPane.alignment="CENTER" />
</top>
<center>
<ArztAktuellTableView fx:id="tv_patientContainer"
prefHeight="494.0" prefWidth="829.0" BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab_frequenz" onSelectionChanged="#tab_Frequenz_Selected"
text="Frequenztabelle">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="109.0" layoutY="49.0"
prefHeight="346.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<Button fx:id="btn_FrequenzOpen" mnemonicParsing="false"
onAction="#openFrequenzFile" text="Frequenztabelle öffnen..."
BorderPane.alignment="CENTER" />
</top>
<center>
<FrequenzTableView fx:id="tv_frequenzContainer"
prefHeight="494.0" prefWidth="829.0" BorderPane.alignment="CENTER_RIGHT" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab_abgleich" onSelectionChanged="#tab_Abgleich_Selected"
text="Abgleichsliste">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="69.0" layoutY="51.0" prefHeight="346.0"
prefWidth="600.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<HBox alignment="TOP_RIGHT" spacing="10.0">
<Button fx:id="btn_AbgleichToPdf" mnemonicParsing="false"
onAction="#viewAbgleichAsPdf" text="Als PDF öffnen..."
BorderPane.alignment="CENTER" />
<BorderPane.margin>
<Insets right="10.0" />
</BorderPane.margin>
</HBox>
</top>
<center>
<AbgleichTableView fx:id="tv_abgleichContainer"
prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab_EBM" onSelectionChanged="#tab_EBM_Selected"
text="EBM Liste">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="489.0" layoutY="229.0"
prefHeight="829.0" prefWidth="1200.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<HBox alignment="TOP_RIGHT" spacing="10.0">
<Button fx:id="btn_minus_ebm" mnemonicParsing="false"
onAction="#delete_ebm" text="-">
</Button>
<Button fx:id="btn_plus_ebm" mnemonicParsing="false"
onAction="#add_ebm" text="+">
</Button>
<BorderPane.margin>
<Insets right="10.0" />
</BorderPane.margin>
</HBox>
</top>
<center>
<EBMTableView fx:id="tv_EBMContainer" editable="true"
prefHeight="200.0" prefWidth="200.0" tableMenuButtonVisible="true"
BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</center>
<top>
<MenuBar prefHeight="0.0" prefWidth="878.0"
BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" onAction="#openFrequenzFile"
text="Frequenztabelle öffnen..." />
<MenuItem mnemonicParsing="false" onAction="#openPatientenListe"
text="Patientenliste öffnen..." />
<MenuItem mnemonicParsing="false" onAction="#close" text="Close" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Edit">
<items>
<MenuItem fx:id="m_add_ebm" disable="true" mnemonicParsing="false" onAction="#add_ebm"
text="hinzufügen" />
<MenuItem fx:id="m_delete_ebm" disable="true" mnemonicParsing="false" onAction="#delete_ebm"
text="löschen" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Abgleich">
<items>
<MenuItem fx:id="m_viewAbgleichAsPdf" disable="true" mnemonicParsing="false"
onAction="#viewAbgleichAsPdf" text="Als PDF öffnen" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" onAction="#openAboutDialog"
text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
</BorderPane>
JavaFX Scene Builder structure
windows with scrollButton
windows without scrollButton after minimizing
Problem Solved, just change the first BorderPane Params like this ->
<BorderPane maxHeight="0" maxWidth="0"
minHeight="0" minWidth="0" prefHeight="0"
prefWidth="1230.0" xmlns="http://javafx.com/javafx/8.0.111"
xmlns:fx="http://javafx.com/fxml/1"
I have some problem with screen builder.
For some fxml it creash after load. I wwas trying many time to run it, but it block, and I must kill process.
The fxml is OK, the content is correctly displaying in my application. Here is the example of my FXML that cause crash of scene builder.
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXTabPane?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import java.lang.String?>
<?import java.net.URL?>
<AnchorPane xmlns:fx="http://javafx.com/fxml/1" id="mainApplicationWindow" fx:id="mainApplicationWindow"
styleClass="mainAnchorPane, gt-screen" xmlns="http://javafx.com/javafx/8.0.112-ea"
fx:controller="com.genealogytree.client.desktop.controllers.implementation.PaneMainApplicationWindowController">
<stylesheets>
<URL value="#/layout/style/gentree.css"/>
</stylesheets>
<children>
<SplitPane dividerPositions="0.2809364548494983" layoutX="139.0" layoutY="78.0" orientation="VERTICAL"
prefHeight="200.0" prefWidth="160.0" styleClass="gt-splitpane" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane maxHeight="220.0" minHeight="220.0" prefHeight="220.0">
<children>
<JFXTabPane fx:id="gtMainTabPane" AnchorPane.bottomAnchor="10" AnchorPane.leftAnchor="20"
AnchorPane.rightAnchor="20" AnchorPane.topAnchor="10">
<tabs>
</tabs>
</JFXTabPane>
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<SplitPane dividerPositions="0.22690763052208834" layoutX="55.0" layoutY="46.0"
prefHeight="160.0" prefWidth="200.0" styleClass="gt-splitpane"
AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane id="splitPaneHorizontal" maxWidth="250.0" minWidth="250.0"
prefWidth="250.0">
<children>
<TableView fx:id="gtFamilyMemberTable" layoutX="20.0" layoutY="12.0"
onMouseClicked="#showInfoMember" prefHeight="200.0" prefWidth="200.0"
AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="10.0"
AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="5.0">
<columns>
<TableColumn fx:id="simNameColumn" maxWidth="110.0" minWidth="110.0"
prefWidth="-1.0" text="%simName"/>
<TableColumn fx:id="simSurnameColumn" maxWidth="110.0" minWidth="110.0"
prefWidth="-1.0" text="%simSurname"/>
</columns>
<styleClass>
<String fx:value="firstTypeTable"/>
<String fx:value="tableMembersAndRelations"/>
</styleClass>
</TableView>
<TableView id="gtFamilyRelationTable" fx:id="gtFamilyRelationTable"
layoutX="20.0" layoutY="12.0" onMouseClicked="#showInfoRelation"
prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="50.0"
AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0"
AnchorPane.topAnchor="5.0">
<columns>
<TableColumn fx:id="relationSimLeftColumn" maxWidth="85.0"
minWidth="85.0" prefWidth="-1.0" text="%relation_sim"/>
<TableColumn fx:id="relationTypeColumn" maxWidth="50.0" minWidth="50.0"
prefWidth="-1.0" text="%relation_type"/>
<TableColumn fx:id="relationSimRightColumn" maxWidth="85.0"
minWidth="85.0" prefWidth="-1.0" text="%relation_sim"/>
</columns>
<styleClass>
<String fx:value="firstTypeTable"/>
<String fx:value="tableMembersAndRelations"/>
</styleClass>
</TableView>
<AnchorPane id="anchorToogleButtons" prefHeight="25.0"
AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10"
AnchorPane.rightAnchor="10.0">
<ToggleButton id="buttonShowMemberTable" fx:id="buttonShowMemberTable"
layoutX="23.0" mnemonicParsing="false"
prefWidth="114.0" styleClass="toogleButtonShowTable"
text="Members" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0"/>
<ToggleButton id="buttonShowRelationTable" fx:id="buttonShowRelationTable"
layoutX="125.0" layoutY="12.0" mnemonicParsing="false"
prefWidth="114.0"
styleClass="toogleButtonShowTable" text="Relations"
AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0"/>
</AnchorPane>
</children>
</AnchorPane>
<AnchorPane fx:id="workAnchorPane">
<children>
<AnchorPane fx:id="workAnchorPaneContent" AnchorPane.bottomAnchor="50.0"
AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="20.0"
AnchorPane.topAnchor="5.0">
</AnchorPane>
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>
Try opening SceneBuilder as an administrator first before opening the file up in your IDE. Not sure why this works but it got me up and running.
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>