JavaFX resizable layout(scene builder) - javafx

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!

Related

JavaFx fxml Button doesn't appear in GridPane

I'm trying this for a long time. This is my Fxml Code. When I run a JavaFx Application with this Fxml, the button is nowhere. What am I doing wrong?
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<VBox prefHeight="1080.0" prefWidth="1920.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<GridPane maxHeight="-1.0" maxWidth="-1.0" mouseTransparent="true" prefHeight="800.0" prefWidth="800.0" VBox.vgrow="ALWAYS">
<children>
<HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="0" GridPane.rowIndex="0"
>
<Button text="Sign In"
onAction="#handleCreateNewCarButtonAction"/>
</HBox>
<Text fontSmoothingType="LCD" layoutX="17.0" layoutY="53.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Name = Auto Bezeichnung, FL = Corner Weight FL, FR = Corner Weight FR, RL = Corner Weight RL, RR = Corner Weight RR, sAC_C = Corner Weight FL, sAC_B = Slip Angle Coefficient B, sAC_E = Slip Angle Coefficient E, LC_KA = Load Coefficient KA, LC_KB = Load Coefficient KB, Delete = Auto entfernen, Show = Auto im Chart anzeigen" wrappingWidth="622.7230573003446">
<font>
<Font name="Arial Nova Light" size="12.0" />
</font></Text>
<LineChart alternativeColumnFillVisible="true" layoutX="648.0" layoutY="98.0" prefHeight="455.0" prefWidth="578.0" title="Car Chart" GridPane.columnIndex="2" GridPane.rowIndex="1">
<xAxis>
<CategoryAxis side="BOTTOM" />
</xAxis>
<yAxis>
<NumberAxis side="LEFT" />
</yAxis>
</LineChart>
<TableView layoutX="20.0" layoutY="126.0" prefHeight="403.0" prefWidth="615.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
<columns>
</columns>
</TableView>
</children>
</GridPane>
</children>
</VBox>
<TableView >
<columns>
<TableColumn prefWidth="50.0" text="Name" />
<TableColumn prefWidth="50.0" text="FL" />
<TableColumn prefWidth="50.0" text="FR" />
<TableColumn prefWidth="50.0" text="RL" />
<TableColumn prefWidth="50.0" text="RR" />
<TableColumn prefWidth="50.0" text="sAC_C" />
<TableColumn prefWidth="50.0" text="sAC_B" />
<TableColumn prefWidth="50.0" text="sAC_E" />
<TableColumn prefWidth="50.0" text="LC_KA" />
<TableColumn prefWidth="50.0" text="LC_KB" />
<TableColumn prefWidth="50.0" text="Delete" />
<TableColumn prefWidth="50.0" text="Show" />
</columns>
</TableView>

JAvaFX elements resize to fit Window

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>

JavaFX, SceneBuilder, MenuItem --> Image

I recently found the google-material-icons and now i want to make my application more good looking using icons. Right now i want to add an image to the application close MenuItem. With SceneBuilder you can just add items, but what i now wanna do is at least still use fxml. I have two questions:
Can I edit the fxml without it being overwritten by scenebuilder again?
how can i add the icon to MenuItems?
Thank you very much. In case you need it, here my FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?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.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<BorderPane fx:id="borderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" stylesheets="#../styles/Styles.css" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.freakyonline.ucone.FXMLController">
<center>
<TabPane prefHeight="167.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE" BorderPane.alignment="CENTER">
<tabs>
<Tab closable="false" text="Players">
<content>
<TableView fx:id="playerTable" editable="true" onContextMenuRequested="#handlePTContextMenuRequest" onInputMethodTextChanged="#handleTextChanged" prefHeight="200.0" prefWidth="200.0">
<columns>
<TableColumn fx:id="nickColumn" onEditCommit="#handlePlayerEditCommit" prefWidth="75.0" text="Nickname" />
<TableColumn fx:id="groupColumn" onEditCommit="#handlePlayerEditCommit" prefWidth="75.0" text="Group" />
<TableColumn fx:id="yearOfBirthColumn" onEditCommit="#handlePlayerEditCommit" prefWidth="94.0" text="Year of Birth" />
<TableColumn fx:id="ageColumn" onEditCommit="#handlePlayerEditCommit" prefWidth="72.0" text="Age" />
<TableColumn fx:id="genderColumn" onEditCommit="#handlePlayerEditCommit" prefWidth="59.0" text="Gender" />
<TableColumn fx:id="lastQuitColumn" onEditCommit="#handlePlayerEditCommit" prefWidth="75.0" text="Last Quit" />
</columns>
<padding>
<Insets bottom="3.0" left="5.0" right="5.0" top="3.0" />
</padding>
</TableView>
</content>
</Tab>
<Tab fx:id="consoleOneTab" closable="false" onSelectionChanged="#handleConsoleOneTabSelected" text="ConsoleOne">
<content>
<VBox prefHeight="200.0" prefWidth="100.0">
<children>
<TextArea fx:id="consoleOneTextArea" editable="false" wrapText="true" VBox.vgrow="ALWAYS" />
<TextField fx:id="consoleOneTextField" alignment="TOP_LEFT" onAction="#handleConsoleOneAction" promptText="type here ..." />
</children>
</VBox>
</content></Tab>
</tabs>
</TabPane>
</center>
<top>
<MenuBar fx:id="mainMenuBar" BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" onAction="#handleFileClose" text="Close" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" onAction="#handleHelpAbout" text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
</BorderPane>

Yes, you can add an Image in your MenuItem without affect on fxml.
First, add FX:ID to your menu-item.
<MenuItem fx:id="close_item" mnemonicParsing="false" onAction="#handleFileClose" text="Close" />
Now use setGraphic() method to add an ImageView in your menu-item.
#FXML MenuItem close_item;
#Override
public void initialize(URL url, ResourceBundle rb) {
ImageView menuIcon = new ImageView(new Image("/path/image.png"));
menuIcon.setFitHeight(20);
menuIcon.setFitWidth(20);
close_item.setGraphic(menuIcon);
//...
//...
}

JAVAFX FXML Scene not staying within layout constraints or screen resolution

This is a short two part question: 1. I have designed all the UI for my database in Javafx scene builder 2.0 on a scene size 1920 x 1080; however, I need it to resize based on the screen resolution of the system its operating on. How can this be done?. 2. Second problem which goes hand in hand with the first is all of the controls I have placed in the scene are not staying within the size or location constraints I set. When I preview the scene from the tool everything is correct, but when I run the program everything is out of whack. Any suggestions on what I can do to correct these issues without a complete redesign?
the FXML code:
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.SeparatorMenuItem?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TreeView?>
<?import javafx.scene.effect.InnerShadow?>
<?import javafx.scene.input.KeyCodeCombination?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<Pane xmlns="http://javafx.com/javafx/8.0.65"xmlns:fx="http://javafx.com/fxml/1" fx:controller="MAAT.MainScreenController">
<children>
<Pane layoutY="-5.0" />
<TabPane fx:id="mainpane" layoutY="35.0" maxHeight="1047.0" maxWidth="1920.0" prefHeight="1047.0" prefWidth="1920.0" side="LEFT" tabClosingPolicy="UNAVAILABLE">
<tabs>
<Tab fx:id="AHTAtab" text="All Hazard Threat Assessment">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="1009.0" prefWidth="1871.0">
<children>
<TableView fx:id="AHTATable" layoutX="23.0" layoutY="56.0" prefHeight="928.0" prefWidth="1840.0">
<columns>
<TableColumn editable="false" prefWidth="132.0" sortable="false" text="Classification" />
<TableColumn minWidth="0.0" prefWidth="95.0" text="T/H/C" />
<TableColumn editable="false" prefWidth="364.0" sortable="false" text="Category & Capability" />
<TableColumn editable="false" prefWidth="1122.0" sortable="false" text="Rating Definition" />
<TableColumn prefWidth="137.0" text="Rating Score" />
</columns>
<effect>
<InnerShadow />
</effect>
</TableView>
<Button fx:id="AHTAedit" layoutX="1718.0" layoutY="994.0" mnemonicParsing="false" text="Edit" />
<Button fx:id="AHTAdel" layoutX="1785.0" layoutY="994.0" mnemonicParsing="false" text="Delete" />
<AnchorPane layoutX="22.0" layoutY="11.0">
<children>
<Button fx:id="Tbtn" mnemonicParsing="false" text="Threat" />
</children>
</AnchorPane>
<AnchorPane layoutX="107.0" layoutY="11.0">
<children>
<Button fx:id="Hbtn" mnemonicParsing="false" text="Hazard" />
</children>
</AnchorPane>
<AnchorPane layoutX="199.0" layoutY="11.0">
<children>
<Button fx:id="Cbtn" mnemonicParsing="false" prefHeight="39.0" prefWidth="79.0" text="Cyber" />
</children>
</AnchorPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="AAtab" text="Asset Analysis">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<TreeView fx:id="AAlist" layoutX="16.0" layoutY="105.0" prefHeight="845.0" prefWidth="583.0">
<effect>
<InnerShadow />
</effect>
</TreeView>
<Label layoutX="16.0" layoutY="14.0" prefHeight="33.0" prefWidth="88.0" text="Asset List: " underline="true" wrapText="true" />
<Button fx:id="Addassetbtn" layoutX="387.0" layoutY="966.0" mnemonicParsing="false" text="Add Assets" />
<Label layoutX="14.0" layoutY="38.0" prefHeight="60.0" prefWidth="587.0" text="Upon selecting the "Add Asset" button and completing the form each asset and its related dependencies will appear below." wrapText="true" />
<Button fx:id="AARemovebtn" layoutX="509.0" layoutY="966.0" mnemonicParsing="false" text="Remove" />
<AnchorPane layoutX="644.0" layoutY="105.0" prefHeight="845.0" prefWidth="1203.0" visible="false">
<children>
<ListView fx:id="Hpairlist" layoutY="645.0" prefHeight="200.0" prefWidth="1203.0">
<effect>
<InnerShadow />
</effect>
</ListView>
<ListView fx:id="Tpairlist" layoutY="402.0" prefHeight="200.0" prefWidth="1203.0">
<effect>
<InnerShadow />
</effect>
</ListView>
<Label layoutY="375.0" text="Paired Threats:" />
<Label layoutY="618.0" text="Paired Hazards:" />
<Separator layoutY="360.0" prefHeight="15.0" prefWidth="1202.0" />
<Label fx:id="AAclassification" alignment="CENTER" layoutX="466.0" layoutY="1.0" prefHeight="27.0" prefWidth="270.0" text="Classification placeholder" textAlignment="CENTER" AnchorPane.bottomAnchor="817.0" AnchorPane.leftAnchor="466.0" AnchorPane.rightAnchor="467.0" AnchorPane.topAnchor="1.0" />
<Label layoutY="70.0" text="Asset Name:" />
<Label layoutX="502.0" layoutY="70.0" text="Unclassified Asset Name:" />
<Label layoutX="999.0" layoutY="70.0" text="Criticality Score:" />
<Label layoutY="111.0" text="Mission:" />
<Label layoutX="1.0" layoutY="225.0" text="Impact Statement:" />
<TextArea fx:id="Amission" editable="false" layoutX="1.0" layoutY="138.0" prefHeight="87.0" prefWidth="1202.0" wrapText="true">
</TextArea>
<TextArea fx:id="Aimpact" layoutY="252.0" prefHeight="99.0" prefWidth="1202.0" />
<Label fx:id="Aname" layoutX="102.0" layoutY="70.0" prefHeight="27.0" prefWidth="393.0" />
<Label fx:id="UAname" layoutX="707.0" layoutY="70.0" prefHeight="27.0" prefWidth="283.0" />
<Label fx:id="Crit" layoutX="1132.0" layoutY="70.0" prefHeight="27.0" prefWidth="65.0" />
</children>
</AnchorPane>
<Separator layoutX="621.0" layoutY="105.0" orientation="VERTICAL" prefHeight="846.0" prefWidth="6.0" />
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="RATtab" text="Risk Analysis Tool">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<TableView fx:id="RATtable" layoutX="14.0" layoutY="83.0" prefHeight="902.0" prefWidth="1842.0">
<columns>
<TableColumn editable="false" prefWidth="216.0" text="Threat/Hazard" />
<TableColumn editable="false" minWidth="0.0" prefWidth="313.0" text="Critical Asset" />
<TableColumn editable="false" minWidth="0.0" prefWidth="480.0" sortable="false" text="Observation" />
<TableColumn editable="false" prefWidth="120.0" sortable="false" text="Vul. " />
<TableColumn editable="false" prefWidth="135.0" text="Int. Risk " />
<TableColumn editable="false" prefWidth="370.0" sortable="false" text="Recommendation" />
<TableColumn editable="false" prefWidth="112.0" sortable="false" text="R. Vul" />
<TableColumn editable="false" prefWidth="93.0" text="R. Risk" />
</columns>
<effect>
<InnerShadow />
</effect>
</TableView>
<Button fx:id="Obbtn" layoutX="14.0" layoutY="37.0" mnemonicParsing="false" text="Observation" />
<Button fx:id="RATed" layoutX="1713.0" layoutY="994.0" mnemonicParsing="false" text="Edit" />
<Button fx:id="RATdel" layoutX="1780.0" layoutY="994.0" mnemonicParsing="false" text="Delete" />
<Button fx:id="CRbtn" layoutX="148.0" layoutY="37.0" mnemonicParsing="false" text="Cumulative Risk" />
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
<MenuBar fx:id="MMBar" layoutX="-6.0" layoutY="-5.0" prefHeight="39.0" prefWidth="1927.0">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" text="New">
<accelerator>
<KeyCodeCombination alt="UP" code="N" control="DOWN" meta="UP" shift="UP" shortcut="UP" />
</accelerator>
</MenuItem>
<MenuItem mnemonicParsing="false" text="Open" />
<SeparatorMenuItem mnemonicParsing="false" />
<MenuItem mnemonicParsing="false" text="Save">
<accelerator>
<KeyCodeCombination alt="UP" code="S" control="DOWN" meta="UP" shift="UP" shortcut="UP" />
</accelerator>
</MenuItem>
<MenuItem mnemonicParsing="false" text="Save As...">
<accelerator>
<KeyCodeCombination alt="UP" code="S" control="DOWN" meta="UP" shift="DOWN" shortcut="UP" />
</accelerator>
</MenuItem>
<SeparatorMenuItem mnemonicParsing="false" />
<MenuItem mnemonicParsing="false" text="Import" />
<MenuItem mnemonicParsing="false" text="Export" />
<SeparatorMenuItem mnemonicParsing="false" />
<MenuItem mnemonicParsing="false" text="Close Window">
<accelerator>
<KeyCodeCombination alt="UP" code="W" control="DOWN" meta="UP" shift="UP" shortcut="UP" />
</accelerator>
</MenuItem>
<MenuItem mnemonicParsing="false" text="Quit">
<accelerator>
<KeyCodeCombination alt="UP" code="Q" control="DOWN" meta="UP" shift="UP" shortcut="UP" />
</accelerator>
</MenuItem>
</items>
</Menu>
<Menu mnemonicParsing="false" text="Edit">
<items>
<MenuItem mnemonicParsing="false" text="Delete" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</children>
</Pane>

How to make a Table resizable in JavaFX?

In my UI, there is a webView and below that is a table to record some actions in the webView. They are placed one below the other. I want the table below to be resizable. The table is fixed to left, right and below borders. User should be able to drag it up. Just like the inspect element opens up a window below the browser and user can drag it up to view more content.
How can I do this in JavaFX? Please help.
Update:
I tried the below:
HBox.setHgrow(table, Priority.ALWAYS);
VBox.setVgrow(table, Priority.ALWAYS);
None of them had any effects. In scenebuilder, I'm binding the table to bottom, left and right borders.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<AnchorPane prefHeight="400.0" prefWidth="720.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.controller.RecordController">
<children>
<WebView fx:id="webView" layoutX="80.0" layoutY="48.0" prefHeight="204.0" prefWidth="720.0" AnchorPane.bottomAnchor="156.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="40.0" />
<TableView fx:id="table" editable="true" layoutY="244.0" prefHeight="156.0" prefWidth="626.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<columns>
<TableColumn fx:id="stepDescription" prefWidth="152.0" sortable="false" text="STEP DESCRIPTION" />
<TableColumn fx:id="stepType" prefWidth="85.0" sortable="false" text="STEP TYPE" />
<TableColumn fx:id="pageName" prefWidth="86.0" sortable="false" text="PAGE NAME" />
<TableColumn fx:id="objectName" prefWidth="102.0" sortable="false" text="OBJECT NAME" />
<TableColumn fx:id="actionName" prefWidth="108.0" sortable="false" text="ACTION NAME" />
<TableColumn fx:id="testData" prefWidth="109.0" sortable="false" text="TEST DATA" />
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
</TableView>
<GridPane prefHeight="42.0" prefWidth="579.0">
<children>
<Button fx:id="go" layoutX="261.0" layoutY="20.0" mnemonicParsing="false" prefHeight="32.0" text="Go" AnchorPane.topAnchor="20.0" GridPane.columnIndex="2" />
<TextField fx:id="url" layoutX="97.0" layoutY="20.0" prefHeight="32.0" AnchorPane.topAnchor="20.0" GridPane.columnIndex="1" />
<Label layoutX="56.0" layoutY="24.0" prefHeight="32.0" text="URL" AnchorPane.topAnchor="24.0" GridPane.halignment="RIGHT">
<GridPane.margin>
<Insets right="5.0" />
</GridPane.margin>
</Label>
</children>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="101.0" minWidth="0.0" prefWidth="46.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="515.0" minWidth="10.0" prefWidth="483.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="177.0" minWidth="10.0" prefWidth="50.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
<Button fx:id="saveButton" layoutX="663.0" layoutY="5.0" mnemonicParsing="false" onAction="#save" prefHeight="32.0" prefWidth="32.0" AnchorPane.rightAnchor="15.0" />
<Button fx:id="clear" layoutX="634.0" layoutY="5.0" mnemonicParsing="false" onAction="#clear" prefHeight="32.0" prefWidth="32.0" AnchorPane.rightAnchor="55.0" />
<ProgressIndicator fx:id="progress" layoutX="565.0" layoutY="1.0" progress="0.0">
<padding>
<Insets top="10.0" />
</padding>
</ProgressIndicator>
</children>
</AnchorPane>

Resources